*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --void:#060a0e; --void-2:#0a1017;
  --au-jade:#10b981; --au-teal:#0fd8c9; --au-cyan:#22d3ee;
  --au-violet:#7b6cf6; --au-magenta:#d857e8;
  --ink:#eef5f4; --muted:#9db3b6; --faint:#6c8186;
  --glass: rgba(255,255,255,.055);
  --glass-2: rgba(255,255,255,.02);
  --glass-brd: rgba(255,255,255,.11);
  --glass-brd-hi: rgba(255,255,255,.22);
  --accent: linear-gradient(135deg,var(--au-jade),var(--au-cyan));
  --shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1120px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--void);
  line-height:1.7; overflow-x:hidden; min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  letter-spacing:.005em;
}
::selection{background:rgba(16,185,129,.35); color:#fff}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--au-cyan); outline-offset:3px; border-radius:6px}

/* ---------- Aurora backdrop ---------- */
.aurora{position:fixed; inset:-15vmax; z-index:0; pointer-events:none;
  animation:hue 64s linear infinite; will-change:filter}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.62;
  mix-blend-mode:screen; will-change:transform}
.b1{width:52vmax; height:52vmax; left:-8vmax; top:-10vmax;
  background:radial-gradient(circle at 30% 30%,var(--au-jade),transparent 62%);
  animation:f1 34s ease-in-out infinite}
.b2{width:46vmax; height:46vmax; right:-8vmax; top:-6vmax;
  background:radial-gradient(circle at 60% 40%,var(--au-cyan),transparent 62%);
  animation:f2 40s ease-in-out infinite}
.b3{width:44vmax; height:44vmax; right:2vmax; top:34%;
  background:radial-gradient(circle at 50% 50%,var(--au-violet),transparent 60%);
  animation:f3 46s ease-in-out infinite}
.b4{width:50vmax; height:50vmax; left:-10vmax; bottom:-12vmax;
  background:radial-gradient(circle at 40% 60%,var(--au-teal),transparent 62%);
  animation:f4 38s ease-in-out infinite}
.b5{width:34vmax; height:34vmax; left:38%; bottom:-6vmax;
  background:radial-gradient(circle at 50% 50%,var(--au-magenta),transparent 60%);
  opacity:.5; animation:f5 30s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vmax,7vmax) scale(1.15)}}
@keyframes f2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-8vmax,9vmax) scale(.9)}}
@keyframes f3{0%,100%{transform:translate(0,0) scale(1) rotate(0)}50%{transform:translate(-7vmax,-6vmax) scale(1.2) rotate(20deg)}}
@keyframes f4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10vmax,-8vmax) scale(1.12)}}
@keyframes f5{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(-9vmax,-5vmax) scale(1.25)}}
@keyframes hue{to{filter:hue-rotate(26deg)}}

.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scrim{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% -10%, transparent 42%, rgba(5,8,11,.5) 100%),
    linear-gradient(180deg, rgba(5,8,11,.5), transparent 16%, transparent 78%, rgba(5,8,11,.72))}
.cursor-glow{position:fixed; z-index:2; top:0; left:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; opacity:0;
  transition:opacity .5s ease; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(16,185,129,.16), rgba(34,211,238,.08) 40%, transparent 66%)}
.progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:var(--accent); box-shadow:0 0 12px rgba(34,211,238,.6)}

/* ---------- Layout ---------- */
main{position:relative; z-index:3}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px)}
.section{padding-top:clamp(72px,11vw,132px); padding-bottom:clamp(72px,11vw,132px)}
.skip{position:absolute; left:-999px; top:0; z-index:100; background:#0e1620;
  color:var(--ink); padding:12px 18px; border-radius:0 0 10px 0; font-family:var(--ff-mono); font-size:.85rem}
.skip:focus{left:0}

.eyebrow{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--au-cyan); display:inline-flex; align-items:center; gap:.6em}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--au-cyan),transparent)}
.grad{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}

.glass{position:relative;
  background:linear-gradient(160deg,var(--glass),var(--glass-2));
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:var(--shadow); border-radius:20px}
.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 34%); opacity:.7}

/* ---------- Nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50;
  transition:padding .35s ease, background .35s ease, border-color .35s ease}
.nav-inner{max-width:var(--wrap); margin:0 auto; padding:16px clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.nav.scrolled{background:rgba(6,10,14,.55); border-bottom:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%)}
.nav.scrolled .nav-inner{padding-top:11px; padding-bottom:11px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:600; letter-spacing:.01em}
.mono-mark{width:34px; height:34px; display:grid; place-items:center; border-radius:10px;
  font-family:var(--ff-mono); font-weight:700; font-size:.95rem; color:#04110d;
  background:var(--accent); box-shadow:0 6px 18px rgba(16,185,129,.35)}
.brand small{display:block; font-family:var(--ff-mono); font-weight:400; font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin-top:1px}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.04em; color:var(--muted);
  padding:8px 13px; border-radius:9px; transition:color .25s, background .25s; position:relative}
.nav-links a:hover, .nav-links a.active{color:var(--ink); background:rgba(255,255,255,.05)}
.nav-links a.active::after{content:""; position:absolute; left:13px; right:13px; bottom:4px; height:1.5px;
  background:var(--accent); border-radius:2px}
.nav-cta{display:flex; align-items:center; gap:14px}
.pill{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.08em; color:#bff3e2;
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3)}
.pill .live{width:7px; height:7px; border-radius:50%; background:var(--au-jade);
  box-shadow:0 0 0 0 rgba(16,185,129,.7); animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%,100%{box-shadow:0 0 0 8px rgba(16,185,129,0)}}
.btn{font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.03em; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:11px;
  border:1px solid transparent; transition:transform .2s ease, box-shadow .3s ease, background .3s}
.btn:active{transform:scale(.97)}
.btn-primary{color:#04110d; font-weight:600; background:var(--accent); box-shadow:0 8px 24px rgba(16,185,129,.32)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(16,185,129,.5); transform:translateY(-2px)}
.btn-ghost{color:var(--ink); background:var(--glass); border-color:var(--glass-brd);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:var(--glass-brd-hi); background:rgba(255,255,255,.09); transform:translateY(-2px)}
.hamburger{display:none; width:44px; height:44px; border-radius:11px; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-brd); place-items:center; color:var(--ink)}
.hamburger span{position:relative; width:18px; height:2px; background:currentColor; border-radius:2px; transition:.3s}
.hamburger span::before,.hamburger span::after{content:""; position:absolute; left:0; width:18px; height:2px;
  background:currentColor; border-radius:2px; transition:.3s}
.hamburger span::before{top:-6px} .hamburger span::after{top:6px}
.nav.open .hamburger span{background:transparent}
.nav.open .hamburger span::before{top:0; transform:rotate(45deg)}
.nav.open .hamburger span::after{top:0; transform:rotate(-45deg)}
.mobile-menu{display:none}

/* ---------- Hero ---------- */
.hero{min-height:100svh; display:flex; align-items:center; padding-top:120px; padding-bottom:60px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,64px); align-items:center; width:100%}
.hero h1{font-family:var(--ff-display); font-weight:700; line-height:1.02;
  font-size:clamp(2.7rem,7.4vw,5.3rem); letter-spacing:-.02em; margin:20px 0 0}
.hero .role{font-family:var(--ff-mono); font-size:clamp(.9rem,2.2vw,1.15rem); color:var(--muted);
  margin-top:18px; display:flex; flex-wrap:wrap; gap:8px 14px}
.hero .role span{white-space:nowrap}
.hero .role .sep{color:var(--au-jade)}
.hero p.lead{color:var(--muted); font-size:clamp(1rem,1.4vw,1.12rem); max-width:46ch; margin-top:22px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.facts{display:flex; flex-wrap:wrap; gap:26px; margin-top:38px}
.fact{display:flex; flex-direction:column}
.fact b{font-family:var(--ff-display); font-size:1.5rem; font-weight:600; color:var(--ink)}
.fact small{font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}

/* ---------- Console (signature) ---------- */
.console{padding:0; overflow:hidden; border-radius:18px}
.console-bar{display:flex; align-items:center; gap:8px; padding:13px 16px;
  border-bottom:1px solid var(--glass-brd); background:rgba(255,255,255,.03)}
.console-bar .d{width:11px; height:11px; border-radius:50%}
.d.r{background:#ff5f57} .d.y{background:#febc2e} .d.g{background:#28c840}
.console-title{font-family:var(--ff-mono); font-size:.74rem; color:var(--faint); margin-left:8px}
.console-body{font-family:var(--ff-mono); font-size:.82rem; padding:18px 18px 20px; line-height:1.85}
.console-body .cmd{color:var(--muted); word-break:break-all}
.prompt{color:var(--au-jade); margin-right:6px}
.flag{color:var(--au-violet)}
.caret{display:inline-block; width:8px; height:1.05em; vertical-align:-2px; background:var(--au-cyan);
  margin-left:2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.resp{margin-top:12px; white-space:pre; color:var(--muted); overflow-x:auto}
.k{color:var(--au-cyan)} .s{color:#8be9c0} .p{color:var(--faint)} .b{color:var(--au-violet)}
.board{margin-top:16px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.12)}
.board-head{display:flex; justify-content:space-between; align-items:center; color:var(--faint); font-size:.72rem}
.board-head .ok{color:var(--au-jade)}
.svc{display:flex; flex-wrap:wrap; gap:7px 16px; margin-top:11px}
.svc span{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.75rem}
.svc i{width:7px; height:7px; border-radius:50%; background:var(--au-jade); box-shadow:0 0 8px var(--au-jade);
  animation:pulse 2.4s ease-in-out infinite}
.svc span:nth-child(2) i{animation-delay:.4s} .svc span:nth-child(3) i{animation-delay:.8s}
.svc span:nth-child(4) i{animation-delay:1.2s} .svc span:nth-child(5) i{animation-delay:1.6s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.12)}
.metric{display:flex; flex-direction:column; gap:3px}
.metric .num{font-family:var(--ff-display); font-weight:600; font-size:1.35rem; color:var(--ink)}
.metric .lbl{font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); line-height:1.3}

/* ---------- Section headers ---------- */
.head{margin-bottom:clamp(34px,5vw,56px); max-width:60ch}
.head h2{font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem,5vw,3.15rem); line-height:1.06; margin-top:16px}
.head p{color:var(--muted); margin-top:14px; max-width:52ch}

/* ---------- Projects ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{padding:26px 24px 24px; display:flex; flex-direction:column; overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  transition:opacity .4s; z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(16,185,129,.14), transparent 60%)}
.card:hover{transform:translateY(-7px); border-color:var(--glass-brd-hi);
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(16,185,129,.18) inset}
.card:hover::before{opacity:1}
.card > *{position:relative; z-index:1}
.card .tag{align-self:flex-start; font-family:var(--ff-mono); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--au-cyan); padding:5px 10px; border-radius:999px;
  border:1px solid rgba(34,211,238,.28); background:rgba(34,211,238,.07)}
.card h3{font-family:var(--ff-display); font-weight:600; font-size:1.32rem; margin:18px 0 0; letter-spacing:-.01em}
.card p{color:var(--muted); font-size:.95rem; margin-top:12px; flex:1}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:20px}
.chip{font-family:var(--ff-mono); font-size:.7rem; color:var(--muted); padding:5px 10px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-brd)}

/* ---------- Stack ---------- */
.stack-group{margin-bottom:30px}
.group-label{font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
  margin-bottom:14px; display:flex; align-items:center; gap:12px}
.group-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--glass-brd),transparent)}
.tile-grid{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px}
.tile{display:flex; flex-direction:column; align-items:center; gap:11px; padding:20px 12px;
  border-radius:15px; background:linear-gradient(160deg,var(--glass),var(--glass-2));
  border:1px solid var(--glass-brd); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform .3s, border-color .3s, box-shadow .3s, color .3s; color:var(--au-jade)}
.tile:hover{transform:translateY(-5px) scale(1.02); color:var(--au-cyan);
  border-color:var(--glass-brd-hi); box-shadow:0 16px 36px rgba(0,0,0,.4), 0 0 26px rgba(34,211,238,.14)}
.tile-ico{width:38px; height:38px}
.tile-ico svg{width:100%; height:100%; transition:filter .3s}
.tile:hover .tile-ico svg{filter:drop-shadow(0 0 8px rgba(34,211,238,.5))}
.tile-name{font-family:var(--ff-mono); font-size:.78rem; color:var(--ink); letter-spacing:.02em}

/* ---------- Timeline ---------- */
.timeline{position:relative; padding-left:34px}
.timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--au-jade),var(--au-cyan) 40%,var(--au-violet) 75%,transparent);
  box-shadow:0 0 14px rgba(34,211,238,.4)}
.tl-item{position:relative; margin-bottom:20px}
.tl-item::before{content:""; position:absolute; left:-33px; top:26px; width:14px; height:14px; border-radius:50%;
  background:var(--void); border:2px solid var(--au-cyan); box-shadow:0 0 0 4px rgba(34,211,238,.12), 0 0 14px var(--au-cyan)}
.tl-card{padding:24px 26px}
.tl-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 18px}
.tl-card h3{font-family:var(--ff-display); font-weight:600; font-size:1.18rem; letter-spacing:-.01em}
.tl-card h3 em{font-style:normal; color:var(--au-jade)}
.date{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; color:var(--au-cyan);
  padding:5px 11px; border-radius:999px; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.24); white-space:nowrap}
.tl-card ul{list-style:none; margin-top:14px; display:grid; gap:9px}
.tl-card li{position:relative; padding-left:20px; color:var(--muted); font-size:.94rem}
.tl-card li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%;
  background:var(--accent)}

/* ---------- Education ---------- */
.edu-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.edu{padding:26px 26px; display:flex; flex-direction:column; gap:8px;
  transition:transform .35s, border-color .35s}
.edu:hover{transform:translateY(-4px); border-color:var(--glass-brd-hi)}
.edu .date{align-self:flex-start}
.edu h3{font-family:var(--ff-display); font-weight:600; font-size:1.2rem; margin-top:4px}
.edu p{color:var(--muted); font-size:.92rem}

/* ---------- Contact ---------- */
.contact-panel{padding:clamp(38px,6vw,64px); text-align:center; overflow:hidden}
.contact-panel h2{font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2rem,5.5vw,3.4rem); line-height:1.05; margin-top:16px}
.contact-panel p{color:var(--muted); margin:16px auto 0; max-width:44ch}
.socials{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px}
.social{display:inline-flex; align-items:center; gap:11px; font-family:var(--ff-mono); font-size:.86rem;
  padding:14px 24px; border-radius:13px; transition:transform .25s, border-color .25s, background .25s, box-shadow .3s}
.social svg{width:20px; height:20px}
.social.ghost{background:var(--glass); border:1px solid var(--glass-brd); color:var(--ink)}
.social.ghost:hover{transform:translateY(-3px); border-color:var(--glass-brd-hi); background:rgba(255,255,255,.09)}
.social.primary{background:var(--accent); color:#04110d; font-weight:600; box-shadow:0 10px 28px rgba(16,185,129,.34)}
.social.primary:hover{transform:translateY(-3px); box-shadow:0 14px 40px rgba(16,185,129,.5)}

/* ---------- Footer ---------- */
footer{position:relative; z-index:3; border-top:1px solid var(--glass-brd);
  background:rgba(6,10,14,.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.foot{max-width:var(--wrap); margin:0 auto; padding:32px clamp(20px,5vw,40px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px}
.foot .brand small{color:var(--faint)}
.foot-note{font-family:var(--ff-mono); font-size:.72rem; color:var(--faint)}
.to-top{font-family:var(--ff-mono); font-size:.75rem; color:var(--muted); display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:10px; border:1px solid var(--glass-brd); background:var(--glass); transition:.25s}
.to-top:hover{color:var(--ink); border-color:var(--glass-brd-hi); transform:translateY(-2px)}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1; transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero{padding-top:130px; min-height:auto}
  .console{order:2}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links, .nav-cta .pill, .nav-cta .btn{display:none}
  .hamburger{display:grid}
  .mobile-menu{display:block; position:fixed; top:0; left:0; right:0; z-index:45;
    padding:88px clamp(20px,6vw,34px) 30px; transform:translateY(-102%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
    background:rgba(6,10,14,.9); border-bottom:1px solid var(--glass-brd);
    backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%)}
  .nav.open .mobile-menu{transform:translateY(0)}
  .mobile-menu a{display:block; font-family:var(--ff-mono); font-size:1.05rem; color:var(--ink);
    padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.07)}
  .mobile-menu a:last-of-type{border-bottom:none}
  .mobile-menu .btn-primary{margin-top:20px; width:100%; justify-content:center; padding:15px}
  .cards{grid-template-columns:1fr}
  .edu-grid{grid-template-columns:1fr}
  .facts{gap:20px 28px}
  .metrics{grid-template-columns:repeat(3,1fr); gap:8px}
  .metric .num{font-size:1.15rem}
  .tile-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .foot{justify-content:center; text-align:center; flex-direction:column}
}
@media (max-width:400px){
  .metric .lbl{font-size:.58rem}
  .console-body{font-size:.76rem}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .js .reveal{opacity:1 !important; transform:none !important}
  .caret{display:none}
  .cursor-glow{display:none}
}