/* ============================================================
   J-GET:it — лендинг студии разработки
   Тёмный графит + лайм #D6FE51. Кадры вместо скролла,
   переход через жидкую стеклянную линзу.
   ============================================================ */

/* ---------- 1. Шрифты (self-hosted, только латиница + кириллица) ---------- */
@font-face{font-family:Unbounded;src:url(fonts/unbounded-latin.woff2)format("woff2");font-weight:300 500;font-display:swap;
  unicode-range:U+0000-00FF,U+2010-2015,U+2018-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+20BD,U+2190-2193,U+2197,U+21B5,U+2212,U+2261}
@font-face{font-family:Unbounded;src:url(fonts/unbounded-cyrillic.woff2)format("woff2");font-weight:300 500;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:Onest;src:url(fonts/onest-latin.woff2)format("woff2");font-weight:300 600;font-display:swap;
  unicode-range:U+0000-00FF,U+2010-2015,U+2018-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+20AC,U+20BD,U+2190-2193,U+2197,U+21B5,U+2212,U+2261}
@font-face{font-family:Onest;src:url(fonts/onest-cyrillic.woff2)format("woff2");font-weight:300 600;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116}
@font-face{font-family:"JB Mono";src:url(fonts/jbmono-latin.woff2)format("woff2");font-weight:400 500;font-display:swap;
  unicode-range:U+0020-005F,U+00B7,U+00D7,U+2013-2015,U+2192,U+2197,U+2212}
@font-face{font-family:"JB Mono";src:url(fonts/jbmono-cyrillic.woff2)format("woff2");font-weight:400 500;font-display:swap;
  unicode-range:U+0401,U+0410-042F,U+2116}

/* ---------- 2. Токены ---------- */
:root{
  --ink:#141614;
  --ink-2:#101210;
  --surface:rgba(232,237,229,.035);
  --surface-2:rgba(232,237,229,.06);
  --line:rgba(232,237,229,.10);
  --line-2:rgba(232,237,229,.18);
  --fg:#E9EEE6;
  --fg-dim:#A2AB9C;
  --fg-mute:#828B7C;
  --lime:#D6FE51;
  --lime-ink:#0E1206;
  --lime-glow:rgba(214,254,81,.16);

  --f-display:Unbounded,"Trebuchet MS",sans-serif;
  --f-body:Onest,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"JB Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --rail-w:118px;
  --hud-h:clamp(60px,8vh,86px);

  --t-fill:780ms;
  --e-fill:cubic-bezier(.72,.02,.22,1);
  --e-out:cubic-bezier(.16,.84,.28,1);
  --rv-base:230ms;
}

/* ---------- 3. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font:400 clamp(15px,1.02vw,17px)/1.62 var(--f-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;
}
html.js,html.js body{overflow:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:2px}
.svg-defs{position:absolute;width:0;height:0;pointer-events:none}
[data-scroll]{scrollbar-width:none}
[data-scroll]::-webkit-scrollbar{width:0;height:0}

.wrap{
  width:min(1280px,100% - clamp(28px,6vw,90px));
  margin-inline:auto;
}
@media (min-width:1080px){.wrap{padding-right:var(--rail-w)}}

/* ---------- 4. Атмосфера ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%,#1B1E1B 0%,var(--ink) 46%,var(--ink-2) 100%)}
.bg__grid{position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right,rgba(232,237,229,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(232,237,229,.045) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(120% 85% at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 85% at 50% 40%,#000 20%,transparent 78%)}
.bg__aura{position:absolute;left:50%;top:52%;width:min(120vw,1500px);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,var(--lime-glow) 0%,rgba(214,254,81,.05) 32%,transparent 62%);
  animation:breathe 14s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;scale:.94}50%{opacity:1;scale:1.06}}
.bg__scan{position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,rgba(214,254,81,.28),transparent);
  animation:scan 11s cubic-bezier(.5,0,.5,1) infinite;opacity:.5}
@keyframes scan{0%{transform:translateY(-5vh);opacity:0}8%{opacity:.5}92%{opacity:.5}100%{transform:translateY(105vh);opacity:0}}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 5. Типографика ---------- */
.display{font-family:var(--f-display);font-weight:300;letter-spacing:-.045em;line-height:.98}
.kicker{font:500 clamp(10px,.78vw,11.5px)/1 var(--f-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--fg-mute);
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.kicker em{font-style:normal;color:var(--lime)}
.kicker i{font-style:normal;color:var(--lime);font-size:1.2em;line-height:0}
.lede{max-width:52ch;color:var(--fg-dim);font-size:clamp(14.5px,1.06vw,17.5px);line-height:1.66;font-weight:300}
.colon{color:var(--lime);font-style:normal;animation:blink 2.4s steps(1,end) infinite;margin-left:.06em}
@keyframes blink{0%,62%{opacity:1}63%,80%{opacity:.18}81%,100%{opacity:1}}

/* ---------- 6. Стекло и кнопки ---------- */
.glass{
  position:relative;
  background:linear-gradient(150deg,rgba(232,237,229,.075),rgba(232,237,229,.022) 42%,rgba(232,237,229,.05));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 24px -18px rgba(0,0,0,.85);
}
/* без mix-blend-mode: каждый blend-слой стоит отдельного прохода композитора */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.11),transparent 34%)}
html.fx-lens .glass--lens{
  backdrop-filter:url(#lens-sm) blur(8px) saturate(1.6) brightness(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.6)}

.btn{position:relative;display:inline-flex;align-items:center;gap:.68em;border-radius:100px;
  padding:.82em 1.35em;font:500 clamp(12.5px,.9vw,14px)/1 var(--f-body);letter-spacing:-.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--e-out),border-color .35s,color .35s,background-color .35s}
.btn:active{transform:scale(.97)}
.btn__arrow{width:1em;height:1em;flex:none;transition:transform .38s var(--e-out)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}

.btn--lime{background:var(--lime);color:var(--lime-ink);font-weight:600;
  box-shadow:0 0 0 1px rgba(214,254,81,.5),0 12px 40px -14px rgba(214,254,81,.55)}
.btn--lime::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 46%,transparent 72%);
  transform:translateX(-110%);animation:sheen 5.2s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sheen{0%{transform:translateX(-110%)}55%,100%{transform:translateX(120%)}}
.btn--lime:hover{background:#E3FF7A}

.btn--ghost{border:1px solid var(--line-2);color:var(--fg-dim)}
.btn--ghost:hover{border-color:rgba(214,254,81,.5);color:var(--fg)}

.btn--glass{border:1px solid var(--line-2);color:var(--fg);
  background:linear-gradient(150deg,rgba(232,237,229,.09),rgba(232,237,229,.02));
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}
html.fx-lens .btn--glass{backdrop-filter:url(#lens-sm) blur(7px) saturate(1.7) brightness(1.06)}
.btn--glass:hover{border-color:rgba(214,254,81,.45)}
.btn__sheen{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(214,254,81,.22) 50%,transparent 66%);
  transform:translateX(-120%);animation:sheen 6.5s cubic-bezier(.5,0,.3,1) infinite 1.2s}
.btn__mark{color:var(--lime);font-family:var(--f-display);line-height:0;font-size:1.15em}
.btn--big{padding:1.08em 1.8em;font-size:clamp(13.5px,1vw,15.5px)}

/* ---------- 7. HUD ---------- */
.hud{position:fixed;left:0;right:0;z-index:40;display:flex;align-items:center;
  padding-inline:clamp(16px,3.4vw,40px);pointer-events:none}
.hud>*{pointer-events:auto}
.hud--top{top:0;height:var(--hud-h);justify-content:space-between;
  animation:hud-in .9s var(--e-out) both .15s}
.hud--bottom{bottom:0;height:clamp(48px,6.4vh,64px);gap:clamp(14px,3vw,40px);
  animation:hud-in .9s var(--e-out) both .35s}
@keyframes hud-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.hud--bottom{animation-name:hud-in-b}
@keyframes hud-in-b{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.brand img{width:clamp(104px,9.4vw,138px);height:auto}
.brand{display:block;transition:opacity .3s}
.brand:hover{opacity:.72}
.hud__right{display:flex;align-items:center;gap:clamp(12px,1.8vw,22px)}
.counter{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--fg-mute)}
.counter b{color:var(--lime);font-weight:500}
.counter i{font-style:normal;opacity:.4;padding-inline:.25em}

.hint{display:flex;align-items:center;gap:.65em;font:500 10px/1 var(--f-mono);letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-mute);white-space:nowrap;transition:opacity .6s}
.hint.is-off{opacity:0}
.hint__wheel{width:15px;height:23px;border:1px solid var(--line-2);border-radius:9px;position:relative;flex:none}
.hint__wheel i{position:absolute;left:50%;top:5px;width:2px;height:5px;border-radius:2px;background:var(--lime);
  translate:-50% 0;animation:wheel 1.9s var(--e-out) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

.ticker{flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ticker__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font:400 10.5px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);white-space:pre}
@keyframes slide{to{transform:translateX(-50%)}}
/* ссылка на политику обязана быть доступна с любого экрана, в том числе мобильного */
.copy{font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);
  white-space:nowrap;display:flex;align-items:center;gap:.7em}
.copy i{font-style:normal;color:var(--lime)}
.copy b{font-weight:500;color:var(--lime)}
.copy a{color:var(--fg-mute);transition:color .3s}
.copy a:hover,.copy a:focus-visible{color:var(--lime)}

/* ---------- 8. Рельс навигации ---------- */
.rail{position:fixed;right:clamp(16px,2.6vw,34px);top:50%;translate:0 -50%;z-index:40;
  padding-left:18px;animation:hud-in .9s var(--e-out) both .5s}
.rail__line{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line)}
.rail__line i{position:absolute;left:-1px;width:3px;height:20%;background:var(--lime);border-radius:2px;
  box-shadow:0 0 14px var(--lime);top:calc(var(--rp,0) * 80%);
  transition:top .62s var(--e-fill)}
.rail ul{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,18px)}
.rail button{display:flex;align-items:baseline;gap:.6em;font:500 10px/1 var(--f-mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-mute);cursor:pointer;transition:color .35s,transform .45s var(--e-out)}
.rail button em{font-style:normal;opacity:.55;font-size:9px}
.rail button:hover{color:var(--fg-dim);transform:translateX(2px)}
.rail button[aria-current=true]{color:var(--lime);transform:translateX(3px)}
.rail button[aria-current=true] em{opacity:1}
@media (max-width:1079px){.rail{padding-left:0;right:12px}
  .rail__line{display:none}
  .rail button span{display:none}
  .rail button{width:26px;height:22px;justify-content:center;border:1px solid transparent;border-radius:6px}
  .rail button[aria-current=true]{border-color:rgba(214,254,81,.35);background:rgba(214,254,81,.08)}}
/* на телефоне рельс сжимается до точек, чтобы не спорить с текстом */
@media (max-width:639px){
  .rail{right:8px}
  .rail ul{gap:12px}
  .rail button{width:20px;height:20px;border:0;background:none;position:relative}
  .rail button em{display:none}
  .rail button::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
    translate:-50% -50%;background:rgba(232,237,229,.3);transition:width .4s,height .4s,background-color .4s,box-shadow .4s}
  .rail button[aria-current=true]{border:0;background:none;transform:none}
  .rail button[aria-current=true]::after{width:7px;height:7px;background:var(--lime);box-shadow:0 0 12px var(--lime)}}

/* ---------- 9. Кадры и переход ---------- */
.deck{position:fixed;inset:0;z-index:10}
.frame{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:1;contain:layout paint}
.frame.is-in{opacity:1;visibility:visible;z-index:3}
.frame.is-out{opacity:1;visibility:visible;z-index:2}

.frame__in{height:100%;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(22px,3.4vh,48px);
  padding-block:calc(var(--hud-h) + 14px) clamp(64px,9vh,86px)}

/* Переход — два взаимодополняющих клипа по одной и той же линии:
   над ней виден только уходящий кадр, под ней только приходящий.
   Никаких наложений и никаких полноэкранных фильтров. */
.frame.is-entering{animation:fill-up var(--t-fill) var(--e-fill) both;will-change:clip-path}
.frame.is-entering[data-dir="-1"]{animation-name:fill-dn}
@keyframes fill-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fill-dn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

.frame.is-out{animation:sink-up var(--t-fill) var(--e-fill) both;will-change:clip-path}
.frame.is-out[data-dir="-1"]{animation-name:sink-dn}
@keyframes sink-up{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes sink-dn{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}

/* Содержимое кадра к моменту перехода уже готово — его открывает линия,
   а не собственная анимация. Ступенчатый вход остаётся только на первой загрузке. */
.rv{opacity:0}
.frame.is-in .rv,.frame.is-out .rv{opacity:1}
.frame.is-boot .rv{animation:rv .78s var(--e-out) both;
  animation-delay:calc(var(--i,0) * 68ms + var(--rv-base))}
@keyframes rv{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- 10. Жидкая линза перехода ---------- */
.meniscus{position:fixed;inset:0;z-index:35;pointer-events:none;opacity:0}
.meniscus.is-run{opacity:1}
.meniscus__track{position:absolute;inset:0}
.meniscus.is-run .meniscus__track{will-change:transform}
.meniscus.is-run .meniscus__track{animation:men-up var(--t-fill) var(--e-fill) both}
.meniscus.is-run[data-dir="-1"] .meniscus__track{animation-name:men-dn}
@keyframes men-up{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}
@keyframes men-dn{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}

.meniscus__lens{--h:clamp(110px,15vh,190px);
  position:absolute;left:0;right:0;height:var(--h);top:calc(var(--h) / -2);
  backdrop-filter:blur(4px) saturate(1.6) brightness(1.1);
  -webkit-backdrop-filter:blur(4px) saturate(1.6) brightness(1.1);
  background:linear-gradient(to bottom,
    rgba(214,254,81,0) 0%,
    rgba(232,237,229,.035) 34%,
    rgba(214,254,81,.10) 50%,
    rgba(232,237,229,.03) 66%,
    rgba(214,254,81,0) 100%);
  box-shadow:0 0 90px rgba(214,254,81,.10)}
html.fx-lens .meniscus__lens{backdrop-filter:url(#lens-lg) blur(2px) saturate(1.7) brightness(1.08)}
.meniscus__edge{position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,254,81,.85) 18%,#EAFFA8 50%,rgba(214,254,81,.85) 82%,transparent);
  box-shadow:0 0 22px rgba(214,254,81,.7)}

/* ---------- 11. Кадр 00 · Индекс ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,72px)}
.hero__text{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,28px);min-width:0}
.hero__h{font-size:clamp(2.35rem,6.1vw,5.9rem);display:flex;flex-direction:column}
.hero__h span{display:block}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(4px,1vh,10px)}

.core{--s:clamp(196px,23vw,340px);position:relative;width:var(--s);height:var(--s);flex:none;cursor:pointer}
/* импульс: при входе в кадр — сам, по клику — заново */
.core__pulse{position:absolute;inset:30%;border-radius:50%;border:1px solid var(--lime);
  opacity:0;pointer-events:none}
.frame.is-in .core__pulse{animation:pulseOut 1.3s var(--e-out) both .35s}
.core.is-pulse .core__pulse{animation:pulseOut .95s var(--e-out) both}
@keyframes pulseOut{from{opacity:.9;transform:scale(.45)}to{opacity:0;transform:scale(2.05)}}
.core.is-pulse .core__dot{animation:pulseHit .95s var(--e-out) both}
.core.is-pulse .core__dot--dn{animation-delay:.07s}
@keyframes pulseHit{0%{opacity:1;scale:1.5}45%{opacity:1;scale:.94}100%{opacity:.62;scale:.9}}
.core__ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.core__ring--a{border-style:dashed;border-color:rgba(232,237,229,.14);animation:spin 46s linear infinite}
.core__ring--b{inset:11%;border-color:transparent;border-top-color:var(--lime);border-right-color:rgba(214,254,81,.28);
  animation:spin 9s cubic-bezier(.5,0,.5,1) infinite reverse}
.core__ring--c{inset:23%;border-color:rgba(232,237,229,.09);
  border-bottom-color:rgba(214,254,81,.5);animation:spin 17s linear infinite}
@keyframes spin{to{rotate:360deg}}
.core__glass{position:absolute;inset:32%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.14),rgba(232,237,229,.02) 55%,transparent 72%);
  border:1px solid var(--line);
  backdrop-filter:blur(6px) saturate(1.5) brightness(1.06);
  -webkit-backdrop-filter:blur(6px) saturate(1.5) brightness(1.06);
  box-shadow:inset 0 2px 10px rgba(255,255,255,.10),0 0 60px rgba(214,254,81,.10)}
html.fx-lens .core__glass{backdrop-filter:url(#lens-sm) blur(3px) saturate(1.7) brightness(1.08)}
.core__dot{position:absolute;left:50%;width:clamp(11px,1.5vw,19px);aspect-ratio:1;border-radius:50%;
  background:var(--lime);translate:-50% 0;box-shadow:0 0 26px rgba(214,254,81,.85);
  animation:pulse 2.6s var(--e-out) infinite}
.core__dot--up{top:39%}
.core__dot--dn{top:53%;animation-delay:.22s}
@keyframes pulse{0%,100%{opacity:.62;scale:.9}50%{opacity:1;scale:1.08}}

/* Конструктор заявки вместо блока цифр */
.ask{border-top:1px solid var(--line);padding-top:clamp(14px,2.2vh,24px);
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:clamp(14px,2.4vw,38px);align-items:start}
.ask__t{font:500 9.5px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-mute);margin-bottom:.85em}
.ask__chips{display:flex;flex-wrap:wrap;gap:6px}
.ask__chips button{cursor:pointer;border:1px solid var(--line-2);border-radius:100px;
  padding:.5em .95em;font:400 clamp(11.5px,.82vw,13px)/1 var(--f-body);color:var(--fg-dim);
  transition:border-color .3s,color .3s,background-color .3s,transform .35s var(--e-out)}
.ask__chips button:hover{border-color:rgba(214,254,81,.45);color:var(--fg)}
.ask__chips button:active{transform:scale(.95)}
.ask__chips button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);
  color:var(--lime-ink);font-weight:600}

/* без max-width: в моноширинном шрифте с трекингом строка в него не влезала
   и последнее слово отрывалось сиротой. balance — страховка на узких экранах */
.ask__out{align-self:end;justify-self:end;text-align:right;
  font:400 clamp(11px,.8vw,12.5px)/1.55 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-mute);text-wrap:balance}
.ask__out i{font-style:normal;color:var(--lime);font-size:1.35em;line-height:0}
.ask__out span{color:var(--fg-dim)}

/* ---------- 12. Заголовок кадра ---------- */
.fhead{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.fhead__h{font-size:clamp(1.85rem,4.3vw,3.9rem)}

/* ---------- 13. Кадр 01 · Услуги ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}

/* Карточка переворачивается по клику или Enter — на обороте состав работ.
   Двигается только transform, задняя грань без backdrop-filter. */
.card{position:relative;perspective:1500px;cursor:pointer;border-radius:18px;
  transition:transform .5s var(--e-out)}
.card:hover{transform:translateY(-3px)}
.card__face{border-radius:18px;padding:clamp(18px,2vw,30px);display:flex;flex-direction:column;gap:.55em;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.2,.72,.2,1),border-color .4s}
.card__face--front{position:relative;height:100%;transform:rotateY(0)}
.card__face--back{position:absolute;inset:0;transform:rotateY(180deg);
  background:linear-gradient(155deg,#1E231D,#161916 62%,#12150F);
  border:1px solid rgba(214,254,81,.26);
  box-shadow:inset 0 1px 0 rgba(214,254,81,.12),0 10px 24px -18px rgba(0,0,0,.85)}
.card[aria-expanded="true"] .card__face--front{transform:rotateY(-180deg)}
.card[aria-expanded="true"] .card__face--back{transform:rotateY(0)}
.card:hover .card__face--front{border-color:rgba(214,254,81,.34)}
.card.is-turning{will-change:transform}
.card.is-turning .card__face--front{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(150deg,rgba(232,237,229,.088),rgba(232,237,229,.032) 42%,rgba(232,237,229,.062))}

.card__spec{display:flex;flex-direction:column;gap:.5em;margin-top:.2em}
.card__spec li{position:relative;padding-left:1.1em;color:var(--fg-dim);font-weight:300;
  font-size:clamp(12.5px,.9vw,14.5px);line-height:1.45}
.card__spec li::before{content:":";position:absolute;left:0;top:-.06em;color:var(--lime);
  font-family:var(--f-display);font-size:1.05em}

/* «+» в углу — единственный устойчивый ориентир, что карточку можно открыть */
.card__mark{position:absolute;top:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);
  width:15px;height:15px;z-index:2;pointer-events:none;
  transition:transform .62s cubic-bezier(.2,.72,.2,1)}
.card__mark i{position:absolute;left:50%;top:50%;background:var(--fg-mute);border-radius:1px;
  transition:background-color .4s}
.card__mark i:first-child{width:15px;height:1px;translate:-50% -50%}
.card__mark i:last-child{width:1px;height:15px;translate:-50% -50%}
.card:hover .card__mark i{background:var(--lime)}
.card[aria-expanded="true"] .card__mark{transform:rotate(135deg)}
.card[aria-expanded="true"] .card__mark i{background:var(--lime)}

.card__n{font:500 10px/1 var(--f-mono);letter-spacing:.24em;color:var(--lime)}
.card__n i{font-style:normal;font-size:1.15em;line-height:0}
.card__h{font-family:var(--f-display);font-weight:400;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.05rem,1.62vw,1.5rem);margin-top:.18em}
.card__p{color:var(--fg-dim);font-size:clamp(13px,.94vw,15px);line-height:1.6;font-weight:300}
.card__tags{margin-top:auto;padding-top:.9em;font:400 10px/1.4 var(--f-body);letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute);border-top:1px solid var(--line)}
.card__tags i{font-style:normal;color:var(--lime);font-size:1.3em;line-height:0}

/* ---------- 14. Кадр 02 · Процесс ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,28px);
  border-top:1px solid var(--line);padding-top:clamp(20px,3vh,34px);position:relative}
/* линия прогресса прочерчивается при входе в кадр, узлы загораются вслед за ней */
.steps::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 14px rgba(214,254,81,.75)}
.frame.is-in .steps::after{animation:draw 1.2s var(--e-out) both .26s}
@keyframes draw{to{transform:scaleX(1)}}

.step{position:relative;display:flex;flex-direction:column;gap:.45em}
.step__node{position:absolute;left:0;top:calc(-1 * clamp(20px,3vh,34px));width:9px;height:9px;border-radius:50%;
  background:var(--lime);border:1px solid var(--lime);translate:0 -50%;
  box-shadow:0 0 0 4px var(--ink),0 0 18px rgba(214,254,81,.6)}
.frame.is-in .step__node{animation:nodeOn .46s var(--e-out) both;
  animation-delay:calc(260ms + (var(--i,2) - 2) * 290ms)}
@keyframes nodeOn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.step__n{font:500 10px/1 var(--f-mono);letter-spacing:.24em;color:var(--fg-mute)}
.step__h{font-family:var(--f-display);font-weight:400;letter-spacing:-.035em;line-height:1.1;
  font-size:clamp(1.05rem,1.72vw,1.6rem)}
.step__p{color:var(--fg-dim);font-size:clamp(13px,.92vw,14.8px);line-height:1.6;font-weight:300}

/* ---------- 15. Кадр 03 · Прототипы ---------- */
/* grid-auto-rows:max-content + align-content:start — иначе строки делят высоту
   стеснённого контейнера поровну и карточки схлопываются вместо прокрутки */
.protos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1vw,15px);
  grid-auto-rows:max-content;align-content:start;
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.proto{display:flex;flex-direction:column;border-radius:15px;overflow:hidden;
  border:1px solid var(--line);background:rgba(232,237,229,.028);
  transition:transform .5s var(--e-out),border-color .4s,background-color .4s}
.proto:hover,.proto:focus-visible{transform:translateY(-4px);border-color:rgba(214,254,81,.42);
  background:rgba(214,254,81,.045)}

/* flex:none обязателен — иначе в стеснённой сетке пропорция схлопывается в ноль */
.proto__shot{position:relative;display:block;flex:none;aspect-ratio:16/9;overflow:hidden;
  background:#0D0F0D;border-bottom:1px solid var(--line)}
.proto__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  opacity:0;transition:opacity .55s,transform .6s var(--e-out)}
.proto__shot img.is-on{opacity:1}
.proto:hover .proto__shot img{transform:scale(1.035)}

/* значок «откроется в новой вкладке» — единственный намёк, что карточка кликабельна */
.proto__go{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;color:var(--fg-dim);
  background:rgba(16,18,16,.62);border:1px solid var(--line-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:color .35s,border-color .35s,background-color .35s}
.proto__go svg{width:11px;height:11px}
.proto:hover .proto__go{color:var(--lime-ink);background:var(--lime);border-color:var(--lime)}

.proto__body{display:flex;flex-direction:column;gap:.28em;flex:1;
  padding:clamp(10px,.95vw,15px) clamp(11px,1vw,16px) clamp(12px,1.1vw,17px)}
.proto__t{font:500 9px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.proto__h{font-family:var(--f-display);font-weight:400;letter-spacing:-.032em;line-height:1.12;
  font-size:clamp(.92rem,1.12vw,1.16rem);margin-top:.1em}
.proto__p{color:var(--fg-dim);font-size:clamp(11px,.76vw,12.8px);line-height:1.42;font-weight:300}

/* галерея — главное в кадре, поэтому шапка здесь тише, чем в остальных */
.frame--protos .fhead__h{font-size:clamp(1.65rem,3.05vw,2.7rem)}
.frame--protos .lede{max-width:78ch}
.frame--protos .frame__in{gap:clamp(15px,2.3vh,30px)}
.frame--protos .fhead{gap:clamp(8px,1.1vh,13px)}

/* ---------- 16. Кадр 04 · Контакт ---------- */
.cgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(24px,4vw,72px);align-items:center}
.contact{display:flex;flex-direction:column;gap:clamp(14px,2.2vh,26px);min-width:0}
.contact__h{font-size:clamp(2.05rem,5.2vw,4.9rem)}
.contact__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(4px,1vh,10px)}
.contact__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:clamp(12px,2vw,28px);
  border-top:1px solid var(--line);padding-top:clamp(14px,2.2vh,22px);margin-top:clamp(6px,1.4vh,14px)}
.contact__meta dt{font:500 9.5px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.contact__meta dd{margin:.45em 0 0;color:var(--fg-dim);font-size:clamp(12.5px,.9vw,14.5px);font-weight:300;line-height:1.5}
.contact__meta dd i{font-style:normal;color:var(--fg-mute);padding-inline:.25em}
.lnk{position:relative;color:var(--fg);transition:color .3s}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--lime);
  transform:scaleX(0);transform-origin:right;transition:transform .38s var(--e-out)}
.lnk:hover{color:var(--lime)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}

.next{border-radius:20px;padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;
  gap:clamp(12px,1.8vh,20px)}
.next__t{font:500 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lime)}
.next__l{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,16px)}
.next__l li{display:grid;grid-template-columns:2.1em minmax(0,1fr);align-items:baseline;gap:.2em;
  padding-bottom:clamp(10px,1.5vh,16px);border-bottom:1px solid var(--line)}
.next__l li:last-child{border-bottom:0;padding-bottom:0}
.next__l b{font:500 10px/1.5 var(--f-mono);letter-spacing:.14em;color:var(--fg-mute);font-weight:500}
.next__l span{color:var(--fg-dim);font-size:clamp(13px,.92vw,15px);font-weight:300;line-height:1.55}
.next__f{font-size:clamp(12px,.86vw,13.5px);color:var(--fg-mute);font-weight:300}
.next__f i{font-style:normal;color:var(--lime);font-size:1.15em}

/* ---------- 17. Бюджет кадра на время перехода ----------
   Пока едет линза, каждый лишний backdrop-filter и каждая фоновая
   анимация пересчитываются на каждом кадре. Снимаем всё, кроме самой линзы;
   фон подменён так, что подмены не видно. */
html.is-shifting .card__face--front,
html.is-shifting .proto__go,
html.is-shifting .next,
html.is-shifting .btn--glass,
html.is-shifting .core__glass{backdrop-filter:none;-webkit-backdrop-filter:none}
html.is-shifting .card__face--front,
html.is-shifting .next{background:linear-gradient(150deg,rgba(232,237,229,.088),rgba(232,237,229,.032) 42%,rgba(232,237,229,.062))}
html.is-shifting .btn--glass{background:rgba(232,237,229,.075)}
html.is-shifting .core__glass{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.13),rgba(232,237,229,.05) 55%,rgba(232,237,229,.02) 72%)}
html.is-shifting .bg__aura,
html.is-shifting .bg__scan,
html.is-shifting .ticker__track,
html.is-shifting .core__ring,
html.is-shifting .core__dot,
html.is-shifting .btn__sheen,
html.is-shifting .hint__wheel i,
html.is-shifting .btn--lime::before{animation-play-state:paused}

/* ---------- 18. Адаптив ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,32px)}
  .core{--s:clamp(118px,31vw,170px);align-self:flex-start;order:-1}
  .ask{grid-template-columns:minmax(0,1fr);gap:14px}
  .ask__out{justify-self:start;text-align:left;max-width:none}
  .cards{grid-template-columns:minmax(0,1fr)}
  .protos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .cgrid{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(16px,2.6vh,26px)}
  .work{grid-template-columns:32px minmax(0,1fr) 18px;row-gap:4px}
  .work__h{grid-column:2}
  .work__t{grid-column:2}
  .work__m{grid-column:2}
  .work__mark{grid-column:3;grid-row:1}
  .hint,.copy__c,.copy i{display:none}
  .ticker{display:none}
}
@media (max-width:640px){
  :root{--rail-w:0px}
  /* оставляем колонку под точки рельса, иначе управление накрывает контент */
  .wrap{padding-right:22px}
  .frame__in{padding-block:calc(var(--hud-h) + 8px) 58px;gap:18px}
  .protos{grid-template-columns:minmax(0,1fr)}
  .cards,.steps,.works,.protos,.cgrid{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to bottom,#000 86%,rgba(0,0,0,.15));
    mask-image:linear-gradient(to bottom,#000 86%,rgba(0,0,0,.15))}
  .next{padding:16px;border-radius:14px}
  .card,.card__face{border-radius:14px}
  .card__face{padding:16px}
  .card__mark{top:12px;right:12px}
  .ask__out{display:none}
  .ask__t{margin-bottom:.6em}
  .hud__right .btn--glass{padding:.7em 1em}
  .btn__mark{display:none}
}
@media (max-height:620px) and (min-width:901px){
  .ask{display:none}
  .frame__in{gap:16px}
}

/* ---------- 19. Доступность и деградация ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .frame.is-entering,.frame.is-out{animation:none!important;clip-path:none!important}
  .frame.is-out{opacity:0}
  .rv{opacity:1!important}
  .meniscus{display:none}
  .bg__scan,.bg__aura,.core__pulse{display:none}
  .steps::after{transform:scaleX(1)}
  .step__node{opacity:1;transform:none}
}

/* Без JS — обычная страница со скроллом */
html.no-js body{overflow:auto}
html.no-js .deck{position:static;inset:auto}
html.no-js .frame{position:relative;inset:auto;opacity:1;visibility:visible;content-visibility:visible;
  min-height:100vh;border-bottom:1px solid var(--line)}
html.no-js .rv{opacity:1}
html.no-js .rail,html.no-js .meniscus,html.no-js .hint{display:none}
/* конструктор без JS не работает — прячем, кнопка «Обсудить проект» остаётся */
html.no-js .ask{display:none}
html.no-js .hud{position:sticky}