/* ============================================================
   EMONSA AI — дизайн-система лендінгів
   Побудована з візуальної мови застосунку (не логобуку)
   ============================================================ */

:root{
  /* база */
  --cream:#FFFDF5;
  --ink:#3F2954;
  --ink-70:rgba(63,41,84,.72);
  --ink-45:rgba(63,41,84,.46);
  --orange:#FF5A1B;
  --magenta:#E98FF9;
  --lilac:#C9A6F5;

  /* поверхні */
  --card:#FFFFFF;
  --card-soft:#FFF8F3;
  --line:#E8DCE4;          /* тепла лінія, не сірий rgba */
  --line-2:#D8C6D4;
  --shadow-s:none;
  --shadow-m:0 2px 0 rgba(63,41,84,.05);
  --shadow-l:0 14px 34px rgba(63,41,84,.10);

  /* геометрія — навмисно РІЗНА під тип елемента, не один радіус на все */
  --r-card:8px;      /* інформаційні поверхні — чіткі, як медичний бланк */
  --r-panel:12px;    /* великі панелі */
  --r-chip:5px;      /* дрібні мітки — майже прямі */
  --r-field:8px;     /* поля вводу */
  --r-device:30px;   /* тільки телефони: це форма пристрою */
  --r-pill:999px;    /* тільки CTA: це мова самого застосунку */
  --wrap:1120px;
  --gut:20px;

  /* типографіка */
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* тло героя — за замовчуванням (перевизначається на сторінці) */
  --hero-1:#FDEBF6;
  --hero-2:#FFE6D8;
  --hero-3:#FFFDF5;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec{padding:64px 0;position:relative}
.sec--tight{padding:48px 0}

/* ---------- типографіка ---------- */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.12}
h1{font-size:clamp(30px,7.4vw,54px);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(25px,4.6vw,38px);margin-bottom:14px}
h3{font-size:clamp(18px,2.4vw,21px);line-height:1.28}
p{margin:0 0 16px}
.lead{font-size:clamp(17px,2.3vw,20px);color:var(--ink-70);line-height:1.6}
.eyebrow{
  display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange);margin-bottom:14px;
}
.sec-intro{max-width:660px;margin-bottom:34px}
.muted{color:var(--ink-45);font-size:15px;line-height:1.55}
.grad-text{
  background:linear-gradient(96deg,var(--orange) 0%,#F2679B 42%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- шапка ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(255,253,245,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.logo img{width:30px;height:auto}
.logo b{font-size:19px;font-weight:700;letter-spacing:-.02em}
.hdr .hdr__cta{display:none}
@media(min-width:720px){.hdr .hdr__cta{display:inline-flex}}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 30px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;text-decoration:none;
  font-weight:600;font-size:17px;letter-spacing:-.01em;border:0;cursor:pointer;
  box-shadow:0 8px 22px rgba(63,41,84,.20);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(63,41,84,.26)}
.btn:active{transform:translateY(0)}
.btn--sm{min-height:42px;padding:0 20px;font-size:15px;box-shadow:none}
.btn--wide{width:100%}
@media(min-width:560px){.btn--wide{width:auto;min-width:290px}}
.btn__ico{width:19px;height:19px;flex:none}
.cta-note{margin-top:13px;font-size:14.5px;color:var(--ink-45)}
.cta-note b{color:var(--orange);font-weight:600}

/* ---------- герой ---------- */
.hero{position:relative;padding:26px 0 54px;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-30% -25% auto -25%;height:150%;z-index:-2;
  background:
    radial-gradient(58% 46% at 18% 8%,var(--hero-1) 0%,transparent 62%),
    radial-gradient(64% 52% at 88% 22%,var(--hero-2) 0%,transparent 66%),
    linear-gradient(180deg,var(--hero-3) 0%,var(--cream) 76%);
}
.hero__grid{display:grid;gap:8px}
@media(min-width:880px){
  .hero{padding:40px 0 56px}
  .hero__grid{grid-template-columns:1.06fr .94fr;align-items:center;gap:32px}
}
.hero__copy{position:relative;z-index:2}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:26px;max-width:36ch}
.hero__art{position:relative;display:flex;justify-content:center;align-items:center;min-height:250px}
.hero__mascot{
  width:min(78%,340px);filter:drop-shadow(0 22px 40px rgba(63,41,84,.16));
  animation:float 7s ease-in-out infinite;
}
@media(min-width:880px){.hero__mascot{width:min(100%,430px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.hero__mascot{animation:none}}

/* зірочки-декор */
.star{position:absolute;pointer-events:none;opacity:.9;animation:tw 5s ease-in-out infinite}
.star svg{display:block}
@keyframes tw{0%,100%{transform:scale(1) rotate(0);opacity:.85}50%{transform:scale(1.14) rotate(9deg);opacity:1}}
@media(prefers-reduced-motion:reduce){.star{animation:none}}

/* довіра під героєм */
.trust{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  font-size:13.5px;font-weight:500;color:var(--ink-70);backdrop-filter:blur(6px);
}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- картки ---------- */
.grid{display:grid;gap:16px}
@media(min-width:700px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--shadow-s);
}

/* картка «питання → відповідь» */
.qa{display:flex;flex-direction:column;gap:14px}
.qa__q{
  position:relative;background:var(--card-soft);border-radius:18px 18px 18px 6px;
  padding:16px 18px;font-size:16.5px;font-weight:500;line-height:1.5;
}
.qa__q::after{content:'';position:absolute;left:16px;bottom:-7px;width:12px;height:12px;
  background:var(--card-soft);clip-path:polygon(0 0,100% 0,0 100%)}
.qa__a{display:flex;gap:11px;align-items:flex-start;padding-left:2px}
.qa__badge{
  width:26px;height:26px;border-radius:50%;flex:none;margin-top:1px;
  background:linear-gradient(135deg,var(--orange),var(--magenta));
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;
}
.qa__a p{margin:0;font-size:15px;color:var(--ink-70);line-height:1.55}

/* ---------- лікарі ---------- */
.docs{display:grid;gap:14px}
@media(min-width:640px){.docs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.docs{grid-template-columns:repeat(3,1fr)}}
.doc{
  display:flex;gap:15px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);padding:16px;box-shadow:var(--shadow-s);
}
.doc img{width:66px;height:66px;border-radius:50%;flex:none;object-fit:cover}
.doc__n{font-weight:600;font-size:16.5px;line-height:1.25;margin-bottom:3px}
.doc__r{font-size:13.5px;color:var(--ink-45);line-height:1.4}
.ph{
  display:inline-block;padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;
  letter-spacing:.04em;background:rgba(255,90,27,.12);color:var(--orange);
  text-transform:uppercase;vertical-align:middle;
}

/* ---------- проблема ---------- */
.prob{
  background:var(--card-soft);border:1px solid var(--line);
  border-radius:30px;padding:34px 24px;
}
@media(min-width:880px){.prob{padding:52px 56px}}
.prob p{font-size:clamp(17px,2.2vw,19.5px);line-height:1.66;color:var(--ink-70);max-width:62ch}
.prob p:first-of-type{color:var(--ink);font-weight:500}
.prob p:last-child{margin-bottom:0}

/* ---------- скріни застосунку ---------- */
.shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 18px;margin:0 calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
@media(min-width:1000px){
  .shots{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:4px 0}
}
.shot{flex:0 0 232px;scroll-snap-align:center}
@media(min-width:1000px){.shot{flex:auto}}
.shot__ph{
  border-radius:26px;overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-m);margin-bottom:14px;
}
.shot__ph img{width:100%}
.shot h3{font-size:17px;margin-bottom:6px}
.shot p{font-size:14.5px;color:var(--ink-70);line-height:1.5;margin:0}
.swipe-hint{font-size:13px;color:var(--ink-45);margin-top:2px}
@media(min-width:1000px){.swipe-hint{display:none}}

/* ---------- порівняння ---------- */
.cmp{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--card)}
.cmp__row{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
.cmp__row:last-child{border-bottom:0}
@media(min-width:760px){.cmp__row{grid-template-columns:1.05fr 1fr 1fr 1.12fr}}
.cmp__c{padding:14px 18px;font-size:15px;border-bottom:1px solid var(--line)}
.cmp__c:last-child{border-bottom:0}
@media(min-width:760px){.cmp__c{border-bottom:0;border-right:1px solid var(--line);display:flex;align-items:center}
  .cmp__c:last-child{border-right:0}}
.cmp__h{background:var(--card-soft);font-weight:600;font-size:13.5px;letter-spacing:.02em}
.cmp__row--head{display:none}
@media(min-width:760px){.cmp__row--head{display:grid}}
.cmp__lbl{font-weight:600;color:var(--ink)}
.cmp__c--us{background:linear-gradient(180deg,rgba(233,143,249,.10),rgba(255,90,27,.08));font-weight:600}
.cmp__mob{display:inline;font-weight:600;color:var(--ink-45);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.05em;margin-right:8px}
@media(min-width:760px){.cmp__mob{display:none}}

/* ---------- кроки ---------- */
.steps{display:grid;gap:14px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--shadow-s);counter-increment:s}
.step::before{
  content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--magenta));color:#fff;
  font-weight:700;font-size:17px;margin-bottom:14px;
}
.step h3{margin-bottom:6px}
.step p{margin:0;font-size:15px;color:var(--ink-70)}

/* ---------- FAQ ---------- */
.faq{max-width:780px}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  margin-bottom:10px;overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;padding:19px 52px 19px 20px;position:relative;
  font-weight:600;font-size:16.5px;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--ink-45);border-bottom:2px solid var(--ink-45);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 20px 20px;font-size:15.5px;color:var(--ink-70);line-height:1.6}
.faq__a p{margin:0}
.faq__a strong{color:var(--ink)}

/* ---------- фінальний CTA ---------- */
.final{
  position:relative;border-radius:32px;padding:46px 24px;text-align:center;overflow:hidden;
  background:linear-gradient(140deg,#FFE9F7 0%,#FFE0CE 52%,#FFF3E4 100%);
  border:1px solid var(--line);
}
@media(min-width:880px){.final{padding:64px 56px}}
.final h2{margin-bottom:10px}
.final .lead{margin:0 auto 26px;max-width:44ch}
.final__mascot{width:132px;margin:0 auto 18px;filter:drop-shadow(0 14px 26px rgba(63,41,84,.14))}

/* ---------- липка кнопка ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,253,245,.93);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sticky.is-on{transform:translateY(0)}
.sticky .btn{width:100%;min-height:52px}
@media(min-width:880px){.sticky{display:none}}

/* ---------- футер ---------- */
.ftr{border-top:1px solid var(--line);padding:36px 0 40px;margin-top:20px}
@media(min-width:880px){.ftr{padding-bottom:44px}}
body.has-sticky .ftr{padding-bottom:96px}
@media(min-width:880px){body.has-sticky .ftr{padding-bottom:44px}}
.ftr__top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;margin-bottom:22px}
.ftr__links{display:flex;flex-wrap:wrap;gap:18px;font-size:14.5px}
.ftr__links a{color:var(--ink-70);text-decoration:none}
.ftr__links a:hover{color:var(--orange)}
.disc{
  background:var(--card-soft);border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;font-size:13.5px;color:var(--ink-45);line-height:1.55;margin-bottom:18px;
}
.ftr__legal{font-size:13px;color:var(--ink-45);line-height:1.6}

/* ---------- роздоріжжя ---------- */
.fork{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px 0}
.fork__cards{display:grid;gap:14px;margin-top:34px}
@media(min-width:820px){.fork__cards{grid-template-columns:repeat(3,1fr)}}
.fork__c{
  display:flex;align-items:center;gap:16px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s;
}
@media(min-width:820px){.fork__c{flex-direction:column;text-align:center;padding:30px 22px;gap:14px}}
.fork__c:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.fork__c img{width:82px;flex:none}
@media(min-width:820px){.fork__c img{width:132px}}
.fork__c b{display:block;font-size:18px;margin-bottom:4px}
.fork__c span{font-size:14.5px;color:var(--ink-45);line-height:1.45}

/* ---------- панель прев'ю (тільки для рев'ю) ---------- */
.rev{
  position:fixed;top:0;left:0;right:0;z-index:200;background:#241732;color:#fff;
  display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;overflow-x:auto;
}
.rev b{opacity:.55;font-weight:500;margin-right:6px;white-space:nowrap}
.rev a{
  color:#fff;text-decoration:none;padding:5px 12px;border-radius:99px;white-space:nowrap;
  background:rgba(255,255,255,.11);font-weight:500;
}
.rev a.on{background:var(--orange)}
body.rev-on{padding-top:38px}
body.rev-on .hdr{top:38px}

/* ══════════════════════════════════════════════════════════
   v2 — інтерактив, різні фони секцій, більше маскота
   ══════════════════════════════════════════════════════════ */

/* ---- ґрунти секцій: різні, а не один на всю сторінку ---- */
.g-cream{background:var(--cream)}
.g-white{background:#fff}
.g-soft{background:linear-gradient(180deg,#FFF9F4 0%,#FFF4EC 100%)}
.g-tint{background:linear-gradient(180deg,#FBF4FF 0%,#FFF6F1 100%)}
.g-dark{background:#2B1B3D;color:#F3EBFA}
.g-dark h2,.g-dark h3{color:#fff}
.g-dark .lead,.g-dark p{color:rgba(243,235,250,.76)}
.g-dark .eyebrow{color:#FFB98C}
.g-dark .muted{color:rgba(243,235,250,.5)}
.edge{height:44px;background:inherit}

/* ---- назва формату каналу ---- */
.fmt{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.fmt{grid-template-columns:1.15fr .85fr;gap:44px}}
.fmt__name{
  font-size:clamp(44px,10vw,92px);font-weight:700;letter-spacing:-.045em;line-height:.92;
  margin:0 0 4px;text-transform:uppercase;
}
.fmt__sub{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange);margin-bottom:20px}
.fmt__art{position:relative;display:flex;justify-content:center}
.fmt__art img{width:min(64%,250px);filter:drop-shadow(0 18px 34px rgba(63,41,84,.16))}
.fmt__meta{display:grid;gap:10px;margin-top:22px}
.fmt__m{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.fmt__m>span{flex:1}
.fmt__m>span b{font-weight:600;color:inherit}
.fmt__m>b{flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,90,27,.13);
  color:var(--orange);display:grid;place-items:center;font-size:13px;margin-top:1px}
.g-dark .fmt__m>b{background:rgba(255,185,140,.16);color:#FFB98C}

/* ---- демо-чат ---- */
.demo{display:grid;gap:22px;align-items:start}
@media(min-width:940px){.demo{grid-template-columns:.82fr 1.18fr;gap:38px}}
.demo__art{position:relative;display:flex;justify-content:center;align-items:flex-start}
.demo__mascot{width:min(62%,240px);transition:opacity .22s}
@media(min-width:940px){.demo__mascot{width:min(100%,260px)}}
.chat{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:24px;padding:18px;backdrop-filter:blur(8px);
}
.chat__log{min-height:238px;display:flex;flex-direction:column;gap:11px;margin-bottom:15px}
.bub{max-width:88%;padding:13px 16px;border-radius:17px;font-size:15.5px;line-height:1.5;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bub{animation:none}}
.bub--u{align-self:flex-end;background:linear-gradient(135deg,#FF6B2C,#F2679B);color:#fff;
  border-bottom-right-radius:6px;font-weight:500}
.bub--e{align-self:flex-start;background:rgba(255,255,255,.93);color:var(--ink);
  border-bottom-left-radius:6px}
.bub--e b{color:var(--ink)}
.src{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:4px 10px;
  border-radius:99px;background:rgba(63,41,84,.07);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--ink-70);text-transform:uppercase}
.src::before{content:'';width:5px;height:5px;border-radius:50%;background:#2FA36B}
.typing{display:inline-flex;gap:4px;align-items:center;padding:14px 17px}
.typing i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);
  animation:bl 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.asks{display:flex;flex-wrap:wrap;gap:8px}
.ask{
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#F3EBFA;
  padding:9px 15px;border-radius:99px;font-size:14px;font-family:inherit;cursor:pointer;
  text-align:left;line-height:1.35;transition:background .18s,border-color .18s;
}
.ask:hover:not(:disabled){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4)}
.ask:disabled{opacity:.35;cursor:default}
.ask:focus-visible{outline:2px solid #FFB98C;outline-offset:2px}
.demo__note{font-size:13.5px;color:rgba(243,235,250,.5);margin:14px 0 0;line-height:1.5}

/* ---- інтерактивний інструмент ---- */
.tool{
  background:linear-gradient(150deg,#FFF0F8 0%,#FFE9DA 58%,#FFF6EC 100%);
  border:1px solid var(--line);border-radius:30px;padding:28px 22px;position:relative;overflow:hidden;
}
@media(min-width:880px){.tool{padding:42px 46px}}
.tool__peek{position:absolute;right:-34px;bottom:-26px;width:150px;opacity:.28;pointer-events:none}
@media(min-width:880px){.tool__peek{width:215px;opacity:.55;right:20px;bottom:-14px}}
.tool__in{position:relative;z-index:2}
.tool__row{display:grid;gap:14px;margin-bottom:22px}
@media(min-width:640px){.tool__row--2{grid-template-columns:1fr 1fr}}
.fld label{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-45);margin-bottom:7px}
.fld input,.fld select{
  width:100%;min-height:50px;padding:0 15px;border-radius:14px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:16px;color:var(--ink);
}
.fld input:focus,.fld select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.fld input.rng,.rng{width:100%;-webkit-appearance:none;appearance:none;height:6px;
  min-height:6px;padding:0;border:0;border-radius:99px;
  background:rgba(63,41,84,.16);margin:14px 0 6px;cursor:grab}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange),#F2679B);border:3px solid #fff;cursor:grab;
  box-shadow:0 3px 10px rgba(63,41,84,.28)}
.rng::-moz-range-thumb{width:30px;height:30px;border-radius:50%;border:3px solid #fff;
  background:var(--orange);cursor:grab}
.rng:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.rng__lbl{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-45);
  font-variant-numeric:tabular-nums}
.big{font-size:clamp(30px,5.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.out{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:20px;
  padding:20px;backdrop-filter:blur(6px)}
.out__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:14px 12px;margin-top:18px}
.out__i b{display:block;font-size:clamp(17px,2.6vw,24px);font-weight:700;line-height:1.2;margin-bottom:2px;
  font-variant-numeric:tabular-nums}
.out__i span{display:block;font-size:12px;line-height:1.3;color:var(--ink-45);letter-spacing:.04em;text-transform:uppercase}
.out__fact{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-70)}
.out__fact b{color:var(--ink)}
.week-emo{font-size:44px;line-height:1;margin-bottom:4px}
.tool__foot{margin:18px 0 0;font-size:13.5px;color:var(--ink-45);line-height:1.5}

/* ---- смуга-статистика ---- */
.strip{display:grid;gap:2px;border-radius:22px;overflow:hidden;background:var(--line)}
@media(min-width:700px){.strip{grid-template-columns:repeat(3,1fr)}}
.strip__i{background:var(--cream);padding:22px 20px}
.strip__i b{display:block;font-size:clamp(24px,4vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1.1;margin-bottom:4px}
.strip__i span{font-size:14.5px;color:var(--ink-70);line-height:1.45}
.g-dark .strip{background:rgba(255,255,255,.12)}
.g-dark .strip__i{background:#2B1B3D}

/* ---- телефон-рамка для скрінів ---- */
.shot__ph{
  border-radius:30px;overflow:hidden;background:linear-gradient(160deg,#FFF7F0,#FDEEF8);
  border:1px solid var(--line);box-shadow:var(--shadow-m);margin-bottom:14px;padding:7px;
}
.shot__ph img{width:100%;border-radius:24px;display:block}

/* ══════════════════════════════════════════════════════════
   v3 — сайт продає ЗАСТОСУНОК. Telegram = спосіб чекати.
   ══════════════════════════════════════════════════════════ */

/* ---- герой: телефони + маскот ---- */
.hero__stage{position:relative;display:flex;justify-content:center;align-items:center;
  min-height:360px;padding:14px 0 6px}
@media(min-width:880px){.hero__stage{min-height:520px}}
.phone{
  position:relative;border-radius:34px;padding:7px;background:#F6EAF6;
  box-shadow:0 26px 60px rgba(63,41,84,.22),0 3px 10px rgba(63,41,84,.10);
  border:1px solid rgba(255,255,255,.85);
}
.phone img{display:block;width:100%;border-radius:28px}
.phone--main{width:min(56%,224px);z-index:3}
@media(min-width:880px){.phone--main{width:250px}}
.phone--back{position:absolute;width:min(48%,192px);z-index:2;opacity:.94;
  transform:rotate(7deg) translate(46%,-6%);filter:blur(.2px)}
@media(min-width:880px){.phone--back{width:214px;transform:rotate(8deg) translate(52%,-7%)}}
.hero__pet{
  position:absolute;left:-2%;bottom:-4%;width:min(46%,182px);z-index:4;
  filter:drop-shadow(0 16px 30px rgba(63,41,84,.20));animation:float 7s ease-in-out infinite;
}
@media(min-width:880px){.hero__pet{width:208px;left:-6%;bottom:-2%}}
@media(prefers-reduced-motion:reduce){.hero__pet{animation:none}}

/* ---- бейджі сторів ---- */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.store{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:14px;
  background:rgba(63,41,84,.055);border:1px solid var(--line);color:var(--ink-70);
  font-size:13px;line-height:1.15;
}
.store svg{width:19px;height:19px;flex:none;opacity:.62}
.store b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.store span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;opacity:.72}

/* ---- три стовпи продукту ---- */
.pil{display:grid;gap:16px}
@media(min-width:820px){.pil{grid-template-columns:repeat(3,1fr)}}
.pil__c{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 24px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;
}
.pil__ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:16px;background:linear-gradient(140deg,rgba(255,90,27,.14),rgba(233,143,249,.20))}
.pil__ic svg{width:24px;height:24px;color:var(--orange)}
.pil__c h3{margin-bottom:8px}
.pil__c p{margin:0;font-size:15.5px;color:var(--ink-70);line-height:1.55}

/* ---- блок «поки чекаєте» (Telegram) ---- */
.wait{
  position:relative;border-radius:30px;overflow:hidden;
  background:linear-gradient(145deg,#3A2551 0%,#4A2A52 48%,#63324B 100%);color:#F5EDFA;
  padding:32px 24px;
}
@media(min-width:900px){.wait{padding:48px 52px}}
.wait__grid{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.wait__grid{grid-template-columns:1.25fr .75fr;gap:40px}}
.wait h2{color:#fff;margin-bottom:12px}
.wait .lead{color:rgba(245,237,250,.78)}
.wait__tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;
  background:rgba(255,255,255,.11);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#FFC9A6;margin-bottom:16px}
.wait__name{font-size:clamp(30px,5.6vw,46px);font-weight:700;letter-spacing:-.035em;
  line-height:1;margin:0 0 14px;text-transform:uppercase;
  background:linear-gradient(96deg,#FFB07A,#FF8FC6 55%,#D9A8FF);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.wait__list{display:grid;gap:11px;margin:20px 0 24px}
.wait__li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;
  color:rgba(245,237,250,.86)}
.wait__li>i{flex:none;width:22px;height:22px;border-radius:50%;margin-top:2px;
  background:rgba(255,255,255,.13);display:grid;place-items:center;font-style:normal;
  font-size:11.5px;color:#FFC9A6}
.wait .btn{background:#fff;color:var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.wait .btn:hover{background:#FFF6EE}
.wait__note{margin:12px 0 0;font-size:13.5px;color:rgba(245,237,250,.55)}
.wait__art{display:flex;justify-content:center}
.wait__art img{width:min(58%,230px);filter:drop-shadow(0 18px 34px rgba(0,0,0,.3))}
@media(min-width:900px){.wait__art img{width:100%;max-width:240px}}

/* ---- дрібні правки ---- */
.sec-intro--c{margin-left:auto;margin-right:auto;text-align:center}
.hero .lead{max-width:38ch}

/* ══════════════════════════════════════════════════════════
   v4 — усе інтерактивне
   ══════════════════════════════════════════════════════════ */

/* ---- смуга прогресу читання ---- */
.prog{position:fixed;top:0;left:0;height:3px;z-index:300;width:0;
  background:linear-gradient(90deg,var(--orange),var(--magenta));transition:width .1s linear}

/* ---- поява секцій при скролі ---- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),
  transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- тост ---- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:400;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:99px;font-size:14.5px;
  font-weight:500;box-shadow:0 14px 40px rgba(63,41,84,.35);transition:transform .35s
  cubic-bezier(.2,.9,.3,1.1);max-width:calc(100vw - 32px);text-align:center;line-height:1.35}
.toast{visibility:hidden}
.toast.on{transform:translate(-50%,0);visibility:visible}
body.has-sticky .toast{bottom:92px}
@media(min-width:880px){body.has-sticky .toast{bottom:26px}}

/* ---- бейдж стору: клікабельний ---- */
.store{cursor:pointer;transition:background .18s,transform .18s;font-family:inherit;text-align:left}
.store:hover{background:rgba(63,41,84,.09);transform:translateY(-1px)}
.store:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---- телефони в героєві: перемикання ---- */
.phone{cursor:pointer;transition:transform .4s cubic-bezier(.3,.8,.3,1),box-shadow .4s}
.phone--back:hover{transform:rotate(7deg) translate(46%,-9%)}
@media(min-width:880px){.phone--back:hover{transform:rotate(8deg) translate(52%,-10%)}}
.hero__hint{position:absolute;bottom:-6px;right:2%;font-size:12px;color:var(--ink-45);z-index:5}

/* ---- чат: поле вводу + друкарка ---- */
.chat__form{display:flex;gap:9px;margin-top:12px}
.chat__in{flex:1;min-width:0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:0 17px;height:46px;color:#fff;font-family:inherit;font-size:15px}
.chat__in::placeholder{color:rgba(243,235,250,.42)}
.chat__in:focus{outline:2px solid rgba(255,185,140,.7);outline-offset:1px}
.chat__go{flex:none;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(135deg,#FF6B2C,#F2679B);color:#fff;display:grid;place-items:center}
.chat__go svg{width:18px;height:18px}
.chat__go:focus-visible{outline:2px solid #FFB98C;outline-offset:2px}
.chat__reset{background:none;border:0;color:rgba(243,235,250,.5);font-family:inherit;
  font-size:13.5px;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.chat__reset:hover{color:#FFB98C}
.cur{display:inline-block;width:2px;height:1em;background:var(--orange);
  vertical-align:-2px;animation:cur .9s steps(2) infinite}
@keyframes cur{50%{opacity:0}}

/* ---- візуалізація розміру плоду ---- */
.size{display:flex;align-items:flex-end;gap:14px;margin:4px 0 14px;min-height:104px}
.size__blob{border-radius:50% 50% 48% 52%/54% 46% 54% 46%;flex:none;
  background:linear-gradient(140deg,#FFB07A,#F2679B 55%,#C9A6F5);
  box-shadow:0 8px 22px rgba(242,103,155,.3);transition:width .35s cubic-bezier(.3,.8,.3,1),
  height .35s cubic-bezier(.3,.8,.3,1)}
.size__scale{flex:1;border-bottom:1px dashed var(--line);padding-bottom:6px;
  font-size:12px;color:var(--ink-45)}
.tri{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.tri button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;
  font-family:inherit;font-size:13.5px;cursor:pointer;color:var(--ink-70);transition:all .18s}
.tri button:hover{border-color:var(--orange);color:var(--orange)}
.tri button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tri button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---- міні-календар циклу ---- */
.cal{margin-top:18px}
.cal__hd{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px}
.cal__hd span{text-align:center;font-size:11px;color:var(--ink-45);font-weight:600}
.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__d{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--ink-70);background:rgba(255,255,255,.55)}
.cal__d.o{opacity:.32}
.cal__d.m{background:var(--orange);color:#fff;font-weight:600}
.cal__d.f{background:rgba(201,166,245,.42);color:var(--ink);font-weight:500}
.cal__d.ov{background:#7C4DBE;color:#fff;font-weight:700;box-shadow:0 0 0 2px rgba(124,77,190,.25)}
.cal__lg{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12.5px;color:var(--ink-45)}
.cal__lg b{display:inline-block;width:11px;height:11px;border-radius:4px;vertical-align:-1px;
  margin-right:5px}

/* ---- 24-годинна смуга сну ---- */
.day{margin-top:16px}
.day__bar{display:flex;height:26px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:#fff}
.day__s{background:linear-gradient(180deg,#8B6BD1,#6E4DB8);transition:flex .4s ease}
.day__a{background:linear-gradient(180deg,#FFD9A8,#FFC178);transition:flex .4s ease}
.day__lg{display:flex;gap:16px;margin-top:9px;font-size:12.5px;color:var(--ink-45)}
.day__lg b{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;
  margin-right:5px}

/* ---- карусель: крапки й стрілки ---- */
.shots__nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px}
.dots{display:flex;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(63,41,84,.2);border:0;padding:0;
  cursor:pointer;transition:all .22s}
.dot.on{background:var(--orange);width:22px;border-radius:99px}
.dot:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.arrows{display:none;gap:8px}
@media(min-width:1000px){.arrows{display:flex}.shots__nav .dots{display:none}}
.arr{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;transition:all .18s;color:var(--ink)}
.arr:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.arr:disabled{opacity:.3;cursor:default}
.arr svg{width:17px;height:17px}
.arr:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.shot__ph{cursor:zoom-in}

/* ---- лайтбокс ---- */
.lb{position:fixed;inset:0;z-index:500;background:rgba(35,22,48,.9);backdrop-filter:blur(6px);
  display:none;place-items:center;padding:26px}
.lb.on{display:grid}
.lb img{max-width:min(88vw,340px);max-height:86vh;border-radius:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.lb__x{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:22px;cursor:pointer;line-height:1}
.lb__x:focus-visible{outline:2px solid #FFB98C;outline-offset:2px}
.lb__cap{color:rgba(255,255,255,.8);text-align:center;margin-top:16px;font-size:14.5px}

/* ---- порівняння: підсвітка рядка ---- */
.cmp__row:not(.cmp__row--head){transition:background .2s}
.cmp__row:not(.cmp__row--head):hover{background:rgba(233,143,249,.05)}

/* ---- три стовпи: інтерактивні ---- */
.pil__c{cursor:default;transition:transform .22s,box-shadow .22s,border-color .22s}
.pil__c:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);border-color:rgba(255,90,27,.28)}
.pil__ic{transition:transform .3s cubic-bezier(.3,.9,.3,1.3)}
.pil__c:hover .pil__ic{transform:scale(1.08) rotate(-5deg)}

/* ---- лічильники ---- */
.strip__i b{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════
   v5 — прибрано шаблонні патерни, додано авторську систему
   Напрям: «клінічна теплота» — мʼякий світ маскота + точність
   медичного бланка. Дані й мітки набрані моноширинним.
   ══════════════════════════════════════════════════════════ */

/* ── мітка секції: не uppercase-помаранчевий-із-letterspacing,
      а технічна мітка з ведучим тире ── */
.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  text-transform:none;color:var(--ink-45);display:flex;align-items:center;gap:9px;
  margin-bottom:16px;
}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--orange);flex:none}
.g-dark .eyebrow{color:rgba(243,235,250,.55)}
.g-dark .eyebrow::before{background:#FFB98C}

/* ── заголовки: суцільний колір, градієнт лишається тільки
      на назві каналу й у лого ── */
h1 .grad-text{
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--orange);
}

/* ── картки: чіткий кут, тепла лінія, без мʼякої тіні ── */
.card,.pil__c,.doc,.step,.faq details,.out{
  border-radius:var(--r-card);border:1px solid var(--line);box-shadow:none;
}
.pil__c:hover{
  transform:none;box-shadow:none;border-color:var(--ink);
  background:linear-gradient(180deg,#fff,#FFFAF5);
}
.pil__c:hover .pil__ic{transform:none}

/* ── іконка стовпа: без градієнтної плитки ── */
.pil__ic{
  width:auto;height:auto;background:none;border-radius:0;display:block;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
.pil__ic svg{width:26px;height:26px;color:var(--orange)}

/* ── чипи: майже прямі, моно, без крапки ── */
.chip{
  border-radius:var(--r-chip);background:transparent;border:1px solid var(--line-2);
  font-family:var(--mono);font-size:12px;font-weight:400;padding:7px 11px;
  color:var(--ink-70);backdrop-filter:none;letter-spacing:-.01em;
}
.chip i{display:none}

/* ── кнопка: pill лишається (мова застосунку), але без розмитої тіні ── */
.btn{box-shadow:0 2px 0 rgba(63,41,84,.35)}
.btn:hover{transform:translateY(-1px);box-shadow:0 3px 0 rgba(63,41,84,.35)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(63,41,84,.35)}
.wait .btn{box-shadow:0 2px 0 rgba(0,0,0,.28)}

/* ── бейджі сторів: моно, чіткий кут ── */
.store{
  border-radius:var(--r-chip);background:transparent;border:1px solid var(--line-2);
  font-family:var(--mono);
}
.store:hover{background:#fff;transform:none;border-color:var(--ink)}
.store span{letter-spacing:0;text-transform:none;font-size:10.5px}
.store b{font-family:'Onest',sans-serif;font-size:14px}

/* ── поля вводу ── */
.fld input,.fld select{border-radius:var(--r-field);border-color:var(--line-2)}
.fld label{font-family:var(--mono);text-transform:none;font-size:12px;letter-spacing:0;
  color:var(--ink-45)}

/* ── панель інструмента: без пастельного градієнта-заливки ── */
.tool{
  border-radius:var(--r-panel);border:1px solid var(--line-2);
  background:linear-gradient(180deg,#FFF9F4 0%,#FFF4EE 100%);
}
.out{background:#fff;border-radius:var(--r-card);backdrop-filter:none}
.out__i span{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:11.5px}
.out__i b{font-family:var(--mono);font-weight:600;letter-spacing:-.02em}
.big{font-family:'Onest',sans-serif}
.rng__lbl{font-family:var(--mono)}
.tool__foot,.demo__note{font-family:var(--mono);font-size:12px;line-height:1.55}

/* ── смуга фактів: як рядок результату аналізу ── */
.strip{background:none;border-top:1px solid var(--ink);border-radius:0;gap:0}
.strip__i{
  background:none;padding:22px 0 20px;border-bottom:1px solid var(--line);
}
@media(min-width:700px){
  .strip__i{padding:24px 22px 22px;border-bottom:0;border-right:1px solid var(--line)}
  .strip__i:last-child{border-right:0}
  .strip__i:first-child{padding-left:0}
}
.strip__i b{font-family:var(--mono);font-weight:600;letter-spacing:-.03em}
.strip__i span{font-size:14px}
.g-dark .strip{border-top-color:rgba(255,255,255,.4)}
.g-dark .strip__i{background:none;border-color:rgba(255,255,255,.15)}

/* ── таблиця порівняння: справжня таблиця, не картка ── */
.cmp{border-radius:0;border:0;border-top:1px solid var(--ink);background:none}
.cmp__row{border-bottom:1px solid var(--line)}
.cmp__c{border-color:var(--line)}
.cmp__h{background:none;font-family:var(--mono);font-weight:500;font-size:12px;
  letter-spacing:0;color:var(--ink-45)}
.cmp__c--us{
  background:none;font-weight:600;
  box-shadow:inset 2px 0 0 var(--orange);
}
@media(max-width:759px){.cmp__c--us{box-shadow:inset 2px 0 0 var(--orange)}}
.cmp__mob{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:11.5px;
  font-weight:400}
.cmp__row:not(.cmp__row--head):hover{background:#FFFAF5}

/* ── FAQ ── */
.faq details{border-radius:var(--r-card)}
.faq summary{font-size:16px}

/* ── лікарі ── */
.doc img{border-radius:var(--r-card)}
.doc__r{font-family:var(--mono);font-size:12px}
.ph{border-radius:3px;font-family:var(--mono);text-transform:none;font-size:10px;
  letter-spacing:0;font-weight:500}

/* ── блок «поки чекаєте» ── */
.wait{border-radius:var(--r-panel)}
.wait__tag{
  border-radius:var(--r-chip);background:none;border:1px solid rgba(255,201,166,.4);
  font-family:var(--mono);font-weight:400;letter-spacing:.02em;text-transform:none;font-size:12px;
}
.wait__li>i{border-radius:3px;font-family:var(--mono)}
.wait__note{font-family:var(--mono);font-size:12px}

/* ── проблема ── */
.prob{border-radius:var(--r-panel);border-color:var(--line-2)}

/* ── чат ── */
.chat{border-radius:var(--r-panel);background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10)}
.bub{border-radius:10px}
.bub--u{border-bottom-right-radius:2px}
.bub--e{border-bottom-left-radius:2px}
.ask{border-radius:var(--r-chip);font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.chat__in{border-radius:var(--r-field);font-family:var(--mono);font-size:13.5px}
.chat__go{border-radius:var(--r-field)}
.src{border-radius:3px;font-family:var(--mono);letter-spacing:0;text-transform:none;
  font-weight:400;font-size:11px}
.chat__reset{font-family:var(--mono);font-size:12px}

/* ── екрани ── */
.shot__ph{border-radius:var(--r-device);padding:6px;background:#F3E7EE;
  border-color:var(--line-2);box-shadow:0 12px 30px rgba(63,41,84,.10)}
.shot__ph img{border-radius:25px}
.shot p{font-family:var(--mono);font-size:12.5px;line-height:1.6}
.swipe-hint{font-family:var(--mono);font-size:11.5px}
.arr{border-radius:var(--r-chip);border-color:var(--line-2)}
.dot{border-radius:2px;width:16px;height:3px}
.dot.on{width:30px;border-radius:2px}

/* ── герой ── */
.phone{border-radius:var(--r-device);background:#F3E7EE;border-color:rgba(255,255,255,.9);
  box-shadow:0 20px 44px rgba(63,41,84,.18)}
.phone img{border-radius:25px}
.hero__hint{font-family:var(--mono);font-size:11px}
.cta-note{font-family:var(--mono);font-size:12.5px}
.cta-note b{font-weight:500}

/* ── роздоріжжя ── */
.fork__c{border-radius:var(--r-card);box-shadow:none}
.fork__c:hover{transform:none;border-color:var(--ink);background:#FFFAF5}
.fork__c span span{font-family:var(--mono);font-size:12.5px}

/* ── фінал ── */
.final{border-radius:var(--r-panel);border-color:var(--line-2)}

/* ── дрібне ── */
.disc{border-radius:var(--r-card);font-family:var(--mono);font-size:12px;
  border-color:var(--line-2)}
.ftr__legal{font-family:var(--mono);font-size:11.5px}
.ftr__links{font-family:var(--mono);font-size:13px}
.muted{font-family:var(--mono);font-size:12.5px}
.toast{border-radius:var(--r-chip);font-family:var(--mono);font-size:13px}
.cal__d{border-radius:4px;font-family:var(--mono)}
.cal__hd span{font-family:var(--mono)}
.cal__lg{font-family:var(--mono)}
.cal__lg b{border-radius:2px}
.day__bar{border-radius:4px;border-color:var(--line-2)}
.day__lg{font-family:var(--mono)}
.day__lg b{border-radius:2px}
.tri button{border-radius:var(--r-chip);font-family:var(--mono);font-size:12.5px;
  border-color:var(--line-2)}
.size__blob{border-radius:50%}
.size__scale{font-family:var(--mono)}
.qa__q{border-radius:10px 10px 10px 2px}
.qa__badge{border-radius:4px}
.wait__name{letter-spacing:-.04em}
.fmt__name{letter-spacing:-.045em}

/* ── правки після перегляду v5 ── */
.hero__stage{flex-wrap:wrap}
.hero__hint{position:static;width:100%;text-align:center;margin-top:14px;order:9}
@media(min-width:880px){.hero__hint{text-align:right;padding-right:6px}}
.chat__log{min-height:132px}
@media(min-width:940px){.chat__log{min-height:170px}}

/* ══════════════════════════════════════════════════════════
   Перехідник /go/{slug}/
   ══════════════════════════════════════════════════════════ */
.go{
  min-height:calc(100svh - 64px);display:grid;align-content:center;
  padding:36px 0 48px;position:relative;overflow:hidden;
}
.go::before{
  content:'';position:absolute;inset:-30% -25% auto -25%;height:150%;z-index:-2;
  background:
    radial-gradient(58% 46% at 20% 10%,var(--hero-1) 0%,transparent 62%),
    radial-gradient(64% 52% at 84% 26%,var(--hero-2) 0%,transparent 66%),
    linear-gradient(180deg,var(--hero-3) 0%,var(--cream) 78%);
}
.go__in{max-width:520px;margin:0 auto;text-align:center;min-width:0}
.go__mascot{width:min(46%,190px);margin:0 auto 18px;
  filter:drop-shadow(0 16px 30px rgba(63,41,84,.16));animation:float 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.go__mascot{animation:none}}
.go__name{
  font-size:clamp(34px,8vw,58px);line-height:.98;letter-spacing:-.04em;text-transform:uppercase;
  margin:0 0 14px;
  background:linear-gradient(96deg,var(--orange) 0%,#F2679B 46%,var(--magenta) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.go__lead{margin:0 auto 26px;max-width:44ch}
.go__steps{
  list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 18px;
}
.go__steps li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.go__steps li>b{
  flex:none;width:24px;height:24px;border-radius:5px;background:rgba(255,90,27,.12);
  color:var(--orange);display:grid;place-items:center;font-family:var(--mono);
  font-size:12.5px;font-weight:600;margin-top:1px;
}
.go__steps li span b{font-weight:600;color:var(--ink)}
.go__count{margin:16px 0 0;font-family:var(--mono);font-size:13px;color:var(--ink-45)}
.go__count b{color:var(--orange);font-weight:600}
.go__small{margin:22px 0 0;font-family:var(--mono);font-size:12px;color:var(--ink-45);line-height:1.6}
.go__small a{color:var(--ink-70)}
.js-go.is-wait{opacity:.55;pointer-events:none}
.wait__count{margin:10px 0 0;font-family:var(--mono);font-size:13px;color:rgba(245,237,250,.62)}
.wait__count b{color:#FFC9A6;font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   v6 — МОБІЛЬНА ВЕРСІЯ, перероблена
   Усе нижче діє тільки до 879px. Десктоп лишається як був.

   Принципи:
   · різкий контраст типографіки замість рівного потоку
   · продукт видно одразу, а не після екрана тексту
   · менше рамок: роздільники замість коробок
   · моношрифт лише на числах і мітках, не на тексті
   · ритм відступів згрупований, а не однаковий
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 879px) {

  /* ── типографіка: справжня дисплейна шкала ───────────────────── */
  h1{
    font-size:clamp(34px,10.4vw,46px);line-height:1.02;letter-spacing:-.042em;
    text-wrap:balance;
  }
  h2{
    font-size:clamp(26px,7.2vw,32px);line-height:1.08;letter-spacing:-.034em;
    text-wrap:balance;margin-bottom:10px;
  }
  h3{font-size:18px;letter-spacing:-.02em}
  .lead{font-size:16.5px;line-height:1.55}
  body{font-size:16.5px}

  /* мітка секції — дрібна й тиха, весь контраст у заголовку */
  .eyebrow{font-size:11px;margin-bottom:11px;letter-spacing:.04em}
  .eyebrow::before{width:14px}

  /* ── ритм: групуємо, а не роздаємо всім по 64px ─────────────── */
  .sec{padding:54px 0}
  .sec--tight{padding:40px 0}
  .sec-intro{margin-bottom:24px}
  .g-dark + .sec,.sec + .g-dark{padding-top:58px}

  /* ── герой ───────────────────────────────────────────────────── */
  .hero{padding:18px 0 40px}
  .hero__grid{gap:0}
  /* ліве вирівнювання, а не центр: українські слова довгі, і центрований
     рядок дає рваний правий край замість акуратного блоку */
  .hero__top{text-align:left}
  /* жорсткий перенос між частинами заголовка прибираємо: на вузькому екрані
     браузер сам розкладе рядки рівномірно, помаранчева частина лишається акцентом */
  .hero h1{margin-bottom:14px;text-wrap:balance}
  .hero h1 br{display:none}
  .hero h1 .grad-text::after{content:' '}
  .hero .lead{max-width:34ch;margin:0 0 4px}

  /* продукт іде одразу після заголовка, на весь екран */
  .hero__art{margin:0 calc(var(--gut) * -1)}
  .hero__stage{min-height:0;padding:20px 0 4px}
  .phone--main{width:min(58%,236px)}
  .phone--back{width:min(50%,202px);transform:rotate(8deg) translate(48%,-7%)}
  .hero__pet{width:min(44%,172px);left:2%;bottom:2%}
  .hero__hint{display:none}                    /* налазило на маскота */

  .hero__bot{text-align:left;margin-top:8px}
  .hero__bot .btn{width:100%}
  .cta-note{margin-top:11px}
  .stores{justify-content:flex-start;gap:8px;margin-top:16px}
  .store{padding:8px 13px}
  .trust{justify-content:flex-start;gap:7px;margin-top:18px}
  .chip{font-family:'Onest',sans-serif;font-size:12.5px;padding:6px 11px}

  /* ── три стовпи: список із лінійками, не три коробки ─────────── */
  .pil{gap:0}
  .pil__c{
    border:0;border-top:1px solid var(--line);border-radius:0;
    padding:26px 0 24px;background:none;
  }
  .pil__c:first-child{border-top-color:var(--ink)}
  .pil__c:hover{background:none;border-color:var(--line)}
  .pil__ic{
    border:0;padding:0;margin:0 0 12px;
    display:flex;align-items:center;gap:10px;
  }
  .pil__ic svg{width:22px;height:22px}
  .pil__c h3{margin-bottom:7px}
  .pil__c p{font-size:16px;line-height:1.5}

  /* ── демо-чат ────────────────────────────────────────────────── */
  .demo{gap:16px}
  .demo__mascot{width:min(48%,180px)}
  .chat{padding:14px;border-radius:14px}
  .chat__log{min-height:120px}
  .bub{font-size:15px;max-width:92%}
  .asks{gap:7px}
  .ask{
    font-family:'Onest',sans-serif;font-size:13.5px;padding:10px 14px;
    width:100%;text-align:left;
  }
  .chat__in{font-family:'Onest',sans-serif;font-size:15px}
  .demo__note{font-family:'Onest',sans-serif;font-size:13px;line-height:1.5}

  /* ── інструмент ──────────────────────────────────────────────── */
  .tool{padding:22px 18px;border-radius:14px;overflow:hidden}
  .tool__peek{width:118px;right:-30px;bottom:-18px;opacity:.16}
  .out{padding:18px 16px}
  .big{font-size:clamp(28px,8vw,36px);letter-spacing:-.035em}
  .out__grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .out__i b{font-size:17px}
  .out__i span{font-size:10.5px}
  .out__fact{font-size:15px}
  .tool__foot{font-family:'Onest',sans-serif;font-size:12.5px}
  .tri button{font-family:'Onest',sans-serif;font-size:13px;padding:8px 13px}
  .fld label{font-size:11px}
  .cal__d{font-size:12px;border-radius:3px}
  .cal__lg{font-size:11px;gap:9px}

  /* ── смуга фактів: великі числа, дрібні підписи ──────────────── */
  .strip__i{padding:20px 0 18px}
  .strip__i b{font-size:30px;letter-spacing:-.04em;margin-bottom:5px}
  .strip__i span{font-family:'Onest',sans-serif;font-size:14.5px;line-height:1.45}

  /* ── екрани: на весь екран, без коробки ──────────────────────── */
  .shots{gap:14px}
  .shot{flex:0 0 246px}
  .shot__ph{padding:5px;border-radius:26px}
  .shot__ph img{border-radius:22px}
  .shot h3{font-size:16.5px}
  .shot p{font-family:'Onest',sans-serif;font-size:14.5px;line-height:1.5}
  .swipe-hint{display:none}
  .shots__nav{margin-top:2px}

  /* ── порівняння: три компактні групи замість довгого списку ──── */
  .cmp{border-top:0}
  .cmp__row{
    border:1px solid var(--line);border-radius:var(--r-card);
    margin-bottom:10px;overflow:hidden;
  }
  .cmp__row:last-child{margin-bottom:0}
  .cmp__c{padding:11px 14px;font-size:15px;border-bottom:1px solid var(--line)}
  .cmp__c:last-child{border-bottom:0}
  .cmp__lbl{
    background:var(--ink);color:#fff;font-size:12px;font-family:var(--mono);
    font-weight:500;letter-spacing:.02em;padding:9px 14px;
  }
  .cmp__mob{
    display:inline-block;min-width:74px;font-size:11px;color:var(--ink-45);
  }
  .cmp__c--us{background:#FFF6F1;box-shadow:none}
  .cmp__c--us .cmp__mob{color:var(--orange)}

  /* ── лікарі ──────────────────────────────────────────────────── */
  .docs{gap:0}
  .doc{
    border:0;border-bottom:1px solid var(--line);border-radius:0;
    padding:15px 0;background:none;
  }
  .doc:first-child{border-top:1px solid var(--ink)}
  .doc img{width:54px;height:54px;border-radius:6px}
  .doc__n{font-size:16px}
  .doc__r{font-family:'Onest',sans-serif;font-size:13.5px;color:var(--ink-45)}

  /* ── проблема ────────────────────────────────────────────────── */
  .prob{padding:28px 20px;border-radius:14px}
  .prob p{font-size:16.5px;line-height:1.6}

  /* ── FAQ ─────────────────────────────────────────────────────── */
  .faq details{border-radius:10px;margin-bottom:8px}
  .faq summary{font-size:15.5px;padding:16px 46px 16px 16px}
  .faq__a{padding:0 16px 17px;font-size:15px}

  /* ── блок очікування ─────────────────────────────────────────── */
  .wait{padding:28px 20px;border-radius:16px}
  .wait__grid{gap:18px}
  .wait__name{font-size:clamp(30px,8.6vw,40px);margin-bottom:12px}
  .wait__li{font-size:15px}
  .wait .btn{width:100%}
  .wait__art img{width:min(42%,160px)}
  .wait__note{font-family:'Onest',sans-serif;font-size:12.5px}

  /* ── фінал ───────────────────────────────────────────────────── */
  .final{padding:36px 20px;border-radius:16px}
  .final__mascot{width:112px;margin-bottom:14px}
  .final .btn{width:100%}

  /* ── футер ───────────────────────────────────────────────────── */
  .disc{font-family:'Onest',sans-serif;font-size:13px;padding:14px 16px;border-radius:10px}
  .ftr__links{font-family:'Onest',sans-serif;font-size:14px;gap:14px}
  .ftr__legal{font-family:'Onest',sans-serif;font-size:12.5px}
  .muted{font-family:'Onest',sans-serif;font-size:14px}

  /* ── перехідник ──────────────────────────────────────────────── */
  .go{padding:22px 0 36px;min-height:0}
  .go__mascot{width:min(40%,150px);margin-bottom:14px}
  .go__name{font-size:clamp(32px,9.6vw,44px)}
  .go__lead{font-size:16px;margin-bottom:22px}
  .go__steps{padding:16px;border-radius:12px;gap:12px}
  .go__steps li{font-size:15px}
  .go__small{font-family:'Onest',sans-serif;font-size:13px}

  /* ── роздоріжжя ──────────────────────────────────────────────── */
  .fork__c{padding:16px;border-radius:12px}
  .fork__c img{width:70px}
  .fork__c b{font-size:17px}
  .fork__c span span{font-family:'Onest',sans-serif;font-size:14px}

  /* ── липка кнопка ────────────────────────────────────────────── */
  .sticky{padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom))}
  .sticky .btn{min-height:50px;font-size:16px}
}

/* десктоп: розкладка героя після поділу копії — вигляд не змінився */
@media (min-width: 880px) {
  .hero__grid{
    grid-template-columns:1.06fr .94fr;
    grid-template-areas:"top art" "bot art";
    align-items:center;gap:0 32px;
  }
  .hero__top{grid-area:top;align-self:end}
  .hero__bot{grid-area:bot;align-self:start}
  .hero__art{grid-area:art}
  .hero__top .lead{margin-bottom:26px}
}

/* ── юридичні сторінки: довгий текст має читатись ── */
.rte{max-width:70ch}
.rte h2{font-size:clamp(17px,2.4vw,20px);letter-spacing:-.015em;margin:36px 0 12px;
  padding-top:20px;border-top:1px solid var(--line);text-transform:none}
.rte h2:first-child{margin-top:0;padding-top:0;border-top:0}
.rte p{font-size:16px;line-height:1.65;color:var(--ink-70);margin:0 0 12px}
.rte p em{color:var(--ink-45);font-style:normal;font-family:var(--mono);font-size:13px}
.rte strong{color:var(--ink);font-weight:600}
.rte ul{margin:0 0 16px;padding-left:20px}
.rte li{font-size:16px;line-height:1.6;color:var(--ink-70);margin-bottom:6px}
.rte a{color:var(--orange);text-underline-offset:3px}
@media(max-width:879px){
  .rte h2{margin:28px 0 10px;padding-top:16px}
  .rte p,.rte li{font-size:15.5px}
}

/* ══════════════════════════════════════════════════════════
   v1.0.4 — вікно після питання + відлік на перехіднику
   ══════════════════════════════════════════════════════════ */

/* ── вікно «відповідь — у додатку» ── */
.amod{position:fixed;inset:0;z-index:600;display:none;place-items:center;padding:20px;
  background:rgba(35,22,48,.72);backdrop-filter:blur(8px)}
.amod.on{display:grid;animation:amfade .22s ease}
@keyframes amfade{from{opacity:0}to{opacity:1}}
.amod__box{
  position:relative;width:100%;max-width:440px;background:var(--cream);
  border:1px solid var(--line-2);border-radius:var(--r-panel);padding:26px 24px 24px;
  box-shadow:0 30px 70px rgba(35,22,48,.4);text-align:center;
  animation:amrise .32s cubic-bezier(.2,.9,.3,1.1);max-height:88svh;overflow:auto;
}
@keyframes amrise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.amod.on,.amod__box{animation:none}}
.amod__mascot{width:104px;margin:0 auto 12px;display:block}
.amod__q{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-45);line-height:1.5;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:10px 13px;margin:0 0 16px;text-align:left;
}
.amod__q b{display:block;color:var(--ink-70);font-weight:500;margin-bottom:3px;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase}
.amod h3{font-size:clamp(20px,4.6vw,24px);line-height:1.15;letter-spacing:-.03em;margin:0 0 12px}
.amod p{font-size:15.5px;line-height:1.55;color:var(--ink-70);margin:0 0 12px;text-align:left}
.amod p b{color:var(--ink);font-weight:600}
.amod__list{display:grid;gap:9px;margin:0 0 20px;text-align:left}
.amod__li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;
  color:var(--ink-70)}
.amod__li>i{flex:none;width:20px;height:20px;border-radius:4px;margin-top:2px;font-style:normal;
  background:rgba(255,90,27,.12);color:var(--orange);display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600}
.amod .btn{width:100%}
.amod__close{background:none;border:0;font-family:var(--mono);font-size:12.5px;
  color:var(--ink-45);cursor:pointer;padding:12px 0 0;text-decoration:underline;
  text-underline-offset:3px;display:block;margin:0 auto}
.amod__close:hover{color:var(--orange)}
.amod__x{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:var(--r-chip);
  border:0;background:transparent;color:var(--ink-45);font-size:20px;line-height:1;cursor:pointer}
.amod__x:hover{background:rgba(63,41,84,.06);color:var(--ink)}
.amod__x:focus-visible,.amod__close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ── перехідник: видимий відлік замість тихого редиректу ── */
.go__timer{margin:14px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--ink-45)}
.go__bar{height:3px;border-radius:99px;background:rgba(63,41,84,.12);overflow:hidden;
  margin:0 auto 9px;max-width:260px}
.go__bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--magenta))}
.go__bar.run i{animation:gobar var(--go-wait,6s) linear forwards}
@keyframes gobar{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.go__bar.run i{width:100%;animation:none}}
.go__stop{background:none;border:0;color:var(--ink-70);font-family:var(--mono);font-size:12.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.go__stop:hover{color:var(--orange)}
.go__stop:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ── карусель без стрілок ── */
.arrows{display:none !important}
.shots__nav{justify-content:center}
@media(min-width:1000px){.shots__nav{display:none}}

/* ── перехідник: єдиний заголовок ── */
.go__sep{display:inline-block;margin:0 .32em;opacity:.5;font-weight:400}
.go__name{font-size:clamp(28px,7vw,46px);line-height:1.04;text-wrap:balance}
@media(max-width:879px){.go__name{font-size:clamp(26px,7.4vw,38px)}}
.go__timer b{color:var(--orange);font-variant-numeric:tabular-nums;font-weight:600}

/* ── перехідник: пояснення, вигоди, інструкція ── */
.go__why{
  font-size:16.5px;line-height:1.6;color:var(--ink-70);max-width:46ch;
  margin:0 auto 22px;
}
.go__why b{color:var(--ink);font-weight:600}
.go__perks{
  display:grid;gap:12px;text-align:left;margin:0 0 24px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px;
}
.go__perk{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;
  color:var(--ink-70)}
.go__perk>i{
  flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;font-style:normal;
  background:rgba(47,163,107,.14);color:#2FA36B;display:grid;place-items:center;
  font-size:12px;font-weight:700;
}
.go__perk b{color:var(--ink);font-weight:600}
.go__how{
  font-size:14.5px;line-height:1.5;color:var(--ink-70);margin:13px auto 0;max-width:38ch;
}
.go__how b{color:var(--orange);font-weight:600}
@media(max-width:879px){
  .go__why{font-size:16px;margin-bottom:18px}
  .go__perks{padding:15px;gap:11px;border-radius:12px}
  .go__perk{font-size:15px}
  .go__how{font-size:14px}
}