/* ============================================================
   ДОФАМИНОВАЯ СТРОЙНОСТЬ — дизайн-система
   Структура: reset → токены → тёмные секции → контейнеры →
   типографика → кнопки → focus/a11y → компоненты (по порядку
   страницы) → модалка оплаты → анимации.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
img,picture{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none}
a{color:inherit;text-decoration:none}
:focus{outline:none}

/* ---------- 2. ТОКЕНЫ ---------- */
:root{
  /* палитровые */
  --color-cream:#EAE4D8; --color-paper:#F6F2E9;
  --color-olive-900:#4B4B27; --color-olive-950:#3C3C1F;
  --color-honey-500:#E7B54A; --color-honey-600:#D9A83C;
  --color-lime-500:#D3E85C; --color-lime-200:#E8F2B8;
  --color-ink:#2E2A14;

  /* семантические */
  --bg:var(--color-cream); --bg-elevated:var(--color-paper);
  --text:var(--color-olive-900); --text-muted:rgba(75,75,39,.7);
  --border:rgba(75,75,39,.18);
  --accent:var(--color-honey-500); --accent-hover:var(--color-honey-600);
  --highlight:var(--color-lime-500); --highlight-soft:var(--color-lime-200);

  /* отступы: N × 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

  /* радиусы */
  --radius-sm:12px; --radius-md:16px; --radius-lg:24px; --radius-xl:28px; --radius-pill:999px;

  /* тени — одна olive-база (rgba 60,60,31 = --color-olive-950) */
  --shadow-sm:0 4px 12px rgba(60,60,31,.10);
  --shadow-md:0 16px 32px rgba(60,60,31,.16);
  --shadow-lg:0 32px 64px rgba(60,60,31,.22);

  /* типографика: 7 ступеней */
  --text-xs:12px; --text-sm:14px; --text-base:17px; --text-md:19px; --text-lg:22px;
  --text-xl:clamp(28px,4vw,52px); --text-2xl:clamp(36px,5.2vw,72px);

  /* слои */
  --z-header:40; --z-sticky:50; --z-progress:60; --z-modal:100;

  --font-display:'Inter Tight',Arial,sans-serif;
  --font-body:Manrope,Arial,sans-serif;
}

/* ---------- 3. ТЁМНЫЕ СЕКЦИИ ---------- */
.section-dark{
  --bg:var(--color-olive-900); --bg-elevated:rgba(246,242,233,.06);
  --text:var(--color-cream); --text-muted:rgba(234,228,216,.7);
  --border:rgba(234,228,216,.2);
  background:var(--bg); color:var(--text);
}

body{background:var(--bg);color:var(--text);font:500 var(--text-base)/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:var(--highlight);color:var(--color-ink)}

/* ---------- 4. КОНТЕЙНЕРЫ И СЕТКА ---------- */
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--space-6)}
.narrow{max-width:860px}
section{padding:var(--space-24) 0;scroll-margin-top:96px}
.pt0{padding-top:0}
.paper-bg{background:var(--bg-elevated)}

.grid{display:grid;gap:var(--space-4)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
}

/* ---------- 5. ТИПОГРАФИКА ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 var(--space-4);color:var(--text)}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
p{margin:0 0 var(--space-4)}

.eyebrow{display:inline-block;padding:var(--space-2) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--space-4);color:var(--text)}
.lead{font-size:var(--text-md);max-width:520px;color:var(--text)}
.small{font-size:var(--text-xs);color:var(--text-muted)}
.bridge{max-width:760px;font-size:var(--text-md);margin-top:var(--space-6)}

/* ---------- 6. КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border-radius:var(--radius-pill);background:var(--color-olive-900);color:var(--color-cream);font:700 var(--text-sm)/1 var(--font-body);border:0;cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s}
.btn:hover{background:var(--color-olive-950);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--accent{background:var(--accent);color:var(--color-ink)}
.btn--accent:hover{background:var(--accent-hover)}
.btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn--ghost:hover{background:var(--bg-elevated);transform:translateY(-2px)}
.btn-sm{padding:var(--space-3) var(--space-6);font-size:var(--text-xs)}
.btn-row{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-8)}

/* ---------- 7. ФОКУС / ДОСТУПНОСТЬ ---------- */
:focus-visible{outline:2px solid var(--highlight);outline-offset:3px;border-radius:var(--radius-sm)}
.btn:focus-visible,.eyebrow:focus-visible,.sl-btn:focus-visible,.socials__link:focus-visible,summary:focus-visible{outline-offset:3px;border-radius:var(--radius-pill)}
.sl-btn:focus-visible{border-radius:50%}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   8. КОМПОНЕНТЫ (в порядке страницы)
   ============================================================ */

/* --- шапка --- */
.topbar{
  position:sticky;top:14px;z-index:var(--z-header);
  max-width:1160px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:background .35s,box-shadow .35s,border-color .35s;
}
.topbar.scrolled{
  background:rgba(246,242,233,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-color:var(--border);
  box-shadow:var(--shadow-md);
}
.logo{display:flex;flex-direction:column;line-height:1.25}
.logo__name{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);letter-spacing:-.02em;color:var(--text)}
.logo__sub{font-size:var(--text-xs);color:var(--text-muted)}
@media(max-width:560px){
  .logo__name{font-size:var(--text-sm)}
  .topbar{padding-left:var(--space-4)}
}

/* --- hero --- */
.hero{padding:var(--space-8) 0 var(--space-16)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-16);align-items:center}
.hero-photo-wrap{position:relative;min-height:560px}
.hero-photo-wrap::before{
  content:"";position:absolute;inset:-10%;z-index:0;
  background:radial-gradient(circle at 30% 20%,var(--highlight-soft) 0%,transparent 60%);
  opacity:.55;filter:blur(20px);
}
.hero-photo{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:photoIn 1.4s ease both}
.float-card{position:absolute;z-index:2;background:var(--bg-elevated);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);font-weight:800;font-size:var(--text-sm);color:var(--color-olive-900)}
.fc1{top:var(--space-6);left:calc(-1 * var(--space-6))}
.fc2{bottom:var(--space-8);right:calc(-1 * var(--space-4))}

.bullets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-6) 0 var(--space-8)}
.bullet{padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--bg-elevated);border:1px solid var(--border);font-weight:700;font-size:var(--text-sm)}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo-wrap{min-height:420px}
  .fc1{left:var(--space-2)}
  .fc2{right:var(--space-2)}
}

/* --- бегущая строка --- */
.marquee{overflow:hidden;border-block:1px solid var(--border);padding:var(--space-4) 0}
.mq-track{display:flex;gap:var(--space-12);width:max-content;animation:mq 26s linear infinite;font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.02em;white-space:nowrap}

/* --- карточки (переиспользуются в нескольких секциях) --- */
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);transition:translate .35s ease,box-shadow .35s ease}
.card:hover{translate:0 -6px;box-shadow:var(--shadow-md)}

/* --- метод --- */
.method-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-12);align-items:start;margin-top:var(--space-12)}
@media(max-width:900px){.method-grid{grid-template-columns:1fr}}

/* цепочка причин: тонкая лаймовая нить связывает шаги биохимической реакции */
.chain{position:relative;display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-6)}
.chain::before{
  content:"";position:absolute;z-index:0;
  left:calc(var(--space-12) / 2 - 1px);
  top:var(--space-6);bottom:var(--space-6);width:2px;
  background:linear-gradient(to bottom,var(--highlight),var(--highlight-soft));
}
.chain__step{position:relative;z-index:1;display:grid;grid-template-columns:var(--space-12) 1fr;gap:var(--space-4);align-items:start}
.chain__num{
  width:var(--space-12);height:var(--space-12);border-radius:50%;
  background:var(--highlight);color:var(--color-ink);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-md);
  box-shadow:var(--shadow-sm);
}
.chain__text{margin:var(--space-2) 0 0;font-weight:600}

/* --- тарифы --- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);align-items:stretch}
.price{
  position:relative;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);
  transition:translate .35s ease,box-shadow .35s ease;
}
.price:hover{translate:0 -6px;box-shadow:var(--shadow-md)}
.price__title{margin-bottom:0}
.price__day{font-size:var(--text-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}
.price__old{font-size:var(--text-sm);color:var(--text-muted);text-decoration:line-through}
.price__sum{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:var(--space-1) 0}
.price__save{
  display:inline-flex;align-self:flex-start;
  background:var(--highlight);color:var(--color-ink);
  border-radius:var(--radius-pill);padding:var(--space-1) var(--space-4);
  font-weight:700;font-size:var(--text-xs);
}
.price__result{font-size:var(--text-sm);color:var(--text-muted);flex-grow:1}
.price .btn{margin-top:var(--space-2);align-self:flex-start}

.price--featured{
  --bg:var(--color-olive-900); --bg-elevated:var(--color-olive-900);
  --text:var(--color-cream); --text-muted:rgba(234,228,216,.72); --border:rgba(234,228,216,.22);
  background:var(--bg-elevated);color:var(--text);border-color:var(--border);
  box-shadow:var(--shadow-md);
}
.price--featured .price__save{background:var(--highlight);color:var(--color-ink)}
.price__badge{
  align-self:flex-start;background:var(--highlight);color:var(--color-ink);
  font-weight:800;font-size:var(--text-xs);padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-pill);margin-bottom:var(--space-2);
}
.legal-note{margin-top:var(--space-4);color:var(--text-muted)}
@media(max-width:900px){.prices{grid-template-columns:1fr}}

/* --- подарок на входе + цитата --- */
.gift-card{
  display:grid;grid-template-columns:230px 1fr;gap:var(--space-8);align-items:center;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:var(--space-8);margin-top:var(--space-8);
}
.gift-card img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.gift-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-.02em;margin-bottom:var(--space-2)}
.gift-card p{margin:0 0 var(--space-4)}

.quote{position:relative;margin-top:var(--space-8);padding-left:var(--space-8);border-left:2px solid var(--highlight)}
.quote__text{font-size:var(--text-md);color:var(--text)}
.quote__text:first-child{color:var(--text-muted);font-size:var(--text-sm)}

@media(max-width:700px){
  .gift-card{grid-template-columns:1fr}
  .gift-card img{max-width:260px}
}

/* --- об авторе --- */
.about-media{display:flex;flex-direction:column;gap:var(--space-4)}
.about-main img{width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
.about-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.about-gallery__item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg)}
.cert-card{max-width:280px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);margin:var(--space-4) 0}
.cert-card img{width:100%;border-radius:var(--radius-md)}
@media(max-width:900px){.about-gallery{grid-template-columns:repeat(2,1fr)}}

/* --- отзывы --- */
.sl-btns{display:flex;gap:var(--space-2);justify-content:flex-end;margin-bottom:var(--space-4)}
.sl-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--border);background:transparent;color:var(--text);font-size:var(--text-lg);cursor:pointer;transition:background .3s,translate .3s}
.sl-btn:hover{background:var(--bg-elevated);translate:0 -3px}

.slider{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-1) var(--space-1) var(--space-6);scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.review{min-width:min(360px,85vw);scroll-snap-align:start;margin:0}
.review-img{padding:var(--space-3);min-width:min(420px,85vw)}
.review-img img{width:100%;border-radius:var(--radius-md)}

/* --- FAQ --- */
details{border-bottom:1px solid var(--border);padding:var(--space-6) 0}
summary{cursor:pointer;font:700 var(--text-md)/1.3 var(--font-body);list-style:none;display:flex;justify-content:space-between;gap:var(--space-4);align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-display);font-size:var(--text-xl);line-height:1;transition:transform .3s;flex-shrink:0}
details.open summary::after{transform:rotate(45deg)}

.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1)}
.faq-inner{overflow:hidden}
details.open .faq-body{grid-template-rows:1fr}
details .faq-body p{margin:var(--space-4) 0 0;color:var(--text-muted)}

/* --- лид-магнит --- */
.lead-card{padding:var(--space-12)}

/* --- футер --- */
footer{padding:var(--space-16) 0;border-top:1px solid var(--border);font-size:var(--text-sm)}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:var(--space-12);align-items:start}
.footer-left{display:grid;gap:var(--space-4);justify-items:start}
.socials{display:flex;gap:var(--space-3)}
.socials__link{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);border:1px solid var(--border);
  transition:background .3s,translate .3s;
}
.socials__link:hover{background:var(--highlight-soft);translate:0 -3px}
.footer-legal{display:grid;gap:var(--space-3);justify-items:end;text-align:right;align-content:space-between;padding-top:var(--space-16)}
.footer-legal a{opacity:.85;transition:opacity .3s}
.footer-legal a:hover{opacity:1;text-decoration:underline}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:var(--space-8)}
  .footer-legal{justify-items:start;text-align:left;padding-top:0;align-content:start}
}

/* --- юридические страницы --- */
.legal{max-width:820px;margin:0 auto;padding:var(--space-16) var(--space-6);background:var(--bg);color:var(--text)}
.legal h1{font-size:var(--text-xl)}
.legal .back{display:inline-block;margin-bottom:var(--space-6);font-weight:700}
.legal p{margin:0 0 var(--space-3)}
/* Юридический текст длинный, и читают его выборочно — ищут нужный пункт.
   Поэтому разделам нужен заметный отступ сверху: он и есть навигация. */
.legal h2{font-size:var(--text-md);margin:var(--space-8) 0 var(--space-3)}
.legal ul{margin:0 0 var(--space-3);padding-left:var(--space-6)}
.legal li{margin-bottom:var(--space-2)}
.legal .doc-meta{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-6)}
.legal .doc-req{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--text-sm)}
/* Длинная строка реквизитов и адрес почты не должны распирать страницу на телефоне */
.legal .doc-req b{color:var(--text)}
.legal a{overflow-wrap:anywhere}

/* --- плавающая кнопка --- */
/* Нижняя кнопка — только для узких экранов.
   Шапка липкая на всех размерах, и её «Выбрать тариф» всегда на виду. На широком
   экране вторая кнопка внизу ничего не добавляет, зато закрывает собой контент —
   особенно мешает в блоке отзывов и в конце страницы. На телефоне другое дело:
   кнопка в шапке мелкая и в верхнем углу, а полноширинная внизу попадает прямо
   под большой палец. Поэтому показываем её там, где она действительно помогает. */
.sticky-cta{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:var(--z-sticky);display:none}
.sticky-cta .btn{width:100%;box-shadow:var(--shadow-lg)}
@media(max-width:700px){
  .sticky-cta.show{display:block}
}

/* --- полоса прогресса скролла --- */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--highlight);width:0;z-index:var(--z-progress)}

/* ---------- 9. МОДАЛКА ОПЛАТЫ ---------- */
.pay-modal[hidden]{display:none}
.pay-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.pay-modal__backdrop{position:absolute;inset:0;background:rgba(46,42,20,.55);backdrop-filter:blur(4px)}
.pay-modal__dialog{
  position:relative;z-index:1;width:100%;max-width:420px;
  background:var(--color-cream);color:var(--color-olive-900);
  border-radius:var(--radius-xl);padding:var(--space-8);
  box-shadow:var(--shadow-lg);
}
.pay-modal__close{
  position:absolute;top:var(--space-4);right:var(--space-4);
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;font-size:var(--text-md);color:var(--color-olive-900);
  transition:background .3s;
}
.pay-modal__close:hover{background:rgba(75,75,39,.08)}
.pay-modal__title{font-size:var(--text-lg);padding-right:var(--space-8)}
.pay-modal__options{display:grid;gap:var(--space-3);margin:var(--space-6) 0}
.pay-modal__option{
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);
  border:1.5px solid rgba(75,75,39,.18);background:var(--color-paper);
  font-weight:700;text-align:left;cursor:pointer;transition:border-color .3s,background .3s;
}
.pay-modal__option:hover{border-color:var(--color-olive-900);background:var(--color-cream)}
.pay-modal__option[aria-disabled="true"]{
  color:rgba(75,75,39,.45);cursor:not-allowed;border-color:rgba(75,75,39,.12);background:transparent;
}
.pay-modal__option[aria-disabled="true"]:hover{border-color:rgba(75,75,39,.12);background:transparent}
.pay-modal__note{font-size:var(--text-xs);color:rgba(75,75,39,.7)}

/* ---------- 10. АНИМАЦИИ ---------- */
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes photoIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

/* Блоки прячутся ТОЛЬКО если JS жив: класс .js ставится инлайн-скриптом в <head>.
   Без этого условия любая ошибка в main.js оставила бы страницу полностью пустой —
   .reveal висит на 28 блоках, это вся страница. */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
.js .d1{transition-delay:.12s}
.js .d2{transition-delay:.24s}

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .rv{opacity:1;transform:none;transition:none}
  .mq-track{animation:none}
  .hero-photo{animation:none}
  .card,.price,.sl-btn,.socials__link,.btn{transition:none}
}