/* «Голосовое → бот»: холст на весь экран, поверх — короткие подписи сцен. Каждая секция прилипает (sticky),
   пока сцена играет, потом уезжает. Без WebGL (нет html.gl) — обычная лента текста. */
@font-face{font-family:Manrope;font-weight:500;src:url(../fonts/manrope-cyrillic-500.woff2) format('woff2');unicode-range:U+0400-04FF;font-display:swap}
@font-face{font-family:Manrope;font-weight:500;src:url(../fonts/manrope-latin-500.woff2) format('woff2');unicode-range:U+0000-03FF,U+2000-206F;font-display:swap}
@font-face{font-family:Manrope;font-weight:600;src:url(../fonts/manrope-cyrillic-600.woff2) format('woff2');unicode-range:U+0400-04FF;font-display:swap}
@font-face{font-family:Manrope;font-weight:600;src:url(../fonts/manrope-latin-600.woff2) format('woff2');unicode-range:U+0000-03FF,U+2000-206F;font-display:swap}
@font-face{font-family:Manrope;font-weight:700;src:url(../fonts/manrope-cyrillic-700.woff2) format('woff2');unicode-range:U+0400-04FF;font-display:swap}
@font-face{font-family:Manrope;font-weight:700;src:url(../fonts/manrope-latin-700.woff2) format('woff2');unicode-range:U+0000-03FF,U+2000-206F;font-display:swap}
@font-face{font-family:Manrope;font-weight:800;src:url(../fonts/manrope-cyrillic-800.woff2) format('woff2');unicode-range:U+0400-04FF;font-display:swap}
@font-face{font-family:Manrope;font-weight:800;src:url(../fonts/manrope-latin-800.woff2) format('woff2');unicode-range:U+0000-03FF,U+2000-206F;font-display:swap}

:root{
  --bg:#03080a;--ink:#eef8f5;--ink2:#a9bfba;--muted:#6f8a85;--mint:#8eeccf;--line:rgba(159,243,220,.14);--line2:rgba(159,243,220,.3);
  --ease:cubic-bezier(.23,1,.32,1);--pad:clamp(16px,4vw,56px);--maxw:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;font:500 17px/1.6 Manrope,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip;
  background:radial-gradient(60% 50% at 70% 40%,rgba(36,120,104,.22),transparent 70%),var(--bg)}
a{color:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);width:100%}

.gl-c{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;display:block;z-index:0;opacity:0;transition:opacity 1.6s var(--ease);pointer-events:none}
html.gl .gl-c{opacity:1}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,7,.78),rgba(3,6,7,.42) 30%,rgba(3,6,7,0) 50%),radial-gradient(120% 95% at 60% 45%,transparent 55%,rgba(2,6,8,.7) 100%)}
@media (max-aspect-ratio:115/100){.vig{background:radial-gradient(120% 95% at 50% 35%,transparent 55%,rgba(2,6,8,.7) 100%)}}

/* шапка */
.hd{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top);isolation:isolate}
.hd::before{content:"";position:absolute;inset:0 0 -36px;z-index:-1;background:linear-gradient(rgba(3,8,10,.92) 45%,rgba(3,8,10,0));pointer-events:none}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand{display:flex;align-items:center;gap:12px;font:800 16px Manrope,system-ui,sans-serif;text-decoration:none}
.mono{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--mint);font:800 14px/1 Manrope,system-ui,sans-serif;color:var(--mint);box-shadow:0 0 22px rgba(142,236,207,.18) inset}

/* кнопки */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;border-radius:999px;font:800 17px Manrope,system-ui,sans-serif;white-space:nowrap;text-decoration:none;transition:background 300ms var(--ease),box-shadow 400ms var(--ease),transform 200ms var(--ease),border-color 300ms var(--ease),color 300ms var(--ease)}
.btn:active{transform:scale(.97)}
.btn.main{background:var(--mint);color:#04140f;box-shadow:0 0 0 1px rgba(142,236,207,.4),0 10px 40px -10px rgba(142,236,207,.55)}
.btn.main:hover{background:#b3f5e1;box-shadow:0 0 0 1px rgba(179,245,225,.6),0 14px 60px -8px rgba(142,236,207,.7)}
.btn.ghost{border:1.5px solid var(--line2);color:var(--ink);background:rgba(3,8,10,.4)}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn.sm{min-height:46px;padding:0 20px;font-size:15px}
.btn .arr{display:inline-block;transition:transform 300ms var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* сцены */
main{position:relative;z-index:2}
.sc{position:relative}
.pin{display:flex;align-items:center;padding:110px 0 70px}
.txt{max-width:min(38vw,560px)}
.eb{font:800 13px/1 Manrope,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:26px}
h1{font:800 clamp(42px,5.4vw,86px)/1.02 Manrope,system-ui,sans-serif;letter-spacing:-.045em}
h2{font:800 clamp(34px,4.2vw,64px)/1.04 Manrope,system-ui,sans-serif;letter-spacing:-.04em}
h1 .ln,h2 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
h1 .ln>span,h2 .ln>span{display:inline-block}
.m{background:linear-gradient(100deg,#8eeccf 10%,#d6fff2 50%,#5fd1b4 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.txt>p:not(.eb):not(.no):not(.cue):not(.note){margin-top:22px;font-size:clamp(17px,1.35vw,20px);color:var(--ink2);max-width:32ch}
.lead{max-width:30ch}
.no{display:flex;align-items:baseline;gap:14px;margin-bottom:20px;font:800 13px/1 Manrope,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}
.no b{font:800 46px/1 Manrope,system-ui,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.4px var(--mint)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.cue{display:flex;align-items:center;gap:12px;margin-top:40px;font-size:14px;color:var(--muted)}
.cue i{position:relative;width:22px;height:34px;border:1.5px solid var(--line2);border-radius:12px}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--mint);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}
.note{margin-top:18px;font-size:14px;color:var(--muted)}

/* шаги справа */
.steps{position:fixed;left:50%;bottom:28px;z-index:15;display:flex;gap:30px;padding:12px 22px;border-radius:999px;border:1px solid var(--line);background:rgba(3,8,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateX(-50%);opacity:0;transition:opacity 600ms var(--ease)}
html.gl .steps.show{opacity:1}
.steps a{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color 400ms var(--ease)}
.steps i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line2);transition:all 400ms var(--ease)}
.steps a.on{color:var(--ink)}
.steps a.on i{background:var(--mint);border-color:var(--mint);box-shadow:0 0 14px var(--mint)}
.steps a.done i{border-color:var(--mint)}

/* подвал */
.ft{position:relative;z-index:2;padding:40px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(3,8,10,.85);font-size:13px;color:var(--muted)}
.ft .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px}
.ft a{color:var(--ink2)}

/* режим 3D: секции прилипают, подписи проявляются */
html.gl .sc{height:170vh;height:170svh}
html.gl .sc.fin{height:100vh;height:100svh}
html.gl .pin{position:sticky;top:0;height:100vh;height:100svh;padding:0}
html.gl .rv{opacity:0;transform:translateY(18px);transition:opacity 500ms var(--ease),transform 600ms var(--ease)}
html.gl .sc.on .rv{opacity:1;transform:none;transition:opacity 900ms var(--ease),transform 1100ms var(--ease);transition-delay:var(--d,0ms)}
html.gl h1 .ln>span,html.gl h2 .ln>span{transform:translateY(110%);transition:transform 600ms var(--ease)}
html.gl .sc.on h1 .ln>span,html.gl .sc.on h2 .ln>span{transform:none;transition:transform 1100ms var(--ease)}
html.gl .sc.on .ln+.ln>span{transition-delay:90ms}
html:not(.gl) .sc{padding:40px 0}

/* узкий экран и портрет: объект сверху, текст снизу */
@media (max-aspect-ratio:115/100){
  .steps{display:none}
  .txt{max-width:640px}
  html.gl .pin{align-items:flex-end}
  html.gl .pin .wrap{padding-bottom:max(6vh,calc(28px + env(safe-area-inset-bottom)))}
  html.gl .pin::before{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(transparent,rgba(3,8,10,.88) 45%);pointer-events:none}
  .pin .wrap{position:relative}
}
@media (max-width:719px){
  .hd .wrap{height:70px}
  .brand .nm{display:none}
  .btn{min-height:54px;padding:0 24px;font-size:16px}
  .btn.sm{min-height:42px;padding:0 16px;font-size:14px}
  h1{font-size:clamp(34px,9.6vw,46px)}
  h2{font-size:clamp(30px,8.4vw,40px)}
  .eb{margin-bottom:16px;font-size:12px}
  .no{margin-bottom:14px}
  .no b{font-size:36px}
  .txt>p:not(.eb):not(.no):not(.cue):not(.note){margin-top:14px;font-size:16px}
  .cta{margin-top:22px}
  .cta .btn{width:100%}
  .cue{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  html.gl .rv,html.gl h1 .ln>span,html.gl h2 .ln>span{transition:none!important}
}