:root{
  --bg:#05070a;
  --bg2:#0a0f16;
  --panel:#0d1420;
  --panel2:#0f1826;
  --ink:#eef3f7;
  --muted:rgba(238,243,247,.56);
  --muted2:rgba(238,243,247,.3);
  --accent:#ff6a3d;
  --accent2:#00d9ff;
  --ok:#39ff88;
  --danger:#ff3b3b;
  --border:rgba(238,243,247,.1);
  --border2:rgba(0,217,255,.28);
  --glass:rgba(0,217,255,.04);
  --disp:'Space Grotesk',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--mono);overflow-x:hidden;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;}
section{position:relative;z-index:2;}

/* ───────── SCROLL PROGRESS ───────── */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:600;background:linear-gradient(to right,var(--accent),var(--accent2));box-shadow:0 0 14px var(--accent);transition:width .08s linear;}

/* ───────── NAV ───────── */
nav{position:fixed;top:0;width:100%;z-index:500;border-bottom:1px solid var(--border);background:rgba(5,7,10,.82);backdrop-filter:blur(18px);}
.nav-inner{max-width:1320px;margin:0 auto;padding:18px 5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
nav ul{grid-column:2;justify-self:center;list-style:none;display:flex;gap:38px;}
nav a{color:var(--muted);text-decoration:none;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;transition:color .3s;position:relative;padding:4px 0;}
nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent2);transition:width .3s;}
nav a:hover{color:var(--ink);}
nav a:hover::after{width:100%;}
nav a.active{color:var(--accent2);}
nav a.active::after{width:100%;}

#hamburger{grid-column:3;justify-self:end;display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:501;}
#hamburger span{display:block;width:24px;height:1.5px;background:var(--ink);transition:all .3s;}
#hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
#hamburger.open span:nth-child(2){opacity:0;}
#hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
#nav-drawer{display:none;position:fixed;top:60px;left:0;right:0;z-index:499;background:rgba(5,7,10,.98);border-bottom:1px solid var(--border);padding:16px 6%;flex-direction:column;backdrop-filter:blur(18px);}
#nav-drawer.open{display:flex;}
#nav-drawer a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:2.5px;text-transform:uppercase;padding:14px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
#nav-drawer a small{font-size:.6rem;letter-spacing:1px;text-transform:none;color:var(--muted2);}

/* ───────── SHARED SECTION CHROME ───────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 6%;}
.eyebrow{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:4px;text-transform:uppercase;margin-bottom:14px;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);}
.sec-title{font-family:var(--disp);font-size:clamp(2.1rem,4vw,3.2rem);font-weight:700;letter-spacing:-.5px;color:var(--ink);}
.sec-alias{display:block;margin-top:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted2);}
.sec-sub{margin-top:14px;max-width:560px;color:var(--muted);font-size:.85rem;line-height:1.8;}

/* ───────── SECTION DIVIDER ───────── */
.sec-divider{position:relative;height:88px;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;z-index:2;}
.sec-divider .sd-line{flex:1;max-width:420px;height:1px;background:linear-gradient(to right,transparent,var(--border2));}
.sec-divider .sd-line.right{background:linear-gradient(to left,transparent,var(--border2));}
.sec-divider .sd-node{width:9px;height:9px;margin:0 18px;background:var(--accent2);transform:rotate(45deg);box-shadow:0 0 14px var(--accent2);animation:sd-pulse 2.6s ease-in-out infinite;flex-shrink:0;}
@keyframes sd-pulse{0%,100%{opacity:.45;transform:rotate(45deg) scale(.85);}50%{opacity:1;transform:rotate(45deg) scale(1.2);}}
@media(prefers-reduced-motion:reduce){
  .sec-divider .sd-node{animation:none;}
}

/* ───────── GATE (LOCK / VAULT HERO) ───────── */
#gate{height:340vh;position:relative;}
.gate-stage{position:relative;height:100vh;width:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#0b111a 0%,var(--bg) 70%);display:flex;align-items:center;justify-content:center;}
.gate-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,217,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,217,255,.05) 1px,transparent 1px);background-size:48px 48px;z-index:1;mask-image:radial-gradient(ellipse at 50% 45%,black 40%,transparent 78%);}

.vault-panel{position:absolute;top:0;bottom:0;width:52%;z-index:5;background:
  repeating-linear-gradient(135deg,rgba(0,0,0,0) 0 26px,rgba(255,106,61,.05) 26px 28px),
  linear-gradient(180deg,var(--panel) 0%,#080c12 100%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.6);}
.vault-panel.left{left:0;border-right:1px solid var(--border2);}
.vault-panel.right{right:0;border-left:1px solid var(--border2);}
.vault-panel::before{content:'';position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,var(--accent2),transparent);opacity:.5;}
.vault-panel.left::before{right:0;}
.vault-panel.right::before{left:0;}

.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,217,255,.9),rgba(255,106,61,.25) 45%,transparent 75%);opacity:0;z-index:6;pointer-events:none;}

.lock-wrap{position:relative;z-index:7;display:flex;flex-direction:column;align-items:center;gap:26px;}
.lock-wrap.awake #lockGroup{animation:none;}
#lockGroup{animation:lock-idle 3.4s ease-in-out infinite;transform-origin:120px 170px;}
@keyframes lock-idle{0%,100%{transform:translateX(0) rotate(0deg);}50%{transform:translateX(-2px) rotate(-.4deg);}}
#lock-svg{width:clamp(140px,18vw,220px);height:auto;filter:drop-shadow(0 0 30px rgba(0,217,255,.18));}
#shackle{transform-origin:76px 120px;}

.lock-readout{display:flex;flex-direction:column;align-items:center;gap:10px;}
.lock-status{font-family:var(--mono);font-size:.78rem;letter-spacing:5px;color:var(--danger);text-transform:uppercase;transition:color .3s;}
.lock-bar-wrap{width:220px;height:3px;background:rgba(238,243,247,.1);border-radius:3px;overflow:hidden;}
.lock-bar{height:100%;width:0%;background:linear-gradient(to right,var(--accent),var(--accent2));box-shadow:0 0 10px var(--accent2);transition:background .3s;}
.lock-pct{font-size:.65rem;letter-spacing:3px;color:var(--muted2);}
.lock-hint{margin-top:6px;font-size:.6rem;letter-spacing:3px;color:var(--muted2);display:flex;align-items:center;gap:8px;}
.lock-hint .chev{width:8px;height:8px;border-right:1px solid var(--muted2);border-bottom:1px solid var(--muted2);transform:rotate(45deg);animation:chev-bounce 1.6s ease-in-out infinite;}
@keyframes chev-bounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.3;}50%{transform:rotate(45deg) translate(3px,3px);opacity:1;}}

.reveal-content{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.94);pointer-events:none;}
.reveal-inner{max-width:900px;padding:0 6%;text-align:center;}
.reveal-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.65rem;letter-spacing:4px;color:var(--ok);border:1px solid rgba(57,255,136,.3);padding:6px 16px;margin-bottom:26px;text-transform:uppercase;}
.reveal-tag::before{content:'';width:6px;height:6px;background:var(--ok);border-radius:50%;box-shadow:0 0 8px var(--ok);}
h1.reveal-name{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-2px;line-height:.98;color:var(--ink);}
h1.reveal-name .last{color:var(--accent2);}
.reveal-role{margin-top:18px;font-size:.9rem;color:var(--muted);letter-spacing:1px;}
.reveal-role b{color:var(--ink);font-weight:600;}
.reveal-bio{margin:22px auto 0;max-width:620px;font-size:.82rem;line-height:1.9;color:var(--muted);}
.reveal-actions{margin-top:34px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:3px;text-transform:uppercase;text-decoration:none;padding:14px 30px;cursor:pointer;transition:all .3s;border:1px solid transparent;display:inline-block;}
.btn-solid{background:var(--accent);color:#100603;font-weight:600;}
.btn-solid:hover{background:#ff8760;transform:translateY(-2px);}
.btn-ghost{border-color:var(--border2);color:var(--accent2);background:none;}
.btn-ghost:hover{background:rgba(0,217,255,.08);transform:translateY(-2px);}

.reveal-stats{margin-top:44px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.stat-box{border:1px solid var(--border);padding:16px 26px;background:var(--glass);min-width:120px;transition:all .3s;}
.stat-box:hover{border-color:var(--border2);transform:translateY(-3px);}
.stat-num{font-family:var(--disp);font-weight:700;font-size:1.7rem;color:var(--ink);}
.stat-lbl{font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-top:4px;display:block;}

.reveal-ticker{margin-top:36px;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0;}
.ticker-track{display:flex;gap:28px;white-space:nowrap;width:max-content;animation:ticker 22s linear infinite;font-size:.65rem;letter-spacing:2px;color:var(--muted2);}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media(prefers-reduced-motion:reduce){
  #lockGroup{animation:none;}
  .lock-hint .chev{animation:none;}
}

/* ───────── PATH (EXPERIENCE) ───────── */
#path{padding:140px 0 120px;background:var(--bg2);}
.timeline{margin-top:64px;display:flex;flex-direction:column;position:relative;}
.timeline::before{content:'';position:absolute;left:22px;top:0;bottom:0;width:1px;background:rgba(238,243,247,.1);}
.timeline-fill{position:absolute;left:22px;top:0;width:1px;height:0%;background:linear-gradient(to bottom,var(--accent),var(--accent2));box-shadow:0 0 10px var(--accent2);transition:height .1s linear;}
.timeline-fill::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:var(--accent2);box-shadow:0 0 12px var(--accent2);}
.tl-item{display:grid;grid-template-columns:64px 1fr;gap:28px;padding-bottom:46px;}
.tl-dot{display:flex;align-items:flex-start;padding-top:4px;}
.tl-dot-inner{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);margin-left:18px;flex-shrink:0;margin-top:6px;transition:transform .4s cubic-bezier(.25,1.5,.5,1);}
.tl-item.in .tl-dot-inner{transform:scale(1.3);}
.tl-content{border:1px solid var(--border);padding:26px 30px;background:var(--panel);transition:all .3s;}
.tl-content:hover{border-color:var(--border2);background:var(--panel2);transform:translateX(6px);}
.tl-company{font-size:.64rem;color:var(--accent2);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;}
.tl-role{font-family:var(--disp);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.tl-date{font-size:.65rem;color:var(--muted2);letter-spacing:1.5px;}
.tl-badge{display:inline-block;margin-left:10px;font-size:.55rem;padding:2px 8px;background:rgba(57,255,136,.08);border:1px solid var(--ok);color:var(--ok);letter-spacing:2px;}
.tl-desc{margin-top:14px;font-size:.78rem;color:var(--muted);line-height:1.85;}

/* ───────── ARSENAL (SKILLS) ───────── */
#arsenal{padding:120px 0;}
.arsenal-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.arsenal-card{border:1px solid var(--border);background:var(--panel);padding:30px 28px;transition:all .35s;position:relative;overflow:hidden;}
.arsenal-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(to right,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.arsenal-card:hover{border-color:var(--border2);transform:translateY(-6px);}
.arsenal-card:hover::before{transform:scaleX(1);}
.arsenal-idx{font-size:.62rem;letter-spacing:3px;color:var(--muted2);margin-bottom:10px;}
.arsenal-name{font-family:var(--disp);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:6px;}
.arsenal-desc{font-size:.72rem;color:var(--muted);line-height:1.7;margin-bottom:22px;}
.skill-row{margin-bottom:16px;}
.skill-row:last-child{margin-bottom:0;}
.skill-top{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:1px;color:var(--muted);margin-bottom:6px;}
.skill-bar-bg{height:3px;background:rgba(238,243,247,.08);}
.skill-bar{height:100%;width:0;background:linear-gradient(to right,var(--accent),var(--accent2));box-shadow:0 0 8px var(--accent2);transition:width 1.4s cubic-bezier(.25,1,.5,1);}
.arsenal-tools{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:8px;}
.tool-tag{font-size:.6rem;padding:4px 10px;background:rgba(0,217,255,.05);border:1px solid var(--border);color:var(--muted2);letter-spacing:1px;}

/* ───────── ACCESS (CERTS) ───────── */
#access{padding:120px 0;background:var(--bg2);}
.access-list{margin-top:60px;display:flex;flex-direction:column;}
.access-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:22px;padding:19px 0;border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.access-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,217,255,.05);transition:width .4s;z-index:0;}
.access-row:hover::before{width:100%;}
.access-idx{font-size:.62rem;color:var(--muted2);letter-spacing:2px;position:relative;z-index:1;}
.access-body{position:relative;z-index:1;}
.access-name{font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:3px;transition:color .3s;}
.access-row:hover .access-name{color:var(--accent2);}
.access-issuer{font-size:.6rem;color:var(--muted2);letter-spacing:.5px;}
.access-date{font-size:.6rem;color:var(--muted2);letter-spacing:2px;white-space:nowrap;position:relative;z-index:1;}

/* ───────── CONTACT ───────── */
#contact{padding:120px 0 100px;text-align:center;}
.contact-links{margin-top:46px;display:flex;flex-direction:column;max-width:560px;margin-left:auto;margin-right:auto;}
.c-link{display:flex;align-items:center;gap:16px;padding:19px 0;border-bottom:1px solid var(--border);color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:1.5px;transition:all .3s;justify-content:center;}
.c-link:hover{color:var(--accent2);padding-left:10px;border-color:var(--border2);}
.c-icon{color:var(--accent);font-size:1rem;width:20px;text-align:center;}

footer{border-top:1px solid var(--border);}
.footer-inner{max-width:1320px;margin:0 auto;padding:24px 6%;display:flex;justify-content:space-between;align-items:center;font-size:.62rem;color:var(--muted2);letter-spacing:2.5px;}

/* ───────── REVEAL SYSTEM ───────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.25,1,.5,1);transition-delay:var(--d,0s);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translate(-40px,0);transition:opacity .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.25,1,.5,1);transition-delay:var(--d,0s);}
.reveal-left.in{opacity:1;transform:translate(0,0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1);transition-delay:var(--d,0s);}
.reveal-scale.in{opacity:1;transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-scale{transition:none;transform:none;opacity:1;}
}

/* ───────── RESPONSIVE ───────── */
@media(max-width:900px){
  nav ul{display:none;}
  #hamburger{display:flex;}
  .arsenal-grid{grid-template-columns:1fr;}
  .access-date{display:none;}
}
@media(max-width:768px){
  #gate{height:180vh;}
  .lock-hint{display:none;}
  .reveal-stats{gap:8px;}
  .stat-box{padding:12px 16px;min-width:96px;}
  .sec-divider{height:64px;}
  .sec-divider .sd-line{max-width:120px;}
}
@media(max-width:480px){
  .nav-inner{padding:14px 4%;}
  #nav-drawer{top:54px;}
  .wrap{padding:0 5%;}
  h1.reveal-name{font-size:clamp(2.1rem,11vw,3rem);}
  .reveal-actions{flex-direction:column;}
  .tl-item{grid-template-columns:40px 1fr;gap:12px;}
  .timeline::before,.timeline-fill{left:15px;}
  .tl-dot-inner{margin-left:10px;}
  .access-row{grid-template-columns:34px 1fr;gap:10px;}
  footer .footer-inner{flex-direction:column;gap:8px;text-align:center;}
}