/* DARK Studio: главная страница. Чёрная основа, сцены с полом и свечением, карточки матового стекла. */
:root{
  color-scheme:dark;
  --bg:#000; --ink:#f5f5f7; --dim:#8e8e93; --dim2:#a9a9ae; --line:rgba(255,255,255,.13);
  --magenta:#FA1F66; --cyan:#00C7FF; --lime:#A6FF00;
  --gutter:clamp(16px,4vw,48px);
  --nav:52px;
  --ease:cubic-bezier(.2,.72,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Всё, что влияет на вписывание в экран: заголовок, подпись и размер карточки считаются от высоты и ширины окна */
  --title:clamp(30px,min(4.5vw,6.5vh),60px);
  --lead:clamp(15px,min(1.3vw,2.25vh),19px);
  --ratio:1.629;
  --head-h:calc(var(--title)*2.2 + 40px);
  --under-h:76px;
  --card-max:calc(100vh - var(--nav) - var(--head-h) - var(--under-h) - 82px);
  --card-w:min(84vw,1320px,calc(var(--card-max)*var(--ratio)));
  --img-h:calc(var(--card-w)/var(--ratio));
  --pad:clamp(7px,.75vw,11px);
}
@supports (height:100svh){:root{--card-max:calc(100svh - var(--nav) - var(--head-h) - var(--under-h) - 82px)}}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
[id]{scroll-margin-top:var(--nav)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:999px;background:var(--ink);color:#000;font-size:16px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;transition:background-color .2s,transform .2s var(--ease)}
.btn:hover{background:#fff}
.btn:active{transform:scale(.98)}
.btn-small{min-height:32px;padding:0 14px;font-size:13px}
.link{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;white-space:nowrap}
.link::after{content:"";width:7px;height:7px;margin:0 2px 3px 9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease)}
.link:hover::after{transform:translateY(3px) rotate(45deg)}

/* Навигация */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.nav.solid{background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:100%;max-width:1320px;margin:auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.018em;white-space:nowrap}
.mark{width:28px;height:28px;flex:none}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13px;color:var(--dim2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{content:"";position:absolute;left:50%;bottom:-1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--dot,var(--ink))}
.nav-links a[data-group=materials]{--dot:var(--magenta)}
.nav-links a[data-group=ads]{--dot:var(--cyan)}
.nav-links a[data-group=overview]{--dot:var(--lime)}
@media (max-width:700px){.nav-links{display:none}.nav-in{justify-content:space-between}}

/* Появление */
.js .reveal{opacity:0;transform:translateY(26px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.js .rise{opacity:0;transform:translateY(22px);animation:rise 1.1s var(--ease) var(--d,0s) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* Матовое стекло. Настоящее размытие только у карточки в центре, у соседних матовая заливка: так дешевле при прокрутке */
.glass{position:relative;display:block;padding:var(--pad);border-radius:calc(var(--pad) + clamp(10px,1vw,15px));background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 34%,rgba(255,255,255,.07));box-shadow:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.3),0 34px 90px -30px rgba(0,0,0,.95)}
.slide.on .glass,.hero-glass{-webkit-box-reflect:below 3px linear-gradient(to bottom,transparent 90%,rgba(255,255,255,.15))}
.glass img{background:#0b0b0d;border-radius:clamp(10px,1vw,15px);-webkit-user-drag:none;user-select:none}
.slide.on .glass,.hero-glass{-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%)}
.stage.moving .slide .glass{-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-box-reflect:unset}

/* Комната: стена со свечением, пол с отражением, блик на линии стыка */
.room{position:absolute;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;z-index:0;--hor:calc(var(--top,24px) + var(--img-h)*.9);top:0;bottom:0}
.wall{position:absolute;left:0;right:0;bottom:calc(100% - var(--hor));height:calc(var(--img-h)*1.25 + 200px);opacity:calc(.92*var(--k,1));background:radial-gradient(46% 72% at 50% 100%,rgba(var(--c-rgb),.9),rgba(var(--c-rgb),.42) 38%,rgba(var(--c-rgb),.1) 68%,rgba(var(--c-rgb),0) 100%);transform-origin:50% 100%;will-change:transform,opacity}
.floor{position:absolute;left:0;right:0;top:var(--hor);height:clamp(150px,26vh,320px);opacity:calc(.82*var(--k,1));background:radial-gradient(52% 100% at 50% 0,rgba(var(--c-rgb),.62),rgba(var(--c-rgb),.2) 44%,rgba(var(--c-rgb),0) 78%)}
.floor::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 26%)}
.glint{position:absolute;left:0;right:0;top:var(--hor);height:1px;overflow:hidden;background:radial-gradient(40% 100% at 50% 50%,rgba(255,255,255,.62),rgba(var(--c-rgb),.7) 46%,rgba(var(--c-rgb),0) 100%);opacity:var(--k,1)}
.glint::after{content:"";position:absolute;top:0;bottom:0;left:0;width:26%;background:linear-gradient(90deg,transparent,#fff,transparent);transform:translateX(-120%);will-change:transform}
.js .scene .room,.js .hero .room,.js .final .room{opacity:0;transition:opacity 1.5s var(--ease)}
.js .lit>.room,.js .lit .stage>.room{opacity:1}
.lit .wall{animation:breathe 8s ease-in-out infinite alternate}
.lit .glint::after{animation:sweep 6.5s ease-in-out .6s infinite}
.off .wall,.off .glint::after{animation-play-state:paused}
@keyframes breathe{from{transform:translateX(var(--gx,0)) scale(1)}to{transform:translateX(var(--gx,0)) scale(1.07,1.13)}}
@keyframes sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(480%)}}
.room-tri{--c-rgb:255,255,255}
.room-tri .wall{background:radial-gradient(32% 70% at 22% 100%,rgba(250,31,102,.86),rgba(250,31,102,.3) 46%,rgba(250,31,102,0) 100%),radial-gradient(32% 70% at 78% 100%,rgba(0,199,255,.82),rgba(0,199,255,.3) 46%,rgba(0,199,255,0) 100%),radial-gradient(34% 62% at 50% 100%,rgba(166,255,0,.5),rgba(166,255,0,.14) 52%,rgba(166,255,0,0) 100%)}
.room-tri .floor{background:radial-gradient(30% 100% at 22% 0,rgba(250,31,102,.52),rgba(250,31,102,0) 76%),radial-gradient(30% 100% at 78% 0,rgba(0,199,255,.52),rgba(0,199,255,0) 76%),radial-gradient(30% 100% at 50% 0,rgba(166,255,0,.32),rgba(166,255,0,0) 76%)}
.room-tri .glint{background:radial-gradient(46% 100% at 50% 50%,rgba(255,255,255,.7),rgba(255,255,255,.2) 60%,rgba(255,255,255,0) 100%)}

/* Вступление */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--nav) + clamp(10px,2.4vh,30px)) var(--gutter) 28px;text-align:center;overflow:clip;--hero-text:calc(min(10.5vw,14vh)*1.02 + min(2.7vw,4vh)*1.2 + 44px + clamp(20px,3.4vh,34px) + 60px);--hero-max:calc(100vh - var(--nav) - var(--hero-text) - 84px);--hero-w:min(84vw,1320px,calc(var(--hero-max)*var(--ratio)));--img-h:calc(var(--hero-w)/var(--ratio));--top:0px}
@supports (height:100svh){.hero{--hero-max:calc(100svh - var(--nav) - var(--hero-text) - 84px)}}
.hero-text{position:relative;z-index:1}
.hero-eyebrow{font-size:clamp(17px,min(1.7vw,2.7vh),24px);font-weight:600;letter-spacing:-.018em}
.hero h1{font-size:clamp(50px,min(10.5vw,14vh),148px);line-height:1.02;font-weight:700;letter-spacing:-.045em}
.hero-sub{margin-top:clamp(4px,1vh,10px);font-size:clamp(21px,min(2.7vw,4vh),38px);line-height:1.18;font-weight:600;letter-spacing:-.026em;color:var(--dim2);text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 24px;margin-top:clamp(12px,2.2vh,24px)}
.hero-glass{z-index:1;width:var(--hero-w);margin-top:clamp(18px,3.4vh,34px)}
.hero .room{top:auto;bottom:0;height:0;--hor:0px}
.hero .room{position:absolute;top:0;bottom:0;height:auto;--hor:calc(100% - clamp(80px,12vh,120px))}
.hero .wall{bottom:calc(100% - var(--hor));height:calc(var(--hor) - 60px)}

/* Идея */
.manifest{position:relative;padding:clamp(80px,14vh,150px) var(--gutter) clamp(60px,10vh,110px)}
.manifest-text{max-width:1040px;margin:auto;font-size:clamp(25px,min(4.1vw,5.6vh),52px);line-height:1.13;font-weight:700;letter-spacing:-.032em}
.js .manifest-text .w{color:#3a3a3d;transition:color .4s linear}
.js .manifest-text .w.on{color:var(--ink)}
.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1040px;margin:clamp(40px,7vh,70px) auto 0}
.map-card{position:relative;display:block;padding:clamp(18px,2vw,26px);border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07);overflow:hidden;transition:background-color .25s}
.map-card:hover{background:rgba(255,255,255,.11)}
.map-dot{display:block;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 22px 4px var(--c)}
.map-card h2{margin-top:clamp(18px,3vh,34px);font-size:clamp(20px,2vw,26px);line-height:1.1;font-weight:700;letter-spacing:-.024em}
.map-card p{margin-top:6px;color:var(--dim2);font-size:clamp(14px,1.15vw,16px)}
@media (max-width:700px){.map-grid{grid-template-columns:1fr}}

/* Группа */
.group{position:relative}
.group-head{position:relative;padding:clamp(70px,13vh,140px) var(--gutter) clamp(24px,5vh,50px);text-align:center}
.group-flash{position:absolute;left:50%;top:0;width:min(1400px,150vw);height:100%;margin-left:calc(min(1400px,150vw)/-2);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--c-rgb),.6),rgba(var(--c-rgb),.22) 52%,rgba(var(--c-rgb),0));opacity:calc(.6*var(--k,1));pointer-events:none}
.js .group-flash{opacity:0}
.js .group-head.lit .group-flash{animation:groupflash 2.1s var(--ease) forwards}
@keyframes groupflash{0%{opacity:0;transform:scale(.62)}40%{opacity:var(--k,1);transform:scale(1.05)}100%{opacity:calc(.56*var(--k,1));transform:scale(1)}}
.group-tag{position:relative;font-size:clamp(17px,min(1.6vw,2.6vh),22px);font-weight:600;letter-spacing:-.018em;color:var(--c)}
.group-title{position:relative;margin:6px auto 0;max-width:17em;font-size:clamp(34px,min(6vw,8.6vh),84px);line-height:1.04;font-weight:700;letter-spacing:-.038em;text-wrap:balance}

/* Сцена возможности: заголовок и карточка всегда помещаются на один экран */
.scene{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--nav));padding:clamp(10px,2vh,22px) 0 clamp(8px,1.6vh,16px);overflow:clip}
.head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;column-gap:clamp(24px,4vw,56px);width:min(1320px,100%);margin:0 auto clamp(10px,2vh,22px);padding:0 var(--gutter);will-change:transform}
.eyebrow{font-size:clamp(14px,min(1.25vw,2.1vh),18px);font-weight:600;letter-spacing:-.012em;color:var(--c)}
.title{margin-top:2px;font-size:var(--title);line-height:1.06;font-weight:700;letter-spacing:-.034em;text-wrap:balance}
.lead{font-size:var(--lead);line-height:1.36;font-weight:500;letter-spacing:-.012em;color:var(--dim);text-wrap:pretty}
.lead b{font-weight:500;color:var(--ink)}

/* Сцена и лента */
.stage{position:relative;--top:24px}
.rail{position:relative;z-index:1;display:flex;gap:clamp(14px,2vw,30px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:var(--top) calc((100vw - var(--card-w))/2) clamp(58px,8vh,84px);margin-bottom:calc(-1*clamp(50px,7vh,74px));cursor:grab;-webkit-overflow-scrolling:touch;outline-offset:-4px}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.slide{flex:none;width:var(--card-w);scroll-snap-align:center;scroll-snap-stop:always}
.slide .glass{transform-origin:50% 100%;will-change:transform,opacity;backface-visibility:hidden}
.js .stage .slide{opacity:0;transform:translateY(46px) scale(.96)}
.js .stage.in .slide{opacity:1;transform:none;transition:opacity 1s var(--ease) calc(var(--i,0)*.09s),transform 1.2s var(--ease) calc(var(--i,0)*.09s)}

/* Стрелки */
.arrow{position:absolute;z-index:3;top:calc(var(--top) + var(--img-h)/2 - 22px);width:44px;height:44px;border-radius:50%;background:rgba(40,40,44,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.12);display:grid;place-items:center;transition:opacity .25s,background-color .2s,transform .2s var(--ease)}
.arrow:hover{background:rgba(70,70,76,.82)}
.arrow:active{transform:scale(.94)}
.arrow span{width:10px;height:10px;border-top:2px solid var(--ink);border-right:2px solid var(--ink)}
.prev{left:max(var(--gutter),calc(50vw - var(--card-w)/2 - 62px))}
.next{right:max(var(--gutter),calc(50vw - var(--card-w)/2 - 62px))}
.prev span{transform:translateX(2px) rotate(-135deg)}
.next span{transform:translateX(-2px) rotate(45deg)}
.arrow[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.arrow{display:none}}

/* Подпись и точки */
.under{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);min-height:var(--under-h);padding:0 var(--gutter)}
.caps{display:grid;width:min(760px,100%);text-align:center}
.cap{grid-area:1/1;font-size:clamp(14px,min(1.15vw,2vh),17px);line-height:1.36;color:var(--dim2);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ease);text-wrap:pretty}
.cap.on{opacity:1;transform:none}
.cap b{font-weight:600;color:var(--ink)}
.dots{display:flex;gap:2px}
.dot{display:block;padding:8px 4px}
.dot i{display:block;position:relative;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.28);overflow:hidden;transition:width .4s var(--ease),background-color .25s}
.dot:hover i{background:rgba(255,255,255,.5)}
.dot.on i{width:30px;background:rgba(255,255,255,.28)}
.dot i::after{content:"";position:absolute;inset:0;background:var(--c,var(--ink));border-radius:inherit;transform:translateX(-101%)}
.dot.on i::after{transform:none}
.auto .dot.on i::after{transform:translateX(-101%);animation:fill 5.2s linear forwards}
.paused .dot.on i::after{animation-play-state:paused}
@keyframes fill{to{transform:none}}

/* Чат */
.scene-chat{--chat-h:clamp(350px,var(--card-max),424px);--card-w:min(82vw,392px);--img-h:var(--chat-h)}
.scene-chat .arrow{display:none}
.chat-card{display:flex;flex-direction:column;height:var(--chat-h);padding:0;overflow:hidden;font-size:14px;line-height:1.36;letter-spacing:-.005em;text-align:left}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.chat-ava{width:32px;height:32px;flex:none}
.chat-head b{display:block;font-size:14px;font-weight:600}
.chat-head small{display:block;margin-top:-1px;font-size:12px;color:var(--dim2)}
.chat-body{flex:1;min-height:0;padding:10px 11px 8px;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.bubble{width:100%;padding:10px 13px 11px;border-radius:15px 15px 15px 5px;background:rgba(30,30,34,.86)}
.bubble.me{align-self:flex-end;width:auto;padding:7px 12px;border-radius:15px 15px 5px 15px;background:rgba(var(--c-rgb),.24);font-weight:500}
.bubble p+p{margin-top:7px}
.bubble b{font-weight:600}
.bubble i{font-style:italic;color:var(--dim2)}
.emoji{font-style:normal}
.chat-keys{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 11px 12px}
.chat-keys span{display:flex;align-items:center;justify-content:center;min-height:34px;padding:3px 5px;border-radius:9px;background:rgba(30,30,34,.86);font-size:12.5px;font-weight:500;text-align:center;letter-spacing:-.008em}

/* Плитки */
.more{position:relative;padding:clamp(70px,12vh,130px) var(--gutter) 0;text-align:center}
.more-title{font-size:clamp(30px,min(5vw,7vh),60px);line-height:1.05;font-weight:700;letter-spacing:-.034em}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:1180px;margin:clamp(26px,5vh,50px) auto 0;text-align:left}
.tile{padding:clamp(18px,2vw,26px);border-radius:20px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.07)}
.tile h3{font-size:clamp(18px,1.6vw,21px);line-height:1.15;font-weight:700;letter-spacing:-.02em}
.tile h3::before{content:"";display:inline-block;width:8px;height:8px;margin:0 9px 2px 0;border-radius:50%;background:var(--c);box-shadow:0 0 12px 1px var(--c)}
.tile p{margin-top:8px;color:var(--dim2);font-size:clamp(14px,1.1vw,16px);line-height:1.4;text-wrap:pretty}
@media (max-width:900px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.more-grid{grid-template-columns:1fr}}

/* Финал */
.final{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:82vh;margin-top:clamp(40px,8vh,90px);padding:clamp(60px,10vh,110px) var(--gutter) clamp(120px,20vh,190px);text-align:center;overflow:clip}
.final>*:not(.room){position:relative;z-index:1}
.final .room{--hor:calc(100% - clamp(90px,15vh,150px))}
.final .wall{bottom:calc(100% - var(--hor));height:var(--hor)}
.final-mark{width:clamp(64px,10vh,88px);height:clamp(64px,10vh,88px);margin-bottom:22px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.final h2{font-size:clamp(34px,min(6.6vw,9vh),92px);line-height:1.03;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.final p{margin-top:12px;font-size:clamp(16px,min(1.6vw,2.6vh),21px);font-weight:500;letter-spacing:-.014em;color:var(--dim2);text-wrap:balance}
.final .btn{margin-top:24px}

/* Подвал */
.foot{padding:22px var(--gutter) 34px;border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--dim);text-align:center}
.foot p+p{margin-top:3px}

/* Планшет и телефон */
@media (max-width:1000px){
  .head{grid-template-columns:1fr;row-gap:6px;text-align:center}
  :root{--head-h:calc(var(--title)*2.2 + 92px)}
}
@media (max-width:700px){
  :root{--ratio:.9355;--title:clamp(29px,8vw,36px);--lead:16px;--card-w:84vw;--under-h:96px;--pad:6px}
  .scene{min-height:0;padding:28px 0 12px}
  .hero{--hero-w:min(84vw,calc((100svh - 380px)*.9355));min-height:0;padding-bottom:40px}
  .hero h1{font-size:clamp(44px,14vw,60px)}
  .hero .room{--hor:calc(100% - 78px)}
  .slide.on .glass,.hero-glass{-webkit-box-reflect:below 2px linear-gradient(to bottom,transparent 93%,rgba(255,255,255,.12))}
  .scene-chat{--chat-h:410px;--card-w:82vw;--img-h:410px}
}

/* Путь аккаунта: пять шагов на полу сцены */
.scene-path{--img-h:clamp(190px,30vh,290px);min-height:0;padding-bottom:clamp(30px,6vh,70px)}
.path-stage{--top:30px;padding:var(--top) 0 clamp(30px,5vh,56px)}
.path{position:relative;z-index:1;counter-reset:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px);width:min(1320px,100%);margin:auto;padding:0 var(--gutter);list-style:none}
.path::before,.path::after{content:"";position:absolute;left:calc(var(--gutter) + 36px);right:calc(var(--gutter) + 36px);top:32px;height:2px;border-radius:2px;pointer-events:none}
.path::before{background:rgba(255,255,255,.14)}
.path::after{background:linear-gradient(90deg,rgba(var(--c-rgb),.25),rgb(var(--c-rgb)));transform-origin:0 50%}
.js .path::after{transform:scaleX(0)}
.js .path-stage.in .path::after{transform:none;transition:transform 2.4s cubic-bezier(.3,.1,.2,1) .25s}
.step{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(14px,1.3vw,20px);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 40%,rgba(255,255,255,.06));box-shadow:0 0 0 1px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.28),0 30px 70px -30px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.step.mine{box-shadow:0 0 0 1.5px rgb(var(--c-rgb)),inset 0 1px 0 rgba(255,255,255,.3),0 0 46px -8px rgba(var(--c-rgb),.75),0 30px 70px -30px rgba(0,0,0,.95)}
.js .stage.path-stage .step{opacity:0;transform:translateY(30px) scale(.97)}
.js .stage.path-stage.in .step{opacity:1;transform:none;transition:opacity .8s var(--ease) calc(.2s + var(--i)*.42s),transform 1s var(--ease) calc(.2s + var(--i)*.42s)}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0d0d10;box-shadow:0 0 0 1.5px rgb(var(--c-rgb)),0 0 18px rgba(var(--c-rgb),.65);font-size:14px;font-weight:700;letter-spacing:0}
.step h4{margin:clamp(10px,1.6vh,16px) 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.15;font-weight:700;letter-spacing:-.018em}
.step p{flex:1;margin-top:6px;font-size:clamp(13px,min(1.02vw,1.85vh),15px);line-height:1.36;color:var(--dim2);text-wrap:pretty}
.step-tag{margin-top:clamp(8px,1.4vh,14px);padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11.5px;font-weight:600;color:var(--dim2);white-space:nowrap}
.step.mine .step-tag{background:rgb(var(--c-rgb));color:#00141a}
.path-stage .room{--hor:calc(100% - clamp(34px,6vh,58px))}
.path-stage .wall{height:calc(var(--hor) + 30px)}
.path-stage .floor{height:clamp(90px,13vh,120px)}
.scene-path{padding-bottom:clamp(44px,8vh,84px)}
@media (max-width:1000px){
  .path{grid-template-columns:1fr;gap:10px;max-width:560px}
  .path::before,.path::after{left:calc(var(--gutter) + 29px);right:auto;top:36px;bottom:36px;width:2px;height:auto}
  .path::after{background:linear-gradient(180deg,rgba(var(--c-rgb),.25),rgb(var(--c-rgb)));transform-origin:50% 0}
  .js .path::after{transform:scaleY(0)}
  .step{display:grid;grid-template-columns:32px 1fr auto;column-gap:12px;align-items:start}
  .step h4{margin:0;grid-column:2;align-self:center;min-height:32px;display:flex;align-items:center}
  .step p{grid-column:2/4;margin-top:2px}
  .step-tag{grid-column:3;grid-row:1;margin:4px 0 0}
}
@media (max-width:700px){.scene-path{--img-h:560px;padding-top:28px}}
@media (prefers-reduced-motion:reduce){
  .js .stage.path-stage .step{opacity:1!important;transform:none!important;transition:none!important}
  .js .path::after{transform:none!important;transition:none!important}
}

/* Без движения */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .rise,.js .stage .slide{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .js .scene .room,.js .hero .room,.js .final .room{opacity:1!important;transition:none!important}
  .wall,.glint::after{animation:none!important}
  .js .group-flash{opacity:calc(.56*var(--k,1))!important;animation:none!important}
  .js .manifest-text .w{color:var(--ink);transition:none}
  .slide .glass,.head{transform:none!important;will-change:auto}
  .cap,.dot i,.btn,.link::after,.arrow{transition:none}
  .dot.on i::after{animation:none!important;transform:none!important}
}

/* Если кадры не идут (скрытая вкладка, снимок страницы), вступление всё равно видно */
.settled .rise{opacity:1!important;transform:none!important;animation:none!important}
.settled .hero>.room{opacity:1!important}