/* ===== Design tokens — change colors/fonts here ===== */
:root{
  --bg:#070b1c; --surface:#0f1631; --surface-2:#162049;
  --text:#e8edff; --muted:#93a0cc;
  --cobalt:#4b7bff; --cobalt-soft:#7fa0ff; --gold:#ffb547;
  --radius:18px; --font-display:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);line-height:1.1}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--cobalt),var(--gold));z-index:100}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(75,123,255,.18),transparent 65%);transform:translate(-50%,-50%);left:50%;top:50%}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;
  backdrop-filter:blur(14px);background:rgba(7,11,28,.55);transition:padding .3s}
.nav.small{padding:10px 5vw}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem}
.nav nav{display:flex;gap:26px;align-items:center}
.nav nav a{color:var(--muted);font-weight:500;transition:color .2s}
.nav nav a:hover{color:var(--text)}
.nav nav a.pill{background:var(--gold);color:#1a1200;padding:8px 18px;border-radius:99px;font-weight:600}
.menu-btn{display:none;background:none;border:1px solid var(--muted);color:var(--text);padding:6px 14px;border-radius:99px;font:inherit}

/* Hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:110px 5vw 60px;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .8fr;gap:48px;align-items:center;width:100%;max-width:1200px;margin:auto}
.hello{color:var(--gold);font-weight:600;margin-bottom:6px}
.name{font-size:clamp(3rem,9vw,7rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff 30%,var(--cobalt-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.role{font-size:clamp(1.1rem,2.4vw,1.6rem);margin:14px 0}
.typed{color:var(--gold);font-weight:600}
.caret{display:inline-block;width:2px;height:1.2em;background:var(--gold);margin-left:3px;vertical-align:-.2em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.tagline{color:var(--muted);max-width:52ch}
.cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:99px;font:600 1rem var(--font-body);cursor:pointer;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:var(--cobalt);color:#fff;box-shadow:0 10px 30px -10px var(--cobalt)}
.btn.ghost{border-color:var(--cobalt-soft);color:var(--text)}
.photo-wrap{position:relative;width:min(340px,70vw);aspect-ratio:1;justify-self:center;transform-style:preserve-3d}
.photo-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--surface-2);transform:translateZ(40px)}
.photo-ring{position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--gold);animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.85rem;z-index:2}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;padding:0 5vw;max-width:1200px;margin:-30px auto 0;position:relative;z-index:3}
.stat{background:var(--surface);border-radius:var(--radius);padding:24px;text-align:center}
.stat b{display:block;font:800 2.6rem var(--font-display);color:var(--gold)}
.stat span{color:var(--muted);font-size:.95rem}

/* Sections */
.section{position:relative;z-index:1;max-width:1100px;margin:auto;padding:110px 5vw 20px}
.section h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:34px;letter-spacing:-.02em}
.about-text{font-size:1.15rem;color:#cdd6f6;max-width:68ch}
.contact-list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.contact-list li{background:var(--surface);padding:10px 18px;border-radius:99px;color:var(--muted)}
.contact-list a:hover{color:var(--gold)}

/* Timeline */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--cobalt),var(--gold))}
.job{position:relative;margin-bottom:18px;background:var(--surface);border-radius:var(--radius);padding:20px 24px;cursor:pointer;transition:background .25s}
.job::before{content:"";position:absolute;left:-30px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--gold)}
.job:hover,.job.open{background:var(--surface-2)}
.job-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.job h3{font-size:1.2rem}
.job .org{color:var(--cobalt-soft);font-weight:500}
.job .time{color:var(--muted);font-size:.88rem;margin-top:2px}
.job .chev{transition:transform .3s;color:var(--gold);font-size:1.4rem}
.job.open .chev{transform:rotate(45deg)}
.job ul{list-style:none;max-height:0;overflow:hidden;transition:max-height .45s ease}
.job.open ul{margin-top:14px}
.job li{padding:5px 0 5px 18px;position:relative;color:#cdd6f6}
.job li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:2px;background:var(--gold)}

/* Skills & panels (3D tilt applied by JS) */
.skill-grid,.three-col{display:grid;gap:22px;perspective:1000px}
.skill-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.three-col{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.panel,.skill-card{background:var(--surface);border-radius:var(--radius);padding:26px;transform-style:preserve-3d;transition:transform .15s}
.skill-card h3,.panel h3{margin-bottom:18px;color:var(--gold);font-size:1.25rem}
.skill{margin-bottom:14px}
.skill div{display:flex;justify-content:space-between;font-size:.95rem;margin-bottom:5px}
.bar{height:6px;background:var(--surface-2);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cobalt),var(--gold));border-radius:9px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.panel ul{list-style:none}
.panel li,.edu{padding:9px 0;border-bottom:1px solid var(--surface-2);color:#cdd6f6;font-size:.96rem}
.panel li:last-child,.edu:last-child{border:0}
.edu b{display:block;color:var(--text)}.edu small{color:var(--muted)}

/* Form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--surface);padding:30px;border-radius:var(--radius)}
.form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.92rem}
.form .full,.form .btn,.status{grid-column:1/-1}
.form input,.form textarea{background:var(--bg);border:1.5px solid var(--surface-2);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit}
.form input:focus,.form textarea:focus{border-color:var(--cobalt);outline:none}
.hp{position:absolute;left:-9999px}
.status{min-height:1.4em;font-weight:500}.status.ok{color:#5be3a5}.status.err{color:#ff7a8a}
.footer{text-align:center;color:var(--muted);padding:80px 20px 40px;font-size:.9rem}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

@media(max-width:820px){
  .hero-inner{grid-template-columns:1fr;text-align:center}.photo-wrap{order:-1;width:220px}.cta{justify-content:center}.tagline{margin:auto}
  .menu-btn{display:block}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--surface);padding:18px;display:none}
  .nav nav.open{display:flex}
  .form{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}