:root{
  --bg: oklch(0.16 0.022 250);
  --fg: oklch(0.97 0.005 250);
  --surface: oklch(0.20 0.025 250);
  --surface-elev: oklch(0.24 0.028 250);
  --muted: oklch(0.68 0.02 250);
  --primary: oklch(0.78 0.16 75);
  --primary-fg: oklch(0.18 0.02 250);
  --border: oklch(0.30 0.025 250 / 0.6);
  --grad-accent: linear-gradient(135deg, oklch(0.78 0.16 75), oklch(0.72 0.18 50));
  --grad-hero: radial-gradient(ellipse at top right, oklch(0.30 0.10 230 / 0.5), transparent 60%),
               radial-gradient(ellipse at bottom left, oklch(0.40 0.14 75 / 0.25), transparent 55%),
               linear-gradient(180deg, oklch(0.16 0.022 250), oklch(0.14 0.022 250));
  --shadow-glow: 0 0 60px -15px oklch(0.78 0.16 75 / 0.5);
  --shadow-elev: 0 30px 60px -20px oklch(0.05 0.02 250 / 0.6);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.1}
.display{font-family:var(--font-display)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.text-fg{color:var(--fg);font-weight:500}
.bold{font-weight:600}
.small{font-size:.78rem}
.lede{font-size:1.1rem;line-height:1.65}
.accent{color:var(--primary)}
.track{letter-spacing:.18em}
.grad{background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.container{max-width:72rem;margin:0 auto;padding:0 1.5rem}
.section{padding:6rem 1.5rem}
.mb-xs{margin-bottom:.5rem}.mb-sm{margin-bottom:1rem}
.mt-xs{margin-top:.25rem}.mt-sm{margin-top:.75rem}.mt-xl{margin-top:4rem}
.row-between{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem}

/* Nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);background:color-mix(in oklab, var(--bg) 70%, transparent);border-bottom:1px solid var(--border)}
.nav-inner{height:4rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.nav-links{display:none;gap:2rem;font-size:.875rem;color:var(--muted)}
.nav-links a:hover{color:var(--fg)}
.nav-actions{display:flex;gap:.5rem;align-items:center}
@media(min-width:768px){.nav-links{display:flex}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:.5rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .2s;white-space:nowrap}
.btn-sm{padding:.45rem .85rem;font-size:.85rem}
.btn-lg{padding:.75rem 1.25rem;font-size:.95rem}
.btn-primary{background:var(--grad-accent);color:var(--primary-fg);box-shadow:var(--shadow-glow)}
.btn-primary:hover{opacity:.9}
.btn-outline{border-color:var(--border);background:color-mix(in oklab, var(--surface) 40%, transparent);color:var(--fg)}
.btn-outline:hover{background:var(--surface)}
.icon{width:1rem;height:1rem;display:block}
.hide-sm{display:none}
@media(min-width:640px){.hide-sm{display:inline-flex}}

/* Hero */
.hero{position:relative;background:var(--grad-hero);overflow:hidden}
.grid-pattern{position:absolute;inset:0;opacity:.6;background-image:linear-gradient(oklch(0.30 0.025 250 / 0.25) 1px,transparent 1px),linear-gradient(90deg,oklch(0.30 0.025 250 / 0.25) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}
.hero-inner{position:relative;padding:5rem 1.5rem 7rem;display:grid;gap:3.5rem;align-items:center}
@media(min-width:880px){.hero-inner{grid-template-columns:1.2fr 1fr}}
.pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:color-mix(in oklab, var(--surface) 50%, transparent);padding:.3rem .75rem;border-radius:999px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-bottom:1.5rem}
.pulse{width:6px;height:6px;border-radius:999px;background:var(--primary);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h1.display{font-size:clamp(2.75rem,7vw,4.5rem);font-weight:700;letter-spacing:-.03em}
.hero .lede{margin-top:1.5rem;color:var(--muted);max-width:36rem}
.cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.socials{margin-top:2.5rem;display:flex;gap:1.5rem;font-size:.875rem;color:var(--muted)}
.socials a:hover{color:var(--fg)}

.portrait-wrap{position:relative}
.portrait-glow{position:absolute;inset:-1rem;background:var(--grad-accent);opacity:.2;filter:blur(60px);border-radius:999px}
.portrait{position:relative;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-elev)}
.portrait img{width:100%;height:auto;object-fit:cover}
.portrait-caption{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;background:linear-gradient(to top,var(--bg),color-mix(in oklab, var(--bg) 80%, transparent),transparent)}

/* About */
.about-grid{display:grid;gap:2.5rem;margin-bottom:4rem}
@media(min-width:768px){.about-grid{grid-template-columns:1fr 2fr}}
.h2{font-size:2.25rem;font-weight:700;margin-top:.5rem}
.h2-lg{font-size:clamp(2.25rem,4vw,3rem);font-weight:700;margin-top:.5rem;max-width:42rem}
.competencies{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:768px){.competencies{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;transition:all .2s}
.pad{padding:1.5rem}
.competency{padding:1.25rem;cursor:default}
.competency:hover{border-color:color-mix(in oklab, var(--primary) 40%, var(--border));background:var(--surface-elev)}
.competency .icon{width:1.5rem;height:1.5rem;color:var(--primary);margin-bottom:.75rem;transition:transform .2s}
.competency:hover .icon{transform:scale(1.1)}
.competency .label{font-weight:500;font-size:.875rem}

/* Experience */
.band{background:color-mix(in oklab, var(--surface) 40%, transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.exp-list{display:flex;flex-direction:column;gap:1rem;margin-top:3rem}
.exp{padding:1.75rem}
.exp:hover{border-color:color-mix(in oklab, var(--primary) 40%, var(--border))}
.exp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:1rem}
.exp-role{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.exp-co{color:var(--primary);font-size:.875rem;margin-top:.15rem}
.exp-period{font-family:var(--font-mono);font-size:.75rem;color:var(--muted)}
.exp ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;color:var(--muted);font-size:.9rem}
.exp li{display:flex;gap:.75rem}
.exp li::before{content:"";flex:0 0 4px;width:4px;height:4px;border-radius:999px;background:var(--primary);margin-top:.55rem}

/* Stack */
.legend{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.legend-item{display:inline-flex;align-items:center;gap:.5rem}
.dots{display:inline-flex;gap:2px}
.dot{width:6px;height:6px;border-radius:999px;background:var(--border)}
.dot.on{background:var(--primary)}
.badges{display:flex;flex-wrap:wrap;gap:.5rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface);font-family:var(--font-mono);font-size:.85rem}
.badge.expert{color:var(--primary);border-color:color-mix(in oklab, var(--primary) 60%, transparent)}
.badge.advanced{color:var(--fg)}
.badge.intermediate{color:var(--muted)}
.badge:hover{background:var(--surface-elev)}

.cards-2{display:grid;gap:1.5rem}
@media(min-width:768px){.cards-2{grid-template-columns:1fr 1fr}}

/* Contact */
.contact-grid{margin-top:2.5rem;display:grid;gap:1rem}
@media(min-width:768px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.link-card:hover{border-color:color-mix(in oklab, var(--primary) 50%, var(--border))}

.footer{border-top:1px solid var(--border)}
.footer .container{padding-top:2rem;padding-bottom:2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}