/* ================================================================
   bruhOS landing — sky / cobalt / ice. palette lifted from the character:
   cobalt hair, sky glow, ice-white armor, black circuitry, mauve eyes, gold glints
   ================================================================ */
:root{
  --top:#3a8fec; --bot:#b4e0ff; --glow:#ffffff; --strand:.9;
  --sky:#7cc4fb; --sky-l:#cfeaff; --ice:#f4faff;
  --cobalt:#2443d8; --cobalt-d:#13246e; --night:#070a16;
  --mauve:#e7a3c6; --gold:#f2c46d;
  --sans:'Outfit',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --pad:clamp(1.1rem,4vw,3.6rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
body{
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55;
  color:#fff;background:var(--night);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
::selection{background:var(--cobalt);color:#fff}
body.single{height:100svh;overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;font-weight:400}
em{font-style:normal;color:var(--sky-l)}
.soft{
  background:linear-gradient(92deg,#ffffff 0%,#d9f0ff 30%,#8ccfff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ============ living background ============ */
.sky{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(55% 45% at 58% 30%, color-mix(in srgb,var(--glow) 55%,transparent) 0%, transparent 70%),
    radial-gradient(40% 40% at 12% 90%, color-mix(in srgb,var(--cobalt) 35%,transparent) 0%, transparent 70%),
    linear-gradient(180deg,var(--top) 0%,var(--bot) 100%);
}
.strands{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:var(--strand);mix-blend-mode:screen}
.grain{
  position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.06;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* ============ loader ============ */
.ld{
  position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:radial-gradient(60% 50% at 50% 40%,#bfe4ff 0%,transparent 70%),linear-gradient(180deg,#3a8fec,#2443d8);
  transition:clip-path 1s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0);
}
.ld.out{clip-path:inset(0 0 100% 0)}
.ld-brand{font-size:1rem;font-weight:500;letter-spacing:.02em;opacity:.85}
.ld-brand b{font-weight:600;color:var(--sky-l)}
.ld-num{font-size:clamp(6rem,22vw,15rem);font-weight:200;line-height:.9;letter-spacing:-.05em;position:relative;font-variant-numeric:tabular-nums}
.ld-num i{font-style:normal;font-size:.28em;position:absolute;left:100%;top:.2em;font-weight:300;opacity:.7}
.ld-line{width:min(320px,60vw);height:1px;background:#ffffff33;overflow:hidden}
.ld-line i{display:block;height:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
.ld-cap{opacity:.7;text-transform:uppercase;letter-spacing:.3em;font-size:.62rem}

/* ============ reveal veil ============ */
.veil{position:fixed;inset:0;width:100%;height:100%;z-index:200;pointer-events:none;background:#bfe2fd}
.veil-hint{
  position:fixed;left:50%;bottom:calc(9vh + env(safe-area-inset-bottom));z-index:201;transform:translateX(-50%);
  pointer-events:none;text-transform:uppercase;letter-spacing:.3em;font-size:.68rem;color:#fff;
  display:flex;align-items:center;gap:.8rem;transition:opacity .4s;white-space:nowrap;
}
@media(max-width:820px){.veil-hint{font-size:.56rem;letter-spacing:.2em;gap:.6rem}}
.veil-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:vh-pulse 1.6s ease-in-out infinite}
body[data-fx="cloud"] .veil-hint{color:var(--cobalt-d)}
body.veiled{cursor:crosshair}
@keyframes vh-pulse{50%{transform:scale(1.8);opacity:.4}}
body:not(.veiled) .veil,body:not(.veiled) .veil-hint{display:none}

/* ============ nav ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);padding-top:calc(1rem + env(safe-area-inset-top));
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:500;font-size:1.12rem;letter-spacing:-.01em}
.brand img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1.5px #ffffff88}
.brand b{font-weight:600}
.pills{display:flex;gap:.4rem;padding:.3rem;border-radius:999px;background:#0b1a4a59;border:1px solid #ffffff2e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pills a{padding:.45rem .95rem;border-radius:999px;text-transform:uppercase;font-size:.66rem;transition:background .3s}
.pills a:hover{background:#ffffff26}
.social-x{
  display:flex;align-items:center;gap:.6rem;padding:.68rem 1.1rem;border-radius:999px;
  background:#fff;color:var(--cobalt-d);font-weight:500;font-size:.92rem;letter-spacing:-.005em;
  transition:transform .3s,box-shadow .3s;
}
.social-x svg{width:15px;height:15px;fill:currentColor;flex:none}
.nav-r{display:flex;align-items:center;gap:.55rem}
.social-gh{
  display:flex;align-items:center;gap:.55rem;padding:.68rem 1.05rem;border-radius:999px;
  background:#ffffff26;border:1px solid #ffffff66;color:#fff;font-weight:500;font-size:.92rem;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background .3s,color .3s,transform .3s;
}
.social-gh svg{width:16px;height:16px;fill:currentColor;flex:none}
.social-gh:hover{background:#fff;color:var(--cobalt-d);transform:translateY(-2px)}
.social-x:hover{transform:translateY(-2px);box-shadow:0 10px 30px #13246e40}
.pill-cta{padding:.6rem 1.1rem;border-radius:999px;background:#ffffff;color:var(--cobalt-d);text-transform:uppercase;font-size:.66rem;font-weight:500;transition:transform .3s,box-shadow .3s}
.pill-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px #13246e40}

/* ============ hero ============ */
.hero{position:relative;height:100svh;min-height:660px;overflow:hidden}
.hero-ghost{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  font-size:31vw;font-weight:700;letter-spacing:-.06em;line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px #ffffff33;user-select:none;z-index:0;
}
.hero-portrait{position:absolute;left:53%;bottom:0;width:min(96svh,980px,78vw);aspect-ratio:1;transform:translateX(-50%);z-index:2;will-change:transform}
.halo{
  position:absolute;left:12%;right:12%;top:2%;bottom:18%;border-radius:50%;
  background:radial-gradient(closest-side,#ffffffcc,#bfe6ff66 45%,transparent 75%);
  filter:blur(30px);animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{50%{transform:scale(1.08);opacity:.8}}
.hp-tilt,.hp-in{position:absolute;inset:0}
.hp-tilt{
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.18) 84%,transparent 97%);
  mask:linear-gradient(180deg,#000 0%,#000 52%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.18) 84%,transparent 97%);
}
.hp-in img{width:100%;height:100%;object-fit:contain}
.sheen{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:url(assets/bruh.webp?v=4) center/contain no-repeat;mask:url(assets/bruh.webp?v=4) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 42%,#bfe8ff99 50%,transparent 58%) no-repeat;
  background-size:300% 100%;animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,35%{background-position:120% 0}75%,100%{background-position:-20% 0}}

.spark{position:absolute;z-index:3;font-weight:200;font-size:1.6rem;color:#ffffffcc;animation:tw 3.6s ease-in-out infinite}
.s1{left:44%;top:18%}.s2{right:9%;top:30%;animation-delay:1.1s}.s3{left:8%;bottom:16%;animation-delay:2s}.s4{right:30%;bottom:34%;animation-delay:.5s;font-size:1.1rem}
@keyframes tw{50%{opacity:.25;transform:rotate(45deg) scale(.7)}}

.hero-copy{position:absolute;left:var(--pad);top:24%;z-index:3;max-width:min(46vw,640px)}
.hero-h{font-size:clamp(3rem,6.3vw,6.8rem);font-weight:400;line-height:.98;letter-spacing:-.035em;text-shadow:0 4px 40px #13246e30}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:inline-block}
.hero-p{margin-top:1.6rem;font-size:1.05rem;max-width:40ch;color:#ffffffd9;line-height:1.6}
.hero-btns{display:flex;gap:.8rem;margin-top:2rem;flex-wrap:wrap}
.btn{padding:.85rem 1.45rem;border-radius:999px;font-size:.95rem;font-weight:500;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s}
.btn:hover{transform:translateY(-3px)}
.btn-solid{background:#fff;color:var(--cobalt-d);box-shadow:0 10px 34px #13246e33}
.btn-ghost{border:1px solid #ffffffaa;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:#ffffff22}
.btn-dark{background:var(--cobalt-d);color:#fff;box-shadow:0 14px 40px #2443d855}
.btn-line{border:1px solid var(--cobalt-d);color:var(--cobalt-d)}

.hero-side{position:absolute;right:var(--pad);bottom:14%;z-index:3;width:250px;display:flex;flex-direction:column;gap:1.3rem}
.hs-item h3{font-size:1.06rem;font-weight:500;margin:.25rem 0 .1rem}
.hs-item p{color:#ffffffb3;font-size:.68rem}
.hs-ic{font-size:1rem;color:#fff;opacity:.9}
.hs-note{font-size:.88rem;color:#ffffffc7;line-height:1.5;padding-top:1rem;border-top:1px solid #ffffff40}
.hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:1.4rem;z-index:3;display:flex;justify-content:space-between;color:#ffffffb3;text-transform:uppercase;font-size:.62rem}
.scroll-cue{display:flex;align-items:center;gap:.6rem}
.scroll-cue i{width:48px;height:1px;background:#ffffff55;position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2s ease infinite;transform:translateX(-100%)}
@keyframes cue{60%,100%{transform:translateX(100%)}}

/* ============ marquee ============ */
.marq{overflow:hidden;border-top:1px solid #ffffff30;border-bottom:1px solid #ffffff30;background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.marq-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq-track span{padding:1rem 2.2rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;position:relative}
.marq-track span::after{content:"✳";position:absolute;right:-.4rem;opacity:.5}
.marq-track .hi{color:#fff;text-shadow:0 0 18px #bfe8ff}
.marq-track .pk{color:var(--mauve)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ shared ============ */
section{position:relative}
.tag{display:inline-block;text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;opacity:.8;margin-bottom:1.6rem}
.sec-head{margin-bottom:3rem}
.h2{font-size:clamp(2.3rem,5vw,4.8rem);font-weight:400;line-height:1.02;letter-spacing:-.035em}
.glass{
  background:linear-gradient(160deg,#ffffff24,#ffffff08);
  border:1px solid #ffffff2e;border-radius:22px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 #ffffff40,0 20px 60px #07102a30;
}

/* ============ why ============ */
.why{padding:22vh var(--pad) 18vh}
.state{font-size:clamp(1.9rem,4.4vw,4.3rem);font-weight:300;line-height:1.14;letter-spacing:-.025em;max-width:22ch}
.state .w{opacity:.16;transition:none}
.state em .w,.state em{color:#fff}
.state em{text-shadow:0 0 30px #9fd6ff80}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:10vh}
.why-cards .glass{padding:2rem 1.8rem 2.2rem}
.gn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff66;margin-bottom:1.4rem}
.why-cards h3{font-size:1.3rem;font-weight:500;margin-bottom:.5rem;letter-spacing:-.01em}
.why-cards p{color:#ffffffbf;font-size:.95rem}

/* ============ eye (pinned) ============ */
.eye{height:100vh;overflow:hidden}
.eye-stage{position:relative;height:100%;width:100%}
.eye-frame{position:absolute;left:50%;top:50%;width:min(92vh,100vw);aspect-ratio:1;transform:translate(-50%,-50%)}
.eye-zoom{position:absolute;inset:0;transform-origin:46% 32.7%;will-change:transform}
.eye-zoom img{width:100%;height:100%;object-fit:contain}
.eye-ring{
  position:absolute;left:46%;top:32.7%;border-radius:50%;border:1px solid #bfe8ffcc;
  transform:translate(-50%,-50%) scale(.6);opacity:0;box-shadow:0 0 24px #7cc4fb66;
}
.r1{width:7%;aspect-ratio:1}
.r2{width:13%;aspect-ratio:1;border-style:dashed;border-color:#ffffff88}
.r3{width:22%;aspect-ratio:1;border-color:#e7a3c688}
.eye-labs{position:absolute;left:var(--pad);bottom:16%;list-style:none;display:flex;flex-direction:column;gap:.9rem;z-index:2}
.eye-lab{opacity:0;transform:translateX(-30px);color:#ffffffb3;font-size:.72rem}
.eye-lab b{display:block;color:#fff;font-family:var(--sans);font-weight:500;font-size:1.4rem;letter-spacing:-.01em;margin-bottom:.1rem}
.eye-iris{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#f5c6dc 0%,#c46fa3 7%,#3a3fc9 22%,#13246e 48%,#070a16 85%);
  clip-path:circle(0% at 50% 50%);
}
.eye-final{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 var(--pad)}
.eye-final h2{font-size:clamp(2.6rem,7vw,7rem);font-weight:300;line-height:1;letter-spacing:-.04em}
.eye-final em{color:var(--mauve);text-shadow:0 0 40px #e7a3c680}
.eye-final>*{opacity:0}

/* ============ loop ============ */
.loop{padding:20vh var(--pad) 18vh}
.cmd{display:inline-block;padding:.8rem 1.2rem;border-radius:999px;border:1px solid #9fd6ff99;color:var(--sky-l);font-style:italic;margin-bottom:3rem;box-shadow:0 0 40px #7cc4fb33}
.loop-rail{position:relative;height:2px;background:#ffffff1f;margin-bottom:1.6rem;border-radius:2px}
.loop-rail i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--cobalt),var(--sky),#fff);border-radius:2px}
.loop-rail b{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 20px #bfe8ff,0 0 50px #7cc4fb}
.loop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.lp{padding:1.8rem 1.6rem 2.1rem;opacity:.35;transform:translateY(20px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),border-color .6s}
.lp.on{opacity:1;transform:none;border-color:#9fd6ffaa}
.lp-k{color:var(--sky-l);display:block;margin-bottom:1rem;font-size:.64rem}
.lp h3{font-size:1.35rem;font-weight:500;margin-bottom:.5rem}
.lp p{color:#ffffffb8;font-size:.92rem}
.lp b{color:#fff;font-weight:500}
.plan{margin-top:2.6rem;color:#ffffffa6;word-break:break-word}

/* ============ skills ============ */
.skills{padding:20vh var(--pad) 18vh}
.sk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;perspective:1200px}
.sk{
  --mx:50%;--my:50%;
  position:relative;padding:1.4rem 1.3rem 1.6rem;border-radius:18px;min-height:150px;
  background:linear-gradient(160deg,#2c4fe0d9,#1a34b0b3);border:1px solid #ffffff3d;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden;
  box-shadow:inset 0 1px 0 #ffffff33,0 18px 40px #13246e33;
  transition:translate .4s cubic-bezier(.2,.8,.2,1),border-color .4s;
}
.sk::before{content:"";position:absolute;inset:0;background:radial-gradient(180px circle at var(--mx) var(--my),#ffffff40,transparent 60%);opacity:0;transition:opacity .3s}
.sk:hover{translate:0 -6px;border-color:#ffffff88}
.sk:hover::before{opacity:1}
.sk .mono{opacity:.65;font-size:.64rem}
.sk h4{font-family:var(--mono);font-weight:500;font-size:1.15rem;margin:1.8rem 0 .3rem;letter-spacing:-.02em}
.sk p{font-size:.82rem;color:#ffffffbf}
.sk-hi{background:linear-gradient(160deg,#ffffffd9,#cfeaffb3);color:var(--cobalt-d);border-color:#fff}
.sk-hi p{color:#13246ecc}
.sk-pk{border-color:#e7a3c6aa;background:linear-gradient(160deg,#e7a3c640,#e7a3c610)}
.sk-pk h4{color:#ffe0ee}

/* ============ numbers (light) ============ */
.light{color:var(--night)}
.light em{color:var(--cobalt)}
.nums{padding:18vh var(--pad)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#13246e22;border-radius:24px;overflow:hidden;border:1px solid #13246e22}
.num{background:#ffffff8c;padding:2.4rem 1.8rem 2.6rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.num b{
  display:block;font-size:clamp(4rem,8vw,7.5rem);font-weight:200;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--cobalt) 20%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.num p{margin-top:1.1rem;color:#13246ecc;font-size:.95rem;max-width:22ch}

/* ============ roadmap ============ */
.road{padding:20vh var(--pad) 18vh}
.tl{position:relative;max-width:900px;margin-left:auto;padding-left:3rem}
.tl-line{position:absolute;left:.45rem;top:.4rem;bottom:.4rem;width:1px;background:#ffffff22}
.tl-line i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,var(--sky),var(--cobalt),var(--mauve))}
.tl-it{position:relative;padding:0 0 4.4rem}
.tl-it:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-3rem;top:.35rem;width:15px;height:15px;border-radius:50%;border:1px solid #ffffff55;background:var(--night);transition:all .5s}
.tl-it.on .tl-dot{background:#fff;border-color:#fff;box-shadow:0 0 0 6px #7cc4fb33,0 0 30px #7cc4fb}
.tl-v{color:var(--sky-l);font-size:.7rem}
.tl-it h3{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:400;letter-spacing:-.025em;margin:.4rem 0 .6rem;opacity:.4;transition:opacity .5s}
.tl-it p{color:#ffffffa6;max-width:52ch;opacity:.4;transition:opacity .5s}
.tl-it.on h3,.tl-it.on p{opacity:1}

/* ============ cta ============ */
.cta{padding:16vh var(--pad) 14vh;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-portrait{position:relative;width:min(320px,62vw);aspect-ratio:1;margin-bottom:-2rem}
.cta-portrait .halo{inset:0;left:0;right:0;background:radial-gradient(closest-side,#ffffff,#bfe6ff88 50%,transparent 75%)}
.cta-portrait img{position:relative;width:100%;height:100%;object-fit:contain;
  -webkit-mask:linear-gradient(180deg,#000 62%,transparent 96%);mask:linear-gradient(180deg,#000 62%,transparent 96%)}
.cta-h{font-size:clamp(3.2rem,10vw,9.5rem);font-weight:500;line-height:.92;letter-spacing:-.05em;position:relative}
.cta-h .ln>span{background:linear-gradient(180deg,var(--cobalt-d) 10%,var(--cobalt) 60%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-p{max-width:52ch;margin:1.8rem auto 0;color:#13246ecc;font-size:1.08rem}
.cta .hero-btns{justify-content:center}

/* ============ footer ============ */
.ft{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.4rem var(--pad) calc(1.6rem + env(safe-area-inset-bottom));color:#13246eb3;border-top:1px solid #13246e1f;text-transform:uppercase;font-size:.62rem}

/* ============ responsive ============ */
@media(max-width:1100px){
  .sk-grid{grid-template-columns:repeat(3,1fr)}
  .num-grid{grid-template-columns:repeat(2,1fr)}
  .loop-grid{grid-template-columns:repeat(2,1fr)}
  .hero-side{display:none}
}
@media(max-width:820px){
  body{font-size:16px}
  .pills{display:none}
  .brand{font-size:1rem}
  .social-x{padding:.55rem .9rem;font-size:.8rem;gap:.45rem}
  .social-x svg{width:13px;height:13px}
  .nav-r{gap:.4rem}
  .social-gh{padding:.5rem .62rem}
  .social-gh span{display:none}
  .social-gh svg{width:16px;height:16px}
  .sky{
    background:
      radial-gradient(70% 38% at 55% 68%, color-mix(in srgb,var(--glow) 50%,transparent) 0%, transparent 70%),
      radial-gradient(60% 40% at 10% 95%, color-mix(in srgb,var(--cobalt) 35%,transparent) 0%, transparent 70%),
      linear-gradient(180deg,var(--top) 0%,var(--bot) 100%);
  }
  .hero{min-height:600px}
  .hero-copy{top:13%;max-width:none;right:var(--pad)}
  .hero-h{font-size:clamp(2.6rem,11.5vw,4.4rem)}
  .hero-p{font-size:.95rem;margin-top:1rem}
  .hero-p br{display:none}
  .hero-btns{margin-top:1.3rem}
  .btn{padding:.75rem 1.2rem;font-size:.88rem}
  .hero-portrait{width:min(118vw,64svh);left:56%}
  .hero-ghost{top:70%;font-size:40vw}
  .s1{left:auto;right:12%;top:46%}
  .why{padding:16vh var(--pad) 12vh}
  .why-cards{grid-template-columns:1fr;margin-top:7vh}
  .eye-frame{width:min(130vw,80vh)}
  .eye-labs{bottom:10%}
  .eye-lab b{font-size:1.15rem}
  .loop,.skills,.road{padding:14vh var(--pad) 12vh}
  .loop-grid{grid-template-columns:1fr}
  .sk-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .sk{min-height:128px;padding:1.1rem 1rem 1.2rem}
  .sk h4{font-size:1rem;margin-top:1.3rem}
  .nums{padding:12vh var(--pad)}
  .num-grid{grid-template-columns:1fr 1fr}
  .num{padding:1.6rem 1.2rem 1.8rem}
  .num p{font-size:.84rem}
  .tl{padding-left:2.2rem}
  .tl-dot{left:-2.2rem}
  .ft{flex-direction:column;gap:.4rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .state .w{opacity:1}
  .eye-lab,.eye-final>*{opacity:1;transform:none}
  .lp{opacity:1;transform:none}
}
html.no-motion .state .w{opacity:1}
html.no-motion .eye-final>*{opacity:1}
html.no-motion .eye-iris{clip-path:circle(150% at 50% 50%)}
html.no-motion .eye-lab{opacity:1;transform:none}
html.no-motion .lp{opacity:1;transform:none}