/* ─── RESET & BASE ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0a0f0a;
  --bg-2:       #0d130d;
  --surface:    #111811;
  --text:       #c8d8c8;
  --text-dim:   #5a7a5a;
  --text-muted: #2a3d2a;
  --accent:     #22c55e;
  --accent-2:   #4ade80;
  --accent-dim: rgba(34,197,94,0.15);
  --border:     rgba(34,197,94,0.14);
  --border-dim: rgba(255,255,255,0.055);
  --white:      #eaf5ea;
  --nav-h:      68px;
  --ease:       cubic-bezier(0.16,1,0.3,1);
  /* neumorphic shadows on dark bg */
  --neu-shadow: 6px 6px 14px rgba(0,0,0,0.5), -4px -4px 10px rgba(34,197,94,0.04);
  --neu-inset:  inset 3px 3px 8px rgba(0,0,0,0.4), inset -2px -2px 6px rgba(34,197,94,0.06);
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.loaded { opacity: 1; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::selection { background: rgba(34,197,94,0.25); color: var(--white); }

/* ─── PRELOADER ─────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.preloader.done { opacity: 0; pointer-events: none; transform: translateY(-20px); }
.pre-inner { text-align: center; }
.pre-logo {
  font-family: 'JetBrains Mono', monospace; font-size: 3.5rem; font-weight: 700;
  color: var(--accent); margin-bottom: 2rem; letter-spacing: -0.04em;
  text-shadow: 0 0 40px rgba(34,197,94,0.4);
}
.pre-bar {
  width: 200px; height: 2px; background: rgba(34,197,94,0.1);
  margin: 0 auto 1rem; border-radius: 2px; overflow: hidden;
}
.pre-fill { height: 100%; background: var(--accent); width: 0; transition: width 0.1s linear; }
.pre-pct { font-family:'JetBrains Mono',monospace; font-size: 0.72rem; color: var(--text-dim); letter-spacing: 0.1em; }

/* ─── CURSOR ─────────────────────────────────────── */
.cursor {
  position: fixed; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s;
  mix-blend-mode: exclusion;
}
.cursor-ring {
  position: fixed; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(34,197,94,0.45); pointer-events: none; z-index: 9997;
  transform: translate(-50%,-50%);
  transition: transform 0.4s var(--ease), width 0.4s var(--ease), height 0.4s var(--ease);
}
.cursor.big   { width: 6px; height: 6px; }
.cursor-ring.big { width: 58px; height: 58px; border-color: var(--accent); }
.cursor.clicked { transform: translate(-50%,-50%) scale(0.7); }

/* ─── NAV ─────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); display: flex; align-items: center;
  justify-content: space-between; padding: 0 3rem;
  transition: background 0.5s, backdrop-filter 0.5s;
}
.nav.scrolled { background: rgba(10,15,10,0.92); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border-dim); }
.nav-logo {
  font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--accent); text-decoration: none; letter-spacing: 0.01em;
  text-shadow: 0 0 20px rgba(34,197,94,0.4); white-space: nowrap;
}
.nav-links { display: flex; list-style: none; gap: 2.5rem; font-size: 0.7rem; letter-spacing: 0.12em; font-weight: 500; }
.nav-links a { color: var(--text-dim); text-decoration: none; transition: color 0.3s; position: relative; padding: 4px 0; }
.nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--accent); transition:width 0.35s var(--ease); }
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { width: 100%; }
.hamburger { display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:none; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); transition:transform 0.4s var(--ease), opacity 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { transform: translateY(-7.5px) rotate(-45deg); }

.mob-menu { position:fixed; inset:0; z-index:900; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; opacity:0; pointer-events:none; transition:opacity 0.4s var(--ease); }
.mob-menu.open { opacity:1; pointer-events:all; }
.mob-item { font-size:2.5rem; font-weight:700; letter-spacing:0.04em; color:var(--text); text-decoration:none; transition:color 0.3s; }
.mob-item:hover { color: var(--accent); }

/* ─── CONTAINER / SECTION ────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }
.section { padding: 8rem 0; }
.sec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; letter-spacing: 0.22em; color: var(--text-dim);
  font-weight: 500; margin-bottom: 3rem; display:flex; align-items:center; gap:1rem;
}
.sec-label::after { content:''; flex:1; height:1px; background:var(--border-dim); max-width:60px; }
.link-arrow { font-size:0.82rem; letter-spacing:0.04em; color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:0.4rem; border-bottom:1px solid var(--border-dim); padding-bottom:2px; transition:color 0.3s, border-color 0.3s; }
.link-arrow:hover { color:var(--accent); border-color:var(--accent); }

/* ─── HERO ───────────────────────────────────────── */
.hero {
  min-height: 100vh; display:flex; flex-direction:column;
  justify-content:center; padding: var(--nav-h) 3rem 6rem;
  position:relative; overflow:hidden;
}
.hero-circle {
  position: absolute;
  width: 520px; height: 520px; border-radius: 50%;
  background: #22c55e;
  opacity: 0.09;
  pointer-events: none; z-index: 0;
  transition: transform 0.15s linear;
  top: 8%; left: 3%;
}
/* ── Hero two-column layout ── */
.hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 3rem;
}
.hero-left { flex: 1; min-width: 0; }
.hero-right {
  width: 420px; height: 420px; flex-shrink: 0;
  position: relative; opacity: 0;
  animation: fadeCanvasIn 1.2s var(--ease) 1.4s forwards;
}
@keyframes fadeCanvasIn { to { opacity: 1; } }
#heroCanvas { width: 100%; height: 100%; display: block; }

.hero-eyebrow { font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.1em; color:rgba(34,197,94,0.6); margin-bottom:1.5rem; }
.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(3.8rem, 9.5vw, 9rem); font-weight: 700;
  line-height: 0.88; letter-spacing: -0.04em; color: var(--white);
  display: flex; flex-direction: column; cursor: default;
}
.ht-line { display:block; overflow:hidden; }
.stroke-text { -webkit-text-stroke: 2px var(--accent); color: transparent !important; }
.accent-text  { color: var(--accent) !important; text-shadow: 0 0 60px rgba(34,197,94,0.35); }

.hero-bottom { position:absolute; bottom:2rem; left:3rem; right:3rem; z-index:1; display:flex; justify-content:space-between; align-items:center; }
.hero-available { display:flex; align-items:center; gap:0.6rem; font-family:'JetBrains Mono',monospace; font-size:0.74rem; color:var(--text-dim); letter-spacing:0.08em; }
.avail-dot { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 8px #4ade80} 50%{box-shadow:0 0 20px #4ade80, 0 0 40px rgba(74,222,128,0.3)} }
.hero-scroll-hint { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.12em; color:var(--text-dim); }

/* ─── MARQUEE ────────────────────────────────────── */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--border-dim); border-bottom:1px solid var(--border-dim); padding:1rem 0; background:var(--bg-2); }
.marquee-track { display:flex; gap:2rem; white-space:nowrap; animation:marqueeScroll 28s linear infinite; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.16em; color:var(--text-dim); }
.marquee-track .sep { color:var(--accent); }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ─── NEUMORPHIC CARD ────────────────────────────── */
.neu-card {
  background: var(--surface);
  border: 1px solid var(--border-dim);
  border-radius: 12px;
  box-shadow: var(--neu-shadow);
  transition: box-shadow 0.4s var(--ease), border-color 0.4s, transform 0.35s var(--ease);
}
.neu-card:hover {
  box-shadow: 8px 8px 20px rgba(0,0,0,0.6), -4px -4px 14px rgba(34,197,94,0.07), 0 0 0 1px rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.2);
  transform: translateY(-3px);
}

/* ─── ABOUT ──────────────────────────────────────── */
.about { background: var(--bg-2); }
.about-grid { display:grid; grid-template-columns:360px 1fr; gap:5rem; align-items:start; }

.photo-box {
  position: relative; border-radius: 16px; padding: 2.5rem;
  background: var(--surface); box-shadow: var(--neu-shadow);
  border: 1px solid var(--border-dim); display:flex; justify-content:center;
}
.about-photo-img {
  width: 100%; max-width: 240px; height: 300px;
  object-fit: cover; object-position: top center;
  border-radius: 12px; display: block; margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--border-dim);
  filter: grayscale(10%) contrast(1.05);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
.about-photo-img:hover { filter: none; transform: scale(1.02); }
.photo-badge {
  position:absolute; bottom:-14px; right:16px;
  background: var(--accent); border-radius:8px; padding:0.55rem 1rem;
  display:flex; flex-direction:column; gap:2px;
  box-shadow: 0 4px 20px rgba(34,197,94,0.35);
}
.badge-mono { font-family:'JetBrains Mono',monospace; font-size:0.8rem; font-weight:700; color:#0a0f0a; }
.badge-label { font-size:0.65rem; color:rgba(10,15,10,0.65); letter-spacing:0.06em; }

.about-stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; margin-top:2rem; }
.asc { padding:1rem 0.8rem; border-radius:10px; text-align:center; }
.asc-num { font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:700; color:var(--accent); display:block; line-height:1; margin-bottom:0.35rem; }
.asc-lbl { font-size:0.68rem; color:var(--text-dim); line-height:1.4; }

.about-headline { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:600; color:var(--white); line-height:1.3; letter-spacing:-0.03em; margin-bottom:1.75rem; }
.about-headline em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.about-p { font-size:0.9rem; color:var(--text-dim); line-height:1.85; margin-bottom:1rem; }
.about-p strong { color:var(--accent); font-weight:600; }
.about-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin:1.5rem 0; }
.about-tags span { font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:4px 11px; border-radius:50px; border:1px solid var(--border); color:var(--accent); letter-spacing:0.04em; }
.about-actions-row { display:flex; gap:2rem; flex-wrap:wrap; margin-top:0.5rem; }

/* ─── SERVICES ───────────────────────────────────── */
.services { background: var(--bg); }
.services-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:600; color:var(--white); letter-spacing:-0.04em; margin-bottom:3rem; }
.services-list { border-top:1px solid var(--border-dim); }
.service-row { display:flex; align-items:center; gap:2rem; padding:2rem 0; border-bottom:1px solid var(--border-dim); transition:background 0.3s; border-radius:4px; }
.service-row:hover { background:rgba(34,197,94,0.025); }
.sr-icon { width:54px; height:54px; border-radius:12px; flex-shrink:0; background:var(--accent-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); transition:transform 0.3s var(--ease), box-shadow 0.3s; box-shadow:var(--neu-shadow); }
.service-row:hover .sr-icon { transform:scale(1.07); box-shadow:0 0 20px rgba(34,197,94,0.2); }
.sr-body h3 { font-size:1.05rem; font-weight:600; color:var(--white); margin-bottom:0.3rem; }
.sr-body p  { font-size:0.875rem; color:var(--text-dim); line-height:1.7; }

/* ─── SKILLS MARQUEE ─────────────────────────────── */
.skills-marquee { overflow:hidden; padding:1rem 0; background:rgba(34,197,94,0.04); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.skills-track { display:flex; gap:1.5rem; white-space:nowrap; animation:marqueeScroll 32s linear infinite reverse; font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; color:var(--text-dim); }
.skills-track span:not(:nth-child(2n)) { color:rgba(74,222,128,0.7); }

/* ─── PROJECTS ───────────────────────────────────── */
.work { background: var(--bg-2); }
.work-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:600; color:var(--white); letter-spacing:-0.04em; margin-bottom:4rem; }
.work-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }

.project-block { margin-bottom: 6rem; }
.project-block:last-child { margin-bottom: 0; }
.proj-img {
  width:100%; height:480px; position:relative;
  overflow:hidden; border-radius:8px; margin-bottom:2rem;
  background: var(--surface);
  box-shadow: var(--neu-shadow);
  border: 1px solid var(--border-dim);
  display:flex; align-items:center; justify-content:center;
}
.proj-label-float { position:absolute; top:1.5rem; left:1.5rem; z-index:4; font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.18em; color:rgba(34,197,94,0.6); background:rgba(0,0,0,0.55); padding:4px 10px; border-radius:4px; border:1px solid rgba(34,197,94,0.15); backdrop-filter:blur(4px); }
.proj-year-badge { position:absolute; top:1.5rem; right:1.5rem; z-index:4; font-family:'Playfair Display',serif; font-size:0.9rem; color:rgba(255,255,255,0.25); }

/* ── Neumorphic Art Base ── */
.neu-art { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }

/* Kernel Art */
.neu-kernel { flex-direction:row; gap:3rem; padding:2rem; }
.na-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.na-cell { width:28px; height:28px; border-radius:6px; background:rgba(34,197,94,0.04); box-shadow:var(--neu-inset); transition:background 0.3s; }
.na-cell.active { background:rgba(34,197,94,0.18); box-shadow:0 0 8px rgba(34,197,94,0.2), var(--neu-inset); }
.na-center-art { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.na-hex { color:var(--accent); opacity:0.7; filter:drop-shadow(0 0 8px rgba(34,197,94,0.3)); }
.na-code-lines { display:flex; flex-direction:column; gap:0.4rem; }
.na-code-lines span { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:rgba(34,197,94,0.45); letter-spacing:0.04em; }

/* ML Art */
.neu-ml { flex-direction:row; gap:4rem; padding:2rem; }
.na-nn { display:flex; gap:2.5rem; align-items:center; }
.na-nn-layer { display:flex; flex-direction:column; gap:10px; }
.na-node { width:20px; height:20px; border-radius:50%; background:rgba(34,197,94,0.06); box-shadow:var(--neu-inset); border:1px solid rgba(34,197,94,0.1); }
.na-node.active { background:rgba(34,197,94,0.22); box-shadow:0 0 10px rgba(34,197,94,0.25); border-color:rgba(34,197,94,0.4); }
.na-stats { display:flex; flex-direction:column; gap:0.75rem; }
.na-stat-row { display:flex; align-items:center; gap:0.75rem; font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-dim); }
.na-bar-label { width:36px; }
.na-bar { width:120px; height:4px; background:rgba(34,197,94,0.08); border-radius:4px; box-shadow:var(--neu-inset); overflow:hidden; }
.na-bar-fill { height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:4px; }

/* CHIP-8 Art */
.neu-chip8 { flex-direction:row; gap:3rem; padding:2rem; align-items:center; }
.na-screen { background:rgba(0,0,0,0.5); border:1px solid rgba(34,197,94,0.2); border-radius:4px; padding:0.5rem; box-shadow:var(--neu-inset); }
.na-pixel-grid { display:grid; grid-template-columns:repeat(16,8px); gap:1px; }
.na-pixel { width:8px; height:8px; border-radius:1px; }
.na-pixel.on  { background:var(--accent); box-shadow:0 0 3px rgba(34,197,94,0.5); }
.na-pixel.off { background:rgba(34,197,94,0.04); }
.na-chip-info { display:flex; flex-direction:column; gap:0.4rem; }
.na-reg { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-muted); }
.na-reg span { color:var(--accent); }
.na-keys { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:0.5rem; }
.na-keys span { width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--text-dim); background:var(--surface); border-radius:4px; box-shadow:var(--neu-shadow); border:1px solid var(--border-dim); cursor:none; }

/* Scanner Art */
.neu-scanner { flex-direction:row; gap:4rem; padding:2rem; }
.na-scan-circle { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.na-scan-ring { position:absolute; border-radius:50%; border:1px solid rgba(34,197,94,0.2); animation:scanPulse 2s ease-in-out infinite; }
.na-scan-ring.sr1 { width:100%; height:100%; animation-delay:0s; }
.na-scan-ring.sr2 { width:70%;  height:70%;  animation-delay:0.4s; }
.na-scan-ring.sr3 { width:42%;  height:42%;  animation-delay:0.8s; }
@keyframes scanPulse { 0%,100%{opacity:0.2} 50%{opacity:0.7} }
.na-scan-beam { position:absolute; width:2px; height:50%; background:linear-gradient(to bottom, rgba(34,197,94,0.8), transparent); top:0; left:50%; transform-origin:bottom center; animation:scanBeam 3s linear infinite; }
@keyframes scanBeam { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.na-scan-center { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--accent); letter-spacing:0.1em; z-index:1; }
.na-scan-results { display:flex; flex-direction:column; gap:0.6rem; }
.na-vuln { font-family:'JetBrains Mono',monospace; font-size:0.72rem; padding:0.4rem 0.8rem; border-radius:4px; border:1px solid transparent; }
.na-vuln.high { color:#f87171; border-color:rgba(248,113,113,0.2); background:rgba(248,113,113,0.06); }
.na-vuln.med  { color:#fb923c; border-color:rgba(251,146,60,0.2);  background:rgba(251,146,60,0.06); }
.na-vuln.low  { color:var(--accent-2); border-color:var(--border); background:var(--accent-dim); }
.na-vuln.ok   { color:var(--text-dim); border-color:var(--border-dim); }

/* Fuzz Terminal Art */
.neu-fuzz { padding:2rem; justify-content:center; }
.na-fuzz-terminal { width:400px; max-width:90%; border-radius:8px; overflow:hidden; box-shadow:var(--neu-shadow); border:1px solid rgba(34,197,94,0.15); }
.na-term-bar { background:rgba(34,197,94,0.08); padding:0.5rem 0.8rem; display:flex; gap:6px; border-bottom:1px solid var(--border-dim); }
.na-term-bar span { width:10px; height:10px; border-radius:50%; background:var(--border-dim); }
.na-term-bar span:nth-child(1) { background:rgba(248,113,113,0.5); }
.na-term-bar span:nth-child(2) { background:rgba(251,191,36,0.5); }
.na-term-bar span:nth-child(3) { background:rgba(34,197,94,0.5); }
.na-term-body { background:rgba(0,0,0,0.6); padding:1.25rem; display:flex; flex-direction:column; gap:0.4rem; }
.na-tl { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-dim); }
.na-tl.accent { color:var(--accent); }
.na-tl.blink { animation:blink 1s step-end infinite; color:var(--accent); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.proj-img:hover { box-shadow: 8px 8px 28px rgba(0,0,0,0.65), -4px -4px 14px rgba(34,197,94,0.06), 0 0 0 1px rgba(34,197,94,0.12); }
.proj-info { display:grid; grid-template-columns:1fr 2fr; gap:3rem; align-items:start; }
.pi-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:1; margin-bottom:0.5rem; }
.pi-sub { font-size:0.75rem; color:var(--text-dim); letter-spacing:0.06em; font-family:'JetBrains Mono',monospace; }
.pi-desc { font-size:0.88rem; color:var(--text-dim); line-height:1.8; margin-bottom:1.25rem; }
.pi-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.5rem; }
.pi-tags span { font-family:'JetBrains Mono',monospace; font-size:0.67rem; padding:3px 10px; border-radius:50px; border:1px solid var(--border); color:var(--text-dim); }

/* ─── OSIRIS LAB ─────────────────────────────────── */
.osiris { background: var(--bg); }
.osiris-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.osiris-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:1.15; }
.osiris-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.osiris-sub { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-dim); letter-spacing:0.04em; margin-top:0.5rem; }
.osiris-link { align-self:flex-start; margin-top:0.4rem; }
.osiris-desc { font-size:0.9rem; color:var(--text-dim); line-height:1.8; max-width:700px; margin-bottom:3rem; }
.osiris-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.osiris-card { padding:1.5rem; }
.oc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.oc-tag { font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; padding:3px 8px; border-radius:50px; font-weight:600; }
.oc-tag.advanced     { background:rgba(248,113,113,0.12); color:#f87171; border:1px solid rgba(248,113,113,0.2); }
.oc-tag.intermediate { background:rgba(251,191,36,0.1);  color:#fbbf24; border:1px solid rgba(251,191,36,0.2); }
.oc-tag.beginner     { background:rgba(34,197,94,0.1);   color:var(--accent); border:1px solid var(--border); }
.oc-tag.int-adv      { background:rgba(251,146,60,0.1);  color:#fb923c; border:1px solid rgba(251,146,60,0.2); }
.oc-tag.all          { background:rgba(129,140,248,0.1); color:#818cf8; border:1px solid rgba(129,140,248,0.2); }
.oc-num { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-muted); }
.osiris-card h4 { font-size:0.95rem; font-weight:600; color:var(--white); line-height:1.45; margin-bottom:0.65rem; }
.osiris-card p  { font-size:0.8rem; color:var(--text-dim); line-height:1.7; margin-bottom:1rem; }
.oc-meta { display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:0.65rem; }
.oc-lead { color:var(--accent); }
.oc-lang { color:var(--text-muted); }

/* ─── EXPERIENCE ─────────────────────────────────── */
.experience { background: var(--bg-2); }
.exp-list { border-top:1px solid var(--border-dim); }
.exp-row { display:grid; grid-template-columns:150px 1fr; gap:2rem; padding:2.5rem 0; border-bottom:1px solid var(--border-dim); align-items:start; transition:background 0.3s; border-radius:4px; }
.exp-row:hover { background:rgba(34,197,94,0.02); }
.exp-year { font-family:'JetBrains Mono',monospace; font-size:1rem; color:var(--text-dim); font-weight:700; padding-top:3px; }
.exp-row:first-child .exp-year { color:var(--accent); }
.exp-body h3 { font-size:1.05rem; font-weight:600; color:var(--white); margin-bottom:0.25rem; }
.exp-body p { font-size:0.78rem; color:var(--text-dim); margin-bottom:0.2rem; }
.exp-detail { font-size:0.82rem; color:var(--text-muted); line-height:1.75; margin-top:0.5rem !important; }

/* ─── ACHIEVEMENTS ───────────────────────────────── */
.achievements { background: var(--bg); }
.ach-list { display:flex; flex-direction:column; }
.ach-quote {
  font-family:'Playfair Display',serif; font-size:clamp(1.3rem,2.8vw,2rem);
  font-weight:700; font-style:italic; color:var(--white); line-height:1.45;
  padding:3rem 0 3rem 2.5rem; border-bottom:1px solid var(--border-dim);
  position:relative; transition:color 0.3s;
}
.ach-quote::before { content:'"'; position:absolute; left:0; top:2.5rem; font-size:3rem; color:var(--accent); line-height:1; }
.ach-quote:first-child { padding-top:0; }
.ach-quote:first-child::before { top:0; }
.ach-quote:hover { color:var(--accent-2); }

/* ─── SKILLS GRID ────────────────────────────────── */
.skillgrid-sec { background: var(--bg-2); }
.skillgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; }
.sg-col { padding:1.75rem; border-radius:12px; box-shadow:var(--neu-shadow); background:var(--surface); border:1px solid var(--border-dim); transition:border-color 0.3s; }
.sg-col:hover { border-color:rgba(34,197,94,0.2); }
.sg-col h4 { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.14em; color:var(--accent); text-transform:uppercase; font-weight:600; margin-bottom:1.25rem; padding-bottom:0.75rem; border-bottom:1px solid var(--border); }
.sg-col ul { list-style:none; display:flex; flex-direction:column; gap:0.55rem; }
.sg-col li { font-size:0.845rem; color:var(--text-dim); line-height:1.5; padding-left:0.8rem; position:relative; }
.sg-col li::before { content:'›'; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ─── BLOG ───────────────────────────────────────── */
.blog { background: var(--bg); }
.blog-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:3rem; flex-wrap:wrap; gap:1rem; }
.blog-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,4.5vw,3.2rem); font-weight:700; color:var(--white); letter-spacing:-0.04em; }
.blog-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-bottom:2rem; }
.blog-card { padding:1.75rem; }
.bc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.bc-tag { font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; padding:3px 9px; border-radius:50px; background:var(--accent-dim); color:var(--accent); border:1px solid var(--border); }
.bc-date { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-muted); }
.bc-title { font-size:1rem; font-weight:600; color:var(--white); line-height:1.45; margin-bottom:0.75rem; }
.bc-excerpt { font-size:0.845rem; color:var(--text-dim); line-height:1.8; margin-bottom:1.25rem; }
.bc-link { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--accent); text-decoration:none; transition:opacity 0.3s; letter-spacing:0.04em; }
.bc-link:hover { opacity:0.7; }
.blog-card-cta { display:flex; align-items:center; border-style:dashed; }
.bc-cta-inner { text-align:center; }
.bc-cta-icon { font-size:2.5rem; margin-bottom:0.75rem; }
.bc-cta-inner h3 { font-size:1.1rem; font-weight:600; color:var(--white); margin-bottom:0.5rem; }
.bc-cta-inner p  { font-size:0.845rem; color:var(--text-dim); line-height:1.7; margin-bottom:1.25rem; }
.blog-note { font-size:0.8rem; color:var(--text-muted); }
.blog-note a { color:var(--text-dim); text-decoration:none; border-bottom:1px solid var(--border-dim); transition:color 0.3s; }
.blog-note a:hover { color:var(--accent); }

/* ─── CONTACT ────────────────────────────────────── */
.contact { background: var(--bg-2); }
.contact-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.2rem,5.5vw,4.5rem); font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:1.05; margin-bottom:4rem; }
.contact-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; }
.contact-left p { font-size:0.9rem; color:var(--text-dim); line-height:1.85; margin-bottom:2rem; }
.contact-links { display:flex; flex-direction:column; }
.c-link { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--border-dim); text-decoration:none; transition:background 0.3s; }
.c-link:first-child { border-top:1px solid var(--border-dim); }
.c-link:hover .cl-val { color:var(--accent); }
.cl-label { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.12em; color:var(--text-muted); }
.cl-val { font-size:0.875rem; color:var(--text); transition:color 0.3s; }
.cl-val span { color:var(--accent); }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cf-group input, .cf-group textarea { background:rgba(34,197,94,0.02); border:1px solid var(--border-dim); border-radius:6px; padding:0.9rem 1.1rem; color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:0.875rem; outline:none; resize:vertical; width:100%; transition:border-color 0.3s, box-shadow 0.3s; }
.cf-group input::placeholder, .cf-group textarea::placeholder { color:var(--text-muted); }
.cf-group input:focus, .cf-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(34,197,94,0.1); }
.btn-send { display:flex; justify-content:space-between; align-items:center; background:var(--accent); color:#0a0f0a; border:none; padding:1rem 1.6rem; border-radius:6px; font-family:'Space Grotesk',sans-serif; font-size:0.875rem; font-weight:700; cursor:none; letter-spacing:0.04em; transition:background 0.3s, transform 0.2s var(--ease), box-shadow 0.3s; }
.btn-send:hover { background:var(--accent-2); transform:translateY(-2px); box-shadow:0 8px 25px rgba(34,197,94,0.3); }
.send-arrow { font-size:1.1rem; transition:transform 0.3s var(--ease); }
.btn-send:hover .send-arrow { transform:translateX(4px); }
.form-sent { text-align:center; padding:3rem; font-family:'Playfair Display',serif; font-style:italic; font-size:1.4rem; color:var(--accent); line-height:1.6; }

/* ─── FOOTER ─────────────────────────────────────── */
.footer { background:var(--bg); padding:2.5rem 0; border-top:1px solid var(--border-dim); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-family:'JetBrains Mono',monospace; font-size:1.4rem; font-weight:700; color:var(--accent); letter-spacing:-0.02em; text-shadow:0 0 20px rgba(34,197,94,0.3); }
.footer-copy { font-size:0.775rem; color:var(--text-muted); letter-spacing:0.03em; }
.footer-socials { display:flex; gap:1.5rem; }
.footer-socials a { font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.1em; color:var(--text-dim); text-decoration:none; transition:color 0.3s; }
.footer-socials a:hover { color:var(--accent); }

/* ─── REVEAL ─────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay:var(--d, 0ms); }
.reveal.visible { opacity:1; transform:none; }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width:1024px) {
  .about-grid  { grid-template-columns:1fr; gap:3rem; }
  .about-stat-cards { grid-template-columns:repeat(3,1fr); }
  .osiris-grid { grid-template-columns:repeat(2,1fr); }
  .skillgrid   { grid-template-columns:repeat(2,1fr); }
  .blog-grid   { grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .cf-row      { grid-template-columns:1fr; }
  .hobbies-grid { grid-template-columns:repeat(2,1fr); }
  .interviews-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .container { padding:0 1.5rem; }
  .hero { padding: var(--nav-h) 1.5rem 5rem; }
  .nav { padding:0 1.5rem; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .hero-right { width: 100%; height: 260px; }
  .hero-bottom { left:1.5rem; right:1.5rem; }
  .proj-info { grid-template-columns:1fr; gap:1.5rem; }
  .exp-row   { grid-template-columns:80px 1fr; }
  .osiris-grid { grid-template-columns:1fr; }
  .neu-kernel, .neu-ml, .neu-chip8, .neu-scanner { flex-direction:column; gap:1.5rem; }
  .na-fuzz-terminal { width:100%; }
}
@media (max-width:600px) {
  .hero-circle { width:300px; height:300px; }
  .hero-title  { font-size:clamp(3rem,13vw,5rem); }
  .hero-right  { height:220px; }
  .section     { padding:5rem 0; }
  .proj-img    { height:320px; }
  .ach-quote   { font-size:1.1rem; }
  .skillgrid   { grid-template-columns:1fr; }
  .about-stat-cards { grid-template-columns:1fr; }
  .interviews-grid { grid-template-columns:1fr; }
  .hobbies-grid { grid-template-columns:1fr; }
}

/* ─── HOBBIES ────────────────────────────────────── */
.hobbies { background: var(--bg-2); }
.hobbies-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:600; color:var(--white); letter-spacing:-0.04em; margin-bottom:1rem; }
.hobbies-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.hobbies-sub { font-size:0.9rem; color:var(--text-dim); line-height:1.75; margin-bottom:3rem; max-width:600px; }
.hobbies-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.hobby-card { padding:2rem 1.75rem; }
.hobby-icon { width:48px; height:48px; border-radius:12px; background:var(--accent-dim); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:1.25rem; flex-shrink:0; }
.hobby-card h3 { font-size:1rem; font-weight:600; color:var(--white); margin-bottom:0.5rem; line-height:1.3; }
.hobby-card p { font-size:0.845rem; color:var(--text-dim); line-height:1.75; }

/* ─── INTERVIEWS ─────────────────────────────────── */
.interviews { background: var(--bg); }
.interviews-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,5vw,3.5rem); font-weight:600; color:var(--white); letter-spacing:-0.04em; margin-bottom:1rem; }
.interviews-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.interviews-sub { font-size:0.9rem; color:var(--text-dim); line-height:1.75; margin-bottom:3rem; }
.interviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.interview-card { overflow:hidden; }
.interview-label { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.14em; color:var(--accent); text-transform:uppercase; margin-bottom:0.75rem; }
.interview-thumb-wrap {
  display:block; position:relative; border-radius:8px; overflow:hidden;
  text-decoration:none; aspect-ratio:16/9;
}
.interview-thumb-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.45s var(--ease), filter 0.3s;
  filter:brightness(0.85);
}
.interview-thumb-wrap:hover img { transform:scale(1.05); filter:brightness(1); }
.interview-play-btn {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.28); transition:background 0.3s;
}
.interview-thumb-wrap:hover .interview-play-btn { background:rgba(0,0,0,0.12); }
.interview-play-circle {
  width:60px; height:60px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 24px rgba(34,197,94,0.55);
  transition:transform 0.3s var(--ease), box-shadow 0.3s;
}
.interview-thumb-wrap:hover .interview-play-circle {
  transform:scale(1.12);
  box-shadow:0 6px 32px rgba(34,197,94,0.7);
}
.interview-play-circle svg { margin-left:4px; }

/* ─── RESUME BUTTON ─────────────────────────────── */
.btn-resume {
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  letter-spacing:0.08em; font-weight:600;
  color:#0a0f0a; background:var(--accent);
  padding:0.45rem 1rem; border-radius:6px; text-decoration:none;
  border:1px solid var(--accent);
  transition:background 0.3s, transform 0.2s var(--ease), box-shadow 0.3s;
  white-space:nowrap;
}
.btn-resume:hover { background:var(--accent-2); transform:translateY(-2px); box-shadow:0 6px 20px rgba(34,197,94,0.3); }
.btn-resume svg { flex-shrink:0; }

/* ─── PAGE HERO (sub-pages) ──────────────────────── */
.page-hero {
  min-height:38vh; display:flex; align-items:flex-end;
  padding: calc(var(--nav-h) + 4rem) 3rem 4rem;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border-dim);
}
.page-hero-inner { max-width:1200px; margin:0 auto; width:100%; }
.page-hero-eye { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.22em; color:var(--text-dim); margin-bottom:1rem; display:block; }
.page-hero-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(3rem,8vw,6rem); font-weight:700; color:var(--white); letter-spacing:-0.04em; line-height:0.92; }
.page-hero-title em { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent); }
.page-hero-sub { font-size:0.88rem; color:var(--text-dim); line-height:1.8; max-width:560px; margin-top:1.5rem; }

/* ─── PROJECTS PAGE ──────────────────────────────── */
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.proj-card {
  padding:1.75rem; display:flex; flex-direction:column; gap:1rem;
  transition:border-color 0.3s, transform 0.3s var(--ease);
}
.proj-card:hover { border-color:rgba(34,197,94,0.25); transform:translateY(-4px); }
.proj-card-cat { font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.14em; color:var(--accent); text-transform:uppercase; }
.proj-card-title { font-size:1.05rem; font-weight:700; color:var(--white); line-height:1.3; }
.proj-card-desc { font-size:0.82rem; color:var(--text-dim); line-height:1.75; flex:1; }
.proj-card-tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
.proj-card-tags span { font-family:'JetBrains Mono',monospace; font-size:0.6rem; padding:2px 8px; border-radius:50px; border:1px solid var(--border); color:var(--text-dim); }
.proj-card-link { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--accent); text-decoration:none; letter-spacing:0.04em; transition:opacity 0.3s; margin-top:auto; }
.proj-card-link:hover { opacity:0.7; }
.proj-add-card { border-style:dashed !important; display:flex; align-items:center; justify-content:center; text-align:center; min-height:200px; cursor:default; }
.proj-add-card .pac-inner { display:flex; flex-direction:column; gap:0.5rem; align-items:center; }
.proj-add-card .pac-icon { font-size:2rem; opacity:0.3; }
.proj-add-card h4 { font-size:0.9rem; color:var(--text-dim); font-weight:600; }
.proj-add-card p  { font-size:0.78rem; color:var(--text-muted); }
@media(max-width:900px){ .proj-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .proj-grid { grid-template-columns:1fr; } }

/* ─── GAMES PAGE ─────────────────────────────────── */
.games-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.game-card { padding:2rem; display:flex; flex-direction:column; gap:1.5rem; }
.game-card-header { display:flex; align-items:center; justify-content:space-between; }
.game-card-title { font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; color:var(--white); letter-spacing:0.04em; }
.game-card-badge { font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.12em; padding:3px 8px; border-radius:50px; background:var(--accent-dim); color:var(--accent); border:1px solid var(--border); }
.game-canvas-wrap { position:relative; background:rgba(0,0,0,0.4); border-radius:8px; overflow:hidden; border:1px solid var(--border-dim); }
.game-canvas-wrap canvas { display:block; width:100%; height:auto; }
.game-ui { display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-dim); }
.game-score { color:var(--accent); font-weight:700; }
.game-btn {
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.1em;
  background:var(--accent); color:#0a0f0a; border:none;
  padding:0.5rem 1.2rem; border-radius:5px; cursor:pointer; font-weight:700;
  transition:background 0.2s, transform 0.15s;
}
.game-btn:hover { background:var(--accent-2); transform:translateY(-1px); }
.game-input-row { display:flex; gap:0.75rem; align-items:center; }
.game-input-row input {
  flex:1; background:rgba(34,197,94,0.04); border:1px solid var(--border-dim);
  border-radius:5px; padding:0.6rem 1rem; color:var(--accent);
  font-family:'JetBrains Mono',monospace; font-size:0.88rem; outline:none;
  transition:border-color 0.3s;
}
.game-input-row input:focus { border-color:var(--accent); }
.game-lives { display:flex; gap:4px; }
.game-life { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(34,197,94,0.5); transition:background 0.3s; }
.game-life.dead { background:rgba(34,197,94,0.12); box-shadow:none; }
.game-desc { font-size:0.8rem; color:var(--text-dim); line-height:1.7; }
.dpad { display:grid; grid-template-columns:repeat(3,40px); grid-template-rows:repeat(3,40px); gap:4px; margin-top:0.5rem; }
.dpad-btn { width:40px; height:40px; background:var(--surface); border:1px solid var(--border-dim); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:1rem; cursor:pointer; transition:background 0.15s, color 0.15s; user-select:none; }
.dpad-btn:active, .dpad-btn.pressed { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.dpad-center { grid-column:2; grid-row:2; }
@media(max-width:900px){ .games-grid { grid-template-columns:1fr; } }

/* ─── INTERVIEW CARD TITLES ──────────────────────── */
.interview-title { font-size:0.9rem; font-weight:600; color:var(--white); margin:0.75rem 0 0.2rem; line-height:1.3; }
.interview-guest { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-dim); letter-spacing:0.04em; }

/* ─── CTFtime PROFILE CARD ───────────────────────── */
.ctf-profiles { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.ctf-profile-badge {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.6rem 1.1rem; border-radius:8px;
  background:var(--accent-dim); border:1px solid var(--border);
  text-decoration:none; color:var(--text); font-size:0.8rem;
  transition:border-color 0.3s, color 0.3s, background 0.3s;
}
.ctf-profile-badge:hover { border-color:var(--accent); color:var(--accent); background:rgba(34,197,94,0.12); }
.ctf-profile-badge svg { color:var(--accent); flex-shrink:0; }
.cpb-text { display:flex; flex-direction:column; gap:1px; }
.cpb-name { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; color:var(--accent); font-weight:600; }
.cpb-sub { font-size:0.65rem; color:var(--text-dim); }