/* =============================================================
   Calorin — landing page styles
   Тёмная тема, зелёный акцент. Фиолетовый зарезервирован
   под AI-ассистентов, янтарный — под акценты.
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  --bg:#08080A;
  --bg-2:#0C0C0F;
  --surface:#141418;
  --surface-2:#1C1C22;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  --text:#F4F4F6;
  --dim:#A2A2AE;
  --faint:#6C6C78;

  /* основной акцент */
  --green:#4ADE80;
  --green-2:#34D06A;
  --green-deep:#16A34A;
  --green-glow:rgba(74,222,128,.42);

  /* вторичный акцент — только для AI-линии */
  --violet:#A78BFA;
  --violet-2:#8B5CF6;
  --violet-deep:#7C3AED;

  --amber:#FBBF24;

  --maxw:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:90px; /* чтобы якорь не уезжал под липкую шапку */
}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Golos Text",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;line-height:1.6;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
::selection{background:var(--green-deep);color:#fff}

:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}

/* ---------- 3. Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.ico{width:22px;height:22px;fill:none;stroke:currentColor}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}

/* ---------- 3a. Фоновое свечение и зерно ---------- */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-fx::before,.bg-fx::after{content:"";position:absolute;border-radius:50%;filter:blur(120px)}
.bg-fx::before{width:640px;height:640px;top:-220px;left:50%;transform:translateX(-60%);
  background:radial-gradient(circle,rgba(74,222,128,.24),transparent 70%)}
.bg-fx::after{width:520px;height:520px;top:420px;right:-160px;
  background:radial-gradient(circle,rgba(124,58,237,.12),transparent 70%)}
.grain{position:fixed;inset:0;z-index:-1;opacity:.035;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1px);background-size:3px 3px}

/* ---------- 4. Header: плавающая «пилюля» ---------- */
header{position:sticky;top:0;z-index:50;padding:14px 20px;background:transparent}
.navpill{position:relative;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:18px;
  height:58px;padding:0 10px 0 22px;border-radius:999px;
  background:#F5F5F1;border:1px solid rgba(0,0,0,.06);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.6)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:19px;color:#0b0b0d}
.logo{height:24px;width:auto;aspect-ratio:110/32;flex:none;display:block}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto}
.nav-links a{color:#3d3d44;font-size:14.5px;font-weight:600;transition:color .2s}
.nav-links a:hover{color:#0b0b0d}
.nav-actions{display:flex;align-items:center;gap:9px}

/* переключатель языка: кнопка с кодом + выпадающий список */
.lang{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:700;color:#0b0b0d;letter-spacing:.02em;
  transition:background .18s,border-color .18s}
.lang-btn:hover{background:#F0F0EC;border-color:rgba(0,0,0,.2)}
.lang-globe{width:16px;height:16px;flex:none;opacity:.65}

.lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:6px;
  list-style:none;min-width:168px;border-radius:16px;
  background:#F5F5F1;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s,transform .18s}
.lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:block;padding:9px 12px;border-radius:11px;
  font-size:14.5px;font-weight:600;color:#3d3d44;transition:background .16s,color .16s}
.lang-menu a:hover{background:rgba(0,0,0,.05);color:#0b0b0d}
.lang-menu a[aria-selected="true"]{background:var(--green);color:#04140A}

@media(max-width:420px){
  .lang-btn{padding:0 10px}
  .lang-btn span{display:none}   /* на узких экранах остаётся только глобус */
  .lang-globe{width:18px;height:18px;opacity:.8}
}

/* На 360px (iPhone SE и подобные) логотип, глобус, кнопка и бургер
   переставали помещаться в «пилюлю» и вылезали за край экрана. */
/* Кнопка языка стоит слева от CTA, поэтому список, прижатый вправо,
   уходил за левый край экрана — на узких раскрываем его вправо. */
@media(max-width:480px){
  .lang-menu{left:0;right:auto}
}

@media(max-width:400px){
  header{padding:12px 12px}
  .navpill{gap:10px;padding:0 8px 0 16px}
  .nav-actions{gap:6px}
  .btn-cta{padding:0 13px;height:36px;font-size:13.5px}
  .lang-btn{height:36px;padding:0 9px}
  .nav-burger{width:36px;height:36px}
  .brand{font-size:17px}
  .logo{height:21px}
}

/* Ниже 350px «Ранний доступ» в шапке уже не помещается рядом с
   логотипом и бургером. Убираем его — та же кнопка есть в первом
   экране сразу под шапкой. */
@media(max-width:349px){
  .nav-actions .btn-cta{display:none}
}

.nav-burger{display:none;width:40px;height:40px;flex:none;border-radius:50%;
  border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{display:block;width:16px;height:2px;background:#0b0b0d;border-radius:2px;
  transition:transform .22s,opacity .22s}
header.open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
header.open .nav-burger span:nth-child(2){opacity:0}
header.open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:820px){
  .nav-burger{display:flex}
  .nav-links{position:absolute;top:calc(100% + 10px);left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;border-radius:24px;
    background:#F5F5F1;border:1px solid rgba(0,0,0,.06);
    box-shadow:0 26px 54px -22px rgba(0,0,0,.85);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s}
  header.open .nav-links{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:12px 14px;border-radius:14px;font-size:15px}
  .nav-links a:hover{background:rgba(0,0,0,.05)}
}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:11px 20px;border-radius:12px;cursor:pointer;border:0;
  transition:transform .18s var(--ease),box-shadow .25s,background .2s;
}
/* фирменный вариант — монохромная инверсия: белая кнопка, чёрный текст */
.btn-primary{background:var(--text);color:#000}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(74,222,128,.28)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}

.btn-cta{background:var(--green);color:#052012;padding:10px 18px;border-radius:999px;
  font-weight:800;font-size:14.5px;letter-spacing:-.01em;display:inline-flex;align-items:center;
  white-space:nowrap;border:0;cursor:pointer;transition:transform .18s var(--ease),box-shadow .25s}
.btn-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(74,222,128,.45)}

/* ---------- 5a. Кнопки магазинов приложений ---------- */
.stores{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:11px;padding:9px 17px 9px 15px;
  border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:var(--text);transition:background .2s,border-color .2s,transform .18s var(--ease)}
.store:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24);transform:translateY(-1px)}
.store-ic{width:24px;height:24px;flex:none;display:block;color:var(--text)}
.store span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store small{font-size:10.5px;color:var(--dim);letter-spacing:.02em}
.store b{font-size:15px;font-weight:700;letter-spacing:-.01em}
/* пока ссылок на магазины нет — кнопка ведёт к раннему доступу */
.store[data-soon]{cursor:pointer}
.final .stores{justify-content:center}

/* ---------- 5b. Баннер загрузки на телефонах ---------- */
.appbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:60;
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border-radius:20px;background:rgba(20,20,24,.92);border:1px solid var(--line-2);
  box-shadow:0 24px 50px -18px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transform:translateY(140%);transition:transform .38s var(--ease)}
.appbar.show{transform:none}
.appbar-ic{width:44px;height:44px;flex:none;border-radius:12px;display:block}
.appbar-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.appbar-txt b{font-size:15px;font-weight:700}
.appbar-txt span{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-cta{flex:none;background:var(--green);color:#052012;font-weight:800;font-size:13.5px;
  padding:9px 15px;border-radius:999px;white-space:nowrap}
.appbar-x{flex:none;width:26px;height:26px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.08);color:var(--dim);font-size:17px;line-height:1;
  display:grid;place-items:center;padding:0}
.appbar-x:hover{color:var(--text)}

/* Баннер — только для телефонов; на десктопе роль магазинов
   играют кнопки .stores в первом экране. */
@media(min-width:821px){.appbar{display:none}}
/* пока баннер виден, нижняя кнопка не должна упираться в него */
@media(max-width:820px){body.has-appbar footer{padding-bottom:96px}}

/* ---------- 6. Hero ---------- */
.hero{position:relative;padding:32px 0 60px}
.hero-copy{padding-top:32px;position:relative;z-index:6}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero-grid>*{min-width:0}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}

h1{font-size:clamp(32px,7.2vw,48px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:0;text-wrap:balance}
h1 .hl{color:var(--green)}
.lede{color:var(--dim);font-size:17px;margin:18px 0 0;max-width:40ch;line-height:1.55}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;position:relative;z-index:7}

/* ---------- 7. Device mockups ---------- */
/* большая рамка (iPhone Pro Max) — hero */
.phone{
  position:relative;z-index:3;width:100%;max-width:340px;margin:0 auto;aspect-ratio:9/19.5;
  border-radius:58px;padding:8px;
  background:linear-gradient(145deg,#f7b274 0%,#c26025 16%,#6f3612 50%,#c26025 84%,#f7b274 100%);
  box-shadow:0 55px 110px -32px rgba(0,0,0,.92),0 0 0 1px rgba(60,26,8,.6),
    inset 0 0 0 1.5px rgba(255,222,186,.35),0 0 80px -22px rgba(240,132,52,.5);
}
.screen{position:relative;height:100%;width:100%;border-radius:50px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%,#141d18,#0A0A0C 60%);display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 2px #000}
.screen.shot{background:#000;display:block}
.screen-img{width:100%;height:100%;object-fit:cover;display:block}

/* титановые боковые кнопки */
.pbtn{position:absolute;background:linear-gradient(180deg,#e2954f,#7e3e17);
  box-shadow:inset 0 1px 0 rgba(255,222,186,.45),inset 0 -1px 0 rgba(0,0,0,.4)}
.pbtn.l{left:-2.5px;width:3px;border-radius:2px 0 0 2px}
.pbtn.r{right:-2.5px;width:3px;border-radius:0 2px 2px 0}
.btn-action{top:20%;height:30px}
.btn-volup{top:31%;height:50px}
.btn-voldn{top:44%;height:50px}
.btn-power{top:29%;height:92px}

/* маленькая рамка — карточки «четыре шага» */
.pmini{position:relative;width:166px;flex:none;border-radius:28px;padding:6px;
  background:linear-gradient(155deg,#2b2b33,#141419);
  box-shadow:0 26px 50px -22px #000,inset 0 0 0 1px rgba(255,255,255,.06)}
.pm-scr{border-radius:22px;overflow:hidden;background:#000;aspect-ratio:1170/2532}
.pm-scr img{width:100%;height:auto;display:block}

/* средняя рамка — блоки «Инструменты» и «Вместе» */
.chatphone{position:relative;z-index:1;width:100%;max-width:312px;border-radius:46px;padding:9px;
  background:linear-gradient(155deg,#33333c,#131318);
  box-shadow:0 46px 90px -34px #000,inset 0 0 0 1px rgba(255,255,255,.07)}
.chatphone .scr{position:relative;border-radius:38px;overflow:hidden;background:#000;aspect-ratio:1170/2532}
.chatphone .scr img{width:100%;height:auto;display:block}

/* ---------- 8. Convert band: «проговорил → записалось» ---------- */
.marquee{margin-top:26px;overflow:hidden;position:relative;z-index:5}
@media(min-width:901px){.marquee{margin-top:-480px}}
#band-svg{display:block;width:100%;height:auto}
/* На узких экранах не ужимаем ленту до ширины окна — иначе подписи
   становятся нечитаемыми (7px). Держим фиксированную ширину и
   показываем середину: лента и так задумана уходящей за края. */
@media(max-width:900px){
  #band-svg{width:800px;max-width:none;margin-left:50%;transform:translateX(-50%)}
}
#band-svg text{font-family:"Golos Text",system-ui,sans-serif;font-weight:600;font-size:34px;dominant-baseline:middle}
#spoken text{fill:#85858f}
#logged text{fill:#fff}
.ribbon{fill:none;stroke:#5227FF;stroke-linecap:round;stroke-linejoin:round}
.pill-bg{fill:var(--surface);stroke:var(--line-2);stroke-width:1.5}
#band-svg .scan-label{fill:#04140A;font-family:"Golos Text",system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:.03em}
.mesh{opacity:.95}
.scan-line{fill:#c4c9d2;opacity:.5}
.brackets path{fill:none;stroke:rgba(4,20,10,.65);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

/* ---------- 9. Section scaffold ---------- */
section{position:relative;padding:96px 0}
.sec-head{max-width:660px;margin:0 auto 56px;text-align:center}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:14px 0 0;text-wrap:balance}
.sec-head p{color:var(--dim);font-size:18px;margin:16px 0 0}

/* ---------- 10. Core loop: четыре шага ---------- */
.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:860px){.loop{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.loop{grid-template-columns:1fr}}

.loop>*{min-width:0}
.step{position:relative;padding:24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.step .num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--green);font-weight:600;
  display:flex;align-items:center;gap:7px}
.step h3{font-size:19px;font-weight:700;margin:14px 0 6px;letter-spacing:-.02em}
.step p{color:var(--dim);font-size:14.5px;margin:0}
.step::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--green-glow),transparent 70%);opacity:.3}

/* подложка со скриншотом внутри карточки */
.lshot{position:relative;z-index:1;margin:-24px -24px 18px;padding:26px 0 22px;overflow:hidden;
  display:flex;justify-content:center;
  background:radial-gradient(130% 80% at 50% 0,#131319,#0a0a0e);border-bottom:1px solid var(--line)}

/* каскадное появление четырёх карточек */
.loop .step{transform:translateY(30px)}
.loop .step.in{transform:none}
.loop .step:nth-child(1){transition-delay:.05s}
.loop .step:nth-child(2){transition-delay:.16s}
.loop .step:nth-child(3){transition-delay:.27s}
.loop .step:nth-child(4){transition-delay:.38s}
@media(prefers-reduced-motion:reduce){.loop .step{transform:none;transition:none}}

/* ---------- 11. Tools: чередующиеся строки визуал / текст ---------- */
.tools{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-rows{display:flex;flex-direction:column;gap:26px}
.feat-row{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 42%),var(--surface);
  border:1px solid var(--line);border-radius:28px;padding:30px;
  box-shadow:0 28px 56px -34px rgba(0,0,0,.9)}
.feat-row.flip .feat-visual{order:2}
.feat-row>*{min-width:0}
.feat-visual{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.feat-visual>*{position:relative;z-index:1}

.feat-tag{display:inline-flex;align-items:center;gap:11px;margin-bottom:18px}
.feat-tag span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.feat-text h3{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
.feat-text h3 .hl{color:var(--green)}
.feat-text .lead{color:var(--dim);font-size:16.5px;line-height:1.55;margin:15px 0 0}

.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:13px 22px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text);font-weight:500;line-height:1.35}
.checks .ico{width:20px;height:20px;flex:none;color:var(--green);margin-top:1px}

@media(max-width:860px){
  .feat-row{grid-template-columns:1fr;gap:26px;padding:22px}
  .feat-row.flip .feat-visual{order:0}
  .feat-text h3{font-size:25px}
  .checks{grid-template-columns:1fr;gap:11px}
}

/* 11a. «Ваша диета» — карточка, накрывающая телефон */
/* внутри составных блоков рамка чуть уже, чтобы осталось место орбитам/карточке */
.diet-compose .chatphone,
.rnd-compose .chatphone{max-width:264px}

.diet-compose{position:relative;display:flex;justify-content:center;width:100%}
.diet-float{position:absolute;right:-6px;bottom:34px;width:58%;max-width:250px;height:auto;display:block;
  border-radius:16px;border:1px solid var(--line-2);z-index:3;
  box-shadow:0 34px 66px -22px rgba(0,0,0,.92)}
@media(max-width:860px){
  /* карточка встаёт под телефон, а не поверх него — значит и контейнер
     должен стать колонкой, иначе телефон схлопывается в полоску */
  .diet-compose{flex-direction:column;align-items:center}
  .diet-compose .chatphone{width:100%;max-width:300px}
  .diet-float{position:static;width:100%;max-width:340px;margin:18px auto 0}
}

/* 11b. Интервальное голодание — живой виджет */
.fastcard{position:relative;background:#6f9bf0;border-radius:30px;padding:28px 28px 26px;
  color:#0d1424;width:100%;max-width:430px;margin:0 auto;overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(111,155,240,.6),0 2px 0 rgba(255,255,255,.28) inset;
  transition:background .5s ease}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fc-title{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1}
.fc-clock{width:26px;height:26px;flex:none;display:block}
.fc-until{font-size:16px;font-weight:600;color:#0d1424;opacity:.8;white-space:nowrap;font-variant-numeric:tabular-nums}
.fc-timer{font-size:47px;font-weight:800;letter-spacing:-.02em;line-height:1;
  margin:18px 0 13px;font-variant-numeric:tabular-nums}
.fc-desc{font-size:16px;line-height:1.42;font-weight:500;margin:0;max-width:33ch;color:#0d1424;opacity:.95}
.fc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.fc-btn{font:inherit;font-weight:800;font-size:16px;padding:14px 24px;border-radius:999px;
  border:0;cursor:pointer;line-height:1;transition:transform .12s var(--ease),filter .15s,background .2s,color .2s}
.fc-btn:active{transform:scale(.955)}
.fc-btn:focus-visible{outline:2px solid #0d1424;outline-offset:2px}
.fc-btn.ghost{background:#fff;color:#0d1424}
.fc-btn.ghost:hover{filter:brightness(.93)}
.fc-btn.dark{background:#141821;color:#fff}
.fc-btn.dark:hover{filter:brightness(1.6)}
/* состояние «пост завершён» */
.fastcard.done{background:#8fd6a6}
.fastcard.done .fc-btn.dark{background:#0f2417}
/* тост «коуч печатает» */
.fc-toast{position:absolute;left:28px;right:28px;bottom:26px;background:#141821;color:#fff;
  font-size:14px;font-weight:600;padding:12px 16px;border-radius:14px;display:flex;align-items:center;gap:9px;
  transform:translateY(140%);opacity:0;transition:transform .34s var(--ease),opacity .34s;pointer-events:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.fc-toast.show{transform:translateY(0);opacity:1}
.fc-dots{display:inline-flex;gap:3px}
.fc-dots i{width:5px;height:5px;border-radius:50%;background:#6f9bf0;animation:fcdot 1s var(--ease) infinite}
.fc-dots i:nth-child(2){animation-delay:.16s}
.fc-dots i:nth-child(3){animation-delay:.32s}
@keyframes fcdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.fc-dots i{animation:none}}

/* 11c. «Что поесть?» — блюда на орбите вокруг телефона */
.rnd-compose{position:relative;width:264px;max-width:100%;margin:0 auto;--rx:150px;--ry:232px}
.rnd-compose .chatphone{position:relative;z-index:2}
.food-orb{position:absolute;left:50%;top:50%;display:block;height:auto;pointer-events:none;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));will-change:transform;
  animation:orbit var(--dur,24s) linear var(--del,0s) infinite}
.food-orb.o1{width:88px;--del:0s}
.food-orb.o2{width:94px;--del:-6s}
.food-orb.o3{width:82px;--del:-12s}
.food-orb.o4{width:90px;--del:-18s}
/* орбита: ближняя (нижняя) дуга — перед телефоном, дальняя (верхняя) — за ним */
@keyframes orbit{
  0%    {transform:translate(calc(-50% + var(--rx)), -50%);                                  z-index:3}
  12.5% {transform:translate(calc(-50% + var(--rx) * .707), calc(-50% + var(--ry) * .707));  z-index:3}
  25%   {transform:translate(-50%, calc(-50% + var(--ry)));                                  z-index:3}
  37.5% {transform:translate(calc(-50% - var(--rx) * .707), calc(-50% + var(--ry) * .707));  z-index:3}
  50%   {transform:translate(calc(-50% - var(--rx)), -50%);                                  z-index:3}
  50.01%{z-index:1}
  62.5% {transform:translate(calc(-50% - var(--rx) * .707), calc(-50% - var(--ry) * .707));  z-index:1}
  75%   {transform:translate(-50%, calc(-50% - var(--ry)));                                  z-index:1}
  87.5% {transform:translate(calc(-50% + var(--rx) * .707), calc(-50% - var(--ry) * .707));  z-index:1}
  99.99%{z-index:1}
  100%  {transform:translate(calc(-50% + var(--rx)), -50%);                                  z-index:3}
}
/* Радиус орбиты должен превышать половину ширины рамки, иначе блюда
   оказываются не вокруг телефона, а поверх его экрана. */
@media(max-width:860px){
  .rnd-compose{width:100%;max-width:300px;--rx:134px;--ry:210px}
  .rnd-compose .chatphone{max-width:224px}
  .food-orb.o1{width:60px}.food-orb.o2{width:64px}.food-orb.o3{width:56px}.food-orb.o4{width:62px}
}
@media(max-width:520px){
  .rnd-compose{--rx:122px;--ry:184px}
  .rnd-compose .chatphone{max-width:196px}
  .food-orb.o1{width:54px}.food-orb.o2{width:58px}.food-orb.o3{width:50px}.food-orb.o4{width:56px}
}
@media(prefers-reduced-motion:reduce){
  .food-orb{animation:none}
  .food-orb.o1{transform:translate(calc(-50% + var(--rx)), -50%);z-index:3}
  .food-orb.o2{transform:translate(-50%, calc(-50% + var(--ry)));z-index:3}
  .food-orb.o3{transform:translate(calc(-50% - var(--rx)), -50%);z-index:1}
  .food-orb.o4{transform:translate(-50%, calc(-50% - var(--ry)));z-index:1}
}

/* ---------- 12. Pair power: AI-ассистенты и живые люди ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split>*{min-width:0}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}}

.split-lede{color:var(--dim);font-size:18px;margin-top:16px}

.chatstage{position:relative;display:flex;justify-content:center}
.chatstage::before{content:"";position:absolute;inset:-6% -4%;z-index:0;
  background:radial-gradient(60% 45% at 50% 22%,rgba(124,58,237,.22),transparent 70%),
             radial-gradient(55% 40% at 50% 82%,rgba(74,222,128,.16),transparent 72%);
  filter:blur(6px)}

.feat-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:18px}
.feat-list li{display:flex;gap:14px}
.feat-list .k{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.28);color:var(--green)}
.feat-list b{font-weight:700;font-size:16px}
.feat-list span{color:var(--dim);font-size:14.5px;display:block;margin-top:2px}

/* ---------- 13. Final CTA ---------- */
.final{text-align:center}
.final .card{position:relative;overflow:hidden;border-radius:32px;padding:72px 32px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(74,222,128,.24),transparent 55%),var(--surface);
  border:1px solid var(--line-2)}
.final h2{max-width:18ch;margin:20px auto 0}
.final p{color:var(--dim);max-width:46ch;margin:16px auto 0}
.final .hero-cta{justify-content:center;margin-top:30px}
.spark-lg{width:44px;height:44px;margin:0 auto;display:block;filter:drop-shadow(0 0 18px rgba(74,222,128,.6))}

/* ---------- 14. Footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:13.5px}
.foot .brand{font-size:16px;color:var(--text)}
.foot .logo{height:22px}

/* ---------- 15. Scroll reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}