/* ============================================================
   Design tokens
   ============================================================ */
:root{
  /* ink (dark surfaces) */
  --ink-950:#070b18;
  --ink-900:#0a1024;
  --ink-800:#101a38;
  --ink-700:#18264f;
  --ink-600:#243670;
  /* cobalt (brand) */
  --cobalt-700:#1b3fc4;
  --cobalt-600:#2451e8;
  --cobalt-500:#3d6bff;
  --cobalt-300:#8fb0ff;
  --cobalt-100:#e3ebff;
  --cobalt-50:#f1f5ff;
  /* signal (energy accent, used sparingly) */
  --mint:#5ee0b0;
  --mint-400:#7ae9c1;
  /* paper (light surfaces) */
  --paper:#fafaf7;
  --paper-2:#f3f3ee;
  --card:#ffffff;
  --line:#e6e6e0;
  --line-2:#d9d9d2;
  /* text */
  --txt-900:#0e1220;
  --txt-700:#3a4157;
  --txt-500:#646a7e;
  --txt-400:#8b90a2;
  /* type */
  --f-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  /* spacing (8px system) */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:48px;--s-8:64px;--s-10:80px;--s-12:96px;--s-16:128px;
  /* radii */
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.28s;--t-med:.5s;
  /* elevation (layered, tinted) */
  --sh-1:0 1px 2px rgba(14,18,32,.04),0 2px 8px rgba(14,18,32,.04);
  --sh-2:0 1px 2px rgba(14,18,32,.05),0 8px 24px -8px rgba(14,18,32,.10),0 24px 48px -24px rgba(36,81,232,.12);
  --sh-3:0 2px 4px rgba(14,18,32,.06),0 16px 40px -12px rgba(14,18,32,.16),0 40px 80px -32px rgba(36,81,232,.18);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);color:var(--txt-700);line-height:1.7;
  background:var(--paper);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg.i{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.i.f{fill:currentColor;stroke:none}
::selection{background:var(--cobalt-600);color:#fff}

.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--s-3)}
@media(min-width:768px){.wrap{padding-inline:var(--s-4)}}
@media(min-width:1200px){.wrap{padding-inline:var(--s-5)}}

/* Skip link */
.skip{position:fixed;top:8px;left:8px;z-index:200;background:var(--ink-950);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;transform:translateY(-200%);transition:transform var(--t-fast) var(--ease-out)}
.skip:focus-visible{transform:none;outline:2px solid var(--mint);outline-offset:3px}

/* Focus rings (global) */
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt-500);outline-offset:3px;border-radius:6px}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;background:linear-gradient(90deg,var(--cobalt-600),var(--mint));transform:scaleX(0);transform-origin:left;will-change:transform}

/* Grain overlay (reusable) */
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px}

/* ============================================================
   Custom cursor
   ============================================================ */
.cur{position:fixed;top:0;left:0;pointer-events:none;z-index:120;border-radius:50%;opacity:0;mix-blend-mode:difference;will-change:transform}
.cur-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cur-ring{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.9);transform:translate(-50%,-50%);transition:width var(--t-fast) var(--ease-out),height var(--t-fast) var(--ease-out),opacity var(--t-fast)}
html.has-cursor{cursor:none}
html.has-cursor a,html.has-cursor button,html.has-cursor [role=button]{cursor:none}
html.has-cursor .cur{opacity:1}
html.has-cursor .cur-ring.is-hover{width:56px;height:56px;border-color:rgba(255,255,255,.55)}
html.has-cursor .cur-dot.is-hover{width:10px;height:10px}

/* ============================================================
   Navigation
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;color:#fff;
  transition:background-color var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),color var(--t-med) var(--ease-out);
  border-bottom:1px solid transparent}
.nav::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  transition:opacity var(--t-med) var(--ease-out)}
.nav.is-solid::before{opacity:1}
.nav.is-solid{background:rgba(250,250,247,.72);color:var(--txt-900);border-bottom-color:rgba(14,18,32,.06);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.nav.is-solid.on-dark{background:rgba(7,11,24,.55);color:#fff;border-bottom-color:rgba(255,255,255,.08);box-shadow:none}
.nav-inner{position:relative;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}

.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;border-radius:12px}
.logo-mark{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink-900);overflow:hidden;flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 16px -6px rgba(36,81,232,.6);
  transition:transform var(--t-med) var(--ease-spring)}
.logo-mark::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 120% at 20% 0%,rgba(61,107,255,.7),transparent 62%)}
.logo-mark span{position:relative;font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;color:#fff;line-height:1}
.logo:hover .logo-mark{transform:translateY(-2px) rotate(-4deg)}
.logo-text{line-height:1.2;display:none}
@media(min-width:640px){.logo-text{display:block}}
.logo-name{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.logo-role{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

.nav-links{display:none;align-items:center;gap:6px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-link{position:relative;font-size:14px;font-weight:500;padding:8px 12px;border-radius:999px;opacity:.78;
  transition:opacity var(--t-fast),background-color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav-link:hover,.nav-link.active{opacity:1}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link:active{transform:translateY(1px)}

.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{display:none;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:999px;
  background:#fff;color:var(--ink-950);box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.35);
  transition:transform var(--t-med) var(--ease-spring),box-shadow var(--t-fast),background-color var(--t-fast),color var(--t-fast)}
@media(min-width:640px){.nav-cta{display:inline-flex}}
.nav.is-solid:not(.on-dark) .nav-cta{background:var(--ink-950);color:#fff}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta:active{transform:translateY(0) scale(.98)}
.nav-cta .i{transition:transform var(--t-fast) var(--ease-out)}
.nav-cta:hover .i{transform:translateX(3px)}

.burger{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-size:20px;
  transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast),border-color var(--t-fast)}
@media(min-width:1024px){.burger{display:none}}
.nav.is-solid:not(.on-dark) .burger{border-color:var(--line-2);background:#fff}
.burger:hover{transform:translateY(-1px)}
.burger:active{transform:scale(.96)}

/* Full-screen menu */
.menu{position:fixed;inset:0;z-index:75;background:var(--ink-950);color:#fff;display:none;overflow:auto;padding:calc(var(--nav-h) + 24px) 0 40px}
.menu.open{display:block}
.menu-inner{display:flex;flex-direction:column;min-height:100%;gap:40px}
.menu-list{display:flex;flex-direction:column}
.menu-list a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--f-display);font-size:clamp(2rem,9vw,3rem);line-height:1.05;letter-spacing:-.02em;
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color var(--t-fast)}
.menu-list a small{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--cobalt-300)}
.menu.open .menu-list a{opacity:1;transform:none}
.menu-list a:hover{color:var(--cobalt-300)}
.menu-foot{margin-top:auto;display:grid;gap:16px;font-size:14px;color:rgba(255,255,255,.65)}
.menu-foot a{color:#fff;font-weight:500}
.menu-foot .socials{justify-content:flex-start;margin:0}

/* ============================================================
   Hero
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;background:var(--ink-950);color:#fff;overflow:hidden;isolation:isolate;padding-top:var(--nav-h)}
.hero > .wrap{min-width:0}
.hero-mesh{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(55% 45% at 82% 12%,rgba(36,81,232,.55),transparent 62%),
    radial-gradient(35% 30% at 12% 90%,rgba(94,224,176,.10),transparent 65%),
    radial-gradient(70% 55% at 50% 115%,rgba(24,38,79,.9),transparent 70%),
    linear-gradient(180deg,#070b18 0%,#0a1024 100%)}
.lattice{position:absolute;inset:0;z-index:1;opacity:.95}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 70% at 28% 55%,rgba(7,11,24,.55),transparent 70%)}
.hero .grain{z-index:2}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-8);align-items:center;padding:var(--s-8) 0 var(--s-6);will-change:transform}
@media(min-width:1024px){.hero-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-8);padding:var(--s-6) 0}}
.hero-copy{min-width:0}

.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);
  padding:8px 14px 8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mint);flex-shrink:0}
.dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--mint);opacity:0;animation:ping 2.4s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1.4);opacity:0}100%{transform:scale(1.4);opacity:0}}

.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.75rem,7vw,5.25rem);line-height:.98;letter-spacing:-.025em;margin:var(--s-3) 0 var(--s-3);max-width:14ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--cobalt-300);position:relative;white-space:nowrap}
.hero-name{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cobalt-300);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(min-width:640px){.hero-name span+span::before{content:'/';margin-right:12px;color:rgba(255,255,255,.3)}}
.hero .lead{font-size:clamp(1.02rem,1.5vw,1.15rem);line-height:1.7;color:rgba(255,255,255,.68);max-width:56ch;margin-top:var(--s-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-4)}
.hero-socials{display:flex;align-items:center;gap:8px;margin-top:var(--s-4)}
.hero-socials .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:8px}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:-.005em;padding:15px 26px;border-radius:999px;border:1px solid transparent;
  transition:transform var(--t-med) var(--ease-spring),box-shadow var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast);will-change:transform}
.btn .i{transition:transform var(--t-fast) var(--ease-out)}
.btn:hover .i{transform:translateX(4px)}
.btn:hover .i.dn{transform:translateY(3px)}
.btn--primary{background:var(--cobalt-600);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 2px rgba(7,11,24,.3),0 12px 28px -10px rgba(36,81,232,.8)}
.btn--primary:hover{background:var(--cobalt-500);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 2px 4px rgba(7,11,24,.3),0 18px 36px -12px rgba(61,107,255,.9)}
.btn--primary:active{transform:scale(.98)}
.btn--signal{background:var(--mint);color:var(--ink-950);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 1px 2px rgba(7,11,24,.3),0 12px 28px -10px rgba(94,224,176,.75)}
.btn--signal:hover{background:var(--mint-400);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 2px 4px rgba(7,11,24,.3),0 18px 40px -12px rgba(94,224,176,.95)}
.btn--signal:active{transform:scale(.98)}
/* slow halo, so the eye lands here first */
.btn--signal::after{content:'';position:absolute;inset:-2px;border-radius:999px;border:1.5px solid var(--mint);opacity:0;pointer-events:none;
  animation:halo 3.2s var(--ease-out) infinite}
.btn--signal:hover::after{animation:none;opacity:0}
@keyframes halo{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.13);opacity:0}100%{transform:scale(1.13);opacity:0}}
.btn--ghost{background:rgba(255,255,255,.05);color:#fff;border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.btn--ghost:active{transform:scale(.98)}
.btn--ink{background:var(--ink-950);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 12px 28px -12px rgba(7,11,24,.6)}
.btn--ink:hover{background:var(--ink-800)}
.btn--ink:active{transform:scale(.98)}
.btn--outline{background:transparent;color:var(--txt-900);border-color:var(--line-2)}
.btn--outline:hover{border-color:var(--txt-900);background:#fff}
.btn--outline:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:999px}
.btn--signal:focus-visible{outline:2px solid #fff}
.btn--sm{padding:9px 16px;font-size:13.5px}

.socials{display:flex;gap:8px}
.social{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);font-size:16px;background:rgba(255,255,255,.03);
  transition:transform var(--t-med) var(--ease-spring),background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.social:hover{color:#fff;background:var(--cobalt-600);border-color:var(--cobalt-600)}
.social:active{transform:scale(.94)}
.social:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:50%}

/* Portrait composition */
.figure{position:relative;width:min(100%,380px);min-width:0;margin-inline:auto;will-change:transform}
@media(min-width:1024px){.figure{width:min(100%,420px);margin-inline:0 0;justify-self:end}}
.figure-frame{position:absolute;inset:-10px;border:1px solid rgba(143,176,255,.22);border-radius:var(--r-xl);transform:translate(10px,10px);pointer-events:none}
@media(min-width:1024px){.figure-frame{inset:-14px;transform:translate(14px,14px)}}
.figure-frame::before{content:'';position:absolute;top:-1px;left:-1px;width:24px;height:24px;border-top:2px solid var(--cobalt-300);border-left:2px solid var(--cobalt-300);border-top-left-radius:var(--r-xl)}
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-800);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(0,0,0,.7),0 60px 120px -40px rgba(36,81,232,.45)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.02);transition:transform 1.2s var(--ease-out)}
.figure:hover .portrait img{transform:scale(1.06)}
.portrait::before{content:'';position:absolute;inset:0;z-index:1;background:var(--cobalt-700);mix-blend-mode:multiply;opacity:.18;pointer-events:none}
.portrait::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(7,11,24,.7),rgba(7,11,24,.05) 55%,transparent);pointer-events:none}
.chip{position:absolute;z-index:3;display:grid;gap:2px;padding:12px 16px;border-radius:14px;
  background:rgba(10,16,36,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 16px 40px -16px rgba(0,0,0,.7);will-change:transform}
.chip b{font-family:var(--f-display);font-size:1.6rem;line-height:1;letter-spacing:-.01em;color:#fff;font-weight:400}
.chip span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.chip--a{left:10px;top:12%}
.chip--b{right:10px;bottom:14%}
.chip--b b i{font-style:normal;color:var(--mint)}
@media(min-width:1024px){.chip--a{left:-16px}.chip--b{right:-16px}}
@media(min-width:1280px){.chip--a{left:-40px}.chip--b{right:-40px}}
.portrait-tag{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:8px}

/* Hero intro animation (opacity/transform only) */
html.js [data-intro]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms + 120ms)}
html.js .figure[data-intro]{transform:translateY(28px) scale(.97)}
html.js.is-ready [data-intro]{opacity:1;transform:none}

/* Credibility strip */
.cred{position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.08);background:rgba(7,11,24,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cred-inner{display:flex;align-items:center;gap:var(--s-3);padding-block:18px;min-height:64px}
.cred-lbl{flex-shrink:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);padding-right:var(--s-3);border-right:1px solid rgba(255,255,255,.1)}
.cred-track{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cred-row{display:flex;gap:var(--s-6);width:max-content;animation:marquee 46s linear infinite;will-change:transform}
.cred-track:hover .cred-row{animation-play-state:paused}
.cred-row span{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap;display:inline-flex;align-items:center;gap:12px}
.cred-row span::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--cobalt-300);opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section{position:relative;padding:var(--s-12) 0}
@media(min-width:768px){.section{padding:var(--s-16) 0}}
.section--alt{background:var(--paper-2)}
.section--alt::before,.section--alt::after{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.section--alt::before{top:0}.section--alt::after{bottom:0}

.sec-head{display:grid;gap:var(--s-2);margin-bottom:var(--s-8);align-items:end}
@media(min-width:900px){.sec-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-6);margin-bottom:var(--s-10)}}
.sec-index{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-500);display:flex;align-items:center;gap:12px;margin-bottom:var(--s-2)}
.sec-index::before{content:'';width:28px;height:1px;background:var(--cobalt-600)}
.sec-head h2,.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.02em;color:var(--txt-900);text-wrap:balance}
.sec-head h2 em,.h2 em{font-style:italic;color:var(--cobalt-600)}
.sec-sub{font-size:1.05rem;line-height:1.7;color:var(--txt-500);max-width:44ch}
@media(min-width:900px){.sec-sub{padding-bottom:6px}}

/* ============================================================
   About
   ============================================================ */
.about-grid{display:grid;gap:var(--s-6)}
@media(min-width:1024px){.about-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-12)}}
.about-side{display:grid;gap:var(--s-4);align-content:start}
@media(min-width:1024px){.about-side{position:sticky;top:calc(var(--nav-h) + 40px)}}
.about-side .sec-head{margin:0;display:block}
.meta-list{display:grid;gap:10px;padding-top:var(--s-3);border-top:1px solid var(--line)}
.meta-list li{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.02em;color:var(--txt-500)}
.meta-list .i{color:var(--cobalt-600);font-size:15px}
.about-copy{display:grid;gap:var(--s-3)}
.about-copy p{font-size:1.0625rem;line-height:1.78;color:var(--txt-700)}
.about-copy p:first-child{font-size:1.2rem;line-height:1.6;color:var(--txt-900)}
.about-copy strong{color:var(--txt-900);font-weight:600}
.about-copy a{color:var(--cobalt-600);font-weight:500;text-decoration:underline;text-decoration-color:rgba(36,81,232,.3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.about-copy a:hover{text-decoration-color:var(--cobalt-600)}

/* Bento */
.bento{display:grid;gap:var(--s-2);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s-10)}
@media(min-width:768px){.bento{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:minmax(168px,auto)}}
.cell{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-2);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
.cell:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.cell-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-500);display:flex;align-items:center;gap:8px}
.cell-lbl .i{color:var(--cobalt-600);font-size:15px}
.cell-num{font-family:var(--f-display);font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--txt-900);font-variant-numeric:tabular-nums}
.cell-num small{font-size:.45em;color:var(--txt-500);margin-left:2px}
.cell-num sup{font-size:.5em;color:var(--cobalt-600);vertical-align:top;top:.15em;position:relative}
.cell--trace{grid-column:span 2;grid-row:span 1;background:var(--ink-950);color:#fff;border-color:rgba(255,255,255,.06);min-height:300px}
@media(min-width:768px){.cell--trace{grid-row:span 2}}
.cell--trace::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top,rgba(7,11,24,.96) 30%,rgba(7,11,24,0));pointer-events:none}
.cell--trace .cell-lbl{color:rgba(255,255,255,.55)}
.cell--trace .cell-lbl .i{color:var(--mint)}
.cell--trace .glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 80% 0%,rgba(36,81,232,.45),transparent 60%);pointer-events:none}
.trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trace .grid-line{stroke:rgba(255,255,255,.07);stroke-width:1}
.trace .curve{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s var(--ease-out) .3s;filter:drop-shadow(0 0 6px rgba(94,224,176,.6))}
.trace .curve2{fill:none;stroke:var(--cobalt-300);stroke-width:1.5;stroke-dasharray:4 6;opacity:.7}
.trace .pt{fill:var(--mint);opacity:0;transition:opacity .4s ease 2s}
.cell--trace.in .curve{stroke-dashoffset:0}
.cell--trace.in .pt{opacity:1}
.trace-cap{position:relative;z-index:3;margin-top:auto}
.cell--trace .cell-lbl{position:relative;z-index:3}
.trace-cap h3{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;color:#fff;max-width:22ch}
.trace-cap p{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:8px;max-width:44ch}
@media(max-width:639px){.axis{display:none}}
.axis{position:absolute;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.axis--x{right:24px;top:44%}
.axis--y{left:24px;top:56px;writing-mode:vertical-rl;transform:rotate(180deg)}
.cell--wide{grid-column:span 2}
@media(max-width:767px){.cell--wide{order:10}}
.cell--dark{background:var(--ink-900);color:#fff;border-color:rgba(255,255,255,.06)}
.cell--dark .cell-lbl{color:rgba(255,255,255,.55)}
.cell--dark .cell-num{color:#fff}
.cell--dark .cell-lbl .i{color:var(--mint)}
.langs{display:flex;flex-wrap:wrap;gap:8px}
.lang{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--txt-900);
  transition:transform var(--t-med) var(--ease-spring),background-color var(--t-fast),border-color var(--t-fast)}
.lang:hover{transform:translateY(-2px);background:var(--cobalt-50);border-color:var(--cobalt-100)}
.lang em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--txt-500)}
.cell-note{font-size:14px;line-height:1.55;color:var(--txt-500)}
.cell--dark .cell-note{color:rgba(255,255,255,.6)}
.cell-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--cobalt-300);margin-top:4px;transition:gap var(--t-fast)}
.cell-link:hover{gap:10px}

/* ============================================================
   Experience & Education (timeline)
   ============================================================ */
.tl{position:relative;display:grid;gap:var(--s-3)}
@media(min-width:900px){
  .tl{gap:var(--s-4)}
  .tl::before{content:'';position:absolute;left:207px;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,transparent,var(--line-2) 4%,var(--line-2) 96%,transparent)}
  .tl-item{display:grid;grid-template-columns:184px minmax(0,1fr);gap:var(--s-6)}
}
.tl-when{display:none}
@media(min-width:900px){
  .tl-when{display:block;position:relative;padding-top:34px;font-family:var(--f-mono);font-size:12.5px;line-height:1.6;letter-spacing:.02em;color:var(--txt-500)}
  .tl-when strong{display:block;font-weight:500;color:var(--txt-900)}
  .tl-when::after{content:'';position:absolute;right:-28px;top:40px;width:9px;height:9px;border-radius:50%;background:var(--paper-2);border:2px solid var(--cobalt-600);box-shadow:0 0 0 4px var(--paper-2);z-index:1}
  .tl-item--now .tl-when::after{background:var(--mint);border-color:var(--mint)}
}
.xp{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast);overflow:hidden}
@media(min-width:768px){.xp{padding:var(--s-5)}}
.xp:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.xp--featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cobalt-600),var(--mint))}
.xp-head{display:grid;grid-template-columns:1fr;gap:var(--s-2);align-items:flex-start}
@media(min-width:640px){.xp-head{grid-template-columns:auto minmax(0,1fr);gap:var(--s-3)}}
.mono-tile{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;flex-shrink:0;background:var(--ink-950);color:#fff;font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 10px 20px -10px rgba(7,11,24,.6)}
.mono-tile--light{background:var(--paper-2);color:var(--ink-900);border:1px solid var(--line);box-shadow:none}
.mono-tile--cobalt{background:var(--cobalt-600)}
.mono-tile--logo{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.mono-tile--logo img{width:64%;height:auto}
.mono-tile--fill{background:var(--ink-950);overflow:hidden}
.mono-tile--fill img{width:100%;height:100%;object-fit:cover}
.xp-title-wrap{flex:1;min-width:0}
.xp-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:6px}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--cobalt-50);color:var(--cobalt-700);border:1px solid var(--cobalt-100)}
.pill--now{background:rgba(94,224,176,.12);color:#0f7a58;border-color:rgba(94,224,176,.4)}
.xp h3{font-size:clamp(1.2rem,2.2vw,1.45rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--txt-900)}
.xp-org{font-size:1rem;font-weight:600;color:var(--txt-700);margin-top:6px}
.xp-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-family:var(--f-mono);font-size:12.5px;color:var(--txt-500)}
.xp-meta span{display:inline-flex;align-items:center;gap:7px}
.xp-meta .i{color:var(--cobalt-600);font-size:14px}
.xp-when-mobile{display:inline-flex}
@media(min-width:900px){.xp-when-mobile{display:none}}
.bullets{margin-top:var(--s-3);display:grid;gap:12px}
.bullets li{display:flex;gap:12px;font-size:15px;line-height:1.7;color:var(--txt-700)}
.bullets .i{color:var(--cobalt-600);font-size:16px;margin-top:6px}
.xp-desc{margin-top:var(--s-2);font-size:15px;line-height:1.75;color:var(--txt-700)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.tag{font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--txt-700);
  transition:transform var(--t-med) var(--ease-spring),border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast)}
.tag:hover{transform:translateY(-2px);border-color:var(--cobalt-600);color:var(--cobalt-700);background:var(--cobalt-50)}

/* Thesis feature */
.thesis{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--ink-950);color:#fff;padding:var(--s-5) var(--s-4);isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -24px rgba(7,11,24,.6);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out)}
@media(min-width:768px){.thesis{padding:var(--s-8) var(--s-6)}}
.thesis:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -28px rgba(36,81,232,.5)}
.thesis-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 90% 10%,rgba(36,81,232,.5),transparent 60%),
    radial-gradient(40% 50% at 10% 100%,rgba(94,224,176,.12),transparent 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 48px)}
.thesis-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 70% at 40% 50%,transparent,rgba(7,11,24,.75))}
.thesis-inner{position:relative;z-index:1;display:grid;gap:var(--s-4)}
@media(min-width:900px){.thesis-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:end}}
.thesis h3{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.02;letter-spacing:-.02em;margin-top:var(--s-2)}
.thesis h3 em{font-style:italic;color:var(--cobalt-300)}
.thesis-sub{font-size:1.05rem;color:rgba(255,255,255,.72);margin-top:var(--s-2);max-width:48ch}
.thesis-desc{font-size:15px;line-height:1.75;color:rgba(255,255,255,.62);margin-top:var(--s-3);max-width:60ch}
.thesis-meta{display:grid;gap:12px}
.frost{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frost div{padding:16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.frost b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1;color:#fff}
.frost span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px}
.thesis-org{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;color:rgba(255,255,255,.62)}
.thesis-org .i{color:var(--mint)}
.pill--light{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14)}

/* ============================================================
   Projects
   ============================================================ */
.pj-feat{position:relative;display:grid;gap:var(--s-4);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
@media(min-width:900px){.pj-feat{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-8);padding:var(--s-6);align-items:center}}
.pj-feat:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.pj-idx{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--txt-500);display:flex;align-items:center;gap:10px}
.pj-idx::after{content:'';width:24px;height:1px;background:var(--line-2)}
.pj-feat h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:-.02em;color:var(--txt-900);margin-top:var(--s-2)}
.pj-feat p{font-size:1.02rem;line-height:1.75;color:var(--txt-700);margin-top:var(--s-2)}
.stack{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:var(--s-3);font-family:var(--f-mono);font-size:12px;color:var(--txt-500)}
.stack span{display:inline-flex;align-items:center;gap:8px}
.stack span::before{content:'';width:5px;height:5px;border-radius:2px;background:var(--cobalt-600);transform:rotate(45deg)}
.pj-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-3);color:var(--txt-900);font-size:14px;font-weight:600;transition:color var(--t-fast)}
.pj-link .i{transition:transform var(--t-fast) var(--ease-out);font-size:15px}
.pj-link:hover{color:var(--cobalt-600)}
.pj-link:hover .i{transform:translate(2px,-2px)}
.pj-link::after{content:'';position:absolute;inset:0;border-radius:inherit}
.pj-visual{position:relative;aspect-ratio:5/4;border-radius:var(--r-md);background:var(--ink-950);overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(7,11,24,.7)}
.pj-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.pj-visual--photo::before{content:'';position:absolute;inset:0;z-index:1;background:var(--cobalt-600);opacity:.18;mix-blend-mode:multiply;pointer-events:none}
.pj-feat:hover .pj-photo{transform:scale(1.04)}
.pj-visual .glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 20%,rgba(36,81,232,.55),transparent 62%),radial-gradient(40% 40% at 10% 100%,rgba(94,224,176,.15),transparent 60%)}
.pj-visual::after{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;z-index:1;background:linear-gradient(to top,rgba(7,11,24,.92) 20%,rgba(7,11,24,0));pointer-events:none}
.qgrid{position:absolute;inset:0;width:100%;height:100%}
.qgrid rect{fill:#8fb0ff;transition:opacity .6s var(--ease-out);transition-delay:calc(var(--k,0) * 6ms)}
.qgrid.q rect{opacity:var(--q)!important}
.pj-visual .cap{position:absolute;left:20px;bottom:18px;right:20px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pj-visual .cap b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;color:#fff;text-transform:none;line-height:1}
.pj-visual .cap .sw{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.pj-visual .cap .sw i{width:6px;height:6px;border-radius:50%;background:var(--mint)}

.pj-grid{display:grid;gap:var(--s-3);margin-top:var(--s-3)}
@media(min-width:768px){.pj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pj{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
.pj::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cobalt-600),var(--mint));transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.pj:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pj:hover::before{transform:scaleX(1)}
.pj:focus-within{outline:2px solid var(--cobalt-500);outline-offset:3px}
.pj-feat:focus-within{outline:2px solid var(--cobalt-500);outline-offset:3px}
.pj-feat .pj-link:focus-visible,.pj .pj-link:focus-visible{outline:none}
.pj-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cobalt-50);color:var(--cobalt-600);font-size:20px;border:1px solid var(--cobalt-100);
  transition:transform var(--t-med) var(--ease-spring),background-color var(--t-fast),color var(--t-fast)}
.pj:hover .pj-ico{transform:translateY(-3px) rotate(-6deg);background:var(--cobalt-600);color:#fff}
.pj-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--s-3)}
.pj h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--txt-900)}
.pj p{font-size:15px;line-height:1.7;color:var(--txt-700);margin-top:10px;flex:1}
.pj .stack{margin-top:var(--s-2)}

/* ============================================================
   Publications
   ============================================================ */
.paper{position:relative;display:grid;gap:var(--s-3);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
@media(min-width:900px){.paper{grid-template-columns:200px minmax(0,1fr);gap:var(--s-8);padding:var(--s-6)}}
.paper:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.paper-side{display:grid;gap:var(--s-2);align-content:start}
@media(min-width:900px){.paper-side{border-right:1px solid var(--line);padding-right:var(--s-4)}}
.paper-year{font-family:var(--f-display);font-size:clamp(2.6rem,5vw,4rem);line-height:.9;letter-spacing:-.02em;color:var(--txt-900)}
.paper-venue{font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--txt-500)}
.paper-venue b{display:block;color:var(--txt-900);font-weight:500}
.paper h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:-.015em;color:var(--txt-900);text-wrap:balance}
.paper-authors{margin-top:var(--s-2);font-size:15px;line-height:1.7;color:var(--txt-500)}
.paper-authors strong{color:var(--txt-900);font-weight:600}
.paper-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.paper-id{font-family:var(--f-mono);font-size:12.5px;color:var(--txt-500);padding:8px 12px;border-radius:8px;background:var(--paper-2);border:1px solid var(--line)}

/* ============================================================
   Skills & certifications
   ============================================================ */
.sk-grid{display:grid;gap:var(--s-3)}
@media(min-width:640px){.sk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sk{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-3);box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
@media(min-width:768px){.sk{padding:var(--s-4)}}
.sk:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.sk-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--line)}
.sk-head .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--cobalt-50);color:var(--cobalt-600);border:1px solid var(--cobalt-100);font-size:17px;flex-shrink:0}
.sk-head h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--txt-900)}
.sk-head small{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-500);margin-top:2px}
.sk .tags{margin-top:0}

.certs{margin-top:var(--s-8);border-top:1px solid var(--line-2)}
.certs-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding:var(--s-3) 0 var(--s-2)}
.certs-head h3{font-family:var(--f-display);font-weight:400;font-size:1.7rem;letter-spacing:-.01em;color:var(--txt-900)}
.certs-head span{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-500)}
.cert{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-2);padding:18px 0;border-top:1px solid var(--line);
  transition:transform var(--t-med) var(--ease-out),color var(--t-fast)}
@media(min-width:768px){.cert{grid-template-columns:auto minmax(0,1fr) 140px auto;gap:var(--s-3);padding:20px 8px}}
.cert:hover{transform:translateX(6px)}
.cert .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);color:var(--cobalt-600);font-size:18px;transition:background-color var(--t-fast),color var(--t-fast)}
.cert:hover .ico{background:var(--cobalt-600);color:#fff}
.cert-name{font-size:15.5px;font-weight:600;color:var(--txt-900);letter-spacing:-.01em}
.cert-org{display:block;font-family:var(--f-mono);font-size:12px;color:var(--txt-500);margin-top:2px}
.cert-year{display:none;font-family:var(--f-mono);font-size:12.5px;color:var(--txt-500)}
@media(min-width:768px){.cert-year{display:block}}
.cert .arrow{color:var(--txt-400);font-size:18px;transition:transform var(--t-fast) var(--ease-out),color var(--t-fast)}
.cert:hover .arrow{transform:translate(2px,-2px);color:var(--cobalt-600)}
.cert:focus-visible{outline-offset:-2px;border-radius:12px}

/* CV download */
.cv{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-6);padding:var(--s-3);border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-fast),border-color var(--t-fast)}
.cv:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.cv-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--cobalt-50);color:var(--cobalt-600);font-size:20px;flex-shrink:0}
.cv-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.cv-name{font-family:var(--f-mono);font-size:14px;color:var(--txt-900);word-break:break-all}
.cv-sub{font-size:13px;color:var(--txt-500)}
.cv .btn{margin-left:auto}
@media(max-width:639px){.cv-meta{flex:1 1 140px}
  .cv .btn{flex:1 0 100%;margin-left:0;justify-content:center}}

/* ============================================================
   Contact / footer
   ============================================================ */
.contact{background:var(--ink-950);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.contact-mesh{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 45% at 50% 0%,rgba(36,81,232,.35),transparent 65%),radial-gradient(30% 30% at 90% 90%,rgba(94,224,176,.08),transparent 60%)}
.contact .wrap{position:relative;z-index:3}
.contact .sec-index{color:rgba(255,255,255,.5)}
.contact .sec-index::before{background:var(--mint)}
.contact .h2{color:#fff}
.contact .h2 em{color:var(--cobalt-300)}
.contact-top{display:grid;gap:var(--s-4)}
@media(min-width:1024px){.contact-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-12);align-items:end}}
.contact-lead{font-size:1.05rem;line-height:1.7;color:rgba(255,255,255,.62);max-width:44ch}
.big-mail{display:inline-block;margin-top:var(--s-4);font-family:var(--f-display);font-size:clamp(1.55rem,4.2vw,3.4rem);line-height:1.1;letter-spacing:-.02em;color:#fff;position:relative;padding-bottom:6px;word-break:break-all}
.big-mail::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--cobalt-300),var(--mint));transform:scaleX(.18);transform-origin:left;transition:transform .6s var(--ease-out)}
.big-mail:hover::after{transform:scaleX(1)}
.big-mail .i{font-size:.55em;vertical-align:middle;margin-left:.2em;color:var(--cobalt-300);transition:transform var(--t-fast) var(--ease-out)}
.big-mail:hover .i{transform:translate(4px,-4px)}
.contact-socials{display:flex;align-items:center;gap:8px;margin-top:var(--s-5)}
.contact-socials .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:8px}
.contact-grid{display:grid;gap:12px}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr}}
.crow{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform var(--t-med) var(--ease-out),background-color var(--t-fast),border-color var(--t-fast)}
.crow:hover{transform:translateY(-3px);background:rgba(61,107,255,.14);border-color:rgba(61,107,255,.45)}
.crow .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(61,107,255,.16);color:var(--cobalt-300);font-size:17px;flex-shrink:0}
.crow-lbl{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.crow-val{display:block;font-size:15px;font-weight:500;color:#fff;margin-top:2px;word-break:break-word}
.crow .arrow{margin-left:auto;color:rgba(255,255,255,.35);font-size:16px;transition:transform var(--t-fast) var(--ease-out),color var(--t-fast)}
.crow:hover .arrow{transform:translate(2px,-2px);color:#fff}
.crow:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:16px}

.foot{margin-top:var(--s-10);padding-top:var(--s-3);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:14px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.55)}
@media(min-width:768px){.foot{flex-direction:row;align-items:center;justify-content:space-between}}
.foot-left{display:flex;align-items:center;gap:12px}
.foot-mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px}
.foot-mono .i{color:var(--mint)}
.foot-right{display:flex;align-items:center;gap:var(--s-3)}
.to-top{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#fff;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);transition:background-color var(--t-fast),transform var(--t-med) var(--ease-spring)}
.to-top:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.to-top:active{transform:scale(.97)}

/* ============================================================
   Reveal-on-scroll — transform + opacity only
   ============================================================ */
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);transition-delay:var(--d,0ms);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none;will-change:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal,html.js [data-intro],html.js .figure[data-intro]{opacity:1;transform:none;transition:none}
  .dot::after,.cred-row,.btn--signal::after{animation:none}
  .cred-track{-webkit-mask-image:none;mask-image:none}
  .cred-row{flex-wrap:wrap;width:auto}
  .trace .curve{stroke-dashoffset:0;transition:none}
  .trace .pt{opacity:1;transition:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   Project detail page (project.html)
   ============================================================ */
.pj-page{background:var(--paper);padding-top:calc(var(--nav-h) + var(--s-8));padding-bottom:var(--s-12)}
@media(min-width:900px){.pj-page{padding-top:calc(var(--nav-h) + var(--s-12))}}

.pj-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-500);
  transition:color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.pj-back .i{transform:rotate(180deg);transition:transform var(--t-fast) var(--ease-out)}
.pj-back:hover{color:var(--cobalt-600)}
.pj-back:hover .i{transform:rotate(180deg) translateX(3px)}
.pj-back:focus-visible{outline:2px solid var(--cobalt-500);outline-offset:4px;border-radius:6px}

.pj-hero{max-width:820px;margin-top:var(--s-5);padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
.pj-hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.3rem,6vw,4rem);line-height:1.02;letter-spacing:-.025em;color:var(--txt-900);margin-top:var(--s-2);text-wrap:balance}
.pj-tagline{font-family:var(--f-display);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.35;color:var(--cobalt-600);margin-top:var(--s-3)}

.pj-article{max-width:720px;margin-top:var(--s-6)}
.pj-cover{margin:0 0 var(--s-5);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--paper-2)}
.pj-cover img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.pj-article p{font-size:1.05rem;line-height:1.8;color:var(--txt-700)}
.pj-article p + p{margin-top:var(--s-3)}
.pj-article .stack{margin-top:var(--s-5);gap:10px 18px;font-size:12.5px}
.pj-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.pj-actions .btn{margin-top:0}

.pj-pager{display:grid;gap:var(--s-2);margin-top:var(--s-10);padding-top:var(--s-5);border-top:1px solid var(--line)}
@media(min-width:768px){.pj-pager{grid-template-columns:1fr 1fr;gap:var(--s-3)}}
.pj-page-link{display:flex;align-items:center;gap:var(--s-2);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3);box-shadow:var(--sh-1);
  transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast)}
.pj-page-link small{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-400);margin-bottom:4px}
.pj-page-link span{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--txt-900);line-height:1.35}
.pj-page-link .i{flex:none;color:var(--txt-400);transition:transform var(--t-fast) var(--ease-out),color var(--t-fast)}
.pj-page-link:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.pj-page-link:hover .i{color:var(--cobalt-600)}
.pj-page-link:focus-visible{outline:2px solid var(--cobalt-500);outline-offset:3px}
.pj-page-link--prev .i{transform:rotate(180deg)}
.pj-page-link--prev:hover .i{transform:rotate(180deg) translateX(3px)}
.pj-page-link--next{justify-content:flex-end;text-align:right}
.pj-page-link--next:hover .i{transform:translateX(3px)}

/* ============================================================
   Language switcher
   ============================================================ */
.langsw{display:inline-flex;gap:3px;padding:3px;border-radius:14px;flex:none;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.langsw-btn{display:grid;place-items:center;width:36px;height:28px;border-radius:10px;padding:0;
  border:1px solid transparent;opacity:.55;
  transition:opacity var(--t-fast),border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast) var(--ease-out)}
.langsw-btn svg{width:22px;height:15px;border-radius:2px;display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.langsw-btn:hover{opacity:.9;transform:translateY(-1px)}
.langsw-btn:active{transform:translateY(0) scale(.96)}
.langsw-btn.is-on{opacity:1;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
.langsw-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* the nav goes light once you scroll past the hero */
.nav.is-solid:not(.on-dark) .langsw{border-color:var(--line-2);background:#fff}
.nav.is-solid:not(.on-dark) .langsw-btn.is-on{border-color:var(--txt-900);background:var(--paper-2)}
.nav.is-solid:not(.on-dark) .langsw-btn:focus-visible{outline-color:var(--cobalt-500)}

/* the demo bar is always light */
.langsw--bar{margin-left:auto;border-color:var(--line);background:var(--paper-2)}
.langsw--bar .langsw-btn.is-on{border-color:var(--txt-900);background:#fff}
.langsw--bar .langsw-btn:focus-visible{outline-color:var(--cobalt-500)}
.sf-bar .langsw--bar + .sf-signout{margin-left:var(--s-1)}

@media(max-width:620px){
  .langsw{padding:2px;border-radius:12px}
  .langsw-btn{width:30px;height:24px}
  .langsw-btn svg{width:18px;height:12px}
}

/* the gate is shown before the app bar exists, so it carries its own switcher */
.langsw--gate{align-self:center;margin-top:var(--s-1);border-color:var(--line);background:var(--paper-2)}
.langsw--gate .langsw-btn.is-on{border-color:var(--txt-900);background:#fff}
.langsw--gate .langsw-btn:focus-visible{outline-color:var(--cobalt-500)}