:root{
  --bg: #f7f3ea;
  --paper: #ffffff;
  --ink: #1f2a1f;
  --muted: #5b6a5b;
  --green: #2f6b3a;
  --green2:#3f844a;
  --line: rgba(31,42,31,.12);
  --soft: #f1eadc;
  --warn: #b45309;
  --bad: #b91c1c;
  --ok: #166534;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #e7f6df, transparent 60%),
              radial-gradient(900px 500px at 110% 10%, #fff1d6, transparent 55%),
              var(--bg);
  color: var(--ink);
}

a{color:inherit}
.container{max-width: 980px; margin: 0 auto; padding: 18px}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 10px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.logo{
  width:42px; height:42px; border-radius: 12px;
  background: linear-gradient(145deg, var(--green), #1e4d28);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
  display:grid; place-items:center; color:#fff; font-weight:800;
}
.brand h1{
  margin:0; font-size: 18px; line-height:1.05;
}
.brand small{display:block; color:var(--muted); font-weight:600; margin-top:2px}

.pill{
  font-size: 12px; font-weight:700;
  background: #fff; border: 1px solid var(--line);
  padding: 8px 12px; border-radius: 999px;
}

.hero{
  background: linear-gradient(180deg, #fff, var(--paper));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px}
@media (max-width: 820px){ .hero-grid{grid-template-columns:1fr} }

.h-title{
  margin: 0 0 8px;
  font-size: 34px;
  letter-spacing: -.3px;
}
.h-sub{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card.pad{padding: 18px}

.btn{
  appearance:none; border:none;
  background: linear-gradient(180deg, var(--green2), var(--green));
  color:#fff; font-weight:800;
  padding: 14px 16px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(47,107,58,.24);
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.btn:active{transform: translateY(1px)}
.btn.secondary{
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow:none;
  font-weight:800;
}
.btn.full{width:100%}

.btn-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.grid{
  display:grid; gap: 14px;
}
.grid.two{grid-template-columns: 1fr 1fr}
@media (max-width: 720px){ .grid.two{grid-template-columns:1fr} }

.label{
  font-weight:800; font-size: 13px; margin-bottom:6px;
}
select, input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 15px;
  outline:none;
}
select:focus, input:focus{
  border-color: rgba(47,107,58,.55);
  box-shadow: 0 0 0 4px rgba(47,107,58,.12);
}

.note{
  background: var(--soft);
  border: 1px dashed rgba(31,42,31,.25);
  border-radius: 14px;
  padding: 12px 12px;
  color: var(--muted);
  line-height:1.4;
  font-size: 14px;
}
.result{
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #0f1f14;
  color: #e9f6ee;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.result strong{color:#fff}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  font-weight:800; font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
}
.footer{
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align:center;
  padding: 18px 0 26px;
}

.smalllinks{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.smalllinks a{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px dashed rgba(91,106,91,.4);
}
.smalllinks a:hover{color: var(--ink)}

hr.sep{
  border:none; border-top:1px solid var(--line);
  margin: 14px 0;
}


.field{margin-bottom:12px}
.field label{display:block;margin:0 0 6px 0;font-weight:700}
.warn{color:#b91c1c;font-weight:700}

/* ===== Діагностика: дві колонки (симптоми + фото) ===== */
.diag-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  align-items:start;
  margin: 16px 0 24px;
}
@media (max-width: 980px){
  .diag-grid{ grid-template-columns: 1fr; }
}
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.card h2{ margin:0 0 10px 0; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(46,204,113,.12);
  border:1px solid rgba(46,204,113,.25);
}
.form-row{ display:grid; gap:10px; margin-top:12px; }
.card input, .card select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  outline:none;
}
.card input:focus, .card select:focus{
  border-color:rgba(46,204,113,.85);
  box-shadow:0 0 0 3px rgba(46,204,113,.15);
}
.btn{
  width:100%;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  background:#2ecc71;
  color:#0b2b16;
}
.btn:disabled{ opacity:.65; cursor:not-allowed; }
.result-box{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.02);
  white-space:pre-wrap;
}
.small-note{ font-size:12px; opacity:.8; margin-top:8px; }


/* Social block */
.social-block{
  margin-top: 28px;
  padding: 22px 18px;
  background: #f7f9f4;
  border: 1px solid rgba(47,107,58,.10);
  border-radius: 16px;
  text-align: center;
}
.social-block h2{
  font-size: 1.25rem;
  margin: 0 0 6px;
}
.social-desc{
  margin: 0 0 14px;
  color: #556;
}
.social-buttons{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.social-btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  min-width: 260px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .08s ease, filter .08s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.social-btn.telegram{ background: #2aa2e0; }
.social-btn.tiktok{ background: #111; }
.social-note{
  margin: 12px 0 0;
  font-size: .9rem;
  color: #778;
}


/* Cultures */
.cultures{
  margin-top: 26px;
  padding: 22px 18px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
}
.section-title{
  margin: 0 0 6px;
  font-size: 1.25rem;
}
.section-sub{
  margin: 0 0 14px;
  color: #556;
}
.cultures-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.chip{
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f2f7f0;
  border: 1px solid rgba(47,107,58,.14);
  text-decoration: none;
  color: #203;
  font-weight: 700;
}
.chip:hover{ filter: brightness(0.99); }
.mini-note{
  margin-top: 12px;
  font-size: .92rem;
  color: #6a7280;
}

/* Culture banner */
.culture-banner{
  margin: 18px 0;
  padding: 14px 14px;
  background: #f7f9f4;
  border: 1px solid rgba(47,107,58,.12);
  border-radius: 16px;
}
.culture-banner-inner{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.culture-badge{
  background: #e8f3ea;
  border: 1px solid rgba(47,107,58,.18);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
}
.culture-name{
  font-weight: 900;
  font-size: 1.05rem;
}
.culture-clear{
  margin-left: auto;
  text-decoration: none;
  font-weight: 700;
  color: #2f6b3a;
}
.culture-hint{
  margin-top: 8px;
  color: #667;
  font-size: .92rem;
}

@media (max-width: 720px){
  .cultures-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Quota line */
.quota{
  margin-top: 10px;
  font-size: .95rem;
  color: #667;
}

/* Paywall */
.paywall{
  margin-top: 14px;
  padding: 18px 16px;
  background: #fff7f1;
  border: 1px solid rgba(255, 140, 66, .25);
  border-radius: 16px;
}
.paywall-head{ margin-bottom: 12px; }
.paywall-title{ font-weight: 900; font-size: 1.05rem; }
.paywall-sub{ color:#664; margin-top: 4px; }

.paywall-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.paycard{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 14px;
}
.paycard.light{ background: #fffdf9; }
.paycard-top{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.paycard-name{ font-weight: 900; }
.paycard-price{ font-weight: 900; font-size: 1.2rem; }
.paycard-desc{ color:#665; margin: 8px 0 12px; }
.paycard-btn{ width: 100%; }
.paycard-note{ margin-top: 10px; font-size: .9rem; color:#776; }

.paywall-foot{ margin-top: 12px; }
.paywall .link{ font-weight: 800; text-decoration: none; }

@media (max-width: 720px){
  .paywall-grid{ grid-template-columns: 1fr; }
}

/* === BIG CTA BLOCK === */
.cta-big{
  background: linear-gradient(135deg,#e9f6ec,#f7fff9);
  padding: 56px 16px;
  margin-top: 40px;
}
.cta-inner{
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}
.cta-big h2{
  font-size: 2rem;
  margin-bottom: 12px;
}
.cta-sub{
  font-size: 1.1rem;
  color:#2f4f2f;
  margin-bottom: 28px;
}
.cta-actions{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}
.cta-btn{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:20px 26px;
  border-radius:18px;
  font-weight:700;
  text-decoration:none;
  min-width:260px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-btn span{
  font-weight:500;
  font-size:.95rem;
}
.cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
.cta-btn.tg{
  background:#27a7e7;
  color:#fff;
}
.cta-btn.tt{
  background:#111;
  color:#fff;
}
.cta-note{
  margin-top:26px;
  font-size:.95rem;
  color:#355e3b;
}
@media(max-width:640px){
  .cta-big h2{font-size:1.6rem;}
}


/* Social block XL improvements */
.social-block-xl{
  padding: 28px 20px;
}
.social-kicker{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(47,107,58,.08);
  color: #1f4a2c;
  font-weight: 800;
  font-size: .92rem;
  margin-bottom: 10px;
}
.social-chips{
  margin: 14px 0 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}
.chip{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  font-weight: 700;
  font-size: .95rem;
}
.social-btn{
  position: relative;
  padding: 14px 18px;
  min-width: 300px;
}
.social-btn .social-sub{
  display:block;
  margin-top: 4px;
  font-weight: 600;
  opacity: .92;
  font-size: .92rem;
}
.social-btn.telegram{ background: linear-gradient(135deg, #2aa9e0, #1b7bb0); }
.social-btn.tiktok{ background: linear-gradient(135deg, #111111, #3a3a3a); }
@media (max-width: 560px){
  .social-btn{ min-width: 100%; }
}


/* Paywall packages (3 cards) */
.paywall-grid-3{
  grid-template-columns: repeat(3, 1fr);
}
.paycard.featured{
  border: 2px solid rgba(255, 140, 66, .35);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.paycard-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 140, 66, .18);
  color: #7a3b00;
  font-weight: 900;
  font-size: .88rem;
  margin-bottom: 10px;
}
.paywall-note{
  font-weight: 700;
  color:#554;
  margin-bottom: 10px;
}
.paywall-small{
  margin-top: 10px;
  font-size: .9rem;
  color:#776;
}
.btn.secondary{
  background: #ffffff;
  color: #223;
  border: 1px solid rgba(0,0,0,.12);
}
.btn.secondary:hover{
  filter: brightness(0.98);
}

@media (max-width: 900px){
  .paywall-grid-3{ grid-template-columns: 1fr; }
  .paycard.featured{ transform:none; }
}