/* ════════════════════════════════════════════════════════════
   SADHAN VIKRAM — RED AI PORTFOLIO · MASTER STYLESHEET
   ════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* ── Wells Palette: Beige & Dark Grey ── */
  --bg:         #DDD0C8;
  --bg2:        #D4C6BC;
  --bg3:        #C9BAB0;

  /* Primary: Dark Grey */
  --red:        #323232;
  --red-mid:    #1a1a1a;
  --red-dim:    rgba(50, 50, 50, 0.07);
  --red-glow:   none;

  /* Secondary tones */
  --orange:     #5a5a5a;
  --orange-dim: rgba(90, 90, 90, 0.07);
  --orange-glow:none;

  --pink:       #4a4a4a;
  --pink-dim:   rgba(74, 74, 74, 0.07);
  --pink-glow:  none;

  --amber:      #7a7a7a;
  --amber-dim:  rgba(122, 122, 122, 0.07);
  --amber-glow: none;

  /* Card Surfaces */
  --surface:    #f5f0ec;
  --surface-h:  #ffffff;
  --border:     rgba(50, 50, 50, 0.12);
  --border-h:   rgba(50, 50, 50, 0.28);

  /* Typography */
  --text:       #323232;
  --text-muted: #7a7a7a;
  --text-dim:   #5a5a5a;

  /* Layout */
  --radius:     20px;
  --radius-sm:  12px;
  --nav-h:      80px;
  --tr:         0.2s ease-in-out;
  --font-h:     'Inter', sans-serif;
  --font-b:     'Inter', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.65;
  min-height: 100vh;
}
::selection  { background: var(--red-dim); color:var(--text); }
a            { text-decoration: none; color: inherit; }
ul           { list-style: none; }
::-webkit-scrollbar      { width:5px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--red-dim); border-radius:4px; }


/* ── CRT OVERLAY ───────────────────────────────────────── */
.crt { display: none; }

/* ── Canvas ─────────────────────────────────────────────── */
#neuralCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Globe Scatter Canvas ────────────────────────────────── */
#globeCanvas {
  position: fixed;
  inset: 0;
  z-index: 9999;           /* sits above everything after loader */
  pointer-events: none;
  opacity: 1;
  transition: opacity 1s ease;
}
#globeCanvas.hidden { opacity: 0; }

/* ── Cursor Glow ─────────────────────────────────────────── */
#cursorGlow {
  position: fixed;
  width:380px; height:380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(50,50,50,0.12) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 9998;
  transition: left .08s, top .08s;
  will-change: left,top;
}

/* ── Gradient Text ───────────────────────────────────────── */
.gradient-text {
  color: var(--text);
}

/* ── Glass Card ─────────────────────────────────────────── */
.glass-card {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.glass-card:hover {
  background: var(--surface);
  border-color: var(--border-h);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

/* ── Glow helpers ────────────────────────────────────────── */
.red-glow    { color:var(--red); }
.orange-glow { color:var(--text); }
.pink-glow   { color:var(--text); }
.amber-glow  { color:var(--text); }

/* ─────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
   ───────────────────────────────────────────────────────── */
@keyframes floatA {
  0%,100%{ transform:translateY(0px)   rotate(0deg); }
  50%    { transform:translateY(-12px) rotate(0.5deg); }
}
@keyframes floatB {
  0%,100%{ transform:translateY(0px)   rotate(0deg); }
  50%    { transform:translateY(-16px) rotate(-0.6deg); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(44px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes revealLine {
  from { opacity:0; transform:translateY(32px) skewY(2deg); }
  to   { opacity:1; transform:translateY(0) skewY(0deg); }
}
@keyframes scanLine {
  0%   { top:-100%; opacity:0.8; }
  100% { top:100%;  opacity:0; }
}
@keyframes spinOrbit {
  from { transform:rotateX(72deg) rotateZ(0deg); }
  to   { transform:rotateX(72deg) rotateZ(360deg); }
}
@keyframes pulseRed {
  0%,100%{ box-shadow:0 0 0 0 rgba(50,50,50,0.12); }
  50%    { box-shadow:0 0 0 8px rgba(50,50,50,0.12); }
}
@keyframes pulseOrange {
  0%,100%{ box-shadow:0 0 0 0 rgba(50,50,50,0.08); }
  50%    { box-shadow:0 0 0 8px rgba(50,50,50,0.08); }
}
@keyframes pulsePink {
  0%,100%{ box-shadow:0 0 0 0 rgba(50,50,50,0.06); }
  50%    { box-shadow:0 0 0 8px rgba(50,50,50,0.06); }
}
@keyframes orbPulse {
  0%,100%{ box-shadow:0 0 40px 12px rgba(50,50,50,0.12); }
  50%    { box-shadow:0 0 70px 25px rgba(50,50,50,0.08); }
}
@keyframes dotBlink {
  0%,100%{ opacity:1; } 50%{ opacity:0.3; }
}
@keyframes typeCursor {
  0%,100%{ opacity:1; } 50%{ opacity:0; }
}
@keyframes barFill {
  from{ width:0; }
}
@keyframes spin { to{ transform:rotate(360deg); } }
@keyframes chipBob {
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%    { transform:translateY(-9px) rotate(1deg); }
}
@keyframes loaderFill {
  from{ width:0; } to{ width:100%; }
}
@keyframes fadeOut {
  from{ opacity:1; } to{ opacity:0; pointer-events:none; }
}
@keyframes scannerSpin {
  0%  { transform:rotate(0deg) translateY(-48%)  scaleX(1); }
  50% { transform:rotate(180deg) translateY(-48%) scaleX(-1); }
  100%{ transform:rotate(360deg) translateY(-48%) scaleX(1); }
}
@keyframes dataPointPulse {
  0%,100%{ transform:scale(1); opacity:0.8; }
  50%    { transform:scale(1.8); opacity:0.3; }
}

.float-a { animation: none; transform: none; }
.float-b { animation: none; transform: none; }
.delay1   { animation-delay:0.6s; }
.delay2   { animation-delay:1.2s; }
.delay3   { animation-delay:1.8s; }

/* Scroll reveal */
.reveal {
  opacity:0;
  transform:translateY(48px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal.delay1.visible { transition-delay:.12s; }
.reveal.delay2.visible { transition-delay:.24s; }
.reveal.delay3.visible { transition-delay:.36s; }

/* ─────────────────────────────────────────────────────────
   LOADING SCREEN
   ───────────────────────────────────────────────────────── */
.loader {
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  transition:opacity .6s ease, visibility .6s;
}
.loader.hidden { opacity:0; visibility:hidden; }

.loader-orb {
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--orange) 0%, var(--red) 50%, #1a0010 100%);
  animation:orbPulse 2s ease-in-out infinite;
}
.loader-ring {
  position:absolute;
  border-radius:50%;
  border:1.5px solid transparent;
}
.loader-ring.r1 {
  width:120px; height:120px;
  border-color:rgba(50,50,50,0.12);
  animation:spinOrbit 3s linear infinite;
  top:50%; left:50%;
  transform-origin:60px 60px;
  margin-top:-60px; margin-left:-60px;
}
.loader-ring.r2 {
  width:160px; height:160px;
  border-color:rgba(50,50,50,0.08);
  animation:spinOrbit 5s linear infinite reverse;
  top:50%; left:50%;
  transform-origin:80px 80px;
  margin-top:-80px; margin-left:-80px;
}
/* Loader Robot — 3D Canvas */
.loader-robot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 280px;
  position: relative;
}
/* Soft radial glow behind the robot */
.loader-robot-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(0,200,255,0.10) 0%, transparent 70%);
  pointer-events: none;
}
/* The Three.js canvas */
.robot-canvas {
  width: 280px !important;
  height: 280px !important;
  display: block;
  border-radius: 0;
  background: transparent;
}

.loader-text {
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.loader-label {
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.2em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.loader-bar {
  width:220px; height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden;
}
.loader-fill {
  height:100%;
  background:linear-gradient(90deg,var(--red),var(--orange));
  border-radius:2px;
  animation:loaderFill 2s ease-in-out forwards;
}
.loader-pct {
  font-family:var(--font-mono);
  font-size:.8rem; color:var(--red);
}

/* ─────────────────────────────────────────────────────────
   LAYOUT UTILITIES
   ───────────────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 28px; }
.section { position:relative; z-index:1; padding:160px 0; }

.section-label {
  display:flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
  margin-bottom:14px;
}
.ldot {
  width:8px; height:8px; border-radius:50%;
  background:var(--red); box-shadow:var(--red-glow);
  animation:dotBlink 2s infinite;
}

.section-title {
  font-family:var(--font-h);
  font-size:clamp(2rem,4vw,3.1rem);
  font-weight:800; line-height:1.1; margin-bottom:56px;
}

.card-subtitle {
  font-size:.85rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-muted); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.card-subtitle i { color:var(--red); }

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background: var(--red);
  color: #DDD0C8; font-weight:600; font-size:1rem;
  padding:14px 32px; border-radius:100px; border: none;
  cursor:pointer; transition:var(--tr); font-family:var(--font-b);
  letter-spacing: 0.04em;
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 8px 24px rgba(50,50,50,0.2);
  background: var(--red-mid);
}
.btn-primary.sm  { padding:9px 20px; font-size:.82rem; }
.btn-primary.w100{ width:100%; justify-content:center; }
.btn-primary.mt16{ margin-top:16px; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:9px;
  background: transparent; color: var(--text);
  font-weight:500; font-size:1rem;
  padding:14px 32px; border-radius:100px;
  border:1.5px solid var(--text); cursor:pointer;
  transition:var(--tr);
}
.btn-ghost:hover {
  background: var(--red); color: #DDD0C8;
  border-color: var(--red);
  transform:translateY(-2px);
}
.btn-ghost.sm { padding:9px 18px; font-size:.82rem; }

/* ─────────────────────────────────────────────────────────
   NAVIGATION
   ───────────────────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 44px;
  border-bottom:1px solid transparent;
  transition:background var(--tr), border-color var(--tr), backdrop-filter var(--tr);
}
.navbar.scrolled {
  background: rgba(221, 208, 200, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.nav-logo {
  font-family:var(--font-h); font-size:1.7rem; font-weight:800;
  color:var(--text); letter-spacing:-.02em;
}
.logo-dot { color:var(--red); }
.nav-links { display:flex; gap:34px; }
.nav-links a {
  font-size:.88rem; font-weight:500; color:var(--text-dim);
  transition:color var(--tr); letter-spacing:.02em;
}
.nav-links a:hover { color:var(--red); }

.btn-nav-resume {
  display:inline-flex; align-items:center; gap:7px;
  background:var(--red-dim); color:var(--red);
  border:1px solid rgba(50,50,50,0.12);
  font-size:.82rem; font-weight:600;
  padding:8px 18px; border-radius:var(--radius-sm);
  transition:var(--tr);
}
.btn-nav-resume:hover {
  background:var(--red); color:var(--text);
  box-shadow:var(--red-glow);
}

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border: 2px solid var(--border); cursor:pointer; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--tr); }

.mobile-menu {
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
  display:flex; flex-direction:column;
  background:rgba(8,0,6,0.97); backdrop-filter: none;
  border-bottom:1px solid rgba(50,50,50,0.12);
  padding:22px 40px 32px; gap:22px;
  transform:translateY(-120%); transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open { transform:translateY(0); }
.mob-link { font-size:1.05rem; font-weight:500; color:var(--text-dim); transition:color var(--tr); }
.mob-link:hover, .mob-link.resume-link { color:var(--red); }

/* ─────────────────────────────────────────────────────────
   HERO SECTION
   ───────────────────────────────────────────────────────── */
.hero {
  position:relative; z-index:1; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--nav-h) 40px 0; gap:0; overflow:hidden;
  text-align: center;
}
.hero::before { display: none; }
.hero::after { display: none; }

/* Floating AI chips */
.ai-float-chip {
  position:absolute;
  background:var(--red-dim); border:1px solid rgba(50,50,50,0.12);
  border-radius:var(--radius-sm); padding:7px 18px;
  font-size:.75rem; font-weight:700; font-family:var(--font-mono);
  color:var(--red); white-space:nowrap; letter-spacing:.05em;
}
.chip-tl { top:22%;  left:6%;  animation:chipBob 5s ease-in-out infinite; }
.chip-tr { top:18%;  right:48%; animation:chipBob 6.5s ease-in-out infinite; animation-delay:-1s; }
.chip-bl { bottom:25%; left:8%; animation:chipBob 5.8s ease-in-out infinite; animation-delay:-2s; }
.chip-br { bottom:20%; right:46%; animation:chipBob 7s ease-in-out infinite; animation-delay:-0.5s; }

.hero-content { flex:1; max-width:800px; position:relative; z-index:2; display: flex; flex-direction: column; align-items: center; }

.hero-badge {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:100px; padding:8px 20px;
  font-size:.85rem; font-weight:600; color:var(--text-dim);
  margin-bottom:32px; font-family:var(--font-b);
  letter-spacing:.02em;
}
.badge-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--red); box-shadow:var(--red-glow);
  animation:dotBlink 1.5s infinite;
}

.hero-title {
  font-family:var(--font-h);
  font-size:clamp(3rem,6.5vw,5.5rem);
  font-weight:900; line-height:1.0; letter-spacing:-.03em;
  margin-bottom:22px;
  display:flex; flex-direction:column; gap:2px;
}
.reveal-line {
  display:block; animation:revealLine .8s ease forwards; opacity:0;
}
.reveal-line.d1 { animation-delay:.3s; }
.reveal-line.d2 { animation-delay:.55s; }
.reveal-line.d3 { animation-delay:.8s; }

.hero-tagline {
  font-family:var(--font-mono);
  font-size:1rem; color:var(--red);
  margin-bottom:20px; min-height:1.5em;
  letter-spacing:.03em;
}
.hero-tagline::after {
  content:'|'; animation:typeCursor 1s infinite; margin-left:2px;
}

.hero-sub {
  font-size:1.15rem; color:var(--text-muted);
  max-width:600px; margin-bottom:40px; line-height:1.7;
  animation:fadeUp .8s .85s ease forwards; opacity:0;
}
.hero-sub strong { color:var(--text); }

.hero-actions {
  display:flex; gap:16px; flex-wrap:wrap; justify-content: center;
  animation:fadeUp .8s 1.05s ease forwards; opacity:0;
  margin-bottom:40px;
}

.hero-contact-pills {
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:22px;
}
.contact-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 16px;
  font-size:.85rem; font-weight:500; color:var(--text-muted);
  transition:var(--tr);
}
.contact-pill:hover { border-color:var(--red); color:var(--red); }
.contact-pill i { color:var(--red); }

/* ── AI Orb ──────────────────────────────────────────────── */
.hero-orb-wrap {
  flex-shrink:0; position:relative;
  width:320px; height:320px;
  display:flex; align-items:center; justify-content:center;
}
.orb-core {
  position:absolute; inset:60px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--orange) 0%, var(--red) 40%, #220008 80%);
  box-shadow:0 0 60px 16px rgba(50,50,50,0.12), 0 0 120px 40px rgba(50,50,50,0.08);
  animation:orbPulse 3.5s ease-in-out infinite;
  z-index:2;
}
.orb-scanner {
  position:absolute; inset:60px; border-radius:50%;
  z-index:3; overflow:hidden;
}
.orb-scanner::after {
  content:''; position:absolute; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
  animation:scanLine 2.5s linear infinite;
  top:0;
}
.orb-ring {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(50,50,50,0.12);
}
.or1 { inset:20px; animation:spinOrbit 7s  linear infinite; }
.or2 { inset:5px;  animation:spinOrbit 11s linear infinite reverse; border-color:rgba(50,50,50,0.08); }
.or3 { inset:-10px;animation:spinOrbit 16s linear infinite; border-color:rgba(50,50,50,0.06); }

.orb-data-point {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--red); box-shadow:var(--red-glow);
  z-index:4;
}
.dp1 { top:15%; left:50%; animation:dataPointPulse 2s ease-in-out infinite; }
.dp2 { bottom:20%; right:20%; animation:dataPointPulse 2.5s ease-in-out infinite; animation-delay:.5s; }
.dp3 { top:45%; left:10%; animation:dataPointPulse 3s ease-in-out infinite; animation-delay:1s; }
.dp4 { bottom:15%; left:45%; animation:dataPointPulse 2.2s ease-in-out infinite; animation-delay:.8s; }

.orb-label {
  position:absolute; bottom:-36px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em;
  color:var(--red); text-transform:uppercase; white-space:nowrap;
  opacity:.7;
}

/* Scroll hint */
.scroll-hint {
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-muted);
}
.scroll-line {
  width:1px; height:52px;
  background:linear-gradient(to bottom,var(--red),transparent);
  animation:barFill 2.2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────
   ABOUT SECTION
   ───────────────────────────────────────────────────────── */
.about-section { background: var(--bg2); }

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

.profile-card {
  padding:36px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative; overflow:visible;
}
.profile-glow {
  position:absolute; top:-60px; left:50%; transform:translateX(-50%);
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(50,50,50,0.12) 0%, transparent 70%);
  pointer-events:none;
}

/* ── Animated photo wrapper ─────────────────────────── */
.profile-photo-wrap {
  position:relative; width:180px; height:180px;
  margin:0 auto 0;
}

/* Hexagonal/circle clip photo */
.photo-hex-clip {
  position:absolute; inset:10px; border-radius:50%; overflow:hidden;
  border:1px solid var(--border);
  box-shadow: none;
  z-index: 5;
}
.profile-img {
  width:100%; height:100%; object-fit:cover; 
  object-position:center 35%;
  transition:transform 0.6s ease;
}

.profile-img:hover { transform:scale(1.03); }

/* Rotating rings around photo */
.pring { display: none; }
.hud-corner { display: none; }

/* ── Zero-G Physics Canvas (Containment Chamber) ─────────── */
.zerog-canvas {
  width: 100%; height: 110px;
  display: block; margin: 12px 0 8px;
  border-radius: var(--radius-md);
  background: transparent;
  position: relative;
  z-index: 1;
}

.profile-name { font-family:var(--font-h); font-size:1.35rem; font-weight:700; }
.profile-role { font-size:.82rem; color:var(--red); font-weight:600; }
.profile-loc  { font-size:.8rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; justify-content:center; }
.profile-socials { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.soc-btn {
  width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--text-muted); transition:var(--tr);
}
.soc-btn:hover { color:var(--red); border-color:var(--red); box-shadow:var(--red-glow); transform:translateY(-2px); }


.about-right { display:flex; flex-direction:column; gap:24px; }
.about-bio { padding:32px; }
.about-bio p { color:var(--text-dim); line-height:1.85; font-size:.97rem; }
.about-bio strong { color:var(--red); }
.about-bio em { color:var(--orange); font-style:normal; }

.about-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stat-box { padding:24px 16px; text-align:center; }
.stat-n { display:block; font-family:var(--font-h); font-size:2rem; font-weight:800; margin-bottom:4px; }
.stat-l { font-size:.72rem; color:var(--text-muted); font-weight:600; letter-spacing:.06em; }

/* ─────────────────────────────────────────────────────────
   SKILLS SECTION
   ───────────────────────────────────────────────────────── */
.skills-section { background: var(--bg); }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:32px; }

.skill-cat { padding:32px 26px; }
.skill-ico {
  font-size:2.2rem; margin-bottom:16px; display:block;
}
.skill-cat h3 { font-family:var(--font-h); font-size:1rem; font-weight:700; margin-bottom:18px; }
.skill-pills  { display:flex; flex-wrap:wrap; gap:8px; }
.sp {
  background:var(--red-dim); border:1px solid rgba(50,50,50,0.12);
  border-radius:6px; padding:5px 13px;
  font-size:.75rem; font-weight:600; color:var(--red);
  transition:var(--tr);
}
.sp:hover { background:rgba(50,50,50,0.12); box-shadow:0 0 10px rgba(50,50,50,0.12); }

/* Skill bars */
.skill-bars-wrap { padding:36px 40px; }
.skill-bars { display:flex; flex-direction:column; gap:20px; }
.sb-row { display:grid; grid-template-columns:200px 1fr 44px; align-items:center; gap:18px; }
.sb-row span:first-child { font-size:.85rem; font-weight:500; color:var(--text-dim); }
.sb-track {
  height:6px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden;
}
.sb-fill {
  height:100%; width:0;
  background:linear-gradient(90deg,var(--red),var(--orange));
  border-radius:4px;
  transition:width 1.4s cubic-bezier(.4,0,.2,1);
}
.sb-pct { font-family:var(--font-mono); font-size:.78rem; color:var(--red); text-align:right; }

/* ─────────────────────────────────────────────────────────
   EXPERIENCE (TIMELINE)
   ───────────────────────────────────────────────────────── */
.exp-section { background: var(--bg2); }
.timeline { display:flex; flex-direction:column; gap:0; }

.tl-item { display:grid; grid-template-columns:28px 3px 1fr; gap:0 22px; }
.tl-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--red); margin-top:28px; grid-column:1;
  position:relative; left:7px;
}
.tl-dot.pulse-red    { background: var(--red); }
.tl-dot.pulse-orange { background: var(--red); }
.tl-dot.pulse-pink   { background: var(--red); }

.tl-line {
  grid-column:2; background:rgba(50,50,50,0.15);
  width:2px; margin-top:32px; border-radius:2px;
}
.tl-line.last { background:linear-gradient(to bottom,rgba(50,50,50,0.15),transparent); }

.tl-card {
  grid-column:3; padding:28px 32px; margin-bottom:28px;
}
.tl-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:16px; flex-wrap:wrap;
}
.tl-role    { font-family:var(--font-h); font-size:1.08rem; font-weight:700; margin-bottom:4px; }
.tl-company { font-size:.85rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }
.tl-badge   {
  flex-shrink:0; background:var(--red-dim); border:1px solid rgba(50,50,50,0.12);
  border-radius:var(--radius-sm); padding:5px 14px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600; color:var(--red);
  white-space:nowrap;
}
.tl-list {
  display:flex; flex-direction:column; gap:8px; margin-bottom:18px;
}
.tl-list li {
  font-size:.88rem; color:var(--text-dim); line-height:1.7; padding-left:16px; position:relative;
}
.tl-list li::before {
  content:'▸'; position:absolute; left:0; color:var(--red); font-size:.7rem; top:2px;
}
.tl-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tl-tags span {
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:6px; padding:4px 12px;
  font-size:.73rem; font-weight:600; color:var(--text-muted);
}

/* ─────────────────────────────────────────────────────────
   PROJECTS
   ───────────────────────────────────────────────────────── */
.proj-section { background: var(--bg); }
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

.proj-card { padding:28px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; }
.proj-card.featured {
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(50,50,50,0.12) 0%,rgba(50,50,50,0.08) 50%,rgba(255,255,255,0.025) 100%);
  border-color:rgba(50,50,50,0.12);
}
.proj-glow-overlay {
  position:absolute; top:-30px; right:-30px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(50,50,50,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.featured-badge {
  position:absolute; top:18px; right:20px;
  display:flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,rgba(50,50,50,0.12),rgba(50,50,50,0.08));
  border:1px solid rgba(50,50,50,0.12); border-radius:var(--radius-sm);
  padding:5px 14px; font-size:.72rem; font-weight:700; color:var(--red);
}

.proj-head { display:flex; align-items:center; gap:14px; }
.proj-ico {
  flex-shrink:0; width:50px; height:50px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.red-glow.proj-ico    { background:var(--red-dim);    box-shadow:var(--red-glow); }
.orange-glow.proj-ico { background:var(--orange-dim); box-shadow:var(--orange-glow); }
.pink-glow.proj-ico   { background:var(--pink-dim);   box-shadow:var(--pink-glow); }
.amber-glow.proj-ico  { background:var(--amber-dim);  box-shadow:var(--amber-glow); }

.proj-title { font-family:var(--font-h); font-size:1.1rem; font-weight:700; margin-bottom:2px; }
.proj-sub   { font-size:.75rem; color:var(--text-muted); font-weight:500; }
.proj-desc  { font-size:.88rem; color:var(--text-dim); line-height:1.75; flex:1; }
.proj-desc strong { color:var(--text); }

.proj-tech { display:flex; flex-wrap:wrap; gap:7px; }
.proj-tech span {
  background:var(--red-dim); border:1px solid rgba(50,50,50,0.12);
  border-radius:6px; padding:4px 11px;
  font-size:.73rem; font-weight:700; color:var(--red);
}
.proj-links { display:flex; gap:10px; margin-top:auto; padding-top:4px; }

/* ─────────────────────────────────────────────────────────
   EDUCATION
   ───────────────────────────────────────────────────────── */
.edu-section { background: var(--bg2); }
.edu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.edu-card { padding:30px 26px; display:flex; flex-direction:column; gap:12px; }
.edu-ico { font-size:2rem; display:block; }
.red-glow.edu-ico    { color:var(--red);    filter:drop-shadow(0 0 10px var(--red)); }
.orange-glow.edu-ico { color:var(--orange); filter:drop-shadow(0 0 10px var(--orange)); }
.pink-glow.edu-ico   { color:var(--pink);   filter:drop-shadow(0 0 10px var(--pink)); }

.edu-card h3  { font-family:var(--font-h); font-size:1.02rem; font-weight:700; }
.edu-inst     { font-size:.88rem; color:var(--red); font-weight:600; }
.edu-spec     { font-size:.8rem; color:var(--text-muted); }
.edu-date     {
  display:inline-block; background:var(--red-dim);
  border:1px solid rgba(50,50,50,0.12); border-radius:var(--radius-sm);
  padding:4px 14px; font-family:var(--font-mono); font-size:.72rem; color:var(--red);
  margin-top:4px; width:fit-content;
}

/* ─────────────────────────────────────────────────────────
   CERTIFICATIONS
   ───────────────────────────────────────────────────────── */
.cert-section { background: var(--bg); }
.cert-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; flex-wrap:wrap; }
.cert-card {
  padding:24px 20px; display:flex; align-items:center; gap:16px;
  grid-template-columns: unset;
}
.cert-badge {
  flex-shrink:0; font-size:1.8rem; width:48px; height:48px;
  border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
}
.red-glow.cert-badge    { background:var(--red-dim); }
.orange-glow.cert-badge { background:var(--orange-dim); }
.pink-glow.cert-badge   { background:var(--pink-dim); }
.amber-glow.cert-badge  { background:var(--amber-dim); }

.cert-card h3 { font-size:.88rem; font-weight:700; margin-bottom:2px; }
.cert-card p  { font-size:.73rem; color:var(--text-muted); }

/* ─────────────────────────────────────────────────────────
   CONTACT
   ───────────────────────────────────────────────────────── */
.contact-section { background: var(--bg2); }
.contact-lead { font-size:1rem; color:var(--text-dim); margin-top:-38px; margin-bottom:52px; max-width:500px; }
.contact-wrap { display:grid; grid-template-columns:320px 1fr; gap:32px; align-items:start; }

.contact-info-col { display:flex; flex-direction:column; gap:14px; }
.contact-info-card { display:flex; align-items:center; gap:16px; padding:18px 20px; }
.ci-icon {
  flex-shrink:0; width:44px; height:44px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.red-glow.ci-icon    { background:var(--red-dim); }
.orange-glow.ci-icon { background:var(--orange-dim); }
.pink-glow.ci-icon   { background:var(--pink-dim); }
.amber-glow.ci-icon  { background:var(--amber-dim); }

.ci-label { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.ci-val   { font-size:.88rem; font-weight:500; color:var(--text); transition:color var(--tr); }
.ci-val:hover { color:var(--red); }

/* Contact form */
.contact-form { padding:40px 36px; display:flex; flex-direction:column; gap:20px; }
.fg { display:flex; flex-direction:column; gap:7px; }
.fg label {
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
}
.fg input, .fg textarea {
  background:rgba(255,255,255,0.035); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 17px;
  font-size:.93rem; color:var(--text); font-family:var(--font-b);
  outline:none; resize:vertical;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.fg input::placeholder, .fg textarea::placeholder { color:var(--text-muted); }
.fg input:focus, .fg textarea:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(50,50,50,0.12);
}

.form-submit { justify-content:center; position:relative; margin-top:6px; }
.btn-loader {
  display:none; width:16px; height:16px;
  border:2px solid rgba(255,255,255,0.3); border-top-color:var(--text);
  border-radius:50%; margin-left:8px;
}
.btn-loader.spinning { display:inline-block; animation:spin .7s linear infinite; }

.form-success {
  display:none; align-items:center; gap:10px;
  color:var(--amber); font-weight:600; font-size:.9rem;
  padding:12px 16px; background:rgba(255,179,71,0.12);
  border:1px solid rgba(255,179,71,0.25); border-radius:var(--radius-sm);
}
.form-success.show { display:flex; animation:fadeUp .5s ease forwards; }

/* ─────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────── */
.footer {
  position:relative; z-index:1;
  border-top:1px solid rgba(50,50,50,0.12);
  padding:34px 44px;
  background:rgba(8,0,6,0.9);
}
.footer-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.f-logo  { font-family:var(--font-h); font-size:1.5rem; font-weight:800; }
.f-copy  { font-size:.78rem; color:var(--text-muted); }
.f-socials { display:flex; gap:16px; font-size:1.2rem; color:var(--text-muted); }
.f-socials a { transition:color var(--tr); }
.f-socials a:hover { color:var(--red); }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .cert-grid   { grid-template-columns:repeat(3,1fr); }
  .proj-grid   { grid-template-columns:repeat(2,1fr); }
  .proj-card.featured { grid-column:1/-1; }
}
@media (max-width:900px) {
  .hero { flex-direction:column; padding:calc(var(--nav-h)+40px) 40px 0; gap:48px; }
  .about-grid { grid-template-columns:1fr; }
  .about-stats-row { grid-template-columns:repeat(2,1fr); }
  .edu-grid { grid-template-columns:repeat(2,1fr); }
  .contact-wrap { grid-template-columns:1fr; }
  .ai-float-chip { display:none; }
}
@media (max-width:660px) {
  .navbar { padding:0 20px; }
  .nav-links, .btn-nav-resume { display:none; }
  .hamburger { display:flex; }
  .hero { padding:calc(var(--nav-h)+30px) 20px 0; }
  .section { padding:80px 0; }
  .container { padding:0 18px; }
  .proj-grid   { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:1fr; }
  .edu-grid    { grid-template-columns:1fr; }
  .cert-grid   { grid-template-columns:repeat(2,1fr); }
  .about-stats-row { grid-template-columns:repeat(2,1fr); }
  .tl-item { grid-template-columns:20px 2px 1fr; gap:0 14px; }
  .sb-row { grid-template-columns:140px 1fr 40px; }
  .hero-title { font-size:clamp(2.5rem,10vw,3.5rem); }
  .hero-orb-wrap { width:220px; height:220px; }
  .footer { background: var(--bg); border-top: 1px solid var(--border); padding: 40px 0; }
  .footer-inner { flex-direction:column; align-items:center; text-align:center; }
}

/* ─────────────────────────────────────────────────────────
   CERTIFICATIONS CAROUSEL
   ───────────────────────────────────────────────────────── */
.cert-intro {
  font-size:.98rem; color:var(--text-dim);
  margin-top:-38px; margin-bottom:48px;
}

.cert-carousel-wrap {
  position: relative;
  padding: 0 64px;
}

.cert-track-outer {
  overflow: hidden;
  border-radius: var(--radius);
}

.cert-track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

.cert-slide {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 0;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr), background var(--tr);
}
.cert-slide:hover {
  transform: translateY(-4px);
  border-color: var(--border-h);
  box-shadow: 0 12px 30px rgba(50, 50, 50, 0.08);
}

.cs-glow { display: none; }

/* Provider Logo */
.cs-provider-logo {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.cs-provider-img {
  height: 22px;
  width: auto;
  object-fit: contain;
  opacity: 0.75;
  filter: sepia(0.3);
  transition: opacity var(--tr);
}
.cert-slide:hover .cs-provider-img {
  opacity: 1;
}

.cs-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--border);
}

.cs-body { flex: 1; display:flex; flex-direction:column; }

.cs-tag {
  display: inline-block;
  background: var(--red-dim);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 12px;
  font-family: var(--font-b);
  font-size: .7rem; font-weight: 600;
  color: var(--text); letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px; width:fit-content;
}

.cs-body h3 {
  font-family: var(--font-h);
  font-size: .93rem; font-weight: 700;
  line-height: 1.35; margin-bottom: 10px;
  color: var(--text);
}

.cs-issuer, .cs-date {
  font-size: .74rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 3px;
}
.cs-issuer i, .cs-date i { color: var(--red); }

.cs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red);
  color: #DDD0C8; font-size: .85rem; font-weight: 600;
  padding: 11px 22px; border-radius: 100px;
  transition: var(--tr); align-self: flex-start;
  box-shadow: none; margin-top: auto; font-family: var(--font-b);
  letter-spacing: 0.03em;
}
.cs-btn:hover {
  transform: translateY(-2px);
  background: var(--red-mid);
  box-shadow: 0 6px 20px rgba(50,50,50,0.18);
}

.cert-nav {
  position: absolute; top: 50%; z-index: 10;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(50,50,50,0.12);
  border: 1px solid rgba(50,50,50,0.12);
  color: var(--red); font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: var(--tr);
}
.cert-nav:hover {
  background: var(--red); color: #fff;
  box-shadow: var(--red-glow);
}
.cert-prev { left: 0; }
.cert-next { right: 0; }
.cert-nav:disabled { opacity:0.3; cursor:default; }

.cert-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 28px;
}
.cert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(50,50,50,0.12);
  border: 1px solid rgba(50,50,50,0.12);
  cursor: pointer; transition: var(--tr);
}
.cert-dot.active {
  background: var(--red);
  box-shadow: 0 0 10px rgba(50,50,50,0.12);
  width: 22px; border-radius: 4px;
}

@media (max-width:900px) {
  .cert-slide { flex:0 0 calc(50% - 12px); }
  .cert-carousel-wrap { padding:0 52px; }
}
@media (max-width:600px) {
  .cert-slide { flex:0 0 100%; }
  .cert-carousel-wrap { padding:0 44px; }
}

/* ─────────────────────────────────────────────────────────
   RETRO OVERRIDES (HARD ENFORCEMENT)
   ───────────────────────────────────────────────────────── */
* {
  border-radius: var(--radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.glass-card, .tl-card, .proj-card, .edu-card, .cert-slide, .contact-info-card, .contact-form, .about-bio {
  border: 1px solid var(--border) !important;
  box-shadow: 4px 4px 0 var(--border) !important;
  background: var(--surface) !important;
}
.glass-card:hover, .tl-card:hover, .proj-card:hover, .edu-card:hover, .cert-slide:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--border-h) !important;
  border-color: var(--amber) !important;
}

.btn-primary, .btn-ghost {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  text-transform: uppercase !important;
  box-shadow: 2px 2px 0 var(--border) !important;
  font-family: var(--font-mono) !important;
}
.btn-primary:hover, .btn-ghost:hover {
  background: var(--text) !important;
  color: var(--surface) !important;
  transform: translate(2px, 2px) !important;
  box-shadow: none !important;
}

.hero-orb-wrap { display: none !important; }
.ai-float-chip { animation: none !important; border: 1px solid var(--text) !important; }

.tl-dot { background: var(--text) !important; animation: none !important; box-shadow: none !important; width: 12px !important; height: 12px !important; }
.tl-line { background: var(--text-muted) !important; }
.tl-badge { border-radius: var(--radius-sm) !important; border-color: var(--border-h); color: var(--text-muted); }

/* Filter profile image to look like a green-screen terminal */
.profile-img {
  /* Natural color image */
}
.photo-hex-clip {
  border: 2px solid var(--text) !important;
  box-shadow: 4px 4px 0 var(--text) !important;
}
.pring { display: none !important; }

/* Form inputs */
.fg input, .fg textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
  color: var(--text) !important;
}
.fg input:focus, .fg textarea:focus {
  border-color: var(--amber) !important;
  box-shadow: none !important;
}

/* Clean minimalist section-title — no prompt prefix */
.section-title::before { content: ""; }