/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Deep Dark Luxury Tech
   Background: near-black navy
   Accent A: Electric Blue #1a6eff
   Accent B: Neon Orange #ff4d1a
   Accent C: Electric Yellow-Green #e8ff47 (standout)
   Text: near-white for max contrast on dark
═══════════════════════════════════════════ */
:root {
  --bg:         #050814;
  --bg2:        #080c1a;
  --bg3:        #0c1228;
  --surface:    rgba(255,255,255,0.04);
  --surface2:   rgba(255,255,255,0.07);
  --border:     rgba(100,130,255,0.12);
  --border2:    rgba(255,77,26,0.12);

  --text:       #f0efea;
  --text-2:     #b0b8d0;
  --text-muted: #5a6080;

  --blue:       #1a6eff;
  --blue-b:     #5fa0ff;
  --blue-g:     rgba(26,110,255,0.15);
  --blue-gd:    rgba(26,110,255,0.06);

  --orange:     #ff4d1a;
  --orange-b:   #ff7a52;
  --orange-g:   rgba(255,77,26,0.15);

  --lime:       #e8ff47;
  --lime-g:     rgba(232,255,71,0.1);

  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; }

body {
  font-family:'DM Mono',monospace;
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  height:100dvh;
}

/* ── SCROLL CONTAINER ── */
#scroller {
  height:100dvh;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#scroller::-webkit-scrollbar { display:none; }

section {
  height:100dvh;
  width:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}

.inner {
  width:100%;
  max-width:1100px;
  max-height:calc(100dvh - 120px);
  overflow:hidden;
}

/* ── MOBILE ── */
@media (max-width:768px) {
  body { overflow:auto; height:auto; cursor:auto; }
  #scroller { height:auto; overflow:visible; scroll-snap-type:none; }
  section { height:auto; min-height:100svh; scroll-snap-align:unset; scroll-snap-stop:unset; padding:64px 20px 100px; overflow:visible; }
  .inner { max-height:none; overflow:visible; }
}

/* ═══════════════════════════════════════════
   CANVAS LAYERS
═══════════════════════════════════════════ */
#three-canvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:1;
  transition:opacity 1s ease;
}
#three-canvas.hidden { opacity:0; }

#flow-canvas {
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
  opacity:0.9;
}

#noise-overlay {
  position:fixed; inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CUSTOM CURSOR ── */
#cursor {
  position:fixed; width:6px; height:6px;
  background:var(--lime);
  border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform 0.08s, background 0.3s;
  mix-blend-mode:exclusion;
}
#cursor-ring {
  position:fixed; width:36px; height:36px;
  border:1px solid rgba(232,255,71,0.3);
  border-radius:50%; pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:border-color 0.3s, transform 0.15s;
}
body:has(a:hover) #cursor,
body:has(button:hover) #cursor { transform:translate(-50%,-50%) scale(3); background:var(--orange); }
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { border-color:rgba(255,77,26,0.5); transform:translate(-50%,-50%) scale(0.5); }

/* ── PROGRESS BAR ── */
#progress {
  position:fixed; top:0; left:0; height:2px;
  width:0%; z-index:1000;
  background:linear-gradient(to right, var(--orange), var(--lime));
  box-shadow:0 0 12px var(--lime);
  transition:width 0.08s linear;
}

/* ═══════════════════════════════════════════
   INTRO SCREEN
═══════════════════════════════════════════ */
#intro {
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}

#intro-mark { width:100px; height:100px; margin-bottom:48px; opacity:0; }

#intro-wordmark {
  font-family:'DM Mono',monospace;
  font-size:clamp(10px,2vw,13px);
  font-weight:300;
  letter-spacing:0.55em;
  color:var(--text-muted);
  text-transform:uppercase;
  opacity:0;
  margin-bottom:56px;
}

.intro-progress-track {
  width:260px; height:1px;
  background:rgba(255,255,255,0.05);
  position:relative; overflow:hidden; opacity:0;
}
#intro-fill {
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(to right, var(--blue), var(--lime));
  box-shadow:0 0 8px var(--lime);
}
#intro-num {
  font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:0.3em;
  color:var(--text-muted);
  margin-top:12px; opacity:0;
}

#enter-btn {
  margin-top:52px; opacity:0;
  background:none; border:none;
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.45em;
  color:var(--text);
  text-transform:uppercase; cursor:none;
  position:relative; padding:16px 48px;
  overflow:hidden;
}
#enter-btn::before {
  content:''; position:absolute; inset:0;
  border:1px solid rgba(232,255,71,0.25);
  transition:all 0.4s;
}
#enter-btn::after {
  content:''; position:absolute; inset:0;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s cubic-bezier(0.76,0,0.24,1);
}
#enter-btn:hover::before { border-color:var(--lime); }
#enter-btn:hover::after { transform:scaleX(1); }
#enter-btn:hover { color:var(--bg); }
#enter-btn span { position:relative; z-index:1; }

.scan-beam {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, var(--lime), transparent);
  opacity:0; pointer-events:none;
}

/* ═══════════════════════════════════════════
   SIDE NAV WITH ICONS
═══════════════════════════════════════════ */
#sidenav {
  position:fixed; right:28px; top:50%;
  transform:translateY(-50%);
  z-index:100; opacity:0;
  display:flex; flex-direction:column; gap:18px;
}
.sn-item {
  display:flex; align-items:center;
  gap:10px; cursor:none;
  justify-content:flex-end;
  position:relative;
}
.sn-label {
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.2em;
  color:var(--text-muted); text-transform:uppercase;
  opacity:0; transition:opacity 0.3s, color 0.3s;
  white-space:nowrap;
}
.sn-icon {
  width:18px; height:18px;
  color:var(--text-muted);
  transition:color 0.3s, transform 0.3s;
  flex-shrink:0;
}
.sn-icon svg { width:100%; height:100%; }
.sn-dot {
  width:4px; height:4px;
  border-radius:50%;
  background:var(--blue);
  transition:all 0.3s;
  flex-shrink:0;
}
.sn-item:hover .sn-label,
.sn-item.active .sn-label { opacity:1; color:var(--lime); }
.sn-item:hover .sn-icon,
.sn-item.active .sn-icon { color:var(--lime); transform:scale(1.15); }
.sn-item:hover .sn-dot { background:var(--lime); transform:scale(0); opacity:0; }
.sn-item.active .sn-dot { background:var(--lime); box-shadow:0 0 8px var(--lime); transform:scale(0); opacity:0; }
.sn-item.active .sn-icon { filter:drop-shadow(0 0 6px var(--lime)); }

/* ═══════════════════════════════════════════
   MAIN CONTENT WRAPPER
═══════════════════════════════════════════ */
#main {
  position:relative; z-index:10;
  opacity:0; pointer-events:none;
}
#main.visible { opacity:1; pointer-events:all; }

/* ── SECTION LABEL ── */
.sec-label {
  display:flex; align-items:center; gap:14px;
  margin-bottom:var(--s5); opacity:0;
}
.sec-num {
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.3em;
  color:var(--lime); font-weight:500;
}
.sec-title {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.4em;
  color:var(--text-muted); text-transform:uppercase;
}
.sec-line {
  flex:1; height:1px;
  background:linear-gradient(to right, var(--lime-g), transparent);
  max-width:180px;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero {
  flex-direction:column;
  text-align:center;
  position:relative;
}

/* Hero THREE.js sits as fixed behind */
.hero-eyebrow {
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.55em;
  color:var(--text-muted); text-transform:uppercase;
  margin-bottom:36px; opacity:0;
}

#hero-monogram {
  width:110px; height:110px;
  margin:0 auto 44px;
  opacity:0;
}

.hero-name-wrap {
  opacity:0; position:relative;
  line-height:1;
}

.hero-first {
  display:block;
  font-family:'Syne',sans-serif;
  font-size:clamp(64px,14.4vw,176px);
  font-weight:800;
  line-height:0.88;
  color:var(--text);
  letter-spacing:-0.03em;
  text-shadow:0 0 80px rgba(26,110,255,0.2);
}

.hero-last {
  display:block;
  font-family:'Syne',sans-serif;
  font-size:clamp(20px,4.5vw,58px);
  font-weight:700;
  letter-spacing:0.45em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--orange);
  text-transform:uppercase;
  margin-top:4px;
  text-shadow:none;
}

.hero-rule { margin:36px auto; opacity:0; display:block; }

.hero-tagline {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(16px,2.2vw,26px);
  font-weight:300;
  font-style:italic;
  color:var(--text-2);
  letter-spacing:0.06em;
  margin-bottom:52px;
  opacity:0;
}

.hero-pills {
  display:flex; gap:10px;
  justify-content:center; flex-wrap:wrap;
  opacity:0;
}
.hero-pill {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.2em;
  color:var(--text-muted); text-transform:uppercase;
  border:1px solid var(--border);
  padding:9px 22px;
  position:relative; overflow:hidden;
  transition:color 0.4s, border-color 0.4s;
  background:var(--surface);
}
.hero-pill::before {
  content:''; position:absolute; inset:0;
  background:var(--lime);
  transform:translateY(101%);
  transition:transform 0.4s cubic-bezier(0.76,0,0.24,1);
}
.hero-pill:hover { color:var(--bg); border-color:var(--lime); }
.hero-pill:hover::before { transform:translateY(0); }
.hero-pill span { position:relative; z-index:1; }

.hero-scroll-hint {
  position:absolute; bottom:36px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
}
.hs-text {
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.45em; color:var(--text-muted);
  text-transform:uppercase;
}
.hs-bar {
  width:1px; height:52px;
  background:linear-gradient(to bottom, var(--lime), transparent);
  animation:hsPulse 2s ease-in-out infinite;
}
@keyframes hsPulse { 0%,100%{opacity:0.2;} 50%{opacity:1;} }

/* ═══════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════ */
#about .inner { display:block; }

.about-grid-wrap {
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:0;
  align-items:start;
}

#about .vert-rule {
  background:linear-gradient(to bottom, transparent, var(--border), transparent);
  height:100%;
}

.about-left { padding-right:60px; }
.about-right { padding-left:60px; }

.about-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3.2vw,40px);
  font-weight:300; line-height:1.5;
  color:var(--text);
  opacity:0;
  margin-bottom:var(--s4);
}
.about-quote em { color:var(--lime); font-style:italic; }
.about-quote strong { color:var(--blue-b); font-weight:400; font-style:normal; }

.about-body {
  font-family:'DM Mono',monospace;
  font-size:11px; line-height:1.95;
  color:var(--text-2);
  opacity:0;
  margin-top:var(--s3);
}

.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  opacity:0;
}
.stat-cell {
  background:var(--surface);
  border:1px solid var(--border);
  padding:28px 24px;
  position:relative; overflow:hidden;
  transition:background 0.4s;
}
.stat-cell::before {
  content:'';
  position:absolute; bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(to right, var(--blue-g), transparent);
}
.stat-cell:hover { background:var(--surface2); }
.stat-n {
  font-family:'Syne',sans-serif;
  font-size:clamp(36px,5vw,56px);
  font-weight:800;
  color:var(--lime);
  line-height:1;
  text-shadow:0 0 30px rgba(232,255,71,0.3);
}
.stat-l {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.25em;
  color:var(--text-muted); text-transform:uppercase;
  margin-top:8px;
}

/* ═══════════════════════════════════════════
   EXPERIENCE
═══════════════════════════════════════════ */
#experience .inner {
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
#experience .inner::-webkit-scrollbar { width:2px; }
#experience .inner::-webkit-scrollbar-thumb { background:var(--border); }

.exp-layout {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:0;
}

.exp-spine {
  padding-right:40px;
  border-right:1px solid var(--border);
  position:relative;
}
.exp-spine::before {
  content:'';
  position:absolute; right:-1px; top:0; bottom:0;
  width:1px;
  background:linear-gradient(to bottom, var(--blue-g), var(--orange-g));
}

.spine-year {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.2em;
  color:var(--text-muted); text-transform:uppercase;
  margin-bottom:var(--s6);
  transition:color 0.3s;
  text-align:right;
  position:relative;
}
.spine-year::after {
  content:'';
  position:absolute; right:-44px; top:5px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
  transition:background 0.3s, border-color 0.3s;
}
.spine-year.lit { color:var(--lime); }
.spine-year.lit::after { background:var(--lime); border-color:var(--lime); box-shadow:0 0 8px var(--lime); }

.exp-cards { padding-left:52px; }

.exp-card {
  margin-bottom:40px; padding-bottom:40px;
  border-bottom:1px solid var(--border);
  opacity:0;
  position:relative;
  transition:padding 0.3s;
}
.exp-card::before {
  content:'';
  position:absolute; left:-52px; top:0;
  width:0; height:1px;
  background:linear-gradient(to right, var(--lime-g), transparent);
  transition:width 0.6s ease;
}
.exp-card:hover::before { width:40px; }
.exp-card:last-child { border-bottom:none; margin-bottom:0; }

.exp-card-header {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  gap:20px; margin-bottom:8px;
}
.exp-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(18px,2vw,24px);
  font-weight:700;
  color:var(--text);
  line-height:1.2;
}
.exp-date {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.2em;
  color:var(--lime); text-transform:uppercase;
  white-space:nowrap; padding-top:4px;
  flex-shrink:0;
}
.exp-org {
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.1em;
  margin-bottom:12px; display:flex; gap:6px; align-items:center;
  flex-wrap:wrap;
}
.exp-org .co { color:var(--blue-b); }
.exp-org .sep { color:var(--text-muted); }
.exp-body {
  font-family:'DM Mono',monospace;
  font-size:11px; line-height:1.85;
  color:var(--text-2);
  max-width:600px;
  margin-bottom:16px;
}
.exp-chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.15em;
  color:var(--text-muted); text-transform:uppercase;
  background:var(--surface);
  border:1px solid var(--border);
  padding:4px 12px;
  transition:all 0.3s;
}
.chip:hover { color:var(--lime); border-color:var(--lime-g); background:var(--lime-g); }

/* ═══════════════════════════════════════════
   SKILLS
═══════════════════════════════════════════ */
.skills-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

#skill-canvas-wrap {
  opacity:0;
  background:var(--surface);
  border:1px solid var(--border);
  padding:24px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
#skill-canvas-wrap::before {
  content:'Skills Radar';
  position:absolute; top:16px; left:16px;
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.3em;
  color:var(--text-muted); text-transform:uppercase;
}

.skill-list { opacity:0; }

.skill-row { margin-bottom:28px; }
.skill-row-top {
  display:flex; justify-content:space-between;
  align-items:baseline;
  margin-bottom:8px;
}
.skill-name-txt {
  font-family:'Syne',sans-serif;
  font-size:14px; font-weight:600;
  color:var(--text);
  letter-spacing:0.02em;
}
.skill-pct {
  font-family:'DM Mono',monospace;
  font-size:11px; color:var(--lime);
  letter-spacing:0.1em;
}
.skill-track {
  height:2px;
  background:var(--surface2);
  position:relative; overflow:hidden;
}
.skill-fill {
  height:100%; width:0%;
  background:linear-gradient(to right, var(--blue), var(--lime));
  transition:width 1.2s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.skill-fill::after {
  content:'';
  position:absolute; right:0; top:-3px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px var(--lime);
}
.skill-sub {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.15em;
  color:var(--text-muted); text-transform:uppercase;
  margin-top:6px;
}

/* ═══════════════════════════════════════════
   EDUCATION
═══════════════════════════════════════════ */
.edu-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.edu-card {
  background:var(--surface);
  border:1px solid var(--border);
  padding:40px 36px;
  position:relative; overflow:hidden;
  opacity:0;
  transition:background 0.4s, border-color 0.4s, transform 0.4s;
  cursor:none;
}
.edu-card::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--blue-gd), transparent 60%);
  opacity:0; transition:opacity 0.4s;
}
.edu-card:hover { background:var(--surface2); border-color:rgba(100,130,255,0.22); transform:translateY(-4px); }
.edu-card:hover::before { opacity:1; }

.edu-card-geo {
  position:absolute; right:-20px; bottom:-20px;
  width:140px; height:140px;
  opacity:0.07;
  transition:opacity 0.4s, transform 0.4s;
}
.edu-card:hover .edu-card-geo { opacity:0.14; transform:rotate(15deg); }

.edu-badge {
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface2);
  border:1px solid var(--border);
  padding:4px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
  position:relative; z-index:1;
}
.edu-badge-dot {
  width:5px; height:5px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 6px var(--lime);
  display:inline-block;
  flex-shrink:0;
}

.edu-degree-txt {
  font-family:'Syne',sans-serif;
  font-size:clamp(18px,2vw,22px);
  font-weight:700;
  color:var(--text);
  margin-bottom:10px;
  position:relative; z-index:1;
  line-height:1.2;
}
.edu-school-txt {
  font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:0.05em;
  color:var(--blue-b);
  margin-bottom:8px;
  position:relative; z-index:1;
}
.edu-year-txt {
  font-family:'DM Mono',monospace;
  font-size:9px; letter-spacing:0.2em;
  color:var(--text-muted); text-transform:uppercase;
  position:relative; z-index:1;
}

/* ═══════════════════════════════════════════
   CONTACT — SPLIT LAYOUT
═══════════════════════════════════════════ */
#contact {
  align-items:stretch;
  padding:60px;
}
#contact .inner {
  max-height:none;
  overflow:visible;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:center;
}

.contact-left { display:flex; flex-direction:column; }

.contact-pre {
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.45em;
  color:var(--text-muted); text-transform:uppercase;
  margin-bottom:28px; opacity:0;
}
.contact-head {
  font-family:'Syne',sans-serif;
  font-size:clamp(52px,8vw,110px);
  font-weight:800; line-height:0.9;
  letter-spacing:-0.02em; margin-bottom:52px;
  opacity:0;
}
.contact-head .ch-plain { color:var(--text); display:block; }
.contact-head .ch-accent {
  color:transparent; display:block;
  -webkit-text-stroke:2px var(--orange);
}

.contact-tiles { display:flex; flex-direction:column; gap:4px; opacity:0; }
.contact-tile {
  padding:20px 28px;
  border:1px solid var(--border);
  background:var(--surface);
  text-decoration:none;
  display:flex; align-items:center; gap:16px;
  position:relative; overflow:hidden;
  transition:all 0.4s; cursor:none;
}
.contact-tile::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to right, var(--blue-g), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.4s;
}
.contact-tile:hover::before { transform:scaleX(1); }
.contact-tile:hover { border-color:rgba(100,130,255,0.25); transform:translateX(6px); }
.ct-icon {
  width:36px; height:36px;
  border:1px solid var(--border);
  background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; position:relative; z-index:1;
  color:var(--blue-b);
  transition:color 0.3s, background 0.3s;
}
.ct-icon svg { width:16px; height:16px; }
.contact-tile:hover .ct-icon { color:var(--lime); background:var(--blue-gd); }
.ct-info { position:relative; z-index:1; }
.ct-val {
  font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:0.05em;
  color:var(--text); margin-bottom:2px;
  transition:color 0.3s;
}
.contact-tile:hover .ct-val { color:var(--lime); }
.ct-label {
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.25em;
  color:var(--text-muted); text-transform:uppercase;
}

/* ── CONTACT FORM ── */
.contact-right { opacity:0; }

.form-title {
  font-family:'Syne',sans-serif;
  font-size:18px; font-weight:700;
  color:var(--text); letter-spacing:0.05em;
  margin-bottom:28px;
  display:flex; align-items:center; gap:14px;
}
.form-title::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, var(--border), transparent);
}

.contact-form {
  display:flex; flex-direction:column; gap:12px;
}

.form-group { position:relative; }
.form-group label {
  display:block;
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.3em;
  color:var(--text-muted); text-transform:uppercase;
  margin-bottom:6px;
}
.form-group input,
.form-group textarea {
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'DM Mono',monospace;
  font-size:12px; letter-spacing:0.05em;
  padding:14px 16px;
  outline:none;
  resize:none;
  transition:border-color 0.3s, background 0.3s;
  -webkit-appearance:none;
  border-radius:0;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color:rgba(232,255,71,0.4);
  background:var(--surface2);
  box-shadow:0 0 0 1px rgba(232,255,71,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-muted); }
.form-group textarea { height:120px; }

.form-submit-btn {
  background:none;
  border:1px solid var(--lime-g);
  color:var(--lime);
  font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.4em;
  text-transform:uppercase;
  padding:16px 36px;
  cursor:none;
  position:relative; overflow:hidden;
  transition:color 0.4s;
  margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.form-submit-btn::before {
  content:'';
  position:absolute; inset:0;
  background:var(--lime);
  transform:translateY(101%);
  transition:transform 0.5s cubic-bezier(0.76,0,0.24,1);
}
.form-submit-btn:hover { color:var(--bg); }
.form-submit-btn:hover::before { transform:translateY(0); }
.form-submit-btn span { position:relative; z-index:1; }
.btn-icon { position:relative; z-index:1; width:14px; height:14px; }

.form-success {
  display:none;
  font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:0.1em;
  color:var(--lime);
  padding:16px;
  border:1px solid var(--lime-g);
  background:var(--lime-g);
  text-align:center;
  margin-top:8px;
}

/* ── LOCATION BADGE ── */
#loc {
  position:fixed; bottom:28px; left:28px;
  z-index:100; opacity:0;
  font-family:'DM Mono',monospace;
  font-size:8px; letter-spacing:0.25em;
  color:var(--text-muted); text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.loc-pulse {
  width:5px; height:5px; border-radius:50%;
  background:var(--lime);
  animation:locPulse 2.5s infinite;
}
@keyframes locPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(232,255,71,0.3); }
  50% { box-shadow:0 0 0 6px rgba(232,255,71,0); }
}

/* ═══════════════════════════════════════════
   MOBILE NAV WITH ICONS
═══════════════════════════════════════════ */
#mob-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  z-index:200;
  background:rgba(5,8,20,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:10px 0 max(10px, env(safe-area-inset-bottom));
  justify-content:space-around;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.4s, transform 0.4s;
}
#mob-nav.visible { opacity:1; transform:translateY(0); }
.mn-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; padding:4px 8px;
}
.mn-icon {
  width:20px; height:20px;
  color:var(--text-muted);
  transition:color 0.3s;
}
.mn-icon svg { width:100%; height:100%; }
.mn-lbl {
  font-family:'DM Mono',monospace;
  font-size:7px; letter-spacing:0.15em;
  color:var(--text-muted);
  text-transform:uppercase; transition:color 0.3s;
}
.mn-item.active .mn-icon { color:var(--lime); filter:drop-shadow(0 0 4px var(--lime)); }
.mn-item.active .mn-lbl { color:var(--lime); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:1024px) {
  #sidenav, #loc { display:none; }
  #mob-nav { display:flex; }
  section { padding:56px 40px; }
  #contact { padding:56px 40px; }
  #contact .inner { grid-template-columns:1fr; gap:48px; max-height:none; overflow:visible; }
  .contact-left { order:1; }
  .contact-right { order:2; }
  .about-grid-wrap { grid-template-columns:1fr; }
  #about .vert-rule { display:none; }
  .about-left { padding-right:0; margin-bottom:40px; }
  .about-right { padding-left:0; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .exp-layout { grid-template-columns:120px 1fr; }
  .exp-cards { padding-left:36px; }
  .skills-layout { grid-template-columns:1fr; gap:32px; }
  #skill-canvas-wrap { max-width:260px; margin:0 auto; }
  .edu-layout { grid-template-columns:1fr 1fr; gap:12px; }
}

@media (max-width:768px) {
  body { cursor:auto; overflow:auto; height:auto; }
  #cursor, #cursor-ring { display:none; }
  #scroller { height:auto; overflow:visible; scroll-snap-type:none; }
  section { height:auto; min-height:100svh; scroll-snap-align:unset; scroll-snap-stop:unset; padding:56px 20px 100px; overflow:visible; }
  #contact { padding:56px 20px 100px; }
  .inner { max-height:none; overflow:visible; }
  .hero-first { font-size:clamp(48px,14.4vw,80px); }
  .hero-last { font-size:clamp(14px,5.5vw,30px); letter-spacing:0.25em; }
  .hero-pills { gap:8px; }
  .hero-pill { font-size:8px; padding:7px 16px; }
  .about-grid-wrap { grid-template-columns:1fr; }
  #about .vert-rule { display:none; }
  .about-left { padding-right:0; margin-bottom:40px; }
  .about-right { padding-left:0; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .exp-layout { grid-template-columns:1fr; }
  .exp-spine { display:flex; flex-wrap:wrap; gap:6px 12px; padding-right:0; padding-bottom:20px; border-right:none; border-bottom:1px solid var(--border); margin-bottom:28px; }
  .exp-spine::before { display:none; }
  .spine-year { margin-bottom:0; font-size:8px; }
  .spine-year::after { display:none; }
  .exp-cards { padding-left:0; }
  .skills-layout { grid-template-columns:1fr; }
  .edu-layout { grid-template-columns:1fr; }
  .edu-card { padding:28px 24px; }
  .contact-tiles .contact-tile { flex-direction:row; padding:16px 20px; }
}

@media (max-width:480px) {
  section { padding:48px 16px 100px; }
  #contact { padding:48px 16px 100px; }
  .hero-first { font-size:clamp(41.6px,16vw,64px); }
  .stat-n { font-size:36px; }
  .edu-card { padding:24px 18px; }
  .contact-head { font-size:clamp(44px,15vw,80px); }
}

/* ── UTILITY ── */
.reveal { opacity:0; }