/* ═══════════════════════════════════════════════════════════════
   Оракулум · продающая страница (/)
   Живёт ОТДЕЛЬНО от приложения: там body{overflow:hidden} и жёсткие 100svh,
   здесь нужен обычный скролл. Токены (цвет, шрифты, радиусы) — общие,
   берутся из style.css, поэтому фирменный вид один и тот же.

   Правило Олега: ПЕРВЫЙ экран влезает в дисплей без прокрутки. Ниже —
   продающие блоки, ради которых страница и существует: холодный трафик
   из Meta/Google должен увидеть оффер, доказательства и цену.
   ═══════════════════════════════════════════════════════════════ */

/* 🔴 overflow-x:hidden на html/body делает их скролл-контейнером и ЛОМАЕТ
   position:sticky у шапки — она уезжала вверх и не возвращалась, а страница
   длиной 7800px оставалась без навигации и без кнопки. Горизонтальный вылет
   гасим на уровне обёрток, а не глобально. */
/* 🔴🔴 СИСТЕМНЫЙ ПРЕДОХРАНИТЕЛЬ ПРОПОРЦИЙ (12.08.2026).
   В разметке у картинок стоят width/height — и это правильно, они резервируют
   место и убирают скачок вёрстки при загрузке. Но если в CSS задать только
   width:100% и забыть height:auto, браузер берёт ВЫСОТУ ИЗ АТРИБУТА, и картинка
   растягивается по вертикали. Так однажды растянулся портрет Селесты (720×720
   рисовался как 458×720) и так же — карты Таро в примере разбора (пропорция
   0.567 рисовалась как 0.254, то есть вдвое уже нужного).
   Правило ниже гасит весь класс этих дефектов разом: любая картинка держит
   пропорцию, пока конкретный блок явно не скажет иное своим классом. */
img, video{ height:auto; max-width:100%; }

html, body{ height:auto; }
body{ overflow-x:clip; }
body{ background:var(--ink); color:var(--text); font-family:var(--sans); }

/* ── общий каркас ── */
/* 🔴 13.08.2026: страница занимала узкую ленту посреди экрана — на 1440px по
   130px пустоты с каждой стороны, а на большом мониторе и вдвое больше.
   Расширено до 1320px; на широких экранах уходим ещё дальше. */
.wrap{ width:min(1320px, calc(100% - 48px)); margin-inline:auto; }
@media (min-width:1600px){ .wrap, .lhead__in{ width:min(1480px, calc(100% - 64px)); } }
/* 🔴 Липкая шапка накрывала надзаголовок секции при переходе по якорю: кликнув
   «Как работает», человек попадал на строку, у которой верх был на 19px ЗА
   шапкой. scroll-margin отодвигает точку остановки на её высоту с запасом. */
section[id]{ scroll-margin-top:104px; }
@media (max-width:860px){ section[id]{ scroll-margin-top:84px; } }
.sec{ position:relative; z-index:2; padding:clamp(64px, 9vh, 118px) 0; }
.sec--tight{ padding-block:clamp(48px, 6vh, 80px); }
.sec + .sec{ border-top:1px solid var(--line-soft); }

.eyebrow{
  font-size:14px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px; font-weight:500;
}
.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 4.6vw, 54px); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 14px; text-wrap:balance;
}
/* 🔴 УКРУПНЕНИЕ ТЕКСТА (12.08.2026, просьба Олега: «шрифт мелковат, плохо читается»).
   Базовый корпусный кегль поднят с 15.5–16px до 17.5–18px, ведущие абзацы —
   до 21px. Ориентир — 18px как нижняя граница комфортного чтения на десктопе. */
.lead{
  font-size:clamp(19px, 1.9vw, 23px); line-height:1.6; color:var(--text-dim);
  margin:0 0 34px; max-width:76ch;
}
.p{ font-size:20px; line-height:1.65; color:var(--text-dim); margin:0 0 12px; }
.p b{ color:var(--text); font-weight:500; }

/* ═══ ШАПКА ═══ */
.lhead{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; background:rgba(7,8,15,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
.lhead.is-stuck{ border-bottom-color:var(--line-soft); }
.lhead__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(1320px, calc(100% - 48px)); margin-inline:auto; }
.lnav{ display:flex; gap:26px; align-items:center; }
.lnav a{
  color:var(--text-dim); text-decoration:none; font-size:17px;
  letter-spacing:.03em; transition:color .2s var(--ease);
}
.lnav a:hover{ color:var(--gold); }

/* 🔴 До 13.08 навигация просто исчезала на телефоне (display:none), а бургера не
   было: со страницы длиной ~18 экранов до раздела «Цены» человек не добирался
   вообще. Теперь меню разворачивается под шапкой. */
.lburger{
  display:none; width:46px; height:46px; padding:0; border:1px solid var(--line);
  border-radius:12px; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.lburger span{ display:block; width:19px; height:1.5px; background:var(--text); transition:transform .3s var(--ease), opacity .2s; }
.lburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.lburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.lburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:860px){
  .lnav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 16px;
    background:rgba(7,8,15,.97); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
  }
  .lnav.is-open{ display:flex; }
  .lnav a{ padding:15px 2px; font-size:19px; border-bottom:1px solid var(--line-soft); }
  .lnav a:last-child{ border-bottom:0; }
  .lburger{ display:flex; order:2; }
  .lhead{ position:sticky; }
  .lhead__in{ position:relative; }
}

/* ═══ ПЛАШКА С ОФФЕРОМ (над всем — так делают все маркетплейсы ниши) ═══ */
.offerbar{
  position:relative; z-index:41; text-align:center;
  padding:10px 16px; font-size:16px; letter-spacing:.02em;
  background:linear-gradient(90deg, rgba(217,178,106,.10), rgba(217,178,106,.19), rgba(217,178,106,.10));
  border-bottom:1px solid var(--line); color:var(--gold-soft);
}

/* ═══ ПЕРВЫЙ ЭКРАН ═══ */
/* Правило Олега: первый экран влезает без прокрутки. Высоту плашки с оффером
   и шапки замеряет JS (--top-h) — на разных языках и ширинах они разной высоты,
   и константа тут регулярно промахивалась. */
.hero{
  position:relative;
  /* Портрет намеренно уходит за правый край (right:-2vw) — это композиция.
     Но без clip он растил документ на 4px и давал горизонтальный скролл.
     clip, а не hidden: hidden сделал бы .hero скролл-контейнером. */
  overflow-x:clip;
  /* −8px — запас на субпиксельное округление шапки: без него первый экран
     регулярно вылезал на 2–4px и правило «без скролла» формально нарушалось */
  min-height:calc(100svh - var(--top-h, 96px) - 8px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:16px 22px;
}
.hero__in{ position:relative; z-index:3; max-width:min(760px, 60%); }
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px, 6.6vw, 82px); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 18px; text-wrap:balance;
}
.hero h1 em{ font-style:italic; color:var(--gold-soft); }
.hero__sub{
  font-size:clamp(17px, 1.7vw, 21px); line-height:1.55; color:var(--text-dim);
  margin:0 0 26px; max-width:58ch;
}
.hero__form{
  display:flex; align-items:center; gap:6px; max-width:560px;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:999px; padding:5px 5px 5px 22px;
  box-shadow:0 1px 0 rgba(233,231,226,.05) inset, 0 18px 44px -22px rgba(0,0,0,.9);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hero__form:focus-within{ border-color:var(--gold); box-shadow:0 0 38px -14px rgba(217,178,106,.5); }
.hero__form input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:var(--text); font-family:var(--sans); font-size:19px; padding:15px 0;
}
.hero__form input::placeholder{ color:var(--text-mute); }
.hero__micro{ margin:14px 0 0; font-size:16px; color:var(--text-mute); }
.hero__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fact{
  font-size:16px; letter-spacing:.02em; color:var(--text-dim);
  border:1px solid var(--line-soft); border-radius:999px; padding:9px 15px;
  background:rgba(255,255,255,.02);
}
/* Селеста в полный рост — тот же приём, что в приложении.
   🔴 12.08.2026: отражена по горизонтали (scaleX(-1)) — просьба Олега, чтобы она
   смотрела ВНУТРЬ экрана, к тексту, а не в правый край. Маска задаётся ДО
   transform, поэтому её градиент развёрнут на 270deg: после отражения растушёвка
   снова оказывается на левой кромке портрета. */
.hero__celesta{
  position:absolute; right:-2vw; bottom:0; z-index:1;
  height:min(92%, 940px); width:auto; pointer-events:none; user-select:none;
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 42%),
                     linear-gradient(0deg, transparent 0%, #000 16%);
          mask-image:linear-gradient(270deg, transparent 0%, #000 42%),
                     linear-gradient(0deg, transparent 0%, #000 16%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  filter:contrast(1.04) saturate(.94) brightness(.96);
  opacity:0; animation:celestaIn 1.5s var(--ease) .3s forwards;
}
@keyframes celestaIn{
  from{ opacity:0; transform:translateX(8%) scaleX(-1);}
  to{   opacity:1; transform:translateX(0)  scaleX(-1);}
}
@media (max-width:1000px){
  .hero__in{ max-width:100%; text-align:center; }
  .hero__celesta{ position:relative; right:auto; display:block; margin:0 auto 14px;
    height:min(24vh, 230px); mask-image:linear-gradient(0deg, transparent 0%, #000 26%);
    -webkit-mask-image:linear-gradient(0deg, transparent 0%, #000 26%); -webkit-mask-composite:source-over; mask-composite:add; }
  .hero__form{ margin-inline:auto; }
  .hero__chips{ justify-content:center; gap:7px; margin-top:12px; }
  .hero__sub{ margin-inline:auto; }
}
/* Телефон: бюджет высоты жёсткий — ужимаем всё, кроме заголовка и поля ввода */
@media (max-width:640px){
  .hero{ padding-block:10px 18px; }
  .hero h1{ font-size:clamp(30px, 8.4vw, 40px); margin-bottom:12px; }
  .hero__sub{ font-size:15.5px; line-height:1.5; margin-bottom:14px; }
  /* кнопка переехала под поле и добавила высоты — забираем её у портрета,
     иначе первый экран перестаёт влезать (замер: +17px на 390, +39px на 360) */
  .hero__celesta{ height:min(16vh, 150px); margin-bottom:8px; }
  .hero__micro{ font-size:13px; margin-top:10px; }
  .fact{ font-size:12.5px; padding:7px 12px; }
  /* 🔴 Именная кнопка съедала больше половины строки: на 390px под плейсхолдер
     оставалось 153px из нужных 256, и подсказка рубилась на «Ваш вопрос: мен…».
     Ставим кнопку под поле — она же главное действие, ей и место во всю ширину. */
  .hero__form{ flex-direction:column; align-items:stretch; gap:8px;
    border-radius:22px; padding:6px 16px 10px; }
  .hero__form input{ font-size:16.5px; padding:12px 0 6px; }  /* ≥16px — иначе iOS зумит */
  .hero__form .b--go{ width:100%; min-height:48px; }
  .offerbar{ font-size:12.5px; padding:7px 12px; }
}
/* Ландшафт телефона: героиня уступает место форме, иначе не влезает ничего.
   🔴 После третьей строки в заголовке (перенос перед «Один ответ.») экран
   вылезал на 55px — здесь заголовок ужимаем сильнее, он и так короткий. */
@media (max-height:520px){
  .hero__celesta{ display:none; }
  .hero__sub, .hero__chips{ display:none; }
  .hero h1{ font-size:clamp(24px, 5.4vh, 32px); margin-bottom:10px; }
  .hero__micro{ margin-top:8px; font-size:13.5px; }
  .hero{ padding-block:8px 12px; }
  .offerbar{ padding-block:6px; font-size:13px; }
}

/* ═══ КНОПКИ ═══ */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:15px 30px; border-radius:999px; border:1px solid transparent;
  font-family:var(--sans); font-size:18.5px; font-weight:500; cursor:pointer;
  text-decoration:none; transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.b--gold{ background:var(--gold); color:#171203; box-shadow:0 14px 40px -18px rgba(217,178,106,.75); }
.b--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
/* 🔴 Было: безымянный кружок 46×46 со стрелкой. Главное действие первого экрана
   не может быть без слов — человек не обязан догадываться, что стрелка отправит
   его вопрос. Теперь это кнопка с текстом, на узких экранах сжимается. */
.b--go{ min-height:46px; padding:12px 22px; border-radius:999px; flex:0 0 auto; white-space:nowrap; }
@media (max-width:520px){ .b--go{ padding:12px 16px; font-size:15px; } }
@media (hover:hover){
  .b--gold:hover{ transform:translateY(-2px); background:var(--gold-soft); }
  .b--ghost:hover{ border-color:var(--gold); color:var(--gold); }
}
.b:active{ transform:translateY(0) scale(.985); }

/* ═══ КАРТОЧКИ ═══ */
.grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
/* 🔴 В «Доказательствах» карточек шесть. На 1440px auto-fit ставил 4 в ряд, и
   вторая строка оставалась сиротой из двух с дырой справа. Шесть делится на
   три ровно — фиксируем три колонки именно этой сетке. */
#proof .grid{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ #proof .grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ #proof .grid{ grid-template-columns:1fr; } }
.card3{
  position:relative; padding:30px 28px 32px; border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line-soft);
  box-shadow:0 1px 0 rgba(233,231,226,.04) inset, 0 18px 44px -34px rgba(0,0,0,.9);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){
  .card3:hover{ border-color:var(--line); transform:translateY(-3px); }
  /* тариф и вопрос тоже должны откликаться: без отклика карточка читается
     как картинка, а не как то, что можно нажать */
  .tier3:hover{ border-color:var(--gold); transform:translateY(-3px); }
  .faq summary:hover{ color:var(--gold-soft); }
  .faq details:hover{ border-bottom-color:var(--line); }
}
.card3__ico{ font-size:22px; color:var(--gold); display:block; margin-bottom:14px; }
.card3 h3{ font-family:var(--serif); font-weight:500; font-size:28px; margin:0 0 10px; letter-spacing:-.01em; }
.card3 p{ margin:0; font-size:19.5px; line-height:1.62; color:var(--text-dim); }

/* карточка-разбор: кнопка всегда прижата к низу, иначе при разной длине
   описания три кнопки встают лесенкой и ряд выглядит неаккуратно */
.card3--pick{ display:flex; flex-direction:column; }
.card3--pick p{ flex:1; }
.card3__cta{ margin-top:20px; align-self:flex-start; min-height:48px; padding:13px 24px; font-size:18px; }

/* «И карта дня — бесплатно» — бесплатный вход под платными карточками */
.freeday{
  margin:22px 0 0; font-size:19.5px; line-height:1.6; color:var(--text-dim);
  display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.freeday a{ color:var(--gold-soft); text-decoration:none; border-bottom:1px solid rgba(217,178,106,.35); }
.freeday a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ═══ ВЫБОР ПРОВОДНИЦЫ ═══ */
.guides{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 34px; }
.guide{
  display:flex; align-items:center; gap:14px; text-align:left; cursor:pointer;
  padding:10px 22px 10px 10px; border-radius:999px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.022);
  font-family:var(--sans); color:var(--text);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.guide img{ width:58px; height:58px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line); }
.guide b{ display:block; font-size:20px; font-weight:500; }
.guide span{ display:block; font-size:16px; color:var(--text-mute); margin-top:2px; }
.guide.is-on{ border-color:var(--gold); background:rgba(217,178,106,.07); }
.guide.is-on img{ border-color:var(--gold); }
@media (hover:hover){ .guide:not(.is-on):hover{ border-color:var(--line); transform:translateY(-2px); } }
@media (max-width:520px){ .guide{ flex:1 1 100%; } }

/* ═══ ВИДЕО-ПРИВЕТСТВИЕ СЕЛЕСТЫ ═══ */
.greet{ margin:0; }
/* кнопка позиционируется по КАДРУ, а не по всей фигуре — иначе она ложится
   поверх подписи под роликом (так и было в первой сборке) */
.greet__frame{ position:relative; }
.greet__v{
  width:100%; height:auto; display:block; aspect-ratio:832/1088; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2);
}
.greet__play{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:flex; align-items:center; gap:12px;
  padding:13px 18px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(217,178,106,.45); color:var(--text);
  background:rgba(9,10,18,.72); backdrop-filter:blur(10px);
  font-family:var(--sans); font-size:18px; text-align:left;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.greet__play:hover{ border-color:var(--gold); background:rgba(9,10,18,.86); }
.greet__ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gold); color:#171203;
}
.greet__label{ flex:1; min-width:0; }
.greet__time{ flex:0 0 auto; color:var(--text-mute); font-size:16px; font-variant-numeric:tabular-nums; }
.greet.is-playing .greet__play{ opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.greet.is-playing:hover .greet__play{ opacity:1; pointer-events:auto; }
.greet__cap{ margin:12px 2px 0; font-size:16px; color:var(--text-mute); line-height:1.5; }
/* Астерия: портрет вместо ролика — озвучен и оживлён был только образ Селесты */
.greet__frame--still .greet__v{ aspect-ratio:1082/1600; }

/* флагман «Синтез трёх» */
.flag{
  margin-top:18px; padding:32px 30px; border-radius:var(--r);
  border:1px solid var(--line);
  background:radial-gradient(120% 160% at 12% 0%, rgba(27,33,69,.75), rgba(12,14,26,.6));
  display:flex; gap:28px; align-items:center; flex-wrap:wrap;
}
.flag__t{ flex:1 1 340px; }
.flag h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,32px); margin:0 0 10px; }
.flag p{ margin:0; color:var(--text-dim); font-size:20px; line-height:1.6; }

/* ═══ ШАГИ ═══ */
.steps{ counter-reset:s; display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--serif); font-size:40px; color:var(--gold); opacity:.55; line-height:1;
}
.step h3{ font-size:22.5px; margin:0 0 8px; font-weight:500; }
.step p{ margin:0; color:var(--text-dim); font-size:19.5px; line-height:1.6; }

/* ═══ ЖИВАЯ КАРТА ДНЯ ═══ */
.today{ display:grid; gap:40px; grid-template-columns:1.25fr .75fr; align-items:center; }
@media (max-width:900px){ .today{ grid-template-columns:1fr; gap:28px; }  }
.today__deck{ display:flex; flex-direction:column; align-items:center; gap:10px; }

/* Рубашка → карта: переворот, а не подмена картинки. Человек должен увидеть
   ЖЕСТ вытягивания, иначе это просто «загрузилась картинка». */
.dcard{
  width:min(260px, 62vw); aspect-ratio:460/795; padding:0; border:0; background:none;
  cursor:pointer; perspective:1200px; display:block;
}
.dcard__in{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .85s cubic-bezier(.2,.7,.2,1);
}
.dcard.is-flipped .dcard__in{ transform:rotateY(180deg); }
.dcard__face{
  position:absolute; inset:0; border-radius:12px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--line); box-shadow:0 26px 60px -30px rgba(0,0,0,.95);
}
/* Рубашка. Была полоска с ✦ — главный кадр бесплатного демо не может выглядеть
   заглушкой. Собрана в духе оригинальной рубашки Райдера-Уэйта: тёмно-синее
   поле, золотая решётка ромбами, светлая рамка по периметру. Всё градиентами,
   без картинки — лишний файл на первом экране демо ни к чему. */
.dcard__face--back{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:
    repeating-linear-gradient( 45deg, rgba(217,178,106,.17) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(217,178,106,.17) 0 1px, transparent 1px 15px),
    repeating-linear-gradient( 45deg, rgba(217,178,106,.07) 0 1px, transparent 1px 7.5px),
    repeating-linear-gradient(-45deg, rgba(217,178,106,.07) 0 1px, transparent 1px 7.5px),
    radial-gradient(90% 70% at 50% 45%, #23306b, #141a3a 60%, #0d1128);
  box-shadow:inset 0 0 0 1px rgba(217,178,106,.28), inset 0 0 0 7px rgba(10,13,28,.85),
             inset 0 0 0 8px rgba(217,178,106,.34), 0 26px 60px -30px rgba(0,0,0,.95);
}
/* золотая розетка в центре рубашки */
.dcard__mark{
  position:relative; width:74px; height:74px; font-size:0; line-height:0;
  border-radius:50%; border:1px solid rgba(217,178,106,.55);
  background:radial-gradient(circle at 50% 50%, rgba(217,178,106,.20), transparent 62%);
  box-shadow:0 0 0 6px rgba(10,13,28,.55), 0 0 0 7px rgba(217,178,106,.25);
}
.dcard__mark::before, .dcard__mark::after{
  content:'✦'; position:absolute; inset:0; display:grid; place-items:center;
  font-size:30px; line-height:1; color:var(--gold);
}
.dcard__mark::after{ transform:rotate(45deg) scale(.62); opacity:.5; }
.dcard__hint{
  font-size:16px; color:var(--gold-soft); letter-spacing:.05em; padding:6px 16px;
  text-align:center; text-transform:uppercase; opacity:.85;
}
/* карта уже вытянута сегодня — показываем её сразу, без переворота на пустом месте */
.dcard.no-anim .dcard__in{ transition:none; }
.today__next{ font-size:17px; color:var(--text-mute); }
.dcard__face--front{ transform:rotateY(180deg); background:var(--ink-2); }
.dcard__img{ width:100%; height:100%; object-fit:cover; display:block; }
.dcard.is-rev .dcard__img{ transform:rotate(180deg); }
@media (hover:hover){ .dcard:not(.is-flipped):hover .dcard__in{ transform:translateY(-6px); } }
.dcard.is-drawing .dcard__in{ animation:dcardShake .5s var(--ease); }
@keyframes dcardShake{ 0%,100%{ transform:none } 25%{ transform:rotate(-1.6deg) } 75%{ transform:rotate(1.6deg) } }

.today__name{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.2vw,36px); margin:0 0 6px; color:var(--gold-soft); }
.today__rev{ margin:0 0 10px; font-size:16.5px; color:#d09a72; letter-spacing:.02em; }
.today__mean{ margin:0 0 14px; font-size:20px; line-height:1.65; color:var(--text); max-width:70ch; }
.today__note{ margin:0 0 20px; font-size:17.5px; line-height:1.6; color:var(--text-mute); max-width:70ch; }
.today__again{ margin:0; min-height:24px; }
.linkbtn{
  background:none; border:0; padding:4px 2px; cursor:pointer; font-family:var(--sans);
  font-size:17px; color:var(--text-mute); border-bottom:1px solid rgba(233,231,226,.18);
}
.linkbtn:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* ═══ ДЕМО РАЗБОРА ═══ */
.demo{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(180deg, rgba(27,33,69,.32), rgba(12,14,26,.5));
}
.demo__bar{
  display:flex; align-items:center; gap:10px; padding:13px 20px;
  border-bottom:1px solid var(--line-soft); font-size:14.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-mute);
}
.demo__bar i{ width:7px; height:7px; border-radius:50%; background:var(--gold); font-style:normal; }
.demo__body{ padding:26px 24px 30px; }
.demo__cards{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
.demo__card{ width:clamp(96px, 15vw, 132px); }
.demo__card img{
  width:100%; display:block; border-radius:8px; border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.95);
}
.demo__card.is-rev img{ transform:rotate(180deg); }
.demo__card span{ display:block; text-align:center; font-size:15px; color:var(--text-mute); margin-top:9px; }
.demo__card b{ display:block; text-align:center; font-size:16px; color:var(--text); margin-top:8px; font-weight:500; }
.demo__text{
  font-size:21px; line-height:1.7; color:#ddd9d2; max-width:80ch; margin-inline:auto;
}
.demo__text b{ color:var(--gold-soft); font-weight:600; }
.demo__fade{
  margin-top:-52px; height:52px;
  background:linear-gradient(180deg, transparent, var(--ink-2));
  position:relative; z-index:2;
}

/* ═══ СЕЛЕСТА: делает / не делает ═══ */
.who{ display:grid; gap:34px; grid-template-columns:minmax(260px, .8fr) 1.2fr; align-items:center; }
@media (max-width:900px){ .who{ grid-template-columns:1fr; } }
/* 🔴 Портрет квадратный (720×720), но в HTML стоял атрибут height="720", а в CSS
   только width:100% без height:auto. Браузер брал ширину колонки (458px) и высоту
   из атрибута (720px) → лицо растягивалось вверх. height:auto + aspect-ratio
   держат пропорцию при любой ширине колонки. */
.who__img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r); display:block; border:1px solid var(--line);
}
.two{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }
.lst{ list-style:none; margin:0; padding:0; }
.lst li{ position:relative; padding-left:26px; margin-bottom:11px; font-size:19.5px; line-height:1.55; color:var(--text-dim); }
.lst li::before{ position:absolute; left:0; top:0; color:var(--gold); }
.lst--yes li::before{ content:'✦'; }
.lst--no li::before{ content:'—'; color:var(--text-mute); }
.lst--no li{ color:var(--text-mute); }

/* ═══ ТАРИФЫ ═══ */
/* Тарифов пять. При minmax(250px) на 1440px четыре вставали в ряд, а пятый
   уезжал вниз одиноким огрызком — витрина выглядела недоделанной.
   Считаем по факту: 5 карточек по ~206px + 4 зазора по 14px влезают в 1180px. */
.tiers3{ display:grid; gap:14px; grid-template-columns:repeat(5, 1fr); align-items:stretch; }
@media (max-width:1220px){ .tiers3{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:860px){  .tiers3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){  .tiers3{ grid-template-columns:1fr; } }
.tier3{
  display:flex; flex-direction:column; padding:24px 18px 22px; min-width:0; border-radius:var(--r);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.022);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tier3.is-best{ border-color:var(--gold); background:rgba(217,178,106,.055); }
.tier3__badge{
  align-self:flex-start; font-size:12px; white-space:nowrap; max-width:100%; overflow:hidden; letter-spacing:.14em; text-transform:uppercase;
  color:#171203; background:var(--gold); border-radius:999px; padding:5px 11px; margin-bottom:14px;
}
.tier3 h3{ font-family:var(--serif); font-weight:500; font-size:26px; margin:0 0 6px; line-height:1.15;
  overflow-wrap:anywhere; }
.tier3__price{ font-family:var(--serif); font-size:clamp(28px, 2.4vw, 34px); line-height:1; margin:10px 0 4px; }
.tier3__price small{ font-family:var(--sans); font-size:16.5px; color:var(--text-mute); }
.tier3__year{ font-size:16px; color:var(--text-mute); margin:0 0 18px; }
.tier3 .lst{ flex:1; margin-bottom:20px; }
.tier3 .lst li{ font-size:17px; margin-bottom:8px; padding-left:20px; line-height:1.45;
  overflow-wrap:anywhere; }
.guarantee{
  margin-top:26px; padding:22px 24px; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(217,178,106,.05);
  display:flex; gap:16px; align-items:flex-start;
}
.guarantee span{ font-size:22px; color:var(--gold); line-height:1; }
.guarantee p{ margin:0; font-size:19.5px; line-height:1.6; color:var(--text-dim); }
.guarantee b{ color:var(--text); }

/* ═══ ОТЗЫВЫ ═══ */
.revs{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.rvw{
  padding:26px 24px; border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line-soft);
}
.rvw__stars{ color:var(--gold); font-size:19px; letter-spacing:.16em; margin:0 0 12px; }
.rvw__stars i{ font-style:normal; opacity:.22; }
.rvw__t{ margin:0 0 14px; font-size:19.5px; line-height:1.62; color:var(--text); }
.rvw__a{ margin:0; font-size:17px; color:var(--text-mute); }
#revLead b{ color:var(--gold-soft); font-weight:500; }

/* ═══ FAQ ═══ */
/* 🔴 Было max-width:820px — справа оставалось 360px пустоты. Два столбца
   вопросов заполняют ширину и укорачивают страницу почти на экран. */
.faq{ column-count:2; column-gap:44px; }
.faq details{ break-inside:avoid; }
@media (max-width:820px){ .faq{ column-count:1; } }
.faq details{
  border-bottom:1px solid var(--line-soft); padding:20px 0;
}
.faq summary{
  cursor:pointer; list-style:none; font-size:21.5px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; color:var(--gold); font-size:22px; line-height:1; flex:0 0 auto; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin:12px 0 0; color:var(--text-dim); font-size:19.5px; line-height:1.65; max-width:82ch; }

/* ═══ ФИНАЛ ═══ */
.final{ text-align:center; }
.final .h2{ margin-inline:auto; }
.final .lead{ margin-inline:auto; }

/* ═══ ПОДВАЛ ═══ */
.lfoot{ padding:40px 0 46px; border-top:1px solid var(--line-soft); position:relative; z-index:2; }
.lfoot__row{ display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.lfoot a{ color:var(--text-mute); text-decoration:none; font-size:17px; }
.lfoot a:hover{ color:var(--gold); }
.lfoot__legal{ display:flex; gap:18px; flex-wrap:wrap; }
.lfoot__note{ margin:16px 0 0; font-size:15.5px; color:var(--text-mute); line-height:1.6; }

/* ═══ ЛИПКАЯ КНОПКА НА ТЕЛЕФОНЕ ═══
   Только мобильная: на десктопе шапка с кнопкой всегда на виду, а на телефоне
   между секциями шли тысячи пикселей без единого действия. */
.stickycta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:45;
  display:none; opacity:0; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.stickycta .b{ width:100%; box-shadow:0 18px 44px -18px rgba(0,0,0,.95), 0 14px 40px -18px rgba(217,178,106,.75); }
.stickycta.is-in{ opacity:1; transform:none; }
@media (max-width:860px){ .stickycta:not([hidden]){ display:block; } }
/* согласие важнее: пока висит баннер куки, кнопку не показываем */
body:has(.consent:not([hidden])) .stickycta{ display:none; }

/* ═══ появление блоков при скролле ═══ */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rev.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; transition:none; } }

/* ── переключатель языка ── */
.lhead__right{ display:flex; align-items:center; gap:12px; }
.llang{
  min-height:44px; min-width:48px; padding:11px 14px;
  background:transparent; color:var(--text-dim);
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--sans); font-size:16px; letter-spacing:.07em; cursor:pointer;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
@media (hover:hover){ .llang:hover{ color:var(--gold); border-color:var(--gold); } }
.lhead__right .b{ min-height:44px; padding:11px 22px; }
@media (max-width:520px){ .lhead__right .b{ padding:11px 16px; font-size:14px; } }

/* Ноутбук 1440×900 → ~730px рабочей высоты. После укрупнения шрифта (12.08)
   первый экран стал вылезать ровно на 17px — забираем их у вертикальных
   отступов, а не у кегля: читаемость важнее воздуха. */
@media (min-width:1001px) and (min-height:701px) and (max-height:830px){
  .hero h1{ margin-bottom:10px; }
  .hero__sub{ margin-bottom:14px; }
  .hero__chips{ margin-top:14px; }
  .hero__micro{ margin-top:10px; }
  .offerbar{ padding-block:8px; }
}
/* Ноутбуки с коротким вьюпортом (1366×768 → ~600px рабочей высоты).
   Здесь первый экран переполнялся на 85–130px и срезал строку 18+,
   а это ещё и комплаенс-строка для рекламы. */
@media (min-width:1001px) and (max-height:700px){
  .hero{ padding-block:10px 14px; }
  .hero h1{ font-size:clamp(30px, 5vw, 46px); margin-bottom:12px; }
  .hero__sub{ font-size:15.5px; line-height:1.5; margin-bottom:16px; max-width:46ch; }
  .hero__form{ padding:4px 4px 4px 18px; }
  .hero__form input{ font-size:16.5px; padding:12px 0; }
  .hero__micro{ margin-top:10px; font-size:13px; }
  .hero__chips{ margin-top:14px; gap:8px; }
  .fact{ font-size:12.5px; padding:7px 12px; }
  .offerbar{ padding:7px 14px; font-size:13px; }
  .lhead{ padding:9px 0; }
}
/* Совсем короткие (лендинг в окне поверх панели задач) */
@media (min-width:1001px) and (max-height:560px){
  .hero__sub{ display:none; }
  .hero__chips{ display:none; }
}

/* Юр-ссылки в подвале были высотой 16px при норме тап-таргета 44px */
.lfoot__legal a{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; }

/* Узкие Android (360×740): переполнение на 20px — режется строка 18+ */
@media (max-width:380px){
  .hero__celesta{ height:min(13vh, 120px); margin-bottom:6px; }
  .hero h1{ font-size:clamp(27px, 8vw, 34px); margin-bottom:10px; }
  .hero__sub{ font-size:14.5px; margin-bottom:14px; }
  .hero__chips{ margin-top:12px; }
  .fact{ font-size:12px; padding:6px 10px; }
}


/* ═══════════════════════════════════════════════════════════════
   🔴🔴 ЧИТАЕМОСТЬ НА БОЛЬШОМ ЭКРАНЕ (13.08.2026)
   Замечание Олега: «шрифт невозможно прочитать не прищуриваясь». На мониторе
   1740px то, что на 1440 выглядело нормально, читается мелким. Кегль растёт
   вместе с экраном, а бренд и активные элементы получают цвет — страница
   перестаёт быть серой.
   Блок стоит В КОНЦЕ файла намеренно: он последний по каскаду и его не
   перебьют правила выше. Правите кегль витрины — правьте здесь.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:1500px){
  .eyebrow{ font-size:15.5px; }
  .demo__bar{ font-size:16px; }
  .lead{ font-size:24px; }
  .p{ font-size:21px; }
  .card3 p, .lst li, .step p, .faq p, .guarantee p, .freeday, .rvw__t{ font-size:21px; }
  .card3 h3{ font-size:30px; }
  .faq summary{ font-size:23px; }
  .lnav a{ font-size:18px; }
  .b{ font-size:19px; }
  .fact{ font-size:17px; }
  .demo__text{ font-size:22.5px; }
  .today__mean{ font-size:22px; }
  .tier3 .lst li{ font-size:18px; }
  .tier3 h3{ font-size:27px; }
  .offerbar{ font-size:17px; }
}

/* Бренд в шапке — точка притяжения, а не серая надпись рядом с меню */
.lhead .brand{ text-decoration:none; }
.lhead .brand__mark{ font-size:22px; }
.lhead .brand__name{
  font-size:clamp(24px, 1.1rem + 0.5vw, 30px); font-weight:600; letter-spacing:.15em;
  background:linear-gradient(92deg, var(--gold), var(--gold-soft) 55%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(217,178,106,.22);
}
@media (hover:hover){ .lhead .brand:hover{ filter:brightness(1.14); } }
/* 🔴 Укрупнённый бренд + бургер + язык + кнопка не влезали в 360px и давали
   горизонтальный скролл. На узких экранах бренд ужимаем, кнопку сокращаем. */
@media (max-width:520px){
  .lhead .brand__name{ font-size:20px; letter-spacing:.10em; }
  .lhead .brand__mark{ font-size:17px; }
  .lhead__in{ gap:8px; }
  .lhead__right{ gap:7px; }
  .llang{ min-width:42px; padding:11px 9px; font-size:14px; }
  .lhead__right .b{ padding:11px 13px; font-size:15px; }
  .lburger{ width:42px; height:42px; }
}
@media (max-width:380px){
  .lhead .brand__name{ font-size:17.5px; letter-spacing:.07em; }
  .lhead__right .b{ padding:10px 11px; font-size:14px; }
}

/* Активный раздел в меню видно сразу — раньше все пункты выглядели одинаково */
.lnav a{ position:relative; padding:6px 2px; }
.lnav a.is-here{ color:var(--gold); }
.lnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.lnav a:hover::after, .lnav a.is-here::after{ transform:scaleX(1); }

/* Карточки и кнопки — заметный отклик, а не «мышиный» серый */
@media (hover:hover){
  .card3--pick:hover{ border-color:var(--gold); box-shadow:0 22px 60px -34px rgba(217,178,106,.55); }
  .guide:hover img{ border-color:var(--gold-soft); }
}
.b--gold{ background:linear-gradient(180deg, var(--gold-soft), var(--gold)); }