:root{--blue:#1E2BFF;--paper:#F4F3EF;--ink:#0B0B12;--muted:#4B4B5A;--soft:rgba(244,243,239,.86);--line:rgba(11,11,18,.2);--fd:"Tektur",system-ui,sans-serif;--ft:"Golos Text",system-ui,sans-serif;--fm:"IBM Plex Mono",ui-monospace,monospace;--ease:cubic-bezier(.16,1,.3,1);--wrap:1240px;--g:clamp(1.25rem,4vw,3rem);--hh:64px;--nb-cursor-bg:#0B0B12;--nb-cursor-ink:#F4F3EF}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.0625rem/1.55 var(--ft);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.blue :focus-visible,.hdr :focus-visible,.foot :focus-visible,.mode.dark :focus-visible{outline-color:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.mono{font-family:var(--fm);font-size:.875rem;letter-spacing:.01em}
.blue{background:var(--blue);color:var(--paper)}
section[id]{scroll-margin-top:var(--hh)}
.fine{font-family:var(--fm);font-size:.8125rem;line-height:1.5;color:var(--muted)}
.blue .fine,.mode.dark .fine{color:var(--soft)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.85em 1.6em;font:600 1rem/1 var(--ft);text-decoration:none;white-space:nowrap;border:0;border-radius:0;cursor:pointer;background:var(--ink);color:var(--paper);transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-light{background:var(--paper);color:var(--blue)}
.btn-light:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:44px;padding:.6em 1.1em;font-size:.9375rem}

.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hh);color:var(--paper);transition:background-color .25s var(--ease)}
.hdr.scrolled{background:var(--ink)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font:800 1.5rem/1 var(--fd);letter-spacing:-.03em;text-decoration:none}
.nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)}
.nav a:not(.btn){min-height:44px;display:inline-flex;align-items:center;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:not(.btn):hover{border-color:currentColor}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:opacity .9s var(--ease)}
.hero.is-3d .hero-img{opacity:0}
.hero-3d{position:absolute;inset:0}
.hero-3d canvas{display:block;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:36%;background:linear-gradient(to top,rgba(30,43,255,.9),rgba(30,43,255,.62) 45%,rgba(30,43,255,0));pointer-events:none}
@media (min-width:761px){.hero::after{height:60%;background:radial-gradient(ellipse 44% 60% at 20% 80%,rgba(30,43,255,.96),rgba(30,43,255,.82) 40%,rgba(30,43,255,0) 100%),linear-gradient(to top,rgba(30,43,255,.9),rgba(30,43,255,.55) 27%,rgba(30,43,255,0) 60%)}}
.hero-in{position:relative;z-index:2;width:100%;padding-top:calc(var(--hh) + 2rem);padding-bottom:clamp(2rem,6vh,4.5rem);pointer-events:none}
.hero-in a{pointer-events:auto}
.hero h1{display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1.5rem)}
.hero-word{display:block;font-size:clamp(4.5rem,24vw,24rem);font-weight:800;line-height:.8;letter-spacing:-.045em;margin-left:-.04em;padding-bottom:.2em}
.hero-tag{font-size:clamp(1.5rem,1rem + 2.4vw,3.25rem);font-weight:500;line-height:1.05;letter-spacing:-.01em}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-top:clamp(1.25rem,3vw,2.25rem)}
.hero-lead{max-width:44ch;color:var(--soft)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}

.manifest{padding:clamp(96px,14vw,200px) 0 clamp(72px,9vw,140px)}
.manifest h2{font-size:clamp(2.4rem,1rem + 6.2vw,7.5rem);line-height:.98;letter-spacing:-.03em;max-width:15ch}
.manifest p{margin-top:clamp(2rem,4vw,3rem);max-width:52ch;color:var(--muted);font-size:1.125rem}

.how{padding:clamp(96px,11vw,160px) 0}
.how h2,.modes h2,.nums h2,.order h2{font-size:clamp(2.2rem,1.2rem + 3.4vw,4.5rem);letter-spacing:-.03em}
.how h2{max-width:14ch}
.how-line{display:block;width:100%;height:clamp(90px,14vw,190px);margin:clamp(2rem,5vw,4rem) 0}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem)}
.steps li{border-top:1px solid rgba(244,243,239,.45);padding-top:1.25rem}
.step-n{display:block;font:700 clamp(3.5rem,2rem + 5vw,7rem)/.9 var(--fd);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.5rem;margin:1rem 0 .5rem}
.steps p{max-width:34ch;color:var(--soft)}

.object{background:var(--blue)}
.object-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:var(--blue)}
.object h2{position:absolute;top:calc(var(--hh) + 1.5rem);left:var(--g);z-index:2;max-width:12ch;font-size:clamp(1.75rem,1rem + 2.4vw,3.25rem)}
.object-fig{width:min(980px,66vw);transform:scale(calc(.8 + var(--nb-p,1) * .35));will-change:transform;mix-blend-mode:lighten}
.object-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.co{position:absolute;z-index:2;width:clamp(150px,17vw,230px);--l:calc(50vw - var(--g) - clamp(150px,17vw,230px) - 11vw);--o:clamp(0,calc((var(--nb-p,1) - var(--at)) * 7),1);opacity:var(--o);transform:translateY(calc((1 - var(--o)) * 18px))}
.co b{display:block;font:500 clamp(1.125rem,.7rem + 1vw,1.625rem)/1.15 var(--fm);letter-spacing:-.01em}
.co span{display:block;margin-top:.5rem;font-family:var(--fm);font-size:.8125rem;line-height:1.4;color:var(--soft)}
.co::after{content:"";position:absolute;top:.8em;width:var(--l);height:1px;background:var(--paper);transform:scaleX(var(--o));transform-origin:left}
.co::before{content:"";position:absolute;top:calc(.8em - 3px);width:7px;height:7px;border-radius:50%;background:var(--paper);opacity:var(--o)}
.co1::after,.co3::after{left:calc(100% + 12px)}
.co1::before,.co3::before{left:calc(100% + 9px + var(--l))}
.co2::after,.co4::after{right:calc(100% + 12px);transform-origin:right}
.co2::before,.co4::before{right:calc(100% + 9px + var(--l))}
.co1{--at:.08;left:var(--g);top:38%}
.co2{--at:.28;right:var(--g);top:44%;text-align:right}
.co3{--at:.48;left:var(--g);top:53%}
.co4{--at:.68;right:var(--g);top:59%;text-align:right}

.modes{padding:clamp(96px,11vw,160px) 0 clamp(72px,9vw,120px)}
.modes-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 3rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.modes-head p{max-width:32ch;color:var(--soft)}
.stack{display:grid;gap:10vh}
.mode{position:sticky;top:calc(var(--hh) + 16px + var(--i) * 26px);display:grid;grid-template-columns:7fr 5fr;min-height:min(76svh,620px);background:var(--paper);color:var(--ink);border:1px solid var(--ink);overflow:hidden}
.mode.dark{background:var(--ink);color:var(--paper);border-color:rgba(244,243,239,.3)}
.mode-txt{display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;padding:clamp(1.5rem,3.5vw,3rem)}
.mode h3{font-size:clamp(2rem,1rem + 3vw,4rem)}
.mode-num{font:800 clamp(4.5rem,2rem + 9vw,11rem)/.85 var(--fd);letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.mode.dark .mode-num{color:var(--paper)}
.mode-num small{margin-left:.45em;font:500 1rem/1 var(--fm);letter-spacing:0}
.mode p{max-width:42ch}
.mode figure{margin:0;overflow:hidden}
.mode img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.mode:hover img{transform:scale(1.03)}

.nums{padding:clamp(80px,9vw,140px) 0}
.nums-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(2rem,5vw,3.5rem);border-top:2px solid var(--ink)}
.num{padding:1.5rem 1.5rem 0 0}
.num+.num{padding-left:1.5rem;border-left:1px solid var(--line)}
.num b{display:block;font:800 clamp(4.5rem,2rem + 8vw,10rem)/.9 var(--fd);letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.num .mono{display:block;margin:.75rem 0 .35rem}
.num p{max-width:26ch;color:var(--muted)}
.nums-fine{margin-top:2.5rem;max-width:70ch}

.order{padding:clamp(96px,11vw,160px) 0}
.order-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.price{margin:1.5rem 0 1rem;font:800 clamp(3.5rem,2rem + 5vw,7rem)/.9 var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.order-note{max-width:40ch;color:var(--soft)}
.form{display:grid;gap:1.25rem}
.field label{display:block;margin-bottom:.4rem;font-family:var(--fm);font-size:.875rem}
.field input{width:100%;min-height:52px;padding:.75rem 1rem;font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--paper);border-radius:0;transition:border-color .2s}
.field input:hover{border-color:var(--ink)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin-top:.1rem;accent-color:var(--ink)}
.form-err{min-height:1.4em;font-family:var(--fm);font-size:.875rem}
.form-send{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.ok{padding:1.5rem;background:var(--paper);color:var(--ink);font-size:1.125rem}

.foot{padding:64px 0 40px;background:var(--ink);color:var(--paper);font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:4fr 5fr 3fr;gap:2rem 3rem}
.foot p+p{margin-top:.6rem}
.foot .logo{display:block;margin-bottom:1rem;font-size:2.25rem}
.foot-priv,.foot-small{color:var(--soft)}
.foot-small{font-family:var(--fm);font-size:.8125rem}

@media (max-width:1024px){
  .object-stage{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h h" "a b" "f f" "c d";align-content:center;gap:1.25rem var(--g);padding:calc(var(--hh) + 1rem) var(--g) 1.5rem}
  .object h2{position:static;grid-area:h;max-width:none}
  .object-fig{grid-area:f;justify-self:center;width:min(88vw,calc(42svh * 1.78))}
  .co{position:static;width:auto}
  .co::before,.co::after{display:none}
  .co1{grid-area:a}.co2{grid-area:b}.co3{grid-area:c}.co4{grid-area:d}
  .order-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-small{grid-column:1/-1}
}
@media (max-width:760px){
  .steps{grid-template-columns:1fr}
  .how-line path{stroke-width:5}
  .hero-3d{inset:0 0 auto;height:55svh;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
  .hero-word{font-size:31vw}
  .object-fig{width:min(100%,46svh)}
  .object-fig img{aspect-ratio:1/1;object-position:center}
  .mode{grid-template-columns:1fr;min-height:0;top:calc(var(--hh) + 8px + var(--i) * 14px)}
  .mode figure{order:-1}
  .mode img{height:auto;aspect-ratio:16/10;max-height:30svh}
  .nums-grid{grid-template-columns:1fr}
  .num+.num{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .num{padding:1.25rem 0}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .nav{gap:.75rem}
  .co b{font-size:1.0625rem}
  .co span{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .object-fig{transform:none}
  .co{opacity:1;transform:none}
  .co::after{transform:none}
  .co::before{opacity:1}
  *{transition-duration:.01ms!important}
}