/* ============ DENIH SAPUTRA — PORTFOLIO v2 (lusion.co language) ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --void:#050506;
  --void2:#0B0B0D;
  --ice:#EDEEF1;
  --card:#FFFFFF;
  --ink:#0B0B0D;
  --mut:#5E616B;
  --mut-d:#9A9DA8;
  --line:#D3D5DC;
  --dline:#232428;
  --blue:#1B1BE9;
  --cyan:#6EE7F5;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,"Times New Roman",serif;
  --gut:clamp(20px,4vw,64px);
  --r-lg:22px; --r-md:16px;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* editorial serif accent: italic contrast inside grotesque headlines */
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* film grain: cinematic finish over the whole page */
#grain{position:fixed;inset:-12%;width:124%;height:124%;pointer-events:none;z-index:180;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-4%,-6%)}25%{transform:translate(3%,-4%)}
  37%{transform:translate(-5%,3%)}50%{transform:translate(4%,6%)}62%{transform:translate(-3%,5%)}
  75%{transform:translate(5%,-3%)}87%{transform:translate(-4%,-5%)}}
/* touch devices: static grain (keeps the texture, zero animation cost on mobile GPUs) */
@media(hover:none){#grain{animation:none}}
/* scroll progress hairline */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:130;pointer-events:none;
  background:linear-gradient(90deg,#5d86ff,var(--blue));transform:scaleX(0);transform-origin:left}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
html{scrollbar-width:thin;scrollbar-color:#2b2c33 var(--void)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:#2b2c33;border-radius:8px;border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:#3d3e47}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--sans);background:var(--void);color:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;font-size:17px;line-height:1.6;
}
::selection{background:var(--blue);color:#fff}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- micro label ---------- */
.lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:400;
  display:flex;align-items:center;gap:12px;
}
.lbl::before{content:"";width:28px;height:1px;background:currentColor;opacity:.55;flex:none}
.on-dark .lbl{color:var(--mut-d)}
.on-light .lbl{color:var(--mut)}

/* ---------- type scale ---------- */
h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1.0;text-wrap:balance}
.h-display{font-size:clamp(54px,10.5vw,168px)}
.h-1{font-size:clamp(44px,7.2vw,116px)}
.h-2{font-size:clamp(34px,4.6vw,72px)}
.lede{font-size:clamp(16px,1.4vw,19px);line-height:1.65;max-width:34ch}
.on-light .lede{color:var(--mut)}
.on-dark .lede{color:#C9CAD2}

/* ---------- split reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.c{display:inline-block;transform:translateY(115%);will-change:transform}
.loaded .c{transform:none}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:200;background:var(--void);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:clamp(24px,4vw,56px);
  transition:transform .9s var(--ease);
}
#loader.morph{transform:translateY(-100%)}
#load-num{
  font-size:clamp(90px,18vw,260px);font-weight:500;letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:tabular-nums;
}
#load-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut-d);text-transform:uppercase;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start}
#load-meta .load-name{font-size:clamp(20px,2.4vw,30px);text-transform:none;letter-spacing:0;color:#fff}
#load-meta .load-sub{opacity:.8}
#load-track{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#1c1c20}
#load-bar{height:100%;width:100%;background:linear-gradient(90deg,#5d86ff,var(--blue));transform:scaleX(0);transform-origin:left}

/* ---------- nav ---------- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  transition:transform .5s var(--ease);
}
#nav.hide{transform:translateY(-110%)}
.brand{
  font-weight:600;font-size:17px;letter-spacing:.32em;text-transform:uppercase;
  mix-blend-mode:difference;color:#fff;
}
.nav-pills{display:flex;align-items:center;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;
  white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill-dark{background:#16161a;color:#fff}
.pill-dark:hover{background:var(--blue);transform:translateY(-2px)}
.pill-light{background:#fff;color:#0b0b0d}
.pill-light:hover{transform:translateY(-2px)}
.pill-blue{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 28px rgba(27,27,233,.32)}
.pill-blue:hover{transform:translateY(-2px);background:#3333f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 34px rgba(27,27,233,.42)}
.pill-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.pill-ghost:hover{border-color:#fff;transform:translateY(-2px)}

/* ---------- menu overlay ---------- */
#menu{
  position:fixed;z-index:150;right:var(--gut);top:86px;width:min(360px,calc(100vw - 40px));
  opacity:0;pointer-events:none;transform:translateY(-14px) scale(.98);
  transition:opacity .4s var(--ease),transform .45s var(--ease);
}
#menu.open{opacity:1;pointer-events:auto;transform:none}
.menu-card{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.menu-card a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-radius:12px;
  font-size:21px;font-weight:500;letter-spacing:.02em;
  opacity:0;transform:translateX(14px);
  transition:opacity .35s var(--ease),transform .45s var(--ease),background .25s;
}
#menu.open .menu-card a{opacity:1;transform:none}
#menu.open .menu-card a:nth-child(1){transition-delay:.05s}
#menu.open .menu-card a:nth-child(2){transition-delay:.09s}
#menu.open .menu-card a:nth-child(3){transition-delay:.13s}
#menu.open .menu-card a:nth-child(4){transition-delay:.17s}
#menu.open .menu-card a:nth-child(5){transition-delay:.21s}
#menu.open .menu-card a:nth-child(6){transition-delay:.25s}
.menu-card a:hover{background:var(--ice)}
.menu-card a .mdot{width:8px;height:8px;border-radius:50%;background:var(--blue);opacity:0;transition:opacity .25s}
.menu-card a.active .mdot{opacity:1}
.menu-foot{margin-top:10px;background:var(--void);color:#fff;border-radius:var(--r-md);
  padding:18px;display:flex;align-items:center;justify-content:space-between;font-weight:600;letter-spacing:.06em}

/* ---------- stage: hero + tunnel (sticky canvas) ---------- */
#stage{position:relative;background:var(--void)}
#glwrap{position:sticky;top:0;height:100svh;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}
#glposter{
  position:absolute;inset:0;display:none;overflow:hidden;
  background:radial-gradient(90% 90% at 50% 50%,#101014 0%,#050506 75%);
}
#glposter.on{display:block}
#glposter .orb{position:absolute;border-radius:50%;filter:blur(28px);will-change:transform;pointer-events:none}
#glposter .o1{width:150px;height:150px;left:56%;top:32%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);
  animation:drift1 11s ease-in-out infinite alternate}
#glposter .o2{width:280px;height:280px;left:62%;top:46%;
  background:radial-gradient(circle,rgba(27,27,233,.6),rgba(27,27,233,0) 70%);
  animation:drift2 16s ease-in-out infinite alternate}
#glposter .o3{width:110px;height:110px;left:32%;top:58%;
  background:radial-gradient(circle,rgba(255,255,255,.4),rgba(255,255,255,0) 70%);
  animation:drift1 9s ease-in-out infinite alternate-reverse}
#glposter .o4{width:90px;height:90px;left:44%;top:30%;
  background:radial-gradient(circle,rgba(110,231,245,.5),rgba(110,231,245,0) 70%);
  animation:drift2 13s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-50px) scale(1.2)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-60px,40px) scale(.9)}}
.hero-ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(100px,13vh,150px)}
.hero-ui a,.hero-ui button{pointer-events:auto}
.hero-top{position:absolute;top:96px;left:var(--gut);right:var(--gut);display:flex;justify-content:space-between;align-items:flex-start}
.hero-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mut-d);text-transform:uppercase;line-height:2}
.hero-h1{color:#fff;max-width:12ch;margin-bottom:34px;text-shadow:0 2px 60px rgba(0,0,0,.45)}
.hero-h1 .row{display:block}
.hero-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hero-sub .lede{color:#C9CAD2}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.hero-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:0;display:none}
.scroll-cue{
  position:absolute;bottom:clamp(28px,4vh,52px);left:var(--gut);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--mut-d);text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
}
.scroll-cue .sline{width:1px;height:44px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.scroll-cue .sline::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:sdrop 1.8s var(--ease) infinite}
@keyframes sdrop{to{top:110%}}
#tunnel{height:0;position:relative}
.motion-enhanced #tunnel{height:170svh}
/* ---------- flash 2: soft bloom into light content ---------- */
#flash2{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:70}
/* cursor glow: soft light following the pointer on dark sections */
#glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:65;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;background:radial-gradient(circle,rgba(64,110,255,.14),rgba(46,75,240,.05) 45%,transparent 70%)}
body.glow-on #glow{opacity:1}
/* touch: tactile tap pulse on pills (magnetic is mouse-only) */
@media(hover:none){.pill{transition:transform .16s ease}.pill:active{transform:scale(.93)}}

/* ---------- tunnel punchline texts + flash ---------- */
.tunnel-texts{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.tt{
  position:absolute;max-width:18ch;text-align:center;
  font-size:clamp(38px,6.6vw,104px);font-weight:500;letter-spacing:-.04em;line-height:1.05;color:#fff;
  opacity:0;text-wrap:balance;text-shadow:0 4px 90px rgba(0,0,0,.55);
}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}


/* ---------- generic sections ---------- */
section.block{position:relative;padding:clamp(110px,14vh,190px) var(--gut)}
.on-light{background:var(--ice);color:var(--ink)}
.on-dark{background:var(--void2);color:#fff}
.wrap{max-width:1440px;margin:0 auto}
.sec-head{margin-bottom:clamp(48px,7vh,96px);max-width:1100px}
.sec-head h2{margin-top:26px}
.sec-index{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}

/* crosshair divider: slow living rotation (+ → × → +) */
.xhair{display:flex;justify-content:space-between;padding:0 var(--gut);background:var(--ice)}
.xhair span{font-size:22px;font-weight:300;color:#B9BBC4;line-height:1;animation:xspin 18s linear infinite}
@keyframes xspin{from{transform:translateY(-11px) rotate(0)}to{transform:translateY(-11px) rotate(90deg)}}
.xhair.dark{background:var(--void2)}
.xhair.dark span{color:#33343c}

/* ---------- angka ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);margin-top:8px}
.num{padding:10px 34px 6px 0;border-left:1px solid var(--line)}
.num:first-child{border-left:0;padding-left:0}
.num b{display:block;font-size:clamp(52px,6vw,104px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.num b .plus{color:var(--blue);font-size:.52em;letter-spacing:0}
.num b span{font-size:inherit}
.num > span{display:block;margin-top:14px;font-size:14px;color:var(--mut);line-height:1.55;max-width:20ch}
#angka{overflow:hidden}
#angka .arc{position:absolute;top:-140px;right:-140px;width:min(520px,62vw);height:auto;pointer-events:none;z-index:0}
#angka .wrap{position:relative;z-index:1}
.nums-note{margin-top:44px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase}

/* tonal boundaries: tighter rhythm where light meets dark */
#tentang{padding-bottom:clamp(64px,9vh,120px)}
#karier{padding-top:clamp(64px,9vh,120px);padding-bottom:clamp(64px,9vh,120px)}
#kompetensi{padding-top:clamp(64px,9vh,120px)}
.edu{padding-bottom:clamp(64px,9vh,120px)}
#kontak{padding-top:clamp(64px,9vh,120px)}

/* ---------- tentang ---------- */
.about-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,110px);align-items:start}
.photo-frame{border-radius:var(--r-lg);overflow:hidden;background:#dfe1e7;aspect-ratio:4/5;position:relative}
.photo-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.about-copy p+p{margin-top:22px}
.about-copy .lede{max-width:44ch}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;color:var(--ink);background:#fff;
  transition:transform .3s var(--ease),border-color .3s,color .3s;
}
.tag:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue)}

/* ---------- karier (dark) ---------- */
.tl{border-top:1px solid var(--dline)}
.tl-row{
  display:grid;grid-template-columns:200px 1fr 1.2fr;gap:clamp(20px,3vw,48px);
  padding:44px 0;border-bottom:1px solid var(--dline);align-items:baseline;
  opacity:0;transform:translateY(36px);
}
.tl-year{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--cyan)}
.tl-row{transition:background .3s}
.tl-row:hover{background:rgba(255,255,255,.028)}
.tl-role{transition:color .3s}
.tl-row:hover .tl-role{color:var(--cyan)}
@media(hover:none){.tl-row:hover{background:none}.tl-row:hover .tl-role{color:#fff}}
.tl-role{font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.tl-role small{display:block;font-size:15px;font-weight:400;color:var(--mut-d);letter-spacing:0;margin-top:8px}
.tl-desc{color:var(--mut-d);font-size:16px;line-height:1.65;max-width:44ch}
/* Sedjuk Group: 4 peran dalam satu grup */
.tl-sub{grid-column:2/4;display:grid;gap:20px;margin-top:4px}
.tl-sub p{color:var(--mut-d);font-size:15px;line-height:1.7;max-width:62ch;margin:0}
.tl-sub p b{color:#fff;font-weight:500}
.tl-sub p span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);white-space:nowrap}

/* ---------- kompetensi: editorial index list (bukan kartu seragam) ---------- */
.komp-list{border-top:1px solid var(--line)}
.komp{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,2.5vw,40px);align-items:baseline;
  padding:32px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(36px)}
.komp .idx{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--blue)}
.komp h3{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;margin:0}
.komp p{font-size:15px;color:var(--mut);line-height:1.65;margin:0;max-width:54ch}
.komp{transition:background .3s}
.komp:hover{background:rgba(27,27,233,.045)}
.komp h3{transition:transform .4s var(--ease)}
.komp:hover h3{transform:translateX(12px)}
@media(hover:none){.komp:hover{background:none}.komp:hover h3{transform:none}}

/* ---------- karier: statement editorial, bukan heading template ---------- */
.karier-head{margin-bottom:clamp(36px,6vh,72px)}
.karier-state{font-size:clamp(30px,4.6vw,68px);font-weight:500;letter-spacing:-.03em;line-height:1.12;max-width:22ch;margin-top:30px}

/* ---------- pencapaian ---------- */
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ach{
  border-radius:var(--r-lg);padding:clamp(30px,3.4vw,54px);min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--card);border:1px solid var(--line);
  opacity:0;transform:translateY(36px);
}
.ach.hero-card{background:var(--blue);border-color:var(--blue);color:#fff}
.ach .a-num{font-size:clamp(56px,6.4vw,110px);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.ach .idx{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--blue);margin-bottom:auto}
.ach h3{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;margin-top:16px}
.ach p{margin-top:10px;font-size:15px;line-height:1.6;opacity:.75;max-width:40ch}
.ach-wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:clamp(28px,4vw,72px)}
.ach-wide .idx{margin:0;flex:none}
.ach-wide h3{margin:0;flex:1.15}
.ach-wide p{margin:0;flex:1;max-width:46ch}

/* ---------- pendidikan ---------- */
.edu{padding-top:clamp(70px,9vh,110px);padding-bottom:clamp(70px,9vh,110px)}
.edu-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:34px}
.edu-row .deg{font-size:clamp(28px,3.6vw,54px);font-weight:500;letter-spacing:-.03em}
.edu-row .sch{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mut);text-transform:uppercase;text-align:right;line-height:2}

/* ---------- kontak (dark) ---------- */
#kontak .h-1{max-width:14ch}
#kontak .lede{margin-top:28px;max-width:46ch}
.k-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.k-mail{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--mut-d);border-bottom:1px solid #33343c;padding-bottom:6px;transition:color .3s,border-color .3s}
.k-mail:hover{color:#fff;border-color:#fff}
footer.site{border-top:1px solid var(--dline);margin-top:clamp(80px,10vh,130px);padding-top:34px;padding-bottom:clamp(28px,5vh,56px)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mut-d);text-transform:uppercase}
.foot-giant{
  font-size:clamp(48px,10.5vw,170px);font-weight:500;letter-spacing:-.05em;line-height:.95;
  color:transparent;-webkit-text-stroke:1px #2c2d35;margin-top:56px;white-space:nowrap;overflow:hidden;
  user-select:none;position:relative;
}
/* gradient fill layer, wiped in on scroll */
.fg-fill{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,#5d86ff,#1B1BE9 55%,#0a2566);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0px;
  clip-path:inset(-3% 100% -3% 0)}
.xhair-foot{display:flex;justify-content:space-between;margin:34px 0 0}
.xhair-foot span{font-size:20px;color:#33343c;font-weight:300;animation:xspin2 18s linear infinite}
@keyframes xspin2{from{transform:rotate(0)}to{transform:rotate(90deg)}}

/* ---------- reveal defaults ---------- */
.rv{opacity:0;transform:translateY(44px)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .tl-row{grid-template-columns:140px 1fr;}
  .tl-desc{grid-column:2}
  .about-grid{grid-template-columns:1fr;gap:44px}
  .photo-frame{max-width:440px}
}
@media(max-width:700px){
  .nums{grid-template-columns:1fr 1fr;gap:34px 0}
  .num:nth-child(3){border-left:0;padding-left:0}
  .ach-grid{grid-template-columns:1fr}
  .ach-wide{grid-column:1}
  .komp{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .ach-wide{flex-direction:column;align-items:flex-start;gap:14px}
  .tl-row{grid-template-columns:1fr;gap:10px}
  .tl-desc{grid-column:1}
  .tl-sub{grid-column:1}
  .hero-top{top:88px}
  .nav-pills .pill{padding:11px 16px;font-size:11px}
  .brand{font-size:14px}
  #menu{top:78px}
  .hero-sub{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .c{transform:none}
  .rv,.tl-row,.komp,.ach{opacity:1;transform:none}
  #loader{display:none}
}

/* Reliability, keyboard access, and small-screen composition overrides */
#loader[hidden], #menu[hidden]{display:none!important}
#loader{display:none}
.c{transform:none;will-change:auto}
.rv,.tl-row,.komp,.ach{opacity:1;transform:none}
.skip-link{position:fixed;left:12px;top:12px;z-index:220;padding:12px 18px;background:#fff;color:#050506;border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid #6ee7f5;outline-offset:4px}
.on-light :focus-visible{outline-color:#1b1be9}
#menu{z-index:151;max-height:calc(100svh - 100px);overflow:auto}
#menu.open .menu-card a{opacity:1;transform:none}
#nav:focus-within,#nav.menu-active{transform:none!important}
section[id],main[id]{scroll-margin-top:84px}
.hero-ui{padding-bottom:clamp(96px,12vh,140px)}
.hero-h1{max-width:15ch;font-size:clamp(42px,8.8vw,132px);line-height:.94}
.hero-top{z-index:1}
#glposter .orb{will-change:auto}
@media(max-width:700px){
  #nav{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));gap:8px;background:rgba(5,5,6,.68);backdrop-filter:blur(12px)}
  .brand{font-size:12px;letter-spacing:.08em;white-space:nowrap}
  .nav-pills{gap:6px}.nav-pills .pill{min-height:44px;padding:10px 12px;font-size:10px;letter-spacing:.04em}
  .hero-top{top:82px;left:20px;right:20px}.hero-kicker{font-size:9px;letter-spacing:.1em;line-height:1.7}
  .hero-ui{padding:0 20px calc(84px + env(safe-area-inset-bottom));justify-content:flex-end}
  .hero-h1{font-size:clamp(38px,10.2vw,68px);max-width:100%;margin-bottom:20px;line-height:.98}
  .hero-sub{gap:15px}.hero-sub .lede{max-width:34ch;font-size:15px}.hero-ctas{gap:8px}.hero-ctas .pill{min-height:44px;padding:11px 14px;font-size:11px}
  .scroll-cue{bottom:calc(18px + env(safe-area-inset-bottom));font-size:9px}
  body.motion-enhanced #tunnel{height:90svh}
  .num{padding-right:12px}.num b{font-size:clamp(40px,12vw,66px)}
}
@media(max-width:380px){.nav-pills .pill-dark{display:none}.brand{font-size:11px}.nav-pills .pill-light{padding-inline:15px}}
@media(max-height:620px){
  #nav{padding-top:10px;padding-bottom:10px}.hero-top{top:72px}.hero-ui{padding-bottom:60px}
  .hero-h1{font-size:clamp(38px,7vw,76px);margin-bottom:12px}.hero-sub .lede{font-size:14px;max-width:44ch}
  .scroll-cue{display:none}body.motion-enhanced #tunnel{height:80svh}
}
@media(max-width:1024px){.tl-sub{grid-column:2/-1}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #tunnel{height:0!important}.tt,#flash,#flash2{display:none!important}
  .xhair span,.xhair-foot span{animation:none!important}
}
body.motion-reduce #tunnel{height:0!important}
body.motion-reduce .tt,body.motion-reduce #flash,body.motion-reduce #flash2{display:none!important}
.nojs-nav{position:fixed;z-index:101;right:12px;top:68px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:70vw}
.nojs-nav a{background:#fff;color:#08090d;border-radius:999px;padding:8px 12px;font-size:12px}
#glposter{display:block}
#glwrap.scene-active #glposter{display:none}
/* Local contrast scrim behind copy; the upper-right scene stays visually open. */
.hero-ui::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(5,5,6,.88) 0%,rgba(5,5,6,.60) 29%,rgba(5,5,6,.12) 64%,transparent 78%),
    linear-gradient(90deg,rgba(5,5,6,.28) 0%,rgba(5,5,6,.10) 48%,transparent 76%)}
.hero-top{position:absolute;z-index:1}
.hero-h1,.hero-sub{position:relative;z-index:1}