/* ─── TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --bg-0:        #0f0f0f;
  --bg-1:        #141414;
  --bg-2:        #1a1a1a;
  --bg-3:        #222222;
  --ink-0:       #f2f2f0;
  --ink-1:       #c2c2bf;
  --ink-2:       #82827e;
  --ink-3:       #4a4a47;
  --hair:        rgba(255,255,255,.07);
  --hair-strong: rgba(255,255,255,.14);
  --accent:      #00ff88;
  --accent-dim:  #0fd472;
  --accent-soft: rgba(0,255,136,.14);

  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --f-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 144px;

  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-pill: 999px;

  --t-fast:  140ms cubic-bezier(.2,.7,.2,1);
  --t-base:  280ms cubic-bezier(.2,.7,.2,1);
  --t-slow:  600ms cubic-bezier(.2,.7,.2,1);

  --maxw: 1200px;
  --nav-h: 68px;
}

/* ─── RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--ink-1);
  background:var(--bg-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
::selection{background:var(--accent);color:var(--bg-0)}

/* ─── BACKDROP ───────────────────────────────────────────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  opacity:1;
}
body::after{
  content:"";
  position:fixed; z-index:-1; pointer-events:none;
  right:-200px; top:18vh;
  width:640px; height:640px;
  border:1px solid rgba(255,255,255,.05);
  transform: rotate(18deg);
  border-radius: 18px;
}

/* ─── CUSTOM CURSOR ──────────────────────────────────────────────────── */
@media (pointer:fine){
  html, a, button, input, textarea, label, [role="button"]{ cursor:none }
}
.cursor{
  position:fixed; top:0; left:0;
  width:20px; height:26px;
  background: var(--ink-0);
  clip-path: polygon(0% 0%, 0% 83%, 28% 62%, 42% 94%, 57% 86%, 43% 57%, 58% 57%);
  pointer-events:none; z-index:9999;
  transform: translate(0,0);
  transition: background var(--t-fast);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.cursor.is-hot{
  background: var(--accent);
}
@media (pointer:coarse){ .cursor{ display:none } }

/* ─── PRELOADER ──────────────────────────────────────────────────────── */
#preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg-0);
  display:grid; place-items:center;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader[data-done="true"]{ opacity:0; visibility:hidden }
.preloader-mark{
  font-family:var(--f-display); font-weight:800;
  font-size: clamp(48px, 9vw, 110px);
  color:var(--ink-0); letter-spacing:-.02em;
  position:relative;
}
.preloader-mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-14px;
  height:2px; background:var(--accent);
  transform-origin:left;
  animation: loadBar 1.1s cubic-bezier(.6,.05,.2,1) forwards;
}
@keyframes loadBar{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.preloader-meta{
  position:absolute; bottom:28px; left:0; right:0;
  text-align:center;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-2);
}
.preloader-meta::before{
  content:"●"; color:var(--accent); margin-right:8px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:.2 } }

/* ─── SCROLL PROGRESS ────────────────────────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: var(--accent);
  z-index:200; pointer-events:none;
}

/* ─── NAV ────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 max(20px, 4vw);
  transition: background var(--t-base), border-color var(--t-base);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background: rgba(15,15,15,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--hair);
}
.nav-logo{
  font-family:var(--f-display);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:18px;
  color:var(--ink-0);
  display:flex; align-items:center; gap:10px;
}
.nav-logo::before{
  content:""; width:9px; height:9px; border-radius:2px;
  background:var(--accent);
  animation: blink 1.8s ease-in-out infinite;
}
.nav-links{
  display:flex; align-items:center; gap:4px;
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.06em;
}
.nav-links a{
  position:relative;
  padding:10px 14px;
  color:var(--ink-2);
  transition:color var(--t-fast);
}
.nav-links a::before{
  content:""; position:absolute; left:14px; right:14px; bottom:6px;
  height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-base);
}
.nav-links a:hover,
.nav-links a.is-active{ color:var(--ink-0) }
.nav-links a:hover::before,
.nav-links a.is-active::before{ transform:scaleX(1) }
.nav-links a .num{ color:var(--accent); margin-right:6px; font-size:10px }
.nav-cta{
  font-family:var(--f-mono); font-size:12px;
  padding:9px 14px;
  border:1px solid var(--hair-strong);
  color:var(--ink-0);
  border-radius:var(--r-1);
  transition: all var(--t-base);
  display:inline-flex; align-items:center; gap:8px;
}
.nav-cta:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.nav-burger{
  display:none; width:38px; height:38px;
  border:1px solid var(--hair);
  border-radius:var(--r-1);
}
.nav-burger span{ display:block; width:16px; height:1px; background:var(--ink-0); margin:4px auto }

@keyframes navLinkIn{
  from{ opacity:0; transform:translateX(-22px) translateY(4px) }
  to  { opacity:1; transform:translateX(0)     translateY(0)   }
}
@keyframes navLinkOut{
  from{ opacity:1; transform:translateX(0)     translateY(0)   }
  to  { opacity:0; transform:translateX(-22px) translateY(4px) }
}

@media (max-width: 820px){
  .nav-links, .nav-cta{ display:none }
  .nav-burger{ display:block }

  .nav-links.is-open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:rgba(15,15,15,.96);
    backdrop-filter:blur(20px); padding:12px 20px 20px;
    border-bottom:1px solid var(--hair);
  }

  .nav-links.is-open a{
    padding:14px 4px; width:100%;
    opacity:0;
    animation: navLinkIn 320ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  .nav-links.is-open a:nth-child(1){ animation-delay:  40ms }
  .nav-links.is-open a:nth-child(2){ animation-delay:  95ms }
  .nav-links.is-open a:nth-child(3){ animation-delay: 150ms }
  .nav-links.is-open a:nth-child(4){ animation-delay: 205ms }
  .nav-links.is-open a:nth-child(5){ animation-delay: 260ms }
  .nav-links.is-open a:nth-child(6){ animation-delay: 315ms }

  .nav-links.is-closing a{
    animation: navLinkOut 200ms cubic-bezier(.4,0,1,1) forwards;
  }
  .nav-links.is-closing a:nth-child(1){ animation-delay: 150ms }
  .nav-links.is-closing a:nth-child(2){ animation-delay: 110ms }
  .nav-links.is-closing a:nth-child(3){ animation-delay:  75ms }
  .nav-links.is-closing a:nth-child(4){ animation-delay:  40ms }
  .nav-links.is-closing a:nth-child(5){ animation-delay:  15ms }
  .nav-links.is-closing a:nth-child(6){ animation-delay:   0ms }
}

/* ─── SECTION SCAFFOLD ───────────────────────────────────────────────── */
section{ position:relative; padding: var(--s-10) max(20px, 4vw) }
.wrap{ max-width: var(--maxw); margin: 0 auto }
.section-head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-4);
  border-bottom:1px solid var(--hair);
}
.section-num{
  font-family:var(--f-mono); font-size:12px;
  color:var(--accent); letter-spacing:.12em;
}
.section-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size: clamp(28px, 3.4vw, 44px);
  color:var(--ink-0);
  letter-spacing:-.02em;
  margin:0;
}
.section-rule{
  flex:1; height:1px; background:var(--hair);
}
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent);
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.reveal.is-in{ opacity:1; transform:none }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1) }
.reveal-stagger.is-in > *{ opacity:1; transform:none }
.reveal-stagger.is-in > *:nth-child(1){ transition-delay:.00s }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay:.06s }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay:.12s }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay:.18s }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay:.24s }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay:.30s }
.reveal-stagger.is-in > *:nth-child(7){ transition-delay:.36s }
.reveal-stagger.is-in > *:nth-child(8){ transition-delay:.42s }

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero{
  min-height: 100vh;
  padding: calc(var(--nav-h) + 24px) max(20px, 4vw) var(--s-8);
  display:flex; align-items:center;
  position:relative;
}
.hero-inner{
  width:100%; max-width: var(--maxw);
  margin: 0 auto;
  display:grid; gap: var(--s-5);
  text-align:left;
}
.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border:1px solid rgba(0,255,136,.32);
  background: var(--accent-soft);
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent);
  width: fit-content;
  margin-bottom: var(--s-2);
}
.status-pill::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0,255,136,.7);
  animation: pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot{
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,.55) }
  70%  { box-shadow: 0 0 0 10px rgba(0,255,136,0) }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0) }
}

.hero-name{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.04em;
  font-size: clamp(58px, 11vw, 156px);
  margin: 0;
  color:var(--ink-0);
  position:relative;
  display:inline-block;
  padding-bottom: 14px;
}
.hero-name::after{
  content:""; position:absolute;
  left:0; bottom:0;
  width:0; height:3px;
  background:var(--accent);
  animation: underlineGrow 1.1s cubic-bezier(.2,.7,.2,1) .6s forwards;
}
@keyframes underlineGrow{ to{ width: 100% } }

.hero-role{
  font-family:var(--f-mono);
  font-size: clamp(15px, 1.7vw, 20px);
  color:var(--ink-0);
  display:inline-flex; align-items:center; gap:10px;
  min-height: 1.6em;
  margin-top: var(--s-2);
}
.hero-role .prompt{ color:var(--accent) }
.hero-role .typed{ color:var(--ink-0) }
.hero-role .caret{
  display:inline-block; width:9px; height:1.1em;
  background:var(--accent);
  margin-left:2px;
  animation: blink 1s steps(2) infinite;
  vertical-align:-3px;
}
.hero-tagline{
  max-width: 60ch;
  color:var(--ink-1);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height:1.6;
  font-weight: 400;
}

.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top: var(--s-3) }
.btn{
  font-family:var(--f-mono);
  font-size:13px; letter-spacing:.04em;
  padding: 14px 22px;
  border-radius: var(--r-1);
  border:1px solid transparent;
  transition: all var(--t-base);
  display:inline-flex; align-items:center; gap:10px;
}
.btn.primary{
  background: var(--accent);
  color: #06160d;
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover{
  background: #2dff9a;
  border-color: #2dff9a;
  transform: translateY(-1px);
}
.btn.ghost{
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn.ghost:hover{
  background: var(--accent-soft);
}
.btn .arrow{ transition: transform var(--t-base) }
.btn:hover .arrow{ transform: translateX(3px) }

.hero-stats{
  display:flex; gap: var(--s-7);
  align-items: center;
  justify-content: center;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2);
  margin-top: var(--s-7);
  border-top:1px solid var(--hair);
  padding-top: var(--s-5);
  flex-wrap: wrap;
}
.hero-stats b{ color:var(--ink-0); font-weight:700; margin-right:6px; font-size:15px; line-height:1; vertical-align:middle }
.hero-stats b.inf{ font-size:26px }
.hero-stats .accent{ color:var(--accent) }
@media (max-width:768px){
  .hero-stats{ flex-direction:column; align-items:center; text-align:center; gap: var(--s-4) }
}

.scroll-indicator{
  position:absolute; bottom:28px; right: max(20px, 4vw);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.32em; color:var(--ink-2);
  text-transform:uppercase;
}
.scroll-indicator .bar{
  width:1px; height:48px;
  background:linear-gradient(180deg, var(--hair), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-indicator .bar::after{
  content:""; position:absolute;
  left:0; right:0; top:0;
  height:14px;
  background: var(--accent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%  { transform: translateY(-100%); opacity:0 }
  20% { opacity:1 }
  100%{ transform: translateY(48px); opacity:0 }
}

/* ─── ABOUT ──────────────────────────────────────────────────────────── */
.about-grid{
  display:grid; gap: var(--s-8);
  grid-template-columns: 1.2fr 1fr;
  align-items:start;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr } }

.bio{
  position:relative;
  padding-left: var(--s-5);
}
.bio::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:2px;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.bio.is-in::before{ transform: scaleY(1) }
.bio p{ font-size: clamp(15px, 1.15vw, 17px); margin:0 0 var(--s-4); color:var(--ink-1) }
.bio p strong{ color:var(--ink-0); font-weight:500 }
.bio p code{
  font-family:var(--f-mono);
  background:var(--accent-soft);
  color:var(--accent);
  border:1px solid rgba(0,255,136,.22);
  padding:1px 7px; border-radius:4px; font-size:.85em;
}

.stats{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.stat{
  position:relative;
  padding: var(--s-5);
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--bg-1);
  overflow:hidden;
}
.stat::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin:left;
  transition: transform .9s cubic-bezier(.2,.7,.2,1) .2s;
}
.stat.is-in::before{ transform: scaleX(1) }
.stat-ring{
  position:absolute; right:-22px; bottom:-22px;
  width:96px; height:96px; opacity:.6;
}
.stat-ring circle{ fill:none; stroke-width:2 }
.stat-ring .track{ stroke: var(--hair) }
.stat-ring .fill{
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1.3s cubic-bezier(.2,.7,.2,1) .25s;
}
.stat-value{
  font-family:var(--f-display);
  font-weight:700;
  font-size: clamp(36px, 4vw, 52px);
  color:var(--ink-0); line-height:1;
  display:flex; align-items:baseline; gap:4px;
  letter-spacing:-.02em;
}
.stat-value .plus{ font-size:.55em; color:var(--accent) }
.stat-label{
  margin-top: var(--s-3);
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2);
}

/* ─── SKILLS ─────────────────────────────────────────────────────────── */
.skills-grid{
  display:grid; gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 760px){ .skills-grid{ grid-template-columns: 1fr } }

.skill-cat{
  position:relative;
  padding: var(--s-5);
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--bg-1);
}
.skill-cat-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom:1px dashed var(--hair);
}
.skill-cat-icon{
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1px solid var(--hair-strong);
  border-radius: var(--r-1);
  color:var(--accent);
  background: var(--bg-2);
}
.skill-cat-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:16px;
  color:var(--ink-0);
  letter-spacing:-.01em;
}
.skill-cat-count{
  margin-left:auto;
  font-family:var(--f-mono); font-size:11px;
  color:var(--ink-2);
}
.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chip{
  font-family:var(--f-mono);
  font-size:12px;
  padding: 6px 11px;
  border-radius: var(--r-1);
  border:1px solid var(--hair);
  background: var(--bg-2);
  color: var(--ink-1);
  transition: all var(--t-base);
  transform-style: preserve-3d;
}
.chip:hover{
  color:var(--accent);
  border-color: rgba(0,255,136,.4);
  background: var(--accent-soft);
  transform: perspective(400px) rotateX(6deg) rotateY(-6deg) translateZ(3px);
}

/* ─── EXPERIENCE TIMELINE ────────────────────────────────────────────── */
.timeline{ position:relative; padding: var(--s-4) 0 }
.timeline::before{
  content:""; position:absolute;
  left:50%; top:0; bottom:0;
  width:1px; background: var(--hair);
  transform:translateX(-.5px);
}
.timeline::after{
  content:""; position:absolute;
  left:50%; top:0;
  width:1px; height:0;
  background: var(--accent);
  transform:translateX(-.5px);
  transition: height 1.5s cubic-bezier(.2,.7,.2,1);
}
.timeline.is-in::after{ height: 100% }

.t-row{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin: var(--s-6) 0;
}
.t-row .t-node{
  position:absolute; left:50%; top:22px;
  width:12px; height:12px; border-radius:3px;
  background: var(--bg-0);
  border:2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
  z-index:1;
}
.t-row .t-node::after{
  content:""; position:absolute; inset:-5px;
  border-radius:3px; border:1px solid var(--accent);
  opacity:0;
}
.t-row.is-in .t-node::after{ animation: nodePulse 1.2s ease-out forwards }
@keyframes nodePulse{
  0%  { opacity:.8; transform:scale(.6) }
  100%{ opacity:0;  transform:scale(2.2) }
}

.t-card{
  padding: var(--s-5);
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--bg-1);
  opacity:0; transform: translateX(-32px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1), border-color var(--t-base);
  position:relative;
}
.t-card:hover{ border-color: var(--hair-strong) }
.t-row:nth-child(even) .t-card{ transform: translateX(32px) }
.t-row.is-in .t-card{ opacity:1; transform: none }

.t-row:nth-child(odd)  .t-card{ grid-column: 1; margin-right: var(--s-5) }
.t-row:nth-child(even) .t-card{ grid-column: 2; margin-left: var(--s-5) }

.t-card .t-dates{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent); margin-bottom:6px;
}
.t-card .t-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size: 20px;
  color:var(--ink-0); margin:0;
  letter-spacing:-.01em;
}
.t-card .t-company{
  font-family:var(--f-mono);
  font-size:12px; color:var(--ink-1);
  margin: 4px 0 var(--s-3);
}
.t-card ul{ padding:0; margin:0; list-style:none; display:grid; gap:8px }
.t-card li{
  position:relative;
  padding-left:18px;
  font-size:14px; color:var(--ink-1); line-height:1.55;
}
.t-card li::before{
  content:""; position:absolute;
  left:0; top:9px; width:8px; height:1px;
  background: var(--accent);
}

@media (max-width: 860px){
  .timeline::before, .timeline::after{ left: 12px }
  .t-row{ grid-template-columns: 1fr; gap:0 }
  .t-row .t-node{ left:12px }
  .t-row:nth-child(odd)  .t-card,
  .t-row:nth-child(even) .t-card{
    grid-column: 1; margin: 0 0 0 36px;
    transform: translateX(32px);
  }
  .t-row.is-in .t-card{ transform: none }
}

/* ─── PROJECTS ───────────────────────────────────────────────────────── */
.projects-grid{
  display:grid; gap: var(--s-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .projects-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .projects-grid{ grid-template-columns: 1fr } }

.project{
  position:relative;
  padding: var(--s-5);
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--bg-1);
  overflow:hidden;
  display:flex; flex-direction:column; gap: var(--s-3);
  transition: transform var(--t-base), border-color var(--t-base), background var(--t-base);
}
.project::before{
  content:""; position:absolute; top:0; left:0;
  height:2px; width: 32px;
  background: var(--accent);
  transition: width var(--t-base);
}
.project:hover{
  transform: translateY(-3px);
  border-color: var(--hair-strong);
  background: var(--bg-2);
}
.project:hover::before{ width: 100% }
.project.featured{
  grid-column: span 2;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
}
@media (max-width: 980px){ .project.featured{ grid-column: span 2 } }
@media (max-width: 640px){ .project.featured{ grid-column: span 1 } }

.project-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.project-name{
  font-family:var(--f-display);
  font-weight:700;
  font-size: 19px;
  color:var(--ink-0); margin:0;
  letter-spacing:-.01em;
}
.project.featured .project-name{ font-size: 26px }
.project-tag{
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--accent);
  padding: 4px 9px;
  border:1px solid rgba(0,255,136,.32);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  white-space:nowrap;
}
.project-meta{
  font-family:var(--f-mono); font-size:11px;
  color: var(--ink-2);
  display:flex; gap:10px;
  margin-bottom: 2px;
}
.project-meta b{ color:var(--accent); font-weight:500 }
.project-desc{ font-size:14px; color:var(--ink-1); line-height:1.55; margin:0; flex:1 }
.project-tech{ display:flex; flex-wrap:wrap; gap:6px }
.project-tech .chip{ padding: 4px 9px; font-size:11px }
.project-links{
  display:flex; gap:14px;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hair);
  margin-top: auto;
}
.project-links a{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-1);
  display:inline-flex; align-items:center; gap:8px;
  transition: color var(--t-fast);
}
.project-links a:hover{ color: var(--accent) }
.project-links svg{ width:14px; height:14px }

/* ─── EDUCATION & CERTIFICATIONS ─────────────────────────────────────── */
.edu-grid{
  display:grid; gap: var(--s-7);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px){ .edu-grid{ grid-template-columns: 1fr } }

.edu-col h3{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--accent);
  margin:0 0 var(--s-4);
  display:flex; align-items:center; gap:10px;
}
.edu-col h3::after{
  content:""; flex:1; height:1px;
  background: var(--hair);
}
.edu-list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--s-3) }
.edu-item{
  position:relative;
  display:grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--s-4);
  padding: var(--s-4);
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: var(--bg-1);
  align-items:center;
  transition: border-color var(--t-base), background var(--t-base);
}
.edu-item:hover{
  border-color: var(--hair-strong);
  background: var(--bg-2);
}
.edu-item .icon{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--hair-strong);
  border-radius: var(--r-1);
  color: var(--accent);
  background: var(--bg-2);
}
.edu-item .title{ font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--ink-0); letter-spacing:-.01em }
.edu-item .sub{ font-family:var(--f-mono); font-size:12px; color:var(--ink-2); margin-top:4px }
.edu-item .when{ font-family:var(--f-mono); font-size:11px; color:var(--accent); letter-spacing:.12em }

/* ─── CONTACT ────────────────────────────────────────────────────────── */
.contact{ text-align:center }
.contact .section-head{ justify-content:center; border:0; padding-bottom:0 }
.contact .section-rule{ display:none }
.contact-heading{
  font-family:var(--f-display);
  font-weight:800; letter-spacing:-.04em;
  font-size: clamp(46px, 7.5vw, 104px);
  color:var(--ink-0);
  margin: var(--s-4) 0 var(--s-5);
  line-height:1;
}
.contact-heading::after{
  content:"_"; color:var(--accent);
  animation: blink 1s steps(2) infinite;
  margin-left: 6px;
}
.contact-lede{ max-width: 56ch; margin: 0 auto var(--s-7); font-size:17px; color:var(--ink-1) }
.contact-links{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--s-6); margin-bottom: var(--s-7) }
.contact-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:13px;
  color: var(--ink-0);
  position:relative;
}
.contact-link svg{ width:18px; height:18px; color: var(--accent) }
.contact-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background: var(--accent);
  transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-base);
}
.contact-link:hover::after{ transform: scaleX(1) }

.form{
  max-width: 620px; margin: 0 auto;
  display:grid; gap: var(--s-5);
  text-align:left;
}
.field{ position:relative }
.field label{
  position:absolute; left:14px; top:18px;
  font-family:var(--f-mono); font-size:13px;
  color: var(--ink-2);
  pointer-events:none;
  transition: all var(--t-base);
  background: var(--bg-0); padding: 0 6px;
}
.field input,
.field textarea{
  width:100%;
  padding: 18px 16px;
  border:1px solid var(--hair);
  border-radius: var(--r-2);
  background: transparent;
  font-size: 14px;
  transition: border-color var(--t-fast);
  font-family: var(--f-body);
  color: var(--ink-0);
}
.field textarea{ min-height: 140px; resize: vertical; font-family: var(--f-body) }
.field input:focus,
.field textarea:focus{
  border-color: var(--accent);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  top:-8px; left:10px; font-size:10px;
  color: var(--accent);
  letter-spacing: .14em; text-transform:uppercase;
}
.btn.send{
  justify-self:start;
  position:relative; overflow:hidden;
}
@media (max-width:640px){ .btn.send{ justify-self:center } }
.btn.send.is-loading{ color:transparent }
.btn.send.is-loading::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer{ from{background-position:200% 0} to{background-position:-200% 0} }

.footer{
  text-align:center;
  padding: var(--s-8) 20px var(--s-6);
  border-top: 1px solid var(--hair);
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--ink-2);
  margin-top: var(--s-9);
}
.footer .accent{ color: var(--accent) }
.footer .flag{ font-size:14px; letter-spacing:0 }

/* ─── SCROLL TO TOP ──────────────────────────────────────────────────── */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:150;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--hair-strong);
  border-radius: var(--r-2);
  background: rgba(15,15,15,.82);
  backdrop-filter: blur(12px);
  color: var(--ink-0);
  cursor:pointer;
  opacity:0; visibility:hidden;
  transform: translateY(12px);
  transition: opacity var(--t-base), visibility var(--t-base), transform var(--t-base), border-color var(--t-base), color var(--t-fast), background var(--t-fast);
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; transform:none;
}
.back-to-top:hover{
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.back-to-top svg{ width:18px; height:18px }

/* ─── INTERACTIVE TERMINAL ───────────────────────────────────────────── */
.hero-inner{
  grid-template-columns: 1fr 490px;
  gap: var(--s-5) var(--s-8);
  align-items: start;
}
.hero-inner > *:not(.terminal-window){ grid-column: 1 }
.terminal-window{
  grid-column: 2;
  grid-row: 1 / 7;
  align-self: center;
  border:1px solid var(--hair-strong);
  border-radius: var(--r-3);
  background: var(--bg-1);
  overflow:hidden;
  font-family: var(--f-mono);
  font-size:13px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px var(--hair);
}
@media (max-width:1080px){
  .hero-inner{ grid-template-columns: 1fr }
  .terminal-window{ grid-column:1; grid-row:auto }
}
@media (min-width:1081px) and (max-width:1400px){
  .hero-stats{ gap: var(--s-5) }
}
.terminal-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px;
  background: var(--bg-3);
  border-bottom:1px solid var(--hair);
  flex-shrink:0;
}
.terminal-bar .dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0 }
.terminal-title{
  font-size:11px; color:var(--ink-2);
  letter-spacing:.04em;
  margin:0 auto;
}
.terminal-body{
  display:flex; flex-direction:column;
  height:340px;
  cursor:text;
}
@media (max-width:640px){ .terminal-body{ height:270px } }
.terminal-output{
  flex:1; overflow-y:auto;
  padding:14px 16px 8px;
  scrollbar-width:thin;
  scrollbar-color: var(--bg-3) transparent;
}
.terminal-output::-webkit-scrollbar{ width:4px }
.terminal-output::-webkit-scrollbar-track{ background:transparent }
.terminal-output::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:2px }
.terminal-prompt-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 16px 14px;
  flex-shrink:0;
  border-top:1px solid var(--hair);
}
.terminal-input{
  flex:1;
  background:none; border:none; outline:none;
  color:var(--ink-0);
  font-family:var(--f-mono); font-size:13px;
  caret-color:var(--accent);
}
.terminal-input::placeholder{ color:var(--ink-3) }
.tl{ line-height:1.75; white-space:pre-wrap; word-break:break-all; color:var(--ink-1) }
.tp{ color:var(--accent); user-select:none; flex-shrink:0 }
.tc{ color:var(--accent) }
.tacc{ color:var(--accent) }
.tdim{ color:var(--ink-2) }
.terr{ color:#ff6b6b }

/* ─── 3D TILT + SHINE ────────────────────────────────────────────────── */
.project, .t-card, .skill-cat, .edu-item{
  will-change: transform;
}
.project::after, .t-card::after, .skill-cat::after, .edu-item::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,.09) 0%,
    transparent 62%
  );
  opacity:0;
  transition: opacity var(--t-base);
  pointer-events:none;
  z-index:1;
}
.project.is-tilting, .t-card.is-tilting, .skill-cat.is-tilting, .edu-item.is-tilting{ transition: border-color var(--t-base), background var(--t-base) }
.project.is-tilting::after, .t-card.is-tilting::after, .skill-cat.is-tilting::after, .edu-item.is-tilting::after{ opacity:1 }

/* ─── MAGNETIC BUTTONS ───────────────────────────────────────────────── */
.btn, .nav-cta{
  will-change: transform;
}

/* ─── ENTRANCE ANIMATIONS ────────────────────────────────────────────── */
body:not(.is-loaded) .nav,
body:not(.is-loaded) .status-pill,
body:not(.is-loaded) .hero-name,
body:not(.is-loaded) .hero-role,
body:not(.is-loaded) .hero-tagline,
body:not(.is-loaded) .hero-ctas,
body:not(.is-loaded) .hero-stats,
body:not(.is-loaded) .terminal-window,
body:not(.is-loaded) .scroll-indicator { opacity: 0 }

.is-loaded .nav           { animation: enterDown   0.65s cubic-bezier(.2,.7,.2,1) 0.05s both }
.is-loaded .status-pill   { animation: enterDown   0.55s cubic-bezier(.2,.7,.2,1) 0.20s both }
.is-loaded .hero-name     { animation: heroReveal  0.90s cubic-bezier(.16,1,.3,1) 0.30s both }
.is-loaded .hero-role     { animation: enterUp     0.55s cubic-bezier(.2,.7,.2,1) 0.62s both }
.is-loaded .hero-tagline  { animation: enterUp     0.55s cubic-bezier(.2,.7,.2,1) 0.76s both }
.is-loaded .hero-ctas     { animation: enterUp     0.55s cubic-bezier(.2,.7,.2,1) 0.90s both }
.is-loaded .hero-stats    { animation: enterUp     0.50s cubic-bezier(.2,.7,.2,1) 1.05s both }
.is-loaded .terminal-window { animation: enterUp     0.70s cubic-bezier(.2,.7,.2,1) 1.10s both }
.is-loaded .scroll-indicator{ animation: fadeSlideIn 0.60s ease                   1.40s both }

@keyframes enterDown {
  from { opacity:0; transform: translateY(-28px) }
  to   { opacity:1; transform: none }
}
@keyframes enterUp {
  from { opacity:0; transform: translateY(36px) }
  to   { opacity:1; transform: none }
}
@keyframes heroReveal {
  from { opacity:0; transform: translateY(64px) scale(.96); filter: blur(10px) }
  to   { opacity:1; transform: none;             filter: blur(0) }
}
@keyframes fadeSlideIn {
  from { opacity:0; transform: translateY(16px) }
  to   { opacity:1; transform: none }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  body:not(.is-loaded) .nav,
  body:not(.is-loaded) .status-pill,
  body:not(.is-loaded) .hero-name,
  body:not(.is-loaded) .hero-role,
  body:not(.is-loaded) .hero-tagline,
  body:not(.is-loaded) .hero-ctas,
  body:not(.is-loaded) .hero-stats,
  body:not(.is-loaded) .terminal-window,
  body:not(.is-loaded) .scroll-indicator { opacity: 1 }

  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-name::after{ width: 100% }
}