@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:scale(.97)}}
@keyframes vt-in{from{opacity:0;transform:translateY(40px)}}
:root{--bg:#F6F1EB;--sand:#ECE3D9;--ink:#252A33;--or:#DF8448;--w:#fff;--f:'Onest',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--f);overflow-x:hidden;transition:background .8s,color .8s}
body.dark{--bg:#1D2128;--sand:#2B3039;--ink:#F6F1EB}
a{color:inherit}img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
@media(pointer:fine){body,a,button,input{cursor:none}}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
h1,h2,h3{font-weight:800;letter-spacing:-.045em;line-height:.95}
h1{font-size:clamp(3rem,8vw,7.2rem)}h2{font-size:clamp(2.4rem,6vw,5rem);margin-bottom:.5em}h3{font-size:1.4rem;letter-spacing:-.02em}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:36ch;opacity:.8}
section{padding:clamp(80px,12vw,160px) 0}
/* nav */
nav{position:fixed;inset:0 0 auto;z-index:50;padding:16px 0;transition:background .8s}
nav .wrap{display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;letter-spacing:-.04em;text-decoration:none}
.logo img{width:38px;transition:filter .8s}body.dark .logo img{filter:invert(1) hue-rotate(180deg)}
.logo b{color:var(--or)}
.menu{display:flex;gap:26px;margin-right:auto;font-weight:500}
.menu a{text-decoration:none;opacity:.6;transition:opacity .2s}.menu a:hover,.menu a[aria-current]{opacity:1}
.btn{display:inline-flex;align-items:center;font:600 1rem var(--f);padding:16px 30px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--or);color:var(--w)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.sm{padding:11px 22px;font-size:.92rem}
/* cursor */
.cur{position:fixed;top:0;left:0;z-index:100;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;display:grid;place-items:center;transition:width .3s,height .3s,margin .3s;font:600 .85rem var(--f);color:#000}
.cur.big{width:96px;height:96px;margin:-48px 0 0 -48px}
.cur span{opacity:0;transition:opacity .2s}.cur.big span{opacity:1}
@media(pointer:coarse){.cur{display:none}}
/* loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;transition:transform .9s cubic-bezier(.7,0,.2,1)}
#loader.out{transform:translateY(-100%)}
#loader svg{width:min(40vw,200px)}
#loader path{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.2s cubic-bezier(.6,0,.2,1) forwards}
#loader .seat{stroke:var(--or);animation-delay:.7s;stroke-width:12}
@keyframes draw{to{stroke-dashoffset:0}}
/* scroll-linked zoom */
@supports(animation-timeline:view()){
.zoom{overflow:hidden}.zoom img{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
@keyframes zoom{from{transform:scale(1.25)}to{transform:scale(1)}}
.hero-txt{animation:lift linear both;animation-timeline:scroll();animation-range:0 90vh}
@keyframes lift{to{transform:translateY(-120px);opacity:0}}
.ip img{animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
@keyframes grow{from{width:0;opacity:0}}}
/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding-top:100px}
.hero .lead{margin:28px 0 36px}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:rotate(-3deg)}
.mosaic .zoom{border-radius:20px;aspect-ratio:3/4}
.mosaic .zoom:nth-child(2){margin-top:60px}.mosaic .zoom:nth-child(4){margin-top:-60px}
.mosaic img{width:100%;height:100%;object-fit:cover;object-position:center 75%}
/* manifest */
.manifest p{font-weight:700;font-size:clamp(2rem,5vw,4.2rem);line-height:1.08;letter-spacing:-.04em;text-align:center;max-width:20ch;margin:0 auto}
.ip img{display:inline-block;width:1.4em;height:.9em;object-fit:cover;border-radius:.3em;vertical-align:-.05em;margin:0 .1em}
/* 3D stage */
.stage{height:420vh;position:relative}
.stage-in{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center}
.stage canvas{width:100%;height:100%;grid-column:1/-1;grid-row:1}
.stage .cap{grid-row:1;align-self:center;padding:0 clamp(20px,4vw,48px);opacity:0;transform:translateY(30px);transition:.6s;pointer-events:none}
.stage .cap.on{opacity:1;transform:none;pointer-events:auto}
.stage .cap b{display:block;font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--or)}
.stage .l{grid-column:1}.stage .r{grid-column:3}
.stage .buy{grid-column:3;grid-row:1}
.price{font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;letter-spacing:-.05em;margin:6px 0 20px}
/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);gap:14px}
.tile{background:var(--sand);border-radius:28px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;position:relative;overflow:hidden;transition:background .35s}
a.tile:hover{background:var(--or);color:var(--w)}
.tile.photo{grid-column:span 2;grid-row:span 2;padding:0}.tile.photo img{width:100%;height:100%;object-fit:cover}
.tile.wide{grid-column:span 2}
.tile strong{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.tile .go{align-self:flex-end;font-weight:600}
/* height */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.fit input{width:100%;accent-color:var(--or);height:40px}
.fit output{font-size:clamp(4rem,9vw,8rem);font-weight:800;letter-spacing:-.06em;line-height:1;display:block}
.bar{position:relative;height:10px;background:var(--sand);border-radius:9px;margin:24px 0 10px}
.bar i{position:absolute;top:-7px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--or);transition:left .2s}
.bar-l{display:flex;justify-content:space-between;font-size:.9rem;opacity:.6}
/* specs */
.specs{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.specs dl{border-top:2px solid var(--ink)}
.specs div{display:flex;justify-content:space-between;gap:20px;padding:18px 12px;border-bottom:1px solid var(--sand);transition:background .2s,padding .2s}
.specs div:hover{background:var(--sand);padding-left:20px}
.specs dd{font-weight:700;text-align:right}
/* steps */
.steps{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5vw,80px);align-items:center;min-height:70vh}
.steps .n{font-size:clamp(5rem,12vw,10rem);font-weight:800;letter-spacing:-.06em;color:var(--or);line-height:1}
.steps .pic{background:var(--w);border-radius:32px;overflow:hidden;aspect-ratio:1}
.steps .pic img{width:100%;height:100%;object-fit:contain}
.prog{display:flex;gap:6px;margin:28px 0}.prog i{flex:1;height:4px;border-radius:4px;background:var(--sand);transition:background .3s}.prog i.on{background:var(--ink)}
.ctrl{display:flex;gap:12px}
/* reviews */
.rev{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.rev figure{flex:0 0 min(380px,85%);scroll-snap-align:start;background:var(--sand);border-radius:28px;padding:32px}
.rev blockquote{font-size:1.15rem;margin-bottom:20px}.rev figcaption{font-weight:700;color:var(--or)}
/* mission */
.mission{background:var(--or);color:var(--w);border-radius:40px;padding:clamp(40px,8vw,110px)}
.mission p{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:26ch}
/* 3d viewer */
.viewer{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;min-height:100vh;padding-top:90px}
.viewer .cv{aspect-ratio:1;border-radius:40px;background:radial-gradient(circle at 50% 40%,var(--w),var(--sand))}
.viewer canvas{width:100%;height:100%}
.hint{font-size:.9rem;opacity:.55;margin-top:14px}
.mbar{display:none}
footer{padding:50px 0;border-top:1.5px solid var(--sand);margin-top:60px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer nav{position:static;padding:0}
@media(max-width:900px){
.menu{gap:16px;font-size:.9rem;overflow-x:auto}.nav-buy{display:none}
.hero,.fit,.specs,.steps,.viewer{grid-template-columns:1fr}
.bento{grid-template-columns:1fr 1fr}.tile.photo{grid-column:span 2;grid-row:span 1;aspect-ratio:1}
.stage-in{grid-template-columns:1fr;grid-template-rows:1fr auto}.stage .cap,.stage .buy{grid-column:1;grid-row:2;padding-bottom:40px}
.mbar{display:flex;position:fixed;inset:auto 12px 12px;z-index:40;background:var(--ink);color:var(--bg);border-radius:999px;padding:8px 8px 8px 22px;align-items:center;justify-content:space-between;font-weight:700}
.mbar .btn{background:var(--or);color:var(--w)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}