/* ===== Starwake v3: cinematic layer ===== */
:root{--glass:rgba(14,16,20,.42);--gl:rgba(255,255,255,.12);--ease2:cubic-bezier(.16,1,.3,1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.locked body{overflow:hidden;height:100vh}
html.locked .skip,html.locked .nav,html.locked .hud,html.locked #main,html.locked footer,html.locked .progress,html.locked .frame,html.locked .glow{display:none!important}
html.unlocked #main{animation:v3in 1.6s var(--ease2) backwards}
@keyframes v3in{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}

/* --- gate --- */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000;overflow:hidden;color:#fff}
html.unlocked .gate:not(.opening){display:none}
.g-photo{position:absolute;inset:-4%;background:url(../img/hero-960.webp) center/cover;filter:grayscale(1) brightness(.32) contrast(1.15) blur(2px);transform:scale(1.12);transition:transform 3.2s var(--ease2),filter 2s}
.gate.ready .g-photo{transform:scale(1.02)}
.gate::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 52%,transparent 0,rgba(0,0,0,.55) 70%,#000 100%);pointer-events:none}
#gsky,#sky{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#sky{z-index:-1;mix-blend-mode:screen}
.g-in{position:relative;z-index:2;text-align:center;padding:24px;width:min(760px,100%);display:flex;flex-direction:column;align-items:center}
.g-in>*{opacity:0;transform:translateY(24px);filter:blur(10px);transition:opacity 1.2s var(--ease2),transform 1.4s var(--ease2),filter 1.2s var(--ease2)}
.gate.ready .g-in>*{opacity:1;transform:none;filter:none}
.gate.ready .g-in>:nth-child(2){transition-delay:.12s}.gate.ready .g-in>:nth-child(3){transition-delay:.22s}.gate.ready .g-in>:nth-child(4){transition-delay:.38s}.gate.ready .g-in>:nth-child(5){transition-delay:.52s}
.g-mark{width:54px;height:54px;color:var(--c);filter:drop-shadow(0 0 18px rgba(240,87,74,.65));animation:gpulse 4s ease-in-out infinite}
@keyframes gpulse{50%{filter:drop-shadow(0 0 32px rgba(240,87,74,.95))}}
.g-eye{margin-top:26px;font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.6);padding-left:.5em}
.g-word{margin:14px 0 0;font-weight:900;text-transform:uppercase;font-size:clamp(54px,13vw,188px);letter-spacing:-.045em;line-height:.85;
 background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.35));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-sub{margin-top:22px;color:rgba(255,255,255,.62);font-size:clamp(14px,1.4vw,17px);font-weight:300;letter-spacing:.01em}
.g-form{position:relative;margin-top:44px;width:min(420px,100%);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 22px;border-radius:999px;
 background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
 box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:border-color .4s,box-shadow .4s}
.g-form:focus-within{border-color:rgba(255,255,255,.4);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.18)}
.g-form input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:400 16px/1 "Inter Tight",system-ui,sans-serif;letter-spacing:.12em;padding:14px 0}
.g-form input::placeholder{color:rgba(255,255,255,.4);letter-spacing:.06em}
.g-show,.g-go{flex:none;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;border-radius:50%;width:46px;height:46px;transition:transform .35s var(--ease2),background .3s}
.g-show{background:none;opacity:.55}.g-show:hover,.g-show[aria-pressed=true]{opacity:1}
.g-go{background:var(--c);box-shadow:0 8px 30px rgba(240,87,74,.45)}.g-go:hover{transform:scale(1.07)}
.g-show svg,.g-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-form.busy .g-go{opacity:.6}
.g-form.bad{animation:shake .5s cubic-bezier(.36,.07,.19,.97);border-color:rgba(240,87,74,.8)}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.g-form.good{border-color:rgba(160,255,210,.7)}
.g-msg{min-height:22px;margin-top:16px;font-size:13px;letter-spacing:.06em;color:#ff8f84}
.g-form.good~.g-msg{color:#bfffe0}
.g-hud{position:absolute;inset:22px;pointer-events:none;z-index:2;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.g-l,.g-r{position:absolute;bottom:4px}.g-l{left:28px}.g-r{right:28px}
.c{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.4)}
.c.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}.c.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.c.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.c.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.g-ns{position:absolute;bottom:40px;color:#fff}
.gate.opening{pointer-events:none}
.gate.opening .g-in{transition:transform 1.4s var(--ease2),opacity 1s,filter 1s;transform:scale(1.6);opacity:0;filter:blur(16px)}
.gate.opening{animation:gout 1.8s var(--ease2) .35s both}
@keyframes gout{to{opacity:0;visibility:hidden}}
.gate.opening .g-photo{transform:scale(1.35);filter:grayscale(.4) brightness(.6)}

/* --- global atmosphere --- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,1%)}}
.frame{position:fixed;inset:14px;z-index:14;pointer-events:none}.frame .c{border-color:rgba(255,255,255,.28);width:16px;height:16px}
.hud-n{font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.2em;font-size:11px;font-weight:600}

/* --- typography --- */
h2{font-size:clamp(44px,6.9vw,118px);letter-spacing:-.04em;line-height:.86}
h2.sm{font-size:clamp(40px,6.4vw,110px)}
h1{font-size:clamp(56px,9.4vw,164px);letter-spacing:-.032em;word-spacing:.04em;line-height:.84}
.thin{font-weight:200!important}
.eyebrow{letter-spacing:.42em!important;font-size:11px!important}
.split{opacity:1!important;transform:none!important;filter:none!important}
.split .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.split .ln>i{display:block;font-style:normal;transform:translate3d(0,108%,0) rotate(2deg);transform-origin:0 100%;transition:transform 1.3s var(--ease2)}
.split.in .ln>i{transform:none}

/* --- cinematic sections --- */
.full .bg{clip-path:inset(10% 8% 10% 8% round 28px);transition:clip-path 1.6s var(--ease2);scale:1.08}
.full.seen .bg{clip-path:inset(0 0 0 0 round 0)}
.hero .bg{filter:contrast(1.06) saturate(.9)}
.depth{position:absolute;inset:-12% 0;z-index:-1;pointer-events:none;will-change:transform}
.depth .fog{position:absolute;inset:0;background:radial-gradient(70% 40% at 30% 90%,rgba(255,255,255,.07),transparent 70%),radial-gradient(50% 30% at 80% 20%,rgba(255,255,255,.05),transparent 70%);animation:fog 26s ease-in-out infinite alternate}
.depth .dust{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 72% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 42% 64%,#fff,transparent),radial-gradient(1px 1px at 88% 78%,#fff,transparent),radial-gradient(1px 1px at 22% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 38%,#fff,transparent);background-size:420px 420px;animation:dust 60s linear infinite}
@keyframes fog{to{transform:translate3d(-4%,2%,0) scale(1.08)}}
@keyframes dust{to{background-position:0 -420px}}
.hero .inner{will-change:transform,opacity}

/* --- glass / HUD UI --- */
.model li,.quad li,.pillars li,.steps li,.console,.map,.merge,.convo,.why{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;border:1px solid var(--gl)!important;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.1);border-radius:20px}
.model li,.quad li,.pillars li,.steps li{padding:26px 24px}
.model li b,.steps li b{letter-spacing:.02em}
.tilt,.tilt.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease2),box-shadow .5s,border-color .5s!important;position:relative;transform-style:preserve-3d}
.tilt.rv{transition:opacity 1s var(--ease),transform .5s var(--ease2),filter 1s var(--ease),border-color .5s!important}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 45%);opacity:0;transition:opacity .4s;z-index:1}
.tilt:hover::before{opacity:1}.tilt:hover{border-color:rgba(255,255,255,.3)!important}
.card,.lead{border-radius:22px;overflow:hidden}
.card::after,.lead::after{transition:transform 1.4s var(--ease2)}
.btn{transition:translate .35s var(--ease2),transform .35s var(--ease2),box-shadow .4s,background .3s!important;box-shadow:0 10px 40px rgba(240,87,74,.35)}
.btn:hover{box-shadow:0 16px 60px rgba(240,87,74,.55)}
.ghost,.nav .cta{transition:translate .35s var(--ease2),background .3s,border-color .3s!important}
.nav.solid{background:rgba(6,8,10,.45)!important;backdrop-filter:blur(22px) saturate(170%)!important}
.ca{filter:drop-shadow(0 0 10px rgba(255,255,255,.25))}
.pt.hot circle{filter:drop-shadow(0 0 10px var(--c))}

@media (max-width:819px){
 .frame{display:none}.g-hud{inset:14px}.g-l,.g-r{font-size:9px;letter-spacing:.24em}.g-l{left:18px}.g-r{right:18px}
 .full .bg{clip-path:inset(6% 4% 6% 4% round 18px)}
 .model li,.quad li,.pillars li,.steps li{padding:20px 18px}
 h2{font-size:clamp(40px,12.4vw,72px)}h1{font-size:clamp(52px,15.6vw,90px)}
 .grain{opacity:.05}
}
@media (prefers-reduced-motion:reduce){
 .split .ln>i{transform:none!important}.full .bg{clip-path:none!important}.grain{animation:none!important}
 .gate .g-in>*{opacity:1!important;transform:none!important;filter:none!important}
}
@media (max-width:819px){.eyebrow{letter-spacing:.26em!important;font-size:10px!important}.btn{letter-spacing:.12em}}
.merge{backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;background:rgba(0,0,0,.45)!important}
.cards.three{grid-template-columns:repeat(3,1fr)}.cards.three .card{aspect-ratio:3/3.2}@media (max-width:820px){.cards.three{grid-template-columns:1fr}.cards.three .card{aspect-ratio:16/10}}
.more{max-width:1320px;margin:56px auto 0;padding:32px clamp(22px,3vw,40px);border:1px solid var(--gl);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.more .next{margin:0 0 22px}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.groups h4{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--c);font-weight:600;margin-bottom:14px}
.groups ul{list-style:none;display:grid;gap:0}
.groups li{padding:12px 0;border-top:1px solid var(--ln);font-size:clamp(16px,1.3vw,19px);font-weight:300}
.more .fine{margin-top:20px;font-size:13px;color:var(--mu)}
@media (max-width:640px){.groups{grid-template-columns:1fr;gap:22px}}
.portfolio .pf{max-width:1320px;margin:48px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pf-col .tag{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--c);font-weight:600;margin-bottom:14px}
.pf article{padding:34px 30px;border:1px solid var(--gl);border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));min-height:200px;display:flex;flex-direction:column;justify-content:flex-end}
.pf h3{font-size:clamp(34px,4vw,60px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.95}
.pf p{margin-top:14px;color:var(--mu);font-size:15px;max-width:44ch}
@media (max-width:640px){.portfolio .pf{grid-template-columns:1fr}}