/* Астроформа · главная. Токены и примитивы — в base.css. */

:root{--shell:1160px}

/* ── герой ───────────────────────────────────────────────────────────────── */
/* padding-block, а не padding: сокращённое свойство обнуляло padding-inline
   у .wrap, и на телефоне текст упирался в край экрана. */
.hero{padding-block:clamp(48px,9vh,104px) clamp(48px,8vh,88px);
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,64px);align-items:center}
/* minmax(0,1fr), а не 1fr: у голого 1fr минимум равен auto, и длинная
   кнопка с white-space:nowrap растягивала колонку шире экрана. */
@media(max-width:960px){.hero{grid-template-columns:minmax(0,1fr)}}
/* Чипы школ. Появляются лесенкой, каждый со своей задержкой. */
.schools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,3vh,32px)}
.schools span{font-size:var(--fs-xs);color:var(--dim);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;background:rgba(255,255,255,.02);
  animation:heroIn .9s var(--ease-out) both}
.schools span:nth-child(2){animation-delay:.07s}
.schools span:nth-child(3){animation-delay:.14s}

/* Заголовок — антиква. Гротеск в шапке остаётся, контраст двух гарнитур
   и есть то, что отличает макет от прежнего экрана. */
.hero h1{font-family:var(--serif);font-size:var(--fs-display);font-weight:500;
  letter-spacing:-.028em;line-height:1.02;text-wrap:balance;
  animation:heroIn 1s var(--ease-out) .06s both}
/* Сплошное золото, а не градиент по буквам: в макете слово именно такое,
   и градиентный текст к тому же плохо читается на мелких кеглях. */
.hero h1 span{color:var(--gold)}
.hero .sub{margin-top:clamp(18px,2.4vh,26px);max-width:48ch;
  animation:heroIn 1s var(--ease-out) .14s both}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(26px,4vh,38px);
  animation:heroIn 1s var(--ease-out) .22s both}

/* Стрелка внутри своей окружности, заподлицо с правым краем кнопки. */
.btn.pill{border-radius:999px}
.btn.pill i{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(8,10,17,.16);margin:-4px -8px -4px 12px;
  font-style:normal;transition:transform .45s var(--ease-out),background .45s var(--ease-out)}
.btn.pill:hover i{transform:translate(3px,-1px) scale(1.06);background:rgba(8,10,17,.26)}
.btn.pill:active{transform:scale(.985)}

/* Сетка, а не flex-wrap: четырём значениям нужно стоять в ряд, а при
   переносе четвёртое уезжало на вторую строку одно. На телефоне — два на два. */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,26px);margin-top:clamp(30px,5vh,48px);
  padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line);
  animation:heroIn 1s var(--ease-out) .3s both}
@media(max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px clamp(12px,4vw,26px)}}
.stats div b{display:block;font-family:var(--serif);font-variant-numeric:tabular-nums;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.stats div span{font-size:var(--fs-xs);color:var(--faint)}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ── оррерий ─────────────────────────────────────────────────────────────
   Орбиты крутятся через SMIL внутри svg (см. index.html), здесь только
   вращение кольца знаков и общее появление. Анимируем строго transform. */
/* container-type даёт единицу cqw = 1% ширины оррерия. Без неё проценты
   у планет считались бы от нулевых .arm/.fix и схлопывались в ноль. */
.orrery{position:relative;aspect-ratio:1;max-width:600px;margin-inline:auto;width:100%;
  container-type:inline-size;
  /* Крутящийся квадрат отдаёт габаритный прямоугольник по диагонали — он
     шире контейнера и растягивал документ вбок. Клип с запасом: видимая
     часть круглая, а планетам нужно чуть выходить за кольцо. */
  overflow:clip;overflow-clip-margin:10cqw;
  animation:orreryIn 1.5s var(--ease-out) .1s both}
.orrery .ly{position:absolute;inset:0;width:100%;height:100%}
.orrery img.ly{object-fit:contain}
@keyframes orreryIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}

/* Кольцо знаков — из макета, крутится целиком. Ведический слой поверх
   стоит неподвижно: накшатры и кундали привязаны к карте, а не к небу. */
.orrery .ring{animation:spin 260s linear infinite}
.orrery .vedic{overflow:visible}
/* Фигура обрезана по свечению, поэтому задаём ей высоту напрямую
   и центрируем — object-fit тут только исказил бы пропорции. */
/* inset:auto обязан идти ПЕРЕД left/top: сокращённое свойство после
   длинных сбросило бы их обратно в auto, и фигура уезжала в угол. */
/* Фигуру центруем не по коробке, а по кундали. Слагаемых два: сдвиг самого
   ромба (translate 6/-7 в системе 600 = 1cqw / −1.17cqw) и перекос внутри
   файла — тело сидит на 9px левее геометрического центра из 481px ширины,
   это ещё 0.67cqw вправо. Держим числом, а не на глаз. */
.orrery .figure{--fx:1.67cqw;--fy:-1.17cqw;
  inset:auto;width:auto;height:68cqw;left:50%;top:50%;
  transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy)));
  animation:breathe 7s var(--ease-soft) infinite}
@keyframes breathe{
  0%,100%{opacity:.9;
    transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1)}
  50%{opacity:1;
    transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1.035)}}

/* Тела на орбитах. Три вложенных узла, у каждого одна задача:
   .orb крутит вокруг центра, .arm отводит на радиус, .fix гасит вращение,
   чтобы планета не кувыркалась. Иначе анимация и transform дерутся
   за одно свойство. */
.orrery .bodies{pointer-events:none}
.orb{position:absolute;inset:0;animation:spin var(--dur) linear infinite}
.arm{position:absolute;left:50%;top:50%;
  transform:rotate(var(--a)) translateY(calc(-1 * var(--r) * 1cqw))}
.fix{position:absolute;animation:spinrev var(--dur) linear infinite}
.fix img{display:block;width:calc(var(--w) * 1cqw);
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
/* На узком экране оррерий должен помещаться целиком вместе с запасом на
   вылет планет: 10cqw с каждой стороны — это ещё 20% ширины. Без этого
   правый край композиции уходил за экран. */
@media(max-width:960px){
  .orrery{max-width:min(440px,78vw);overflow-clip-margin:5cqw}
  .orrery .figure{height:62cqw}
}
@media(max-width:560px){
  .orrery{max-width:74vw}
}

/* ── секции ──────────────────────────────────────────────────────────────── */
section.block{padding-block:clamp(54px,9vh,116px)}
.head{max-width:64ch;margin-bottom:clamp(28px,5vh,50px)}
/* Надзаголовок секции. У бота и полосы для астрологов своя вёрстка, но
   надпись над заголовком должна быть той же, а не пилюлей из base.css. */
.head .tag,.bot-copy .tag,.split-copy .tag,.problem .tag{display:inline-block;font-family:var(--mono);font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  border:0;padding:0;margin-bottom:14px}
.head h2{font-family:var(--serif);font-weight:500;letter-spacing:-.024em;
  font-size:clamp(29px,4.6vw,50px);line-height:1.04}
.head p{margin-top:16px;color:var(--dim);font-size:var(--fs-lead)}

/* ── карточки «кто мы» ──────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
.about > div{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:var(--panel)}
.about h3{margin-bottom:9px}
.about p{color:var(--dim);font-size:14px}
.quote{margin-top:24px;border-left:2px solid var(--gold);padding:22px 26px;background:var(--panel);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.quote p{font-size:var(--fs-lead)}
.quote small{display:block;margin-top:12px;color:var(--faint);font-size:13px}


/* ── строка под кнопкой и под секцией ────────────────────────────────────── */
.hero-note{margin-top:14px;font-size:var(--fs-sm);color:var(--faint);max-width:46ch;
  animation:heroIn 1s var(--ease-out) .26s both}
.note-line{margin-top:20px;padding-left:16px;border-left:2px solid var(--gold-dim);
  color:var(--dim);font-size:var(--fs-sm);max-width:70ch}

/* ── бот ─────────────────────────────────────────────────────────────────
   Продолжение карты, а не второй оффер: об этом говорит и порядок блоков,
   и подпись под кнопкой. Телефон — компонент Telegram-Scenario из
   docs/design.md, пересобранный на токенах сайта. */
.bot-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.bot-grid{grid-template-columns:minmax(0,1fr)}}
.bot-copy h2{font-family:var(--serif);font-weight:500;letter-spacing:-.024em;
  font-size:clamp(29px,4.6vw,50px);line-height:1.04;margin:14px 0 16px}
.bot-copy h2 span{color:var(--gold)}
.bot-copy > p{color:var(--dim);font-size:var(--fs-lead);max-width:52ch}
.bot-list{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:11px}
.bot-list li{position:relative;padding-left:28px;color:var(--dim);font-size:14.5px}
.bot-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;
  border-radius:2px;background:var(--gold)}

.bot-visual{display:grid;place-items:center;position:relative}
.phone-shell{width:min(340px,84vw);padding:8px;border-radius:38px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
  box-shadow:0 40px 90px rgba(0,0,0,.5);transform:rotate(1.6deg)}
.phone{padding:12px 13px 18px;border-radius:31px;overflow:hidden;
  background:radial-gradient(circle at 50% 16%,rgba(216,169,58,.09),transparent 46%),
    linear-gradient(180deg,var(--panel-2),var(--bg-2));
  box-shadow:inset 0 1px rgba(255,255,255,.08)}
.phone-top{min-height:54px;padding:4px 7px 11px;display:grid;
  grid-template-columns:36px 1fr 16px;align-items:center;gap:10px;
  border-bottom:1px solid var(--line)}
.phone-top .avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--gold-soft);color:var(--gold);font-size:15px}
.phone-top > span:nth-child(2){min-width:0;display:flex;flex-direction:column;gap:4px}
.phone-top b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-top small{color:var(--green);font-size:9px}
.phone-top > i,.phone-top > i::before,.phone-top > i::after{
  width:3px;height:3px;border-radius:50%;background:var(--faint)}
.phone-top > i{position:relative}
.phone-top > i::before,.phone-top > i::after{content:"";position:absolute;left:0}
.phone-top > i::before{top:-6px}
.phone-top > i::after{top:6px}
.chat-date{width:max-content;margin:16px auto 13px;padding:4px 10px;border-radius:999px;
  color:var(--faint);background:rgba(255,255,255,.04);font-size:9px}
.msg{margin-bottom:11px;padding:15px 15px 13px;border-radius:17px 17px 17px 6px}
.msg-in{width:93%;background:var(--panel);box-shadow:0 12px 28px rgba(0,0,0,.2)}
.msg-out{width:95%;margin-left:auto;border-radius:17px 17px 6px 17px;
  background:linear-gradient(145deg,rgba(216,169,58,.16),rgba(154,140,240,.12));
  box-shadow:inset 0 1px rgba(255,255,255,.05)}
.msg small{display:block;margin-bottom:8px;color:var(--gold);font-size:8.5px;
  letter-spacing:.09em;text-transform:uppercase}
.msg b{display:block;font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.2}
.msg p{margin-top:8px;color:var(--dim);font-size:10.5px;line-height:1.55}
.phone-pulse{width:max-content;margin:18px auto 0;display:flex;align-items:center;gap:8px;
  color:var(--faint);font-size:9px}
.phone-pulse i{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 15px rgba(111,199,154,.7)}

/* ── два столбца: рассказ и список ответов ───────────────────────────────
   Слева объяснение, справа то, ради чего человек пришёл: свой вопрос
   в списке чужих. Нумерация мелкая и золотая — она держит ритм колонки,
   но не соревнуется с текстом за внимание. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:980px){.split{grid-template-columns:minmax(0,1fr)}}
.split-copy h2{font-family:var(--serif);font-weight:500;letter-spacing:-.024em;
  font-size:clamp(29px,4.6vw,50px);line-height:1.04;margin-bottom:18px}
.split-copy h2 span{color:var(--gold)}
.split-copy > p{color:var(--dim);font-size:var(--fs-lead);max-width:52ch;margin-bottom:14px}
.split-copy .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.answers{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--line)}
.answers li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-items:baseline;padding:15px 20px;background:var(--panel);
  font-size:14.5px;color:var(--dim);transition:background .3s,color .3s}
.answers li:hover{background:var(--panel-2);color:var(--ink)}
.answers i{font-family:var(--mono);font-style:normal;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;color:var(--gold);opacity:.75}

/* ── проблема ────────────────────────────────────────────────────────────
   Одна мысль, три числа и действие. Длинного текста здесь быть не должно:
   человек либо узнаёт свою ситуацию с первой строки, либо она не его. */
.problem{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(26px,4vw,52px);align-items:center;
  border:1px solid var(--gold-dim);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,46px);
  background:linear-gradient(150deg,rgba(216,169,58,.10),transparent 62%),var(--panel)}
@media(max-width:900px){.problem{grid-template-columns:minmax(0,1fr)}}
.problem h2{font-family:var(--serif);font-weight:500;letter-spacing:-.024em;
  font-size:clamp(27px,4.2vw,45px);line-height:1.05;margin-bottom:14px}
.problem h2 span{color:var(--gold)}
.problem-copy > p{color:var(--dim);font-size:var(--fs-lead);max-width:46ch}
.problem-facts{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.problem-facts div{max-width:19ch}
.problem-facts b{display:block;font-family:var(--serif);font-size:clamp(21px,2.6vw,28px);
  color:var(--gold);letter-spacing:-.02em}
.problem-facts span{font-size:var(--fs-xs);color:var(--faint)}
.problem-verdict{border-left:2px solid var(--gold);padding-left:22px}
@media(max-width:900px){.problem-verdict{border-left:0;padding-left:0;
  border-top:1px solid var(--line);padding-top:24px}}
.problem-verdict p{font-size:var(--fs-lead);margin-bottom:20px}
/* У .btn стоит white-space:nowrap, а колонка здесь узкая: без этого
   длинная кнопка выезжала за край блока. */
.problem-verdict .btn{width:100%;white-space:normal;text-align:center}
.problem-verdict small{display:block;margin-top:12px;color:var(--faint);font-size:var(--fs-xs)}

/* ── шаги ректификации ───────────────────────────────────────────────────
   Пять карточек в ряд на десктопе. Номер вынесен в кружок над заголовком:
   так карточки читаются как последовательность, а не как набор. */
.steps{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.steps li{position:relative;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  transition:border-color .35s,transform .35s var(--ease-out),opacity .8s}
.steps li:hover{border-color:var(--gold-dim);transform:translateY(-4px)}
.steps i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:16px;
  border-radius:50%;border:1px solid var(--gold-dim);background:var(--gold-soft);
  color:var(--gold);font-family:var(--mono);font-style:normal;font-size:14px;font-weight:700}
.steps h3{font-size:16px;margin-bottom:8px}
.steps p{color:var(--dim);font-size:13.5px}

/* ── предложение со скидкой ──────────────────────────────────────────────── */
.offer{margin-top:22px;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,44px);flex-wrap:wrap;
  border:1px solid var(--gold-dim);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,38px) clamp(24px,3.4vw,42px);
  background:linear-gradient(135deg,rgba(216,169,58,.14),rgba(154,140,240,.07))}
.offer-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.offer h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.8vw,32px);
  letter-spacing:-.02em;line-height:1.12}
.offer h3 b{color:var(--gold);font-weight:500;white-space:nowrap}
.offer-copy p:last-child{margin-top:11px;color:var(--dim);font-size:14.5px;max-width:56ch}
.offer-copy{flex:1 1 320px;min-width:0}
.offer-act{flex:0 1 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Значок скидки: единственное место на странице, где цифра набрана крупно
   и в рамке. Он и должен ловить взгляд первым. */
.offer-badge{display:grid;place-items:center;width:82px;height:82px;flex:0 0 auto;
  border-radius:50%;border:1px dashed var(--gold);color:var(--gold);
  font-family:var(--serif);font-size:25px;letter-spacing:-.02em;
  background:rgba(216,169,58,.09)}

/* ── большой подвал ──────────────────────────────────────────────────────── */
.bigfoot{position:relative;z-index:1;margin-top:clamp(40px,7vh,80px);
  border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:clamp(38px,6vh,66px) 26px}
.bigfoot-grid{display:grid;gap:clamp(24px,4vw,46px);
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@media(max-width:900px){.bigfoot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.bigfoot-grid{grid-template-columns:minmax(0,1fr)}}
.bigfoot-brand p{margin:16px 0 20px;color:var(--faint);font-size:13.5px;max-width:42ch}
.bigfoot-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:15px}
.bigfoot nav{display:flex;flex-direction:column;gap:11px}
.bigfoot nav a{color:var(--dim);font-size:14px;transition:color .2s}
.bigfoot nav a:hover{color:var(--ink)}
.bigfoot-note{color:var(--faint);font-size:13.5px}
.bigfoot-bottom{margin-top:clamp(30px,5vh,52px);padding-top:22px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--faint);font-size:var(--fs-xs)}

/* ── полоса с подарком ───────────────────────────────────────────────────
   Не модальное окно: ничего не перекрывает, закрывается одним нажатием.
   Почему именно так — в комментарии у gift() в index.html. */
.nudge{position:fixed;z-index:50;right:20px;bottom:20px;width:min(330px,calc(100vw - 40px));
  border:1px solid var(--gold-dim);border-radius:var(--r);padding:22px 22px 20px;
  background:linear-gradient(160deg,var(--panel-2),var(--bg-2));
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);
  transition:opacity .32s var(--ease-out),transform .32s var(--ease-out)}
.nudge.in{opacity:1;transform:none}
@media(max-width:560px){.nudge{right:12px;left:12px;bottom:12px;width:auto}}
.nudge-close{position:absolute;top:8px;right:10px;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;color:var(--faint);font-size:21px;line-height:1}
.nudge-close:hover{color:var(--ink);background:var(--panel)}
.nudge-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.nudge-title{font-family:var(--serif);font-size:21px;font-weight:500;
  letter-spacing:-.02em;line-height:1.15;margin-top:9px}
.nudge-text{margin:9px 0 16px;color:var(--dim);font-size:13.5px}
.nudge .btn{width:100%}

/* На телефоне длинные призывы не влезают в строку, а у .btn стоит
   white-space:nowrap. Разрешаем перенос и даём кнопке всю ширину:
   пальцу так точнее, чем по узкой пилюле. */
@media(max-width:560px){
  .hero .row > .btn,.split-copy .row > .btn,.bot-copy .row > .btn,.offer-act .btn{
    width:100%;white-space:normal;text-align:center}
  .offer-act{width:100%}
}