:root{
  --bg: #0A0E14;
  --surface: #10161F;
  --surface-2: #161D28;
  --line: #212B38;
  --teal: #4FD8C4;
  --teal-dim: #2C6E63;
  --amber: #E8A33D;
  --text: #E8EDF2;
  --text-muted: #7C8A99;
  --text-faint: #4A5666;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{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.6;
  overflow-x:hidden;
}
::selection{background:var(--teal); color:var(--bg);}

.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
ul, ol{list-style:disc;}
ul {
    margin-left: 20px;
}
ul.exp-list {
    list-style-type: none;
}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

/* ===== NAV ===== */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 32px;
  background:rgba(10,14,20,0.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
nav.scrolled{border-bottom-color:var(--line); background:rgba(10,14,20,0.92);}
.logo{font-family:var(--font-mono); font-size:14px; color:var(--teal); letter-spacing:.5px;}
.logo span{color:var(--text-faint);}
.nav-links{display:flex; gap:36px; font-size:14px; color:var(--text-muted);}
.nav-links a{position:relative; padding:4px 0; transition:color .25s;}
.nav-links a:hover{color:var(--text);}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--teal); transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  font-family:var(--font-mono); font-size:13px; color:var(--teal);
  border:1px solid var(--teal-dim); padding:8px 16px; border-radius:2px;
  transition:background .25s, color .25s;
}
.nav-cta:hover{background:var(--teal); color:var(--bg);}
@media(max-width:760px){ .nav-links{display:none;} .nav-cta{display:none;} }

/* ===== BURGER TOGGLE ===== */
.nav-toggle{
  display:none;
  width:36px; height:28px;
  background:none; border:none; cursor:pointer;
  padding:0; position:relative; z-index:210;
}
@media(max-width:760px){ .nav-toggle{display:flex; flex-direction:column; justify-content:center; gap:6px;} }
.nt-bar{
  display:block; height:2px; background:var(--teal); border-radius:1px;
  transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease, width .35s ease;
}
.nav-toggle .nt-bar:nth-child(1){width:60%;}
.nav-toggle .nt-bar:nth-child(2){width:100%;}
.nav-toggle .nt-bar:nth-child(3){width:40%;}
.nav-toggle[aria-expanded="true"] .nt-bar{width:100%;}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== MOBILE MENU ===== */
.mobile-menu{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.65,0,.35,1), opacity .35s ease, visibility 0s linear .5s;
}
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateX(0);
  transition:transform .5s cubic-bezier(.65,0,.35,1), opacity .35s ease, visibility 0s linear 0s;
}
.mobile-menu-grid{
  position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 85% 20%, black 10%, transparent 70%);
}
.mobile-menu-links{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  padding:0 40px; width:100%;
}
.mobile-menu-links a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--font-display); font-size:32px; font-weight:600;
  color:var(--text);
  padding:16px 0;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(24px);
  transition:opacity .4s ease, transform .4s ease, color .25s ease;
}
.mobile-menu.open .mobile-menu-links a{opacity:1; transform:translateX(0);}
.mobile-menu.open .mobile-menu-links a:nth-child(1){transition-delay:.1s;}
.mobile-menu.open .mobile-menu-links a:nth-child(2){transition-delay:.15s;}
.mobile-menu.open .mobile-menu-links a:nth-child(3){transition-delay:.2s;}
.mobile-menu.open .mobile-menu-links a:nth-child(4){transition-delay:.25s;}
.mobile-menu.open .mobile-menu-links a:nth-child(5){transition-delay:.3s;}
.mobile-menu-links a:hover{color:var(--teal);}
.mobile-menu-links a.mm-cta{color:var(--teal);}
.mm-num{font-family:var(--font-mono); font-size:14px; color:var(--teal-dim); font-weight:400;}

/* ===== HERO ===== */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  position:relative; padding-top:100px; padding-bottom:60px;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 20%, transparent 75%);
}
.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--amber);
  display:flex; align-items:center; gap:10px; margin-bottom:24px; position:relative; z-index:1;
}
.eyebrow::before{content:''; width:8px; height:8px; background:var(--amber); border-radius:50%;
  box-shadow:0 0 8px var(--amber); flex-shrink:0;}
h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(40px, 6.5vw, 76px); line-height:1.05; letter-spacing:-1.5px;
  max-width:820px; position:relative; z-index:1;
}
h1 .accent{color:var(--teal);}

.accent{color:var(--teal);}

.hero-sub{
  font-size:18px; color:var(--text-muted); max-width:560px; margin-top:28px;
  position:relative; z-index:1;
}
.hero-actions{display:flex; gap:16px; margin-top:40px; position:relative; z-index:1; flex-wrap:wrap;}
.btn-primary{
  font-family:var(--font-mono); font-size:14px; background:var(--teal); color:var(--bg);
  padding:14px 26px; border-radius:2px; font-weight:500; transition:opacity .25s;
  display:inline-block;
}
.btn-primary:hover{opacity:.85;}
.btn-secondary{
  font-family:var(--font-mono); font-size:14px; color:var(--text);
  padding:14px 26px; border-radius:2px; border:1px solid var(--line); transition:border-color .25s;
  display:inline-block;
}
.btn-secondary:hover{border-color:var(--text-muted);}

.trace-wrap{margin-top:56px; position:relative; z-index:1;}
#trace-path{
  stroke-dasharray:1400; stroke-dashoffset:1400;
  animation:draw 2.6s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes draw{to{stroke-dashoffset:0;}}

/* ===== SECTION shared ===== */
section{padding:120px 0; position:relative;}
.section-head{margin-bottom:64px;}
.section-num{font-family:var(--font-mono); font-size:13px; color:var(--teal-dim); margin-bottom:12px;}
.section-title{font-family:var(--font-display); font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-0.5px;}
.section-desc{color:var(--text-muted); max-width:520px; margin-top:14px; font-size:15px;}

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

/* ===== TIMELINE ===== */
.timeline{position:relative;}
.t-list{position:relative;}
.t-item{
  position:relative;
  display:grid;
  grid-template-columns:56px 32px 1fr;
  column-gap:20px;
  padding-bottom:8px;
}
.t-item:not(:last-child)::before{
  content:'';
  position:absolute;
  left:71px; top:56px; bottom:-8px; width:1px;
  background:var(--line);
}
.t-icon{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line);
  color:var(--text-faint);
  transition:color .3s ease, border-color .3s ease;
}
.t-icon svg{width:24px; height:24px;}
.t-item.active .t-icon.web{color:var(--teal); border-color:var(--teal-dim);}
.t-item.active .t-icon.legacy{color:var(--amber); border-color:var(--amber);}
.t-dot{
  justify-self:center;
  margin-top:24px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line);
  position:relative; z-index:2;
  transition:border-color .3s ease;
}
.t-item.active .t-dot{border-color:var(--teal);}
.t-runner{
  position:absolute;
  left:71px; top:0;
  width:19px; height:19px;
  margin-left:-9.5px; margin-top:19.5px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 12px rgba(79,216,196,.6);
  z-index:3;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.t-body{padding-bottom:40px;}
.t-header{
  width:100%;
  background:none; border:none; cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:16px;
  row-gap:2px;
  text-align:left;
  padding:12px 0;
  color:var(--text);
  font-family:inherit;
}
.t-header .t-year{
  grid-column:1; font-family:var(--font-mono); font-size:13px; color:var(--amber);
}
.t-header .t-role{
  grid-column:1; font-family:var(--font-display); font-size:19px; font-weight:600;
}
.t-header .t-org{
  grid-column:1; font-size:13.5px; color:var(--text-muted);
}
.t-chevron{
  grid-column:2; grid-row:1 / span 3; width:20px; height:20px;
  color:var(--text-faint); transition:transform .3s ease, color .3s ease;
}
.t-item.active .t-chevron{color:var(--teal); transform:rotate(180deg);}
.t-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .4s ease;
}
.t-item.active .t-panel{grid-template-rows:1fr;}
.t-panel-inner{
  overflow:hidden;
  display:grid;
  grid-template-columns:140px 1fr;
  gap:24px;
  padding-top:6px;
}
.t-logo{
  width:140px; height:104px;
  border-radius:4px;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.t-logo img{width:100%; height:100%; object-fit:content; display:block; background-color: white;}
.t-logo.no-image{
  font-family:var(--font-mono); font-size:14px; letter-spacing:1px; color:var(--text-faint);
}
.t-content{min-width:0;}
.t-desc{font-size:14.5px; color:var(--text-muted); max-width:520px;}

@media(max-width:600px){
  .t-panel-inner{grid-template-columns:1fr; gap:14px;}
  .t-logo{width:100%; height:120px;}
}

@media(max-width:600px){
  .t-item{grid-template-columns:40px 24px 1fr; column-gap:12px;}
  .t-icon{width:40px; height:40px;}
  .t-icon svg{width:18px; height:18px;}
  .t-item:not(:last-child)::before{left:51px;}
  .t-runner{left:51px; width:15px; height:15px; margin-left:-7.5px;}
  .t-header .t-role{font-size:16px;}
}

/* ===== EXPERTISE / SKILLS ===== */
.expertise-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:760px){.expertise-grid{grid-template-columns:1fr;}}
.skills-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media(max-width:900px){.skills-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.skills-grid{grid-template-columns:1fr;}}
.exp-card{background:var(--surface); padding:36px;}
.exp-tag{font-family:var(--font-mono); font-size:12px; color:var(--text-faint); margin-bottom:16px; text-transform:uppercase; letter-spacing:1px;}
.exp-tag.legacy{color:var(--amber);}
.exp-tag.web{color:var(--teal);}
.exp-list{display:flex; flex-wrap:wrap; gap:9px;}
.exp-list li{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--line); padding:6px 12px; border-radius:2px;
}

/* ===== TRAINING ===== */
.formation-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:26px 0; border-bottom:1px solid var(--line); gap:24px;
}
.formation-row:first-child{border-top:1px solid var(--line);}
.f-title{font-family:var(--font-display); font-size:18px; font-weight:600;}
.f-desc{font-size:14px; color:var(--text-muted); margin-top:6px; max-width:480px;}
.f-meta{font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); white-space:nowrap; padding-top:3px;}

/* ===== CONTACT ===== */
.contact-box{
  border:1px solid var(--line); border-radius:4px; padding:56px;
  background:linear-gradient(160deg, var(--surface), var(--bg));
  text-align:center; position:relative; overflow:hidden;
}
.contact-box::before{
  content:'< />'; position:absolute; right:-10px; bottom:-30px; font-family:var(--font-mono);
  font-size:140px; color:var(--surface-2); font-weight:500; z-index:0; line-height:1;
}
.contact-title{font-family:var(--font-display); font-size:clamp(26px,4vw,36px); font-weight:600; position:relative; z-index:1;}
.contact-desc{color:var(--text-muted); margin-top:14px; max-width:480px; margin-left:auto; margin-right:auto; position:relative; z-index:1;}
.contact-actions{display:flex; gap:16px; justify-content:center; margin-top:32px; position:relative; z-index:1; flex-wrap:wrap;}

footer{
  border-top:1px solid var(--line); padding:32px; text-align:center;
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint);
}

/* ===== MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  #trace-path{animation:none; stroke-dashoffset:0;}
  .reveal{opacity:1; transform:none; transition:none;}
}