:root{
  --bg:#08090b; --bg2:#0c1013; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#e9eef0; --dim:#7d8a90; --accent:#9fb6ee; --accent-ink:#0a1224;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,72px); --max:1180px; --r:16px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.dim{color:var(--dim)}

#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(150,176,235,.05),transparent 60%)}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:50;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* nav */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;width:min(calc(100% - 28px),880px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 20px;
  background:rgba(12,16,19,.65);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line);border-radius:999px}
.brand{font-weight:600;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.nav nav{display:flex;gap:4px}
.nav nav a{padding:6px 14px;border-radius:999px;color:var(--dim);font-size:.9rem;transition:.2s}
.nav nav a:hover,.nav nav a.on{color:var(--text);background:rgba(255,255,255,.06)}
.kbd-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:.82rem;transition:.2s}
.kbd-btn:hover{border-color:var(--line2);color:var(--text)}
kbd{font-family:var(--mono);font-size:.7rem;padding:1px 6px;border:1px solid var(--line2);border-radius:5px;background:rgba(255,255,255,.03)}

main,.foot{position:relative;z-index:1}
.section,.hero{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding-top:clamp(80px,12vw,150px);padding-bottom:20px}
.label{color:var(--accent);margin-bottom:36px;display:flex;align-items:center;gap:14px}
.label::after{content:"";flex:1;height:1px;background:var(--line)}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:120px;padding-bottom:70px;position:relative}
.meta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:34px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 14px;border:1px solid var(--line2);border-radius:999px;font-size:.85rem;background:rgba(255,255,255,.02)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(150,176,235,.6);}
.badge.off i{background:var(--dim);animation:none}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(150,176,235,0)}100%{box-shadow:0 0 0 0 rgba(150,176,235,0)}}
h1{font-size:clamp(2.8rem,9.2vw,8rem);line-height:.98;letter-spacing:-.045em;font-weight:500;max-width:16ch}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
h1 .w>span{display:inline-block;transform:translateY(105%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
h1 em{font-style:normal;color:var(--accent)}
@keyframes rise{to{transform:none}}
.lead{max-width:52ch;margin-top:30px;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--dim);font-weight:300}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border:1px solid var(--line2);border-radius:999px;font-weight:500;transition:transform .25s,background .25s,border-color .25s}
.btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.3)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{background:#c3d2f5;border-color:#c3d2f5}
.btn b{transition:transform .25s;font-weight:500}
.btn:hover b{transform:translateX(4px)}
.scroll-hint{position:absolute;left:var(--pad);bottom:28px;display:flex;align-items:center;gap:12px}
.scroll-hint span{width:44px;height:1px;background:var(--dim);position:relative;overflow:hidden}
.scroll-hint span::after{content:"";position:absolute;inset:0;background:var(--accent);animation:slide 2s infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* about */
.about-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.about-text p{font-size:clamp(1.15rem,2vw,1.55rem);line-height:1.5;font-weight:300;letter-spacing:-.01em}
.about-text p+p{margin-top:1.2em;color:var(--dim)}
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--bg2);padding:22px 24px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.stat b{font-size:2.4rem;font-weight:500;letter-spacing:-.04em;color:var(--accent)}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:70px;padding-top:36px;border-top:1px solid var(--line)}
.skills h3{margin-bottom:14px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:#c3cdd1;background:rgba(255,255,255,.02);transition:.2s}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* projects */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filter{padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;color:var(--dim);transition:.2s}
.filter:hover{color:var(--text);border-color:var(--line2)}
.filter[aria-selected=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{position:relative;display:flex;flex-direction:column;min-height:300px;padding:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden;
  transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--x,50%) var(--y,50%),rgba(150,176,235,.10),transparent 65%)}
.card:hover{border-color:rgba(150,176,235,.4);transform:translateY(-4px)}
.card:hover::before{opacity:1}
.card.hide{display:none}
.card-top{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:auto;padding-bottom:40px}
.card h3{font-size:1.7rem;font-weight:500;letter-spacing:-.03em;margin-bottom:10px}
.card p{color:var(--dim);font-weight:300;max-width:46ch}
.stack{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:20px;color:#b3bfc4}
.stack span::before{content:"/ ";color:var(--accent)}
.card-links{display:flex;gap:18px;margin-top:22px;font-size:.9rem}
.card-links a{border-bottom:1px solid var(--line2);padding-bottom:1px;transition:.2s}
.card-links a:hover{color:var(--accent);border-color:var(--accent)}

/* timeline */
.timeline{display:grid}
.job{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:34px 0;border-top:1px solid var(--line)}
.job:last-child{border-bottom:1px solid var(--line)}
.job h3{font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.job .org{color:var(--accent);margin:2px 0 14px}
.job ul{list-style:none;display:grid;gap:8px;color:var(--dim);font-weight:300}
.job li{padding-left:20px;position:relative}
.job li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--accent)}

/* contact */
.contact{padding-bottom:clamp(80px,10vw,140px)}
.contact h2{font-size:clamp(2.2rem,6.5vw,5.4rem);line-height:1.02;letter-spacing:-.04em;font-weight:500}
.mail{display:inline-block;margin-top:40px;font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-.02em;border-bottom:1px solid var(--accent);padding-bottom:4px;color:var(--accent);transition:.25s}
.mail:hover{letter-spacing:0}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:26px var(--pad);border-top:1px solid var(--line);max-width:100%}

/* palette */
.palette{position:fixed;inset:0;z-index:100;display:grid;place-items:start center;padding-top:16vh;background:rgba(3,5,6,.6);backdrop-filter:blur(6px)}
.palette[hidden]{display:none}
.palette-box{width:min(560px,calc(100% - 28px));background:#0d1215;border:1px solid var(--line2);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
#palette-input{width:100%;padding:20px 22px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);font:inherit;font-size:1.05rem;outline:0}
#palette-list{list-style:none;padding:8px;max-height:320px;overflow:auto}
#palette-list li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;cursor:pointer;color:#c3cdd1}
#palette-list li small{color:var(--dim);font-family:var(--mono);font-size:.72rem}
#palette-list li[aria-selected=true]{background:rgba(150,176,235,.1);color:var(--accent)}
.palette-foot{display:flex;gap:20px;padding:12px 20px;border-top:1px solid var(--line);font-size:.68rem}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .nav nav{display:none}
  .nav{padding-left:18px}
  .about-grid,.grid{grid-template-columns:1fr}
  .job{grid-template-columns:1fr;gap:6px}
  .kbd-btn kbd{display:none}
  .kbd-btn span::after{content:" ⌘"}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  h1 .w>span{transform:none}
}