/* ── Шрифты: Unbounded (кириллица, ультра-жирный display) + Manrope (текст) ── */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/unbounded-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/unbounded-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ── Шрифты локально: без обращения к fonts.googleapis.com.
   Быстрее (нет лишних DNS+TLS), работает даже если Google недоступен. ── */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ══════════════════════════════════════════════════════════════
   ACID NOIR — дизайн-система
   База: near-black + один кислотный акцент (Von Restorff: акцент
   используется ТОЛЬКО на действиях, поэтому взгляд всегда знает,
   куда нажимать). Контраст всех пар проверен на WCAG AA (4.5:1+).
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#08090A;
  --bg-2:#0D0F10;
  --surface:#101314;
  --surface-2:#161A1B;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#F2F3F0;
  --ink-2:#A8ACA6;
  --ink-3:#71766F;
  --acid:#D6FF3E;
  --acid-2:#B8E62B;
  --acid-soft:rgba(214,255,62,.13);

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Unbounded','Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
  --r:14px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s var(--ease);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:clamp(15px,.55vw + 13px,17px);line-height:1.6;
  font-weight:400;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--acid);color:#000}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--acid);color:#000;padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* ── Зерно и световой след курсора: «премиум»-фактура ── */
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}
.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:0;pointer-events:none;
  margin:-260px 0 0 -260px;border-radius:50%;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(214,255,62,.10) 0%,rgba(214,255,62,.04) 40%,transparent 70%);
  transform:translate3d(var(--mx,50vw),var(--my,50vh),0);
}
body.has-cursor .cursor-glow{opacity:1}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.acid{color:var(--acid)}
.link-acid{color:var(--acid);border-bottom:1px solid var(--acid-soft);transition:border-color .3s}
.link-acid:hover{border-color:var(--acid)}

/* ── Появление при скролле (Intersection Observer, stagger 60-80мс) ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease) var(--d,0s),transform .75s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* Без JS и при prefers-reduced-motion контент обязан быть виден сразу.
   Селекторы перечислены явно: у .hero__title .reveal своя специфичность,
   и без этого заголовок остался бы прозрачным — пустой экран. */
.no-js .reveal,.no-js .hero__title .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal,.hero__title .reveal,.hero__title .reveal.in{opacity:1!important;transform:none!important}
  .acid-block::after{transform:none!important;width:100%!important}
}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  font-family:inherit;font-size:.96rem;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;position:relative}
.btn--acid{background:var(--acid);color:#07080A;border-color:var(--acid)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--acid:hover{background:#E4FF6B;box-shadow:0 10px 40px -8px rgba(214,255,62,.45)}
.btn--ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--acid);color:var(--acid);background:var(--acid-soft)}
.btn--sm{padding:11px 19px;font-size:.88rem}
.btn--lg{padding:19px 34px;font-size:1.06rem}
.btn--full{width:100%}
.btn:active{transform:scale(.97)}

/* ── Заголовки секций ── */
section{position:relative;z-index:2}
.section-kicker{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:22px;
}
.section-h{
  font-size:clamp(1.7rem,4.2vw,3.4rem);font-weight:800;font-family:var(--display);line-height:.98;letter-spacing:-.012em;
  /* при таком тесном трекинге слова склеиваются — возвращаем воздух между ними */
  word-spacing:.055em;
  margin-bottom:26px;
}
/* balance не даёт последней строке остаться из одного символа —
   иначе кислотная точка улетает на строку одна, как опечатка */
/* только прямые дети — иначе вложенный <span class="acid">.</span>
   тоже становится блоком и точка уезжает на отдельную строку */
.section-h > span{display:block;text-wrap:balance}
.section-lead{max-width:62ch;color:var(--ink-2);font-size:clamp(1rem,1.1vw + .6rem,1.2rem);margin-bottom:46px}
.section-lead b,.trust__note b{color:var(--ink);font-weight:600}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:14px var(--pad);
  background:rgba(8,9,10,.55);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s,padding .4s;
}
.nav.solid{border-bottom-color:var(--line);background:rgba(8,9,10,.86);padding-top:10px;padding-bottom:10px}
.nav__logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;letter-spacing:0;font-size:.92rem;white-space:nowrap}
.nav__mark{width:11px;height:11px;background:var(--acid);border-radius:2px;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.55}}
.nav__links{display:flex;gap:26px;font-size:.92rem;color:var(--ink-2);font-weight:500}
.nav__links a{position:relative;padding:4px 0;transition:color .3s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--acid);transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
@media(max-width:900px){.nav__links{display:none}}

/* ══════════ HERO ══════════ */
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 0;overflow:hidden;
}
.hero__glow{
  position:absolute;top:-24%;left:50%;transform:translateX(-50%);
  width:min(1200px,130vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(214,255,62,.10) 0%,rgba(214,255,62,.03) 38%,transparent 66%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.hero__inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%;position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center}
.eyebrow{
  /* inline-block, а не flex: во flex каждый текстовый фрагмент становится
     отдельным элементом, и на узком экране строка рассыпается «лестницей» */
  display:inline-block;align-self:flex-start;line-height:1.5;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:8px 16px;margin-bottom:30px;
  background:rgba(255,255,255,.02);
}
.eyebrow b{color:var(--acid);font-weight:500}
@media(max-width:440px){
  /* чтобы плашка держалась в одну строку на узких экранах */
  .eyebrow{font-size:.66rem;letter-spacing:.02em;padding:7px 13px}
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 0 rgba(214,255,62,.6);animation:ping 2.2s infinite;display:inline-block;vertical-align:middle;margin-right:9px}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(214,255,62,.55)}70%{box-shadow:0 0 0 11px rgba(214,255,62,0)}100%{box-shadow:0 0 0 0 rgba(214,255,62,0)}}

/* Кинетическая типографика: главный носитель «вау». Текст, а не картинка,
   поэтому LCP — мгновенный, и он же читается поисковиками и LLM. */
.hero__title{
  /* Базовый размер — на случай отключённого JS. Дальше fitLines() в app.js
     подгоняет каждую строку точно по ширине контейнера: буквы упираются
     в края, как в печатном плакате, и ничего никогда не выезжает. */
  font-size:clamp(1.6rem,10.5vw,8.4rem);font-weight:900;font-family:var(--display);line-height:.9;
  letter-spacing:-.01em;text-transform:uppercase;margin-bottom:clamp(26px,3.4vw,44px);
}
.hero__title .line{display:block;position:relative;white-space:nowrap;line-height:1.04}
/* строки подгоняются по ширине, поэтому интерлиньяж задаём здесь:
   при .85 огромные буквы налезают друг на друга */
.final__h > span{white-space:nowrap;line-height:1.06;display:block}
[data-fit]{--fit-ready:0}
[data-fit].fitted{font-size:inherit}
.hero__title .reveal{transform:translateY(.32em) rotate(1.2deg);opacity:0}
.hero__title .reveal.in{transform:none;opacity:1;transition:opacity .9s var(--ease) var(--d),transform 1.05s var(--ease) var(--d)}
.acid-block{position:relative;display:inline-block}
.acid-block::after{
  content:'';position:absolute;left:-.02em;right:-.02em;bottom:.045em;height:.125em;
  background:var(--acid);z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .8s;
}
.acid-block.in::after{transform:scaleX(1)}

/* Single-stat hero: по 2000 A/B-тестов это самый сильный паттерн (+18%).
   Цифра здесь — обещание в договоре, а не выдуманная статистика. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:34px}
@media(max-width:860px){.hero__grid{grid-template-columns:1fr;gap:22px}}
.hero__grid .hero__sub{margin-bottom:0;padding-bottom:.35em}
.hero__stat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(16px,3vw,34px);margin-bottom:26px}
.hero__stat-num{
  font-size:clamp(3.6rem,9vw,7.4rem);font-weight:900;line-height:.82;letter-spacing:-.055em;
  color:var(--acid);font-variant-numeric:tabular-nums;
}
.hero__stat-unit{font-size:.34em;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.hero__stat-cap{color:var(--ink-2);max-width:34ch;font-size:clamp(.94rem,.6vw + .8rem,1.06rem);padding-bottom:.5em}
.hero__stat-cap b{color:var(--acid);font-weight:600}
.hero__sub{max-width:52ch;color:var(--ink-2);font-size:clamp(1rem,1vw + .7rem,1.24rem);margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__micro{margin-top:16px;font-family:var(--mono);font-size:.79rem;color:var(--ink-3);letter-spacing:.02em}

/* Бегущая строка — держит взгляд в движении на границе экранов */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;margin-top:clamp(40px,6vh,80px);background:rgba(255,255,255,.015)}
.marquee__track{display:flex;gap:34px;align-items:center;width:max-content;animation:slide 34s linear infinite;translate:var(--shift,0) 0;font-weight:800;font-size:clamp(.9rem,1.4vw,1.15rem);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.marquee__track i{color:var(--acid);font-style:normal;font-size:.7em}
.marquee__track span{color:var(--ink-2)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════ TRUST ══════════ */
.trust{padding:clamp(80px,11vh,150px) 0}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:44px}
.trust__card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 28px;background:linear-gradient(170deg,var(--surface),var(--bg-2));
  overflow:hidden}
.trust__card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%),var(--acid-soft),transparent 65%);
}
.trust__card:hover{border-color:var(--line-2);transform:translateY(-5px)}
.trust__card:hover::before{opacity:1}
.trust__num{font-family:var(--mono);font-size:.8rem;color:var(--acid);letter-spacing:.14em;display:block;margin-bottom:18px}
.trust__card h3{font-size:1.22rem;font-weight:800;letter-spacing:-.032em;line-height:1.2;margin-bottom:11px;position:relative}
.trust__card p{color:var(--ink-2);font-size:.95rem;position:relative}
.trust__note{
  margin-top:34px;padding:24px 26px;border-left:3px solid var(--acid);
  background:var(--acid-soft);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink-2);max-width:80ch;font-size:.99rem;
}

/* ══════════ BENTO ══════════ */
.services{padding:clamp(70px,9vh,120px) 0}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.bento__tile{position:relative;display:flex;flex-direction:column;gap:13px;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 24px;
  background:linear-gradient(170deg,var(--surface),var(--bg-2));overflow:hidden}
.bento__tile:hover{border-color:var(--line-2);transform:translateY(-5px)}
.bento__tile--wide{grid-column:span 2}
/* Последняя плитка — во всю ширину: список расходится в три колонки,
   и в бенто не остаётся пустой дырки в левом нижнем углу */
.bento__tile--tall{grid-column:1/-1}
.bento__tile--acid{background:linear-gradient(150deg,var(--acid) 0%,var(--acid-2) 100%);color:#07080A;border-color:transparent;grid-column:span 2}
.bento__tile--acid p{color:rgba(7,8,10,.78)}
.bento__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.tag{font-family:var(--mono);font-size:.73rem;text-transform:uppercase;letter-spacing:.13em;color:var(--acid);border:1px solid var(--acid-soft);padding:5px 11px;border-radius:100px}
.tag--dark{color:#07080A;border-color:rgba(7,8,10,.3);background:rgba(7,8,10,.07)}
.bento__tile h3{font-size:clamp(1.3rem,1.7vw,1.72rem);font-weight:900;letter-spacing:-.04em;line-height:1.08}
.bento__tile p{color:var(--ink-2);font-size:.96rem}
/* Идёт ПОСЛЕ .bento__tile p — иначе серый текст ложится на кислотный фон
   и контраст падает почти до нуля */
.bento__tile--acid p,.bento__tile--acid li{color:rgba(7,8,10,.8)}
.bento__tile--acid li::before{background:#07080A}
.bento__price{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);letter-spacing:-.01em;margin-top:auto}
.bento__price--dark{color:rgba(7,8,10,.66)}
.bento__list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.bento__list li{position:relative;padding-left:20px;color:var(--ink-2);font-size:.93rem}
.bento__list li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--acid);border-radius:1px}
.bento__list--dense{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 30px;margin-top:10px}
.bento__list--dense li{font-size:.93rem}
.bento__foot{margin-top:auto;font-family:var(--mono);font-size:.79rem;color:var(--ink-3)!important;line-height:1.5}
@media(max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .bento__tile--wide,.bento__tile--acid{grid-column:span 2}
  .bento__tile--tall{grid-row:auto;grid-column:1/-1}
  .bento__list--dense{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .bento__tile--wide,.bento__tile--acid,.bento__tile--tall{grid-column:span 1}
  .bento__list--dense{grid-template-columns:1fr}
}

/* ══════════ ЖИВЫЕ МЕТРИКИ ══════════ */
.proof{padding:clamp(70px,9vh,120px) 0;border-top:1px solid var(--line)}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;margin-bottom:44px}
.metric{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;background:var(--surface);transition:border-color .4s}
.metric:hover{border-color:var(--line-2)}
.metric__val{font-size:clamp(2.3rem,3.6vw,3.3rem);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--acid);font-variant-numeric:tabular-nums}
.metric__val small{font-size:.32em;font-weight:700;color:var(--ink-3);margin-left:5px;letter-spacing:-.02em}
.metric__key{font-size:.93rem;font-weight:600;margin:12px 0 14px;letter-spacing:-.02em}
.metric__bar{height:4px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}
.metric__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acid-2),var(--acid));border-radius:100px;transition:width 1.4s var(--ease) .2s}
.metric__hint{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:11px;line-height:1.45}

.terminal{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#0A0C0D}
.terminal__bar{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.022)}
.terminal__dots{display:flex;gap:6px}
.terminal__dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.terminal__dots i:first-child{background:#FF5F57}.terminal__dots i:nth-child(2){background:#FEBC2E}.terminal__dots i:last-child{background:var(--acid)}
.terminal__title{font-family:var(--mono);font-size:.78rem;color:var(--ink-3)}
.terminal__body{
  padding:22px;font-family:var(--mono);font-size:clamp(.72rem,.9vw,.86rem);line-height:1.75;
  color:var(--ink-2);overflow-x:auto;min-height:290px;white-space:pre;tab-size:2;
}
.terminal__body .k{color:#FF7AB6}.terminal__body .s{color:var(--acid)}.terminal__body .c{color:var(--ink-3);font-style:italic}.terminal__body .f{color:#7CD3FF}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--acid);vertical-align:text-bottom;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.terminal__cap{padding:0 22px 20px;font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}

/* ══════════ ПРОЦЕСС ══════════ */
.process{padding:clamp(70px,9vh,120px) 0;border-top:1px solid var(--line)}
.steps{margin-top:48px;position:relative}
.steps::before{content:'';position:absolute;left:clamp(21px,2.6vw,31px);top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,var(--acid),var(--line) 55%,transparent)}
.step{display:flex;gap:clamp(18px,3vw,34px);padding:0 0 clamp(28px,4vh,44px)}
.step:last-child{padding-bottom:0}
.step__idx{
  flex:0 0 auto;width:clamp(42px,5.2vw,62px);height:clamp(42px,5.2vw,62px);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-size:.86rem;font-weight:500;
  background:var(--bg);border:1px solid var(--line-2);position:relative;z-index:2;transition:all .5s var(--ease);
}
.step.in .step__idx{border-color:var(--acid);color:var(--acid);box-shadow:0 0 0 6px rgba(214,255,62,.06)}
.step__body{padding-top:clamp(4px,1vw,12px)}
.step__body h3{font-size:clamp(1.18rem,2vw,1.6rem);font-weight:900;letter-spacing:-.038em;margin-bottom:8px}
.step__body p{color:var(--ink-2);max-width:62ch;font-size:.98rem}
.step__time{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.75rem;color:var(--acid);border:1px solid var(--acid-soft);padding:4px 11px;border-radius:100px;background:rgba(214,255,62,.05)}

/* ══════════ ЦЕНЫ ══════════ */
/* Von Restorff: один тариф выделен целиком — взгляд неизбежно падает на него */
/* ══════════ БРИФ / КАЛЬКУЛЯТОР ══════════ */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative;cursor:pointer;user-select:none}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{
  display:block;padding:11px 18px;border:1px solid var(--line-2);border-radius:100px;
  font-size:.92rem;font-weight:500;color:var(--ink-2);background:rgba(255,255,255,.02);
  transition:all .28s var(--ease);white-space:nowrap;
}
.chip:hover span{border-color:var(--ink-3);color:var(--ink)}
.chip input:checked + span{background:var(--acid);border-color:var(--acid);color:#07080A;font-weight:700}
.chip input:focus-visible + span{outline:2px solid var(--acid);outline-offset:3px}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field--wide{grid-column:span 2}
@media(max-width:640px){.fields{grid-template-columns:1fr}.field--wide{grid-column:span 1}}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:8px;letter-spacing:-.015em}
.field__opt{color:var(--ink-3);font-weight:400}
.field input,.field textarea{
  width:100%;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  background:rgba(255,255,255,.025);transition:border-color .3s,background .3s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--acid);background:rgba(214,255,62,.035)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#FF6B6B}
.field__err{color:#FF8585;font-size:.8rem;margin-top:6px;min-height:1em;font-family:var(--mono)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.55;pointer-events:none}
/* ══════════ FAQ ══════════ */
.faq{padding:clamp(70px,9vh,120px) 0;border-top:1px solid var(--line)}
.faq__list{margin-top:44px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;
  padding:24px 4px;font-size:clamp(1.02rem,1.5vw,1.3rem);font-weight:700;letter-spacing:-.032em;
  list-style:none;transition:color .3s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--acid)}
.qa summary i{
  flex:0 0 auto;width:26px;height:26px;border:1px solid var(--line-2);border-radius:50%;position:relative;
  transition:transform .4s var(--ease),border-color .3s;
}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:50%;top:50%;background:var(--acid);transition:transform .4s var(--ease)}
.qa summary i::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.qa summary i::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.qa[open] summary i{border-color:var(--acid);transform:rotate(90deg)}
.qa[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.qa[open] summary{color:var(--acid)}
.qa__body{padding:0 4px 26px;max-width:82ch}
.qa__body p{color:var(--ink-2);font-size:1rem}
.qa[open] .qa__body{animation:fadeDown .45s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ══════════ ФИНАЛ ══════════ */
.final{padding:clamp(90px,14vh,180px) 0;border-top:1px solid var(--line);text-align:center}
.final__h{font-size:clamp(2.6rem,9.4vw,8.6rem);font-weight:900;font-family:var(--display);line-height:.84;letter-spacing:-.01em;text-transform:uppercase}
.final__h span{display:block}
.final__sub{margin:28px auto 34px;color:var(--ink-2);font-size:clamp(1rem,1.2vw + .7rem,1.3rem);max-width:44ch}
.final__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ══════════ FOOTER + STICKY ══════════ */
.footer{border-top:1px solid var(--line);padding:56px 0 130px;background:var(--bg-2)}
.footer__in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
@media(max-width:760px){.footer__in{grid-template-columns:1fr;gap:26px}}
.footer__logo{font-weight:900;letter-spacing:-.04em;font-size:1.1rem;margin-bottom:10px}
.footer__desc{color:var(--ink-3);font-size:.9rem;max-width:42ch}
.footer__nav{display:flex;flex-direction:column;gap:10px;font-size:.92rem;color:var(--ink-2)}
.footer__nav a:hover{color:var(--acid)}
.footer__contacts{display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:.92rem}
.footer__copy{color:var(--ink-3);font-size:.8rem;font-family:var(--mono);margin-top:8px}

.sticky-cta{
  position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:99;
  display:flex;align-items:center;gap:18px;padding:11px 12px 11px 22px;
  border:1px solid var(--line-2);border-radius:100px;
  background:rgba(13,15,16,.82);backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 20px 60px -20px rgba(0,0,0,.9);
  transition:transform .6s var(--ease);max-width:calc(100vw - 24px);
}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta__txt{display:flex;flex-direction:column;line-height:1.25}
.sticky-cta__txt b{font-size:.93rem;font-weight:800;letter-spacing:-.025em}
.sticky-cta__txt span{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
@media(max-width:560px){.sticky-cta__txt span{display:none}.sticky-cta{padding-left:18px;gap:12px}}

.toast{
  position:fixed;left:50%;top:24px;transform:translate(-50%,-260%);z-index:150;visibility:hidden;opacity:0;
  background:var(--acid);color:#07080A;font-weight:700;padding:14px 24px;border-radius:100px;
  transition:transform .55s var(--ease),opacity .35s,visibility .55s;box-shadow:0 18px 50px -14px rgba(214,255,62,.5);
  max-width:calc(100vw - 32px);text-align:center;font-size:.94rem;
}
.toast.show{transform:translate(-50%,0);visibility:visible;opacity:1}
.toast.bad{background:#FF6B6B;color:#fff;box-shadow:0 18px 50px -14px rgba(255,107,107,.5)}

/* ══════════════════════════════════════════════════════════════
   НОВЫЕ АНИМАЦИИ 2026
   ══════════════════════════════════════════════════════════════ */

/* Scroll progress bar — тонкая кислотная полоса вверху */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--acid);
  transform-origin:left;transform:scaleX(0);z-index:200;transition:transform .08s linear}

/* Карточки услуг: hover с подъёмом и кислотным glow */
.bento__tile{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.bento__tile:hover{transform:translateY(-8px);
  box-shadow:0 12px 40px rgba(214,255,62,.18),0 0 0 1px rgba(214,255,62,.2)}
.bento__tile--acid:hover{box-shadow:0 14px 50px rgba(214,255,62,.35)}

/* Trust cards с более заметным hover */
.trust__card{transition:transform .32s var(--ease),border-color .32s}
.trust__card:hover{transform:translateY(-6px);border-color:rgba(214,255,62,.3)}

/* Кнопки: acid glow при hover */
.btn{transition:all .3s var(--ease)}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(214,255,62,.28),0 0 0 1px var(--acid)}
.btn--ghost:hover{background:rgba(214,255,62,.08)}

/* Parallax на grain — двигается медленнее основного контента */
.grain{position:fixed;inset:-50% 0 0;height:200%;pointer-events:none;z-index:1;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  will-change:transform}

/* Cursor trail — кислотный след (добавим через JS) */
/* ══════════════════════════════════════════════════════════════
   ЭФФЕКТЫ 2026: аврора, 3D-tilt, глитч, shine-sweep
   ══════════════════════════════════════════════════════════════ */

/* Аврора: два кислотных пятна дрейфуют за hero. Дёшево (blur + transform),
   но именно это даёт «живой» фон вместо плоской темноты */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.aurora i{position:absolute;width:52vw;height:52vw;border-radius:50%;filter:blur(90px);
  background:radial-gradient(circle,rgba(214,255,62,.14),transparent 62%);
  animation:drift 26s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-8vw;top:30%;
  background:radial-gradient(circle,rgba(120,200,90,.10),transparent 60%);
  animation:drift 34s ease-in-out infinite alternate-reverse}
@keyframes drift{
  0%{transform:translate(-12%,-6%) scale(1)}
  50%{transform:translate(10%,14%) scale(1.15)}
  100%{transform:translate(-4%,4%) scale(.95)}}

/* 3D-tilt: JS пишет --rx/--ry, карточка наклоняется за курсором.
   Плюс блик — светлое пятно в точке курсора (--gx/--gy) */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0));
  transition:transform .18s ease-out;transform-style:preserve-3d}
.tilt::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(214,255,62,.09),transparent 55%);
  opacity:0;transition:opacity .3s}
.tilt:hover::before{opacity:1}

/* Глитч логотипа: RGB-расщепление при hover */
.glitch{position:relative;display:inline-block}
.nav__logo:hover .glitch{animation:glitch-shake .32s steps(2) 2}
.nav__logo:hover .glitch::before,.nav__logo:hover .glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  clip-path:inset(0 0 55% 0);opacity:.85}
.nav__logo:hover .glitch::before{color:#5ef;transform:translate(-2px,-1px)}
.nav__logo:hover .glitch::after{color:var(--acid);transform:translate(2px,1px);clip-path:inset(55% 0 0 0)}
@keyframes glitch-shake{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}

/* Shine-sweep: полоса света проезжает по кислотной кнопке */
.btn--acid{position:relative;overflow:hidden}
.btn--acid::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease)}
.btn--acid:hover::after{left:130%}

/* Nav-ссылки: подчёркивание рисуется слева направо */
.nav__links a{position:relative}
.nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--acid);transition:right .3s var(--ease)}
.nav__links a:hover::after{right:0}

/* Числа-цены в бенто подпрыгивают при hover плитки */
.bento__tile:hover .bento__price{color:var(--acid);transition:color .25s}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .tilt{transform:none!important}
  .nav__logo:hover .glitch{animation:none}
  .nav__logo:hover .glitch::before,.nav__logo:hover .glitch::after{content:none}
}
/* На тач-устройствах хвост курсора не нужен */
@media (hover:none){}

/* ══════════════════════════════════════════════════════════════
   РАЗНЫЕ ЭФФЕКТЫ ПОЯВЛЕНИЯ ДЛЯ КАЖДОЙ СЕКЦИИ
   Один и тот же fade-up на всей странице читается монотонно: глаз
   привыкает за два экрана и перестаёт замечать движение. Поэтому
   у каждой секции — своя «подача».
   Анимируем только transform / opacity / filter / clip-path — их
   браузер отдаёт композитору и не пересчитывает layout.
   ══════════════════════════════════════════════════════════════ */

/* ── 01. TRUST — ШТОРА: контент проявляется снизу вверх ── */
[data-fx="curtain"] .reveal{
  opacity:0;transform:translateY(30px);
  clip-path:inset(100% 0 0 0);
  transition:opacity .7s var(--ease) var(--d,0s),
             transform .85s var(--ease) var(--d,0s),
             clip-path .85s var(--ease) var(--d,0s);
}
[data-fx="curtain"] .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* ── 02. SERVICES — 3D: плитки встают из глубины ── */
[data-fx="flip"] .bento,[data-fx="flip"] .section-h{perspective:1400px}
[data-fx="flip"] .reveal{
  opacity:0;transform:perspective(1400px) rotateX(-34deg) translateY(70px) scale(.93);
  transform-origin:50% 0;
  transition:opacity .6s var(--ease) var(--d,0s),
             transform .95s cubic-bezier(.16,1.02,.3,1) var(--d,0s);
}
[data-fx="flip"] .reveal.in{opacity:1;transform:perspective(1400px) rotateX(0) translateY(0) scale(1)}

/* ── 03. PROOF — РЕЗКОСТЬ: кадр наводится из размытия ── */
[data-fx="focus"] .reveal{
  opacity:0;filter:blur(16px);transform:scale(1.06);
  transition:opacity .65s var(--ease) var(--d,0s),
             filter .9s var(--ease) var(--d,0s),
             transform .9s var(--ease) var(--d,0s);
}
[data-fx="focus"] .reveal.in{opacity:1;filter:blur(0);transform:scale(1)}

/* ── 04. PROCESS — ВЫЕЗД СЛЕВА + линия таймлайна прочерчивается ── */
[data-fx="slidex"] .reveal{
  opacity:0;transform:translateX(-54px);
  transition:opacity .6s var(--ease) var(--d,0s),
             transform .8s cubic-bezier(.2,.9,.25,1) var(--d,0s);
}
[data-fx="slidex"] .reveal.in{opacity:1;transform:none}
/* Линия рисуется сверху вниз, когда секция входит в кадр */
[data-fx="slidex"] .steps::before{transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.4s cubic-bezier(.3,.8,.3,1) .15s}
[data-fx="slidex"].sec-in .steps::before{transform:scaleY(1)}

/* ── 05. FAQ — ПОСТРОЧНЫЕ ШТОРЫ: вопросы открываются волной ── */
[data-fx="mask"] .reveal{
  opacity:0;transform:translateY(18px);clip-path:inset(0 0 100% 0);
  transition:opacity .5s var(--ease) var(--d,0s),
             transform .7s var(--ease) var(--d,0s),
             clip-path .7s cubic-bezier(.25,.9,.3,1) var(--d,0s);
}
[data-fx="mask"] .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* ── 06. FINAL — ВЗРЫВ: заголовок влетает из глубины ── */
[data-fx="burst"] .reveal{
  opacity:0;transform:scale(.62);filter:blur(14px);
  transition:opacity .55s var(--ease) var(--d,0s),
             transform .95s cubic-bezier(.14,1.1,.3,1) var(--d,0s),
             filter .8s var(--ease) var(--d,0s);
}
[data-fx="burst"] .reveal.in{opacity:1;transform:scale(1);filter:blur(0)}

/* will-change ставим только на время анимации: постоянный слой на каждом
   блоке съедает память GPU и в итоге делает хуже, а не лучше */
[data-fx] .reveal:not(.in){will-change:transform,opacity}
[data-fx] .reveal.in{will-change:auto}

/* Ниже первого экрана браузер может не рендерить то, что не видно */
.process,.faq{content-visibility:auto;contain-intrinsic-size:auto 880px}
.final{content-visibility:auto;contain-intrinsic-size:auto 980px}

@media (prefers-reduced-motion:reduce){
  [data-fx] .reveal,[data-fx] .reveal.in{
    opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;
  }
  [data-fx="slidex"] .steps::before{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════
   ПРИЁМ 1 — ЖИВАЯ ТИПОГРАФИКА: вес шрифта управляется скроллом
   Unbounded — переменный (400…900), а font-variation-settings
   браузер умеет интерполировать. animation-timeline:view() делает
   «часами» не время, а положение блока в окне: заголовок буквально
   набирает вес, пока ты к нему прокручиваешь. Ноль JS, всё на GPU.
   ══════════════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    @keyframes weight-in{
      from{font-variation-settings:'wght' 400;letter-spacing:.04em}
      to  {font-variation-settings:'wght' 900;letter-spacing:-.012em}
    }
    .section-h{
      animation:weight-in linear both;
      animation-timeline:view();
      /* Стартуем, когда блок входит снизу, добираем вес к середине экрана */
      animation-range:entry 10% cover 42%;
    }
    /* Кикер секции разъезжается по буквам — тонкий контрапункт к заголовку */
    @keyframes track-out{
      from{letter-spacing:.14em;opacity:.35}
      to  {letter-spacing:.3em;opacity:1}
    }
    .section-kicker{
      animation:track-out linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   ПРИЁМ 3 — ИНВЕРСИЯ ФИНАЛА
   Вся страница — тьма. Последний экран переворачивает палитру:
   кислота во всю площадь, текст почти чёрный. После шести тёмных
   секций это работает как удар — и запоминается именно он.
   ══════════════════════════════════════════════════════════════ */
.final{background:var(--acid);color:#07080A;position:relative;isolation:isolate}
.final .final__h{color:#07080A}
.final .final__h .acid{color:#07080A}
.final .final__sub{color:rgba(7,8,10,.72)}
/* Кнопки инвертируются вместе с фоном */
.final .btn--acid{background:#07080A;color:var(--acid);border-color:#07080A}
.final .btn--acid:hover{background:#15181A;box-shadow:0 10px 40px -8px rgba(7,8,10,.4)}
.final .btn--ghost{border-color:rgba(7,8,10,.4);color:#07080A;background:rgba(7,8,10,.04)}
.final .btn--ghost:hover{border-color:#07080A;background:rgba(7,8,10,.09);color:#07080A}
/* Стык секций — рваный край, а не линейка */
.final::before{content:'';position:absolute;left:0;right:0;top:-1px;height:38px;
  background:var(--acid);
  clip-path:polygon(0 100%,0 38%,7% 62%,14% 22%,23% 58%,31% 12%,40% 52%,49% 18%,
    58% 60%,67% 26%,76% 64%,85% 20%,93% 56%,100% 30%,100% 100%);
}

/* ── ПРИЁМ 4: буквы заголовков ── */
.section-h{perspective:900px}
.section-h .word{display:inline-block;white-space:nowrap}
.section-h .char{
  display:inline-block;
  opacity:0;transform:translateY(.6em) rotateX(-78deg);
  transform-origin:50% 100%;
  transition:opacity .5s var(--ease),transform .62s cubic-bezier(.2,.9,.28,1);
  transition-delay:calc(var(--i) * 18ms + var(--d,0s));
}
.section-h .reveal.in .char{opacity:1;transform:none}

/* Заголовки играют СВОЮ партию — секционный эффект с них снимаем,
   иначе два эффекта накладываются и оба смазываются */
[data-fx] .section-h .reveal{
  opacity:1;transform:none;filter:none;clip-path:none;transition:none;
}

@media (prefers-reduced-motion:reduce){
  .section-h .char{opacity:1!important;transform:none!important;transition:none!important}
}
.no-js .section-h .char{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════
   ПРИЁМ 5 — ЗАНАВЕС
   Держится ровно до готовности шрифтов (обычно ~150 мс), затем
   разъезжается вверх, открывая первый экран. Привязан к реальному
   событию, а не к таймеру: если шрифты в кэше — уезжает сразу.
   ══════════════════════════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:9998;background:var(--bg);
  display:grid;place-content:center;gap:26px;
  transition:transform .75s cubic-bezier(.76,0,.24,1),opacity .4s .35s;
  will-change:transform;
}
.intro__mark{
  font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,3vw,1.9rem);
  letter-spacing:-.01em;color:var(--ink);text-align:center;
  animation:mark-in .6s var(--ease) both;
}
.intro__mark b{color:var(--acid)}
@keyframes mark-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.intro__bar{width:min(240px,52vw);height:2px;background:var(--line);overflow:hidden;justify-self:center}
.intro__bar i{display:block;height:100%;width:100%;background:var(--acid);
  transform:scaleX(0);transform-origin:left;
  animation:bar-fill 1.1s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes bar-fill{to{transform:scaleX(1)}}
/* Уезжает вверх и утягивает за собой нижнюю кромку — «шторка», а не «фейд» */
.intro.gone{transform:translateY(-101%);opacity:0;pointer-events:none}

/* Без JS занавес не должен запереть страницу навсегда */
.no-js .intro{display:none}
@media (prefers-reduced-motion:reduce){
  .intro{transition:opacity .25s}
  .intro.gone{transform:none;opacity:0}
  .intro__mark,.intro__bar i{animation:none}
  .intro__bar i{transform:scaleX(1)}
}

/* ══════════════════════════════════════════════════════════════
   ИСТОРИЯ — СЦЕНЫ, КОТОРЫЕ МЕНЯЮТСЯ ОТ ПРОКРУТКИ
   Трек задаёт длину скролла, .story__pin залипает на весь экран.
   JS пишет каждой сцене одну переменную --t:
      t < 0 — сцена ещё в глубине,  t = 0 — сцена в фокусе,
      t > 0 — сцена улетает на зрителя.
   Всё остальное считает CSS: ни одного лишнего чтения layout.
   ══════════════════════════════════════════════════════════════ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.story{position:relative;background:var(--bg)}
.story__track{height:500vh}                    /* 5 сцен × ~100vh прокрутки */
.story__pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;
  place-items:center;overflow:hidden}
.story__stage{position:relative;width:min(var(--wrap),100% - var(--pad)*2);
  height:min(78vh,720px);height:min(78svh,720px);transform-style:preserve-3d;perspective:1200px}

.scene{
  --t:1;
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(10px,1.6vh,20px);
  text-align:center;
  /* Глубина, подъём и наклон — всё от одной переменной */
  transform:translate3d(0,calc(var(--t) * -9vh),calc(var(--t) * 460px))
            rotateX(calc(var(--t) * -14deg));
  /* max() вместо abs(): работает во всех браузерах, а не только в свежих */
  opacity:calc(1 - max(var(--t),var(--t) * -1) * 1.55);
  pointer-events:none;will-change:transform,opacity;
}
.scene__art{width:min(46vh,340px);color:var(--ink)}
.scene__art svg{width:100%;height:auto;display:block;overflow:visible}
.scene__num{font-family:var(--mono);font-size:.8rem;letter-spacing:.28em;color:var(--acid)}
.scene__title{font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(1.5rem,4.2vw,3rem);line-height:1.06;max-width:16ch}
.scene__text{color:var(--ink-2);font-size:clamp(.95rem,1.5vw,1.12rem);max-width:44ch;line-height:1.5}
.scene__honest{font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--ink-3);
  max-width:52ch;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}

/* Индикатор сцен */
.story__hud{position:absolute;left:50%;bottom:clamp(18px,4vh,40px);translate:-50% 0;
  display:flex;gap:9px}
.story__hud i{width:26px;height:3px;border-radius:2px;background:var(--line);
  transition:background .35s var(--ease),transform .35s var(--ease)}
.story__hud i.on{background:var(--acid);transform:scaleY(1.8)}

/* Мелкая жизнь внутри активной сцены */
.scene .coin{transform:translateY(-26px);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.scene.is-now .coin{transform:none;opacity:1}
.scene.is-now .c2{transition-delay:.08s}
.scene.is-now .c3{transition-delay:.16s}
.scene .blk{transform:translateY(16px) scale(.9);opacity:0;
  transition:transform .55s var(--ease),opacity .4s;transform-origin:center}
.scene.is-now .blk{transform:none;opacity:1}
.scene.is-now .b2{transition-delay:.09s}
.scene.is-now .b3{transition-delay:.18s}
.scene.is-now .b4{transition-delay:.27s}
.scene .lead{transform:translateX(-30px);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.scene.is-now .lead{transform:none;opacity:1}
.scene.is-now .l2{transition-delay:.12s}
.scene.is-now .l3{transition-delay:.24s}
.scene .bar{transform:scaleY(.05);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.scene.is-now .bar{transform:none}
.scene.is-now .g2{transition-delay:.1s}
.scene.is-now .g3{transition-delay:.2s}
.scene.is-now .g4{transition-delay:.3s}
.scene .house,.scene .car,.scene .fam,.scene .ground{opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.scene.is-now .house,.scene.is-now .car,.scene.is-now .fam,.scene.is-now .ground{opacity:1;transform:none}
.scene.is-now .ground{transition-delay:0s}
.scene.is-now .car{transition-delay:.14s}
.scene.is-now .fam{transition-delay:.28s}

@media(max-width:720px){
  .story__track{height:440vh}
  .story__stage{height:82vh;height:82svh}
  .scene__art{width:min(34vh,240px)}
  .scene__honest{font-size:.74rem}
}

/* Без анимаций история превращается в обычный вертикальный список:
   ничего не залипает, все сцены видны сразу и читаются подряд */
@media (prefers-reduced-motion:reduce){
  .story__track{height:auto}
  .story__pin{position:static;height:auto;padding:60px 0}
  .story__stage{height:auto;display:flex;flex-direction:column;gap:70px;perspective:none}
  .scene{position:static;transform:none!important;opacity:1!important;pointer-events:auto}
  .scene *{transition:none!important;transform:none!important;opacity:1!important}
  .story__hud{display:none}
}
.no-js .story__track{height:auto}
.no-js .story__pin{position:static;height:auto}
.no-js .story__stage{height:auto;display:flex;flex-direction:column;gap:70px}
.no-js .scene{position:static;transform:none;opacity:1}

/* ══════════════════════════════════════════════════════════════
   ГРАФФИТИ-АКЦЕНТЫ
   Шрифт остаётся читаемым — уличность даём фактурой: неровный
   маркер вместо линейки, брызги от баллончика, наклейки под углом,
   стенсил-обводка. Всё чистым CSS, ноль килобайт веса.
   ══════════════════════════════════════════════════════════════ */

/* Маркер: полоса с рваным краем и лёгким наклоном — как проведённая
   рукой, а не линейкой. clip-path рисует неровности сверху и снизу. */
.acid-block::after{
  /* Амплитуда неровностей маленькая: полоса должна выглядеть проведённой
     от руки, но не рваться на куски на тонком кегле */
  clip-path:polygon(
    0% 16%, 9% 6%, 18% 15%, 27% 5%, 36% 16%, 45% 7%, 54% 15%,
    63% 5%, 72% 16%, 81% 7%, 90% 15%, 100% 8%,
    100% 92%, 91% 99%, 82% 90%, 73% 100%, 64% 91%, 55% 99%,
    46% 90%, 37% 100%, 28% 91%, 19% 99%, 10% 90%, 0% 98%);
  rotate:-.45deg;
}
/* Брызги по краям полосы — короткий «выхлоп» баллончика */
.acid-block{isolation:auto}
.acid-block::before{
  content:'';position:absolute;left:-.06em;right:-.06em;bottom:.02em;height:.16em;
  z-index:-1;pointer-events:none;opacity:0;
  background:
    radial-gradient(circle .055em at 4%  62%,var(--acid) 99%,transparent),
    radial-gradient(circle .04em  at 12% 90%,var(--acid) 99%,transparent),
    radial-gradient(circle .03em  at 26% 30%,var(--acid) 99%,transparent),
    radial-gradient(circle .05em  at 48% 88%,var(--acid) 99%,transparent),
    radial-gradient(circle .035em at 63% 24%,var(--acid) 99%,transparent),
    radial-gradient(circle .045em at 81% 86%,var(--acid) 99%,transparent),
    radial-gradient(circle .03em  at 95% 34%,var(--acid) 99%,transparent);
  transition:opacity .5s var(--ease) 1.1s;
}
.acid-block.in::before{opacity:.85}

/* Наклейка: клочок бумаги под углом, приклеенный поверх вёрстки */
.sticker{
  display:inline-block;position:relative;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;background:var(--acid);color:#07080A;
  rotate:-2.4deg;
  clip-path:polygon(1% 6%,99% 0%,100% 88%,52% 100%,2% 94%);
  box-shadow:0 6px 18px -6px rgba(214,255,62,.5);
}
.sticker--ghost{
  background:transparent;color:var(--acid);
  border:2px solid var(--acid);border-radius:6px;
  clip-path:none;                 /* рваный край съедал бы рамку */
  box-shadow:none;rotate:1.8deg;
  padding:6px 13px;
}


@media (prefers-reduced-motion:reduce){
  .acid-block::after{rotate:none}
  .acid-block::before{opacity:.85;transition:none}
  .sticker{rotate:none}
}

.hero__sticker{margin-top:20px}
/* Наклейка в шапке плитки не должна ломать перенос тега */
.bento__top .sticker{margin-left:auto}

/* ══════════════════════════════════════════════════════════════
   КОНТАКТЫ: бот, личка, канал
   Три разных входа — у каждого своя роль, поэтому подписаны,
   а не свалены в один список одинаковых ссылок.
   ══════════════════════════════════════════════════════════════ */
.footer__contact{
  display:flex;flex-direction:column;gap:2px;
  text-decoration:none;padding:9px 0;
  border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.footer__contact:first-of-type{border-top:1px solid var(--line)}
.footer__contact:hover{border-color:var(--acid)}
.footer__contact-k{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acid);
}
.footer__contact-v{color:var(--ink-2);font-size:.94rem;transition:color .25s}
.footer__contact:hover .footer__contact-v{color:var(--ink)}

/* Карточка канала в финале. Финал инвертирован (кислотный фон),
   поэтому карточка тёмная — контраст читается как «отдельная вещь». */
.channel{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"tag go" "name go" "desc go";
  align-items:center;gap:2px 20px;
  max-width:560px;margin:clamp(34px,5vh,54px) auto 0;
  padding:20px 24px;border-radius:var(--r-lg);
  background:#07080A;color:var(--ink);
  text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.channel:hover{transform:translateY(-4px);box-shadow:0 16px 40px -12px rgba(7,8,10,.55)}
.channel__tag{
  grid-area:tag;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acid);
}
.channel__name{
  grid-area:name;font-family:var(--display);font-weight:800;
  font-size:clamp(1.05rem,2.4vw,1.4rem);letter-spacing:-.01em;line-height:1.15;
}
.channel__desc{grid-area:desc;color:var(--ink-3);font-size:.88rem;line-height:1.45;margin-top:4px}
.channel__go{
  grid-area:go;font-size:1.5rem;color:var(--acid);
  transition:transform .3s var(--ease);
}
.channel:hover .channel__go{transform:translateX(6px)}

@media(max-width:520px){
  .channel{padding:18px 20px;gap:2px 14px}
  .channel__desc{font-size:.83rem}
}

/* ══════════════════════════════════════════════════════════════
   ДЕЙСТВИЯ В ШАПКЕ: блог · личка · заказ
   Три разных адресата, поэтому и вид разный: заказ — кислотная
   кнопка (главное действие), личка и блог — обведённые, но
   заметные. Одинаковыми делать нельзя: глазу не за что зацепиться.
   ══════════════════════════════════════════════════════════════ */
.nav__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

.nav__act{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:10px 15px;border-radius:100px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  color:var(--ink);font-size:.84rem;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;
  transition:border-color .28s var(--ease),background .28s var(--ease),
             color .28s var(--ease),transform .28s var(--ease);
}
.nav__act-i{font-size:.95em;line-height:1}
.nav__act:hover{
  border-color:var(--acid);color:var(--acid);
  background:var(--acid-soft);transform:translateY(-2px);
}

/* Ноутбуки: разделы уходят, кнопки важнее — до них ведут заявки */
@media(max-width:1180px){
  .nav__links{display:none}
}
/* Планшеты: те же три кнопки, только теснее */
@media(max-width:820px){
  .nav{gap:12px}
  .nav__act{padding:9px 12px;font-size:.8rem}
  .btn--sm{padding:10px 16px;font-size:.85rem}
}
/* Телефоны: шапка в два ряда. Прятать блог или оставлять голые
   значки нельзя — по значку не понять, куда он ведёт. Поэтому
   переносим действия вниз и сохраняем подписи. */
@media(max-width:620px){
  .nav{flex-wrap:wrap;gap:9px 10px;padding:11px var(--pad) 12px}
  .nav__logo{font-size:.86rem;flex:1 1 auto}
  .nav__actions{order:3;flex:1 0 100%;gap:8px}
  .nav__act{flex:1 1 0;justify-content:center;padding:9px 8px;font-size:.78rem}
  /* Заказ остаётся первым по важности — он в верхнем ряду у логотипа */
  .nav__actions .btn--acid{order:-1;flex:0 0 auto}
}
@media(max-width:620px){
  .nav .btn--acid{position:absolute;right:var(--pad);top:9px;padding:9px 15px;font-size:.82rem}
  .nav{position:fixed;padding-top:11px}
}
@media(max-width:360px){
  .nav__act{font-size:.72rem;padding:8px 6px}
  .nav__logo{font-size:.78rem}
}

/* ══════════════════════════════════════════════════════════════
   АДАПТАЦИЯ: удобство нажатия и читаемость мелкого текста
   Проверка на 10 размерах экрана выявила три вещи:
   ссылки подвала высотой 24px (пальцем не попасть), плашка в первом
   экране 10.6px и подпись канала 10.9px — ниже порога читаемости.
   ══════════════════════════════════════════════════════════════ */

/* Ссылки подвала: 24px → 44px. Ширина колонки уже большая,
   поэтому растим только высоту отступами. */
.footer__nav{gap:2px}
.footer__nav a{
  display:inline-flex;align-items:center;
  min-height:44px;padding:4px 0;
  width:fit-content;
}

/* Логотип — тоже цель нажатия, ведёт наверх */
.nav__logo{min-height:44px}

/* Пункты меню в шапке: 32px → 44px по вертикали */
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:0}

/* Мелкий текст до читаемого минимума */
.channel__tag{font-size:.72rem}
@media(max-width:440px){
  .eyebrow{font-size:.72rem;letter-spacing:.02em;padding:8px 13px}
}

/* Планшет в альбомной ориентации и узкие ноутбуки: подвал в две
   колонки вместо трёх — иначе контакты жмутся в узкую полосу */
@media(max-width:1024px) and (min-width:621px){
  .footer__in{grid-template-columns:1fr 1fr;gap:30px 40px}
  .footer__in > :first-child{grid-column:1 / -1}
}

/* Очень узкие экраны (320px): бенто и шаги не должны липнуть к краю */
@media(max-width:360px){
  :root{--pad:16px}
  .scene__title{font-size:clamp(1.25rem,6vw,1.6rem)}
  .scene__text{font-size:.88rem}
}

/* ── Блок кода на узких экранах ──
   Код не переносим (перенос ломает чтение), поэтому оставляем
   горизонтальную прокрутку — но её надо обозначить: на телефоне
   видно меньше половины строки, и палец сам не догадается свайпнуть. */
.terminal__bar{justify-content:space-between}
.terminal__hint{
  display:none;font-family:var(--mono);font-size:.68rem;
  color:var(--acid);white-space:nowrap;opacity:.85;
}
/* Тень у правого края — подсказка «строка продолжается» */
.terminal{position:relative}
.terminal::after{
  content:'';position:absolute;right:0;top:52px;bottom:52px;width:34px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#0A0C0D 88%);
}
@media(max-width:620px){
  .terminal__hint{display:inline}
  .terminal__body{padding:16px 14px;font-size:.7rem;line-height:1.65;min-height:0}
  .terminal__cap{padding:0 14px 16px;font-size:.7rem}
  .terminal__title{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .terminal__bar{padding:11px 14px;gap:10px}
}
@media(max-width:360px){
  .terminal__body{font-size:.66rem;padding:14px 12px}
}

/* Подсказка о прокрутке кода — до читаемого минимума */
.terminal__hint{font-size:.72rem}

/* Шапка на телефоне занимала до 117px — пятая часть экрана iPhone SE.
   Поджимаем отступы: три действия остаются видимыми, но экран
   возвращается контенту. Логотипу хватает 40px как цели нажатия —
   он вторичен, основные действия рядом и крупнее. */
@media(max-width:620px){
  .nav{gap:7px 8px;padding:9px var(--pad) 10px}
  .nav__logo{min-height:38px}
  .nav__actions{gap:7px}
  .nav__act{padding:8px 8px}
  .nav .btn--acid{top:8px;padding:8px 14px}
}