/* ==========================================================================
   ARIC NGUYEN (NGUYỄN ANH KIỆT) · FULL STACK ENGINEER (FULLSTACKDEAI.SITE)
   Design System: Precision Architectural Blueprint & Tactile Mechanical Motion
   - Uniform 1.5px Crisp Strokes + Detached 3px Offset Shadows (No 5px Border Bloat)
   - Spring-Driven Tactile Hover/Press Physics (cubic-bezier(0.22, 1, 0.36, 1))
   ========================================================================== */

:root {
  --bg-canvas: #EEF2F6;
  --bg-card: #FFFFFF;
  --bg-recessed: #F1F5F9;
  --bg-navy: #0F172A;
  --bg-navy-elevated: #1E293B;

  --ink-primary: #0F172A;
  --ink-body: #0F172A;
  --ink-secondary: #1E293B;
  --ink-muted: #334155;
  --ink-on-dark: #F8FAFC;

  --accent-blue: #2563EB;
  --accent-blue-deep: #1D4ED8;
  --accent-blue-soft: #DBEAFE;
  --accent-teal: #0F766E;
  --accent-teal-soft: #CCFBF1;
  --accent-cyan: #38BDF8;

  --border-ink: #0F172A;
  --border-slate: #CBD5E1;
  --border-subtle: #E2E8F0;
  --border-width: 1.5px;

  --radius-card: 6px;
  --radius-inner: 4px;
  --radius-pill: 4px;

  --shadow-sm: 2px 2px 0px #0F172A;
  --shadow-md: 3px 3px 0px #0F172A;
  --shadow-lg: 4px 4px 0px #0F172A;
  --shadow-blue: 4px 4px 0px #2563EB;
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* taste-skill-ignore */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif; /* taste-skill-ignore */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* taste-skill-ignore */
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-canvas);
  color: var(--ink-primary);
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  background-color: var(--bg-canvas);
  background-image: radial-gradient(rgba(15, 23, 42, 0.065) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ink-body);
  line-height: 1.65;
  min-height: 100svh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font-family: inherit;
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--bg-recessed);
  color: var(--accent-blue-deep);
  padding: 1px 6px;
  border-radius: 3px;
}

p code,
li code,
td code {
  white-space: nowrap;
  border: 1px solid var(--border-subtle);
}

/* Scroll-Reveal Choreography */
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 360ms var(--ease-spring) var(--stagger-delay, 0ms),
    transform 220ms var(--ease-spring) var(--stagger-delay, 0ms),
    box-shadow 200ms var(--ease-spring),
    border-color 180ms ease,
    background-color 180ms ease;
}

.reveal-item.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-item.is-inview:hover,
.reveal-item.is-inview:active {
  --stagger-delay: 0ms;
  transition-delay: 0ms;
}

/* Accessibility Skip Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--bg-navy);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.skip-link:focus {
  left: 16px;
}

/* ==========================================================================
   1. OUTER SHELL & FULL-BLEED STICKY TOPBAR
   ========================================================================== */
.workstation-shell {
  max-width: min(1780px, 96vw);
  margin: 0 auto;
  padding: 0 20px 56px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 150;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F8FAFC;
  border-bottom: 2px solid var(--accent-blue);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
  border-radius: 0;
  padding: 10px max(20px, calc((100vw - min(1740px, 94vw)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.brand-cluster {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-monogram {
  width: 32px;
  height: 32px;
  background: var(--accent-blue);
  color: #FFFFFF;
  border: 1.5px solid #60A5FA;
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0px #090D16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 13.5px;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring);
}

.brand-cluster:hover .brand-monogram {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3.5px 3.5px 0px #38BDF8;
}

.brand-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  color: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.brand-divider {
  color: #38BDF8;
  font-weight: 800;
}

.brand-domain {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #38BDF8;
  background: #1E293B;
  border: 1px solid #334155;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.topbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
}

.nav-link {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: #E2E8F0;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-spring);
}

.nav-link:hover {
  background: #1E293B;
  color: #FFFFFF;
  transform: translateY(-1px);
}

.nav-link-hub {
  background: #1E293B;
  color: #38BDF8;
  border: 1.5px solid #38BDF8;
  margin-left: 4px;
  box-shadow: 2px 2px 0px rgba(56, 189, 248, 0.25);
}

.nav-link-hub:hover {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: #FFFFFF;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3px 3px 0px #38BDF8;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.topbar-lang-btn {
  background: #1E293B !important;
  color: #F8FAFC !important;
  border-color: #475569 !important;
  box-shadow: 2px 2px 0px #090D16 !important;
}

.topbar-lang-btn:hover {
  background: #334155 !important;
  border-color: #38BDF8 !important;
  box-shadow: 3px 3px 0px #38BDF8 !important;
}

.topbar .ui-btn-primary {
  border-color: #60A5FA;
  box-shadow: 2px 2px 0px #090D16;
}

.topbar .ui-btn-primary:hover {
  box-shadow: 3.5px 3.5px 0px #38BDF8;
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--border-ink);
  background: var(--bg-card);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    transform 180ms var(--ease-spring),
    box-shadow 180ms var(--ease-spring),
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;
  user-select: none;
}

.ui-btn:hover {
  transform: translate(-2px, -2px);
  background: var(--bg-recessed);
  box-shadow: var(--shadow-lg);
}

.ui-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--border-ink);
}

.ui-btn-primary {
  background: var(--accent-blue-deep);
  color: #FFFFFF;
}

.ui-btn-primary:hover {
  background: var(--bg-navy);
  color: #FFFFFF;
  box-shadow: 4px 4px 0px var(--accent-blue);
}

.ui-btn-ice {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-deep);
}

.ui-btn-ice:hover {
  background: var(--accent-blue);
  color: #FFFFFF;
  box-shadow: 4px 4px 0px var(--border-ink);
}

/* ==========================================================================
   2. HERO DECK (LEFT IDENTITY + RIGHT LIVE CODE TERMINAL)
   ========================================================================== */
.main-container {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-deck {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 22px;
  align-items: stretch;
}

.hero-left-card {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.hero-left-card:hover {
  box-shadow: 4px 4px 0px var(--border-ink);
}

.hero-meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.hero-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border: 1.5px solid var(--border-ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0px var(--border-ink);
}

.hero-meta-mint {
  background: var(--accent-teal-soft);
  color: #065F46;
}

.hero-meta-blue {
  background: var(--accent-blue-soft);
  color: var(--accent-blue-deep);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.75vw, 42px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 12px;
}

.hero-name-highlight {
  display: inline-block;
  background: var(--accent-blue-soft);
  color: var(--accent-blue-deep);
  border: 1.5px solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: 3px 3px 0px var(--border-ink);
  padding: 2px 11px;
  transform: rotate(-0.8deg);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-spring), background-color 180ms ease;
}

.hero-left-card:hover .hero-name-highlight {
  transform: rotate(0deg) translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--accent-blue-deep);
}

.hero-subtitle {
  font-size: clamp(18px, 1.45vw, 21.5px);
  font-weight: 700;
  color: var(--accent-blue-deep);
  line-height: 1.42;
  margin-bottom: 14px;
}

.hero-bio {
  font-size: 15.5px;
  color: var(--ink-body);
  line-height: 1.7;
}

.hero-bio strong {
  color: var(--ink-primary);
  font-weight: 700;
}

/* Personal Engineering Mindset Manifesto Box */
.hero-mindset-box {
  background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1.5px solid var(--border-ink);
  border-left: 4px solid var(--accent-blue-deep);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  padding: 13px 16px;
  margin-bottom: 14px;
}

.mindset-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent-blue-deep);
  margin-bottom: 5px;
}

.mindset-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}

.mindset-quote-text {
  font-size: 14.25px;
  line-height: 1.58;
  color: var(--ink-primary);
  font-style: normal;
}

.mindset-quote-text strong {
  color: var(--accent-blue-deep);
  font-weight: 800;
}

.mindset-poetic-coda {
  display: inline-block;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed #BFDBFE;
  color: #1E3A8A;
  font-weight: 700;
}

/* 3 Core Data Engineering Architecture Pillars inside Left Hero Card */
.hero-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.hero-pillar-chip {
  background: var(--bg-recessed);
  border: 1.5px solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: 2px 2px 0px var(--border-ink);
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-pillar-chip .pillar-idx {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--accent-blue-deep);
}

.hero-pillar-chip strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.25;
}

/* Full-Width "Hành trình tự học" (3-Tier Serpentine Switchback Map Spanning Both Columns) */
.hero-journey-card {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-journey-fullwidth {
  grid-column: 1 / -1;
}

.journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--border-subtle);
}

.journey-title-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.journey-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg-navy);
  color: #38BDF8;
  border: 1.5px solid var(--border-ink);
  box-shadow: 2px 2px 0px var(--accent-blue);
}

.journey-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.journey-legend-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.journey-dir-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue-deep);
  border: 1.5px solid #93C5FD;
}

/* 3-Tier Serpentine Switchback Map Canvas (100% Exposed Winding Highway + Stem-Connected Cards) */
.serpentine-map-canvas {
  position: relative;
  height: 985px;
  background-color: #F8FAFC;
  background-image: radial-gradient(rgba(37, 99, 235, 0.13) 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 6px;
  overflow: hidden;
}

.serpentine-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.journey-dash-anim {
  animation: roadDashMove 8s linear infinite;
}

@keyframes roadDashMove {
  from { stroke-dashoffset: 88; }
  to { stroke-dashoffset: 0; }
}

.road-stop-card {
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid var(--border-ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0px var(--border-ink);
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 180ms var(--ease-spring), box-shadow 180ms var(--ease-spring), border-color 180ms ease;
}

/* Asymmetric, Non-Uniform Coordinates Aligned Beneath Each Road Pin Stem (ViewBox 1500x945):
   Tier 1 Road Pins: 01 (x=180 -> 12%), 02 (x=600 -> 40%), 03 (x=1080 -> 72%)
   Tier 2 Road Pins: 04 (x=1185 -> 79%), 05 (x=720 -> 48%), 06 (x=255 -> 17%)
   Tier 3 Road Pins: 07 (x=240 -> 16%), 08 (x=705 -> 47%), 09 (x=1215 -> 81%) */
.pos-stop-01 { top: 88px;  left: 2.2%;  width: 21.5%; }
.pos-stop-02 { top: 104px; left: 28.0%; width: 23.5%; }
.pos-stop-03 { top: 88px;  left: 57.5%; width: 26.5%; }

.pos-stop-04 { top: 382px; left: 65.5%; width: 26.5%; }
.pos-stop-05 { top: 366px; left: 35.0%; width: 26.5%; }
.pos-stop-06 { top: 380px; left: 5.5%;  width: 25.5%; }

.pos-stop-07 { top: 690px; left: 3.0%;  width: 27.5%; }
.pos-stop-08 { top: 674px; left: 33.5%; width: 28.0%; }
.pos-stop-09 { top: 686px; left: 65.5%; width: 29.5%; }

.road-stop-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--accent-blue-deep);
  box-shadow: 4.5px 4.5px 0px var(--accent-blue);
  z-index: 3;
}

.road-stop-summit {
  background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%);
  border-color: var(--accent-blue-deep);
  box-shadow: 3.5px 3.5px 0px var(--accent-blue-deep);
}

.road-stop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px dashed #CBD5E1;
}

.road-stop-pin {
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border-radius: 4px;
  background: #FACC15;
  color: #0F172A;
  border: 1.5px solid #0F172A;
  box-shadow: 1.5px 1.5px 0px #0F172A;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pin-summit {
  background: var(--accent-blue-deep);
  color: #FFFFFF;
}

.road-stop-title-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.road-stop-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.2;
}

.road-stop-era {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.road-era-blue {
  color: var(--accent-blue-deep);
}

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

.road-era-summit {
  color: #1D4ED8;
  font-weight: 800;
}

.road-stop-bullets {
  margin: 0;
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 2.5px;
  font-size: 12px;
  line-height: 1.38;
  color: var(--ink-body);
}

.road-stop-bullets li::marker {
  color: var(--accent-blue-deep);
  font-weight: 800;
}

.road-stop-bullets code {
  font-size: 11px;
  padding: 0 3px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
  border-top: 1.5px solid var(--border-subtle);
}

/* Right Hero Card: Live Animated Engineering Terminal + High-Detail Portrait Avatar */
.hero-terminal-card {
  background: #0B1120;
  color: #F8FAFC;
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: 4px 4px 0px var(--accent-blue-deep);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-spring);
}

.hero-terminal-card:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 5.5px 5.5px 0px var(--accent-blue);
}

.terminal-titlebar {
  background: #1E293B;
  border-bottom: 2px solid #334155;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.terminal-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.terminal-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #EF4444; }
.dot-amber { background: #F59E0B; }
.dot-green { background: #10B981; }

.terminal-host {
  background: transparent;
  color: #94A3B8;
  font-size: 12.5px;
  padding: 0;
}

.terminal-status-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.terminal-replay-btn {
  background: #0F172A;
  color: #38BDF8;
  border: 1.5px solid #334155;
  border-radius: 3px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.terminal-replay-btn:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #60A5FA;
}

.terminal-online-pill {
  background: transparent;
  color: #94A3B8;
  font-size: 12px;
  padding: 0;
}

.terminal-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0B1120;
}

/* Fastfetch / Chafa Portrait Avatar + System Info Split */
.term-fastfetch-grid {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px 12px;
  border-bottom: 1.5px dashed #1E293B;
}

.term-avatar-box {
  position: relative;
  width: 168px;
  height: 186px;
  background: #070B14;
  border: 1.5px solid #38BDF8;
  border-radius: 5px;
  box-shadow:
    3px 3px 0px #1D4ED8,
    0 0 18px rgba(56, 189, 248, 0.14);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 180ms var(--ease-spring), border-color 180ms ease, box-shadow 180ms ease;
}

.term-avatar-box:hover {
  transform: translate(-1.5px, -1.5px);
  border-color: #60A5FA;
  box-shadow:
    4px 4px 0px #2563EB,
    0 0 22px rgba(56, 189, 248, 0.25);
}

#termAvatarCanvas {
  width: 100%;
  height: 162px;
  display: block;
   object-fit: cover;
  image-rendering: pixelated;
}

.term-avatar-scanline {
  display: none;
}

.term-avatar-caption {
  height: 24px;
  background: #0F172A;
  border-top: 1px solid #1E293B;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #38BDF8;
}

.term-avatar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
}

.term-neofetch-specs {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.52;
  color: #E2E8F0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.neofetch-user-line {
  margin-bottom: 2px;
}

.neofetch-title {
  font-weight: 800;
  color: #38BDF8;
  font-size: 13px;
}

.neofetch-rule {
  color: #475569;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 2px;
}

.neofetch-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neofetch-palette {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.neofetch-palette span {
  width: 16px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
}

.terminal-code-viewport {
  margin: 0;
  padding: 12px 18px 14px;
  background: #0B1120;
  color: #F8FAFC;
  font-family: var(--font-mono);
  font-size: 12.25px;
  line-height: 1.56;
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
  overflow-x: auto;
}

.terminal-code-viewport code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: 500;
}

.term-cmd {
  color: #38BDF8;
  font-weight: 700;
}

.term-key {
  color: #60A5FA;
  font-weight: 600;
}

.term-val-green {
  color: #34D399;
  font-weight: 700;
}

.term-dim {
  color: #94A3B8;
}

.term-live-log {
  color: #A7F3D0;
  display: inline-block;
  margin-top: 2px;
}

.term-cursor {
  display: inline-block;
  color: #38BDF8;
  margin-left: 2px;
  animation: termCursorBlink 1s steps(2, start) infinite;
}

@keyframes termCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-footer {
  padding: 10px 18px;
  background: #0F172A;
  border-top: 2px solid #1E293B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.terminal-footer code {
  background: transparent;
  color: #CBD5E1;
  font-size: 12px;
  padding: 0;
}

/* ==========================================================================
   3. SECTION CONTAINER SHELLS
   ========================================================================== */
.section-block {
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 28px 30px;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1.5px solid var(--border-subtle);
  margin-bottom: 22px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.2;
}

.section-desc {
  font-size: 16px;
  color: var(--ink-body);
  margin-top: 6px;
  line-height: 1.65;
}

/* ==========================================================================
   4. SCROLL-DRIVEN VERTICAL TIMELINE
   ========================================================================== */
.timeline-nav-rail {
  position: relative;
  top: auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 -30px 24px;
  padding: 12px 30px;
  background: #1E293B;
  color: #F8FAFC;
  border-top: 1.5px solid var(--border-ink);
  border-bottom: 2.5px solid var(--accent-blue);
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.timeline-jump-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.timeline-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid #475569;
  background: #0F172A;
  color: #E2E8F0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0px #060911;
  transition:
    transform 160ms var(--ease-spring),
    box-shadow 160ms var(--ease-spring),
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

.timeline-jump-btn:hover {
  background: #334155;
  color: #FFFFFF;
  border-color: #60A5FA;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3px 3px 0px #060911;
}

.timeline-jump-btn:active {
  transform: translate(0.5px, 0.5px);
  box-shadow: 1px 1px 0px #060911;
}

.timeline-jump-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: #93C5FD;
  box-shadow: 2.5px 2.5px 0px #060911;
}

.timeline-order-btn {
  background: #0F172A !important;
  color: #38BDF8 !important;
  border: 1.5px solid #38BDF8 !important;
  box-shadow: 2px 2px 0px #060911 !important;
  padding: 6px 11px !important;
  min-height: 34px !important;
  font-size: 13px !important;
  flex-shrink: 0;
}

.timeline-order-btn:hover {
  background: var(--accent-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 3.5px 3.5px 0px #060911 !important;
}

.scrolly-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 6px 0 12px;
}

.scrolly-spine-track {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 388.5px;
  width: 3px;
  background: var(--border-slate);
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
}

.scrolly-spine-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-teal) 0%, var(--accent-blue) 100%);
  transform-origin: top center;
  transform: scaleY(var(--timeline-scroll-progress, 0.25));
  transition: transform 90ms linear;
}

.timeline-chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.timeline-stage-row {
  display: grid;
  grid-template-columns: 368px 44px minmax(0, 1fr);
  align-items: start;
}

.timeline-marker-col {
  position: sticky;
  top: 76px;
  padding: 15px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--bg-recessed);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-spring), background-color 180ms ease;
}

.timeline-chapter.is-active .timeline-marker-col.is-umbrella-top,
.timeline-chapter.is-current-role.is-active .timeline-marker-col {
  background: var(--bg-card);
  box-shadow: 3px 3px 0px var(--accent-blue);
}

.outer-company-name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.28;
}

.outer-company-industry {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-secondary);
  line-height: 1.45;
}

.outer-company-join {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-blue-deep);
  background: var(--accent-blue-soft);
  border: 1px solid #BFDBFE;
  padding: 3px 9px;
  border-radius: 3px;
  margin-top: 3px;
  white-space: nowrap;
}

.outer-company-role {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-teal);
  background: var(--accent-teal-soft);
  border: 1px solid #99F6E4;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.timeline-node-col {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 18px;
  z-index: 2;
}

.timeline-node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--border-ink);
  transition: transform 220ms var(--ease-spring), background-color 220ms ease, box-shadow 220ms ease;
}

.timeline-chapter.is-active .timeline-node-dot,
.timeline-chapter.is-current-role .timeline-node-dot {
  background: var(--accent-teal);
  border-color: var(--bg-navy);
  transform: scale(1.12);
  animation: nodeRadarPulse 2.4s ease-out infinite;
}

@keyframes nodeRadarPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.42);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(15, 118, 110, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
  }
}

.timeline-subnode-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2.5px solid var(--bg-navy);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
  margin-top: 4px;
  transition: transform 200ms var(--ease-spring);
}

.timeline-stage-row:hover .timeline-subnode-dot {
  transform: scale(1.22);
}

.timeline-stream-body {
  background: var(--bg-recessed);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.timeline-stream-body.is-parent-umbrella-head {
  background: var(--bg-navy);
  color: #F8FAFC;
  box-shadow: 3px 3px 0px var(--accent-blue);
  padding: 18px 24px;
}

.timeline-stream-body.is-parent-umbrella-head .timeline-company-name {
  color: #FFFFFF;
}

.timeline-stream-body.is-parent-umbrella-head .timeline-role-progression {
  color: #E2E8F0;
}

.timeline-stream-body.is-parent-umbrella-head .repo-tag {
  background: #1E293B;
  color: #38BDF8;
  border-color: #475569;
}

.nexttech-stages-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nexttech-subsidiary-card {
  background: var(--bg-card);
  border: 1.5px solid #94A3B8;
  border-left: 3.5px solid var(--accent-blue-deep);
  border-radius: var(--radius-inner);
  box-shadow: 2px 2px 0px rgba(15, 23, 42, 0.12);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.nexttech-subsidiary-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--border-ink);
  border-left-color: var(--accent-blue);
  box-shadow: var(--shadow-blue);
}

.timeline-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--border-slate);
}

.timeline-stream-body.is-parent-umbrella-head .timeline-header-row {
  padding-bottom: 0;
  border-bottom: none;
}

.timeline-company-name {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.25;
}

.timeline-role-progression {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-blue-deep);
  margin-top: 4px;
}

.timeline-subrole-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.timeline-subrole-block {
  background: var(--bg-card);
  border: 1.5px solid #94A3B8;
  border-left: 3.5px solid var(--accent-blue);
  border-radius: var(--radius-inner);
  box-shadow: 2px 2px 0px rgba(15, 23, 42, 0.10);
  padding: 18px 22px;
}

.timeline-subrole-block:hover {
  transform: translate(-2px, -2px);
  border-color: var(--border-ink);
  box-shadow: var(--shadow-md);
}

.timeline-chapter.is-current-role .timeline-subrole-block {
  border-left-color: var(--accent-teal);
}

.timeline-chapter.is-current-role .timeline-subrole-block:hover {
  box-shadow: 3.5px 3.5px 0px var(--accent-teal);
}

.timeline-subrole-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.timeline-subrole-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.3;
}

.timeline-subrole-period {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--bg-recessed);
  border: 1px solid var(--border-subtle);
  padding: 2px 9px;
  border-radius: 3px;
}

.timeline-deliverables {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-deliverables li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  color: var(--ink-body);
  line-height: 1.65;
}

.timeline-deliverables li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-blue);
  font-weight: 800;
}

.timeline-deliverables li strong {
  color: var(--ink-primary);
  font-weight: 700;
}

.timeline-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1.5px solid var(--border-slate);
}

.timeline-stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Education & Certifications 2x2 Grid */
.edu-credentials-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.edu-credential-card {
  background: var(--bg-recessed);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.edu-credential-card:hover {
  transform: translate(-2px, -2px);
  background: var(--bg-card);
  border-color: var(--accent-blue-deep);
  box-shadow: var(--shadow-blue);
}

.edu-item-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-blue-deep);
}

.edu-item-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.35;
  margin-top: 2px;
}

.edu-item-sub {
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.6;
}

/* ==========================================================================
   5. PROJECTS FILTER BAR & REPOSITORY CARDS
   ========================================================================== */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: #0F172A;
  border: var(--border-width) solid var(--border-ink);
  border-left: 4px solid var(--accent-blue);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-btn {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid #334155;
  background: #1E293B;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #E2E8F0;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0px #060911;
  transition:
    transform 160ms var(--ease-spring),
    box-shadow 160ms var(--ease-spring),
    background-color 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

.filter-btn:hover {
  background: #334155;
  color: #FFFFFF;
  transform: translate(-1.5px, -1.5px);
  box-shadow: 3px 3px 0px #060911;
}

.filter-btn:active {
  transform: translate(0.5px, 0.5px);
}

.filter-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: #93C5FD;
  box-shadow: 2.5px 2.5px 0px #060911;
}

.repo-search-input {
  min-width: 260px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #475569;
  background: #1E293B;
  font-size: 13.5px;
  color: #F8FAFC;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.repo-search-input::placeholder {
  color: #94A3B8;
}

.repo-search-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 2px 2px 0px var(--accent-blue);
}

.repo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.repo-card {
  background: var(--bg-recessed);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.repo-card:hover {
  transform: translate(-2.5px, -2.5px);
  background: var(--bg-card);
  border-color: var(--accent-blue-deep);
  box-shadow: var(--shadow-blue);
}

.repo-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.repo-cat-badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--accent-blue-soft);
  color: var(--accent-blue-deep);
  border: 1px solid #BFDBFE;
}

.repo-lang-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.repo-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 6px;
  word-break: break-word;
  line-height: 1.3;
  transition: color 160ms ease;
}

.repo-card:hover .repo-name {
  color: var(--accent-blue-deep);
}

.repo-desc {
  font-size: 15.5px;
  color: var(--ink-body);
  line-height: 1.6;
}

.repo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-slate);
  flex-wrap: wrap;
}

.repo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.repo-tag {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--ink-secondary);
  border: 1px solid var(--border-slate);
  transition: border-color 160ms ease, color 160ms ease;
}

.repo-card:hover .repo-tag {
  border-color: #94A3B8;
  color: var(--ink-primary);
}

.repo-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.repo-private-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-ink);
  background: var(--bg-card);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 700;
}

/* ==========================================================================
   6. DATA REFINERY INVERTED PYRAMID (INTERACTIVE TECH STACK & LINEAGE HUD)
   ========================================================================== */
.pyramid-story-bar {
  background: var(--bg-navy);
  color: var(--ink-on-dark);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pyramid-story-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #93C5FD;
  white-space: nowrap;
}

.pyramid-story-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.pyramid-story-btn {
  min-height: 34px;
  padding: 6px 12px;
  background: #1E293B;
  color: #E2E8F0;
  border: 1.5px solid #475569;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 180ms var(--ease-spring),
    box-shadow 180ms var(--ease-spring),
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.pyramid-story-btn:hover {
  transform: translate(-1.5px, -1.5px);
  background: #334155;
  color: #FFFFFF;
  border-color: #93C5FD;
  box-shadow: 2.5px 2.5px 0px #090D16;
}

.pyramid-story-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: #93C5FD;
  box-shadow: 2.5px 2.5px 0px #090D16;
}

.pyramid-stage {
  position: relative;
  background-color: #F4F7FB;
  background-image:
    radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(238, 242, 246, 0.9) 100%);
  background-size: 20px 20px, 100% 100%;
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.05), var(--shadow-sm);
  padding: 26px 20px 28px;
  overflow: hidden;
}

.pyramid-wireframe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.funnel-flow-line {
  animation: funnelLineFlow 14s linear infinite;
}

@keyframes funnelLineFlow {
  from {
    stroke-dashoffset: 120;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.pyramid-tiers-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pyramid-tier-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.pyramid-tier-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-slate);
  border-radius: 3px;
  padding: 2px 8px;
  box-shadow: 1.5px 1.5px 0px rgba(15, 23, 42, 0.14);
}

.pyramid-tier-caption .tier-step-tag {
  color: var(--accent-blue-deep);
}

.pyramid-tier-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

/* Architectural Divider Between Tiers 1–5 (Solid DE & Infra Foundation) and Tiers 6–7 (AI, MLOps & LLM Serving Apex) */
.pyramid-stage-divider {
  width: min(1020px, 96%);
  margin: 4px auto 2px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #EFF6FF 0%, #F5F3FF 50%, #EFF6FF 100%);
  border: 1.5px dashed #4338CA;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #312E81;
  text-align: center;
  box-shadow: 2px 2px 0px rgba(49, 46, 129, 0.16);
}

.pyramid-stage-divider .divider-badge {
  padding: 2px 8px;
  border-radius: 3px;
  background: #312E81;
  color: #E0E7FF;
  font-size: 9.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tactile Pixel-Blueprint Mechanical Keycap Tile */
.tech-keycap {
  width: 118px;
  height: 96px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-ink);
  border-radius: 6px;
  box-shadow:
    3px 3px 0px var(--border-ink),
    inset 0 -4px 0px #E2E8F0;
  padding: 6px 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition:
    transform 190ms var(--ease-spring),
    box-shadow 190ms var(--ease-spring),
    border-color 160ms ease,
    background-color 160ms ease,
    opacity 200ms ease,
    filter 200ms ease;
}

.tech-keycap:hover,
.tech-keycap:focus-visible {
  transform: translate(-2.5px, -2.5px);
  border-color: var(--accent-blue-deep);
  background: #FFFFFF;
  box-shadow:
    4.5px 4.5px 0px var(--accent-blue),
    inset 0 -4px 0px #DBEAFE;
  outline: none;
  z-index: 2;
}

.tech-keycap:active {
  transform: translate(1px, 1px);
  box-shadow:
    1.5px 1.5px 0px var(--border-ink),
    inset 0 -2px 0px #CBD5E1;
}

.tech-keycap.is-selected {
  transform: translate(-2.5px, -2.5px);
  border-color: var(--accent-blue-deep);
  background: #F8FAFF;
  box-shadow:
    4.5px 4.5px 0px var(--accent-blue-deep),
    inset 0 -4px 0px #BFDBFE;
  z-index: 2;
}

.pyramid-stage.has-story-filter .tech-keycap.is-story-match {
  border-color: var(--accent-blue-deep);
  background: #FFFFFF;
  box-shadow:
    3.5px 3.5px 0px var(--accent-blue),
    inset 0 -4px 0px #DBEAFE;
}

.pyramid-stage.has-story-filter .tech-keycap.is-story-dim {
  opacity: 0.26;
  filter: grayscale(0.75);
  transform: scale(0.96);
  box-shadow:
    1.5px 1.5px 0px #64748B,
    inset 0 -3px 0px #E2E8F0;
}

.pyramid-stage.has-story-filter .tech-keycap.is-story-dim:hover {
  opacity: 0.85;
  filter: grayscale(0);
  transform: translate(-2px, -2px) scale(1);
}

.keycap-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1;
}

.keycap-tier-code {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 2px;
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #CBD5E1;
}

.tech-keycap[data-tier="1"] .keycap-tier-code { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.tech-keycap[data-tier="2"] .keycap-tier-code { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.tech-keycap[data-tier="3"] .keycap-tier-code { background: #ECFEFF; color: #0E7490; border-color: #A5F3FC; }
.tech-keycap[data-tier="4"] .keycap-tier-code { background: #FEFCE8; color: #A16207; border-color: #FDE68A; }
.tech-keycap[data-tier="5"] .keycap-tier-code { background: #F0FDF4; color: #0F766E; border-color: #99F6E4; }
.tech-keycap[data-tier="6"] .keycap-tier-code { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.tech-keycap[data-tier="7"] .keycap-tier-code { background: #EEF2FF; color: #4338CA; border-color: #C7D2FE; }
.tech-keycap[data-tier="6"],
.tech-keycap[data-tier="7"] {
  border-color: #312E81;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF5FF 100%);
}

.keycap-led {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #CBD5E1;
  border: 1px solid #64748B;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.tech-keycap:hover .keycap-led,
.tech-keycap.is-selected .keycap-led,
.pyramid-stage.has-story-filter .tech-keycap.is-story-match .keycap-led {
  background: #2563EB;
  border-color: #1E3A8A;
  box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.22);
}

.keycap-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 190ms var(--ease-spring);
}

.tech-keycap:hover .keycap-icon,
.tech-keycap.is-selected .keycap-icon {
  transform: scale(1.08);
}

.keycap-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

.keycap-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-primary);
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live Engineering Telemetry HUD (Bottom of Pyramid) */
.pyramid-hud {
  margin-top: 16px;
  background: #0B1120;
  color: #F8FAFC;
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: 4px 4px 0px var(--accent-blue-deep);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.hud-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  border-right: 1.5px solid #1E293B;
}

.hud-icon-box {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1.5px solid #60A5FA;
  border-radius: 6px;
  box-shadow: 2.5px 2.5px 0px #1D4ED8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-icon-box svg {
  width: 30px;
  height: 30px;
}

.hud-title-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hud-tier-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hud-tech-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.hud-story-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hud-story-text {
  font-size: 14.5px;
  color: #E2E8F0;
  line-height: 1.55;
}

.hud-chips-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.hud-spec-chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: #1E293B;
  color: #93C5FD;
  border: 1px solid #334155;
}

.hud-action-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Keep legacy .clean-table styles for any modal/fallback tables */
.table-wrap {
  overflow-x: auto;
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
}

.clean-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  text-align: left;
  font-size: 15.5px;
}

.clean-table th {
  background: var(--bg-navy);
  color: var(--ink-on-dark);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 16px;
  border-bottom: 1.5px solid var(--border-ink);
}

.clean-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--ink-body);
  vertical-align: top;
  line-height: 1.6;
  transition: background-color 150ms ease;
}

.clean-table tr:last-child td {
  border-bottom: none;
}

.clean-table tbody tr:nth-child(even) {
  background: var(--bg-recessed);
}

.clean-table tbody tr:hover td {
  background: #E8F0FE;
}

/* ==========================================================================
   7. MODAL FOR PROJECT ARCHITECTURE DETAILS
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-window {
  width: min(860px, 100%);
  max-height: 88vh;
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: 6px 6px 0px #090D16;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalSpringIn 220ms var(--ease-spring);
}

@keyframes modalSpringIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  background: var(--bg-navy);
  color: var(--ink-on-dark);
  padding: 14px 20px;
  border-bottom: 1.5px solid var(--border-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-header-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cv-pillar-box {
  background: var(--bg-recessed);
  border: 1.5px solid var(--border-ink);
  border-left: 3.5px solid var(--accent-blue);
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.cv-pillar-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cv-pillar-list {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cv-pillar-list li {
  font-size: 15px;
  color: var(--ink-body);
  line-height: 1.6;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer {
  margin-top: 8px;
  background: var(--bg-card);
  border: var(--border-width) solid var(--border-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: 20px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 14px;
  color: var(--ink-secondary);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1120px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 20px;
  }

  .brand-domain,
  .brand-divider {
    display: none;
  }

  .topbar-nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #1E293B;
  }

  .hero-deck {
    grid-template-columns: 1fr;
  }

  .serpentine-map-canvas {
    height: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .serpentine-bg-svg {
    display: none;
  }

  .road-stop-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
  }

  .scrolly-spine-track {
    display: none;
  }

  .timeline-stage-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .timeline-marker-col {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    top: 0;
    text-align: left;
    align-items: flex-start;
    padding: 12px 14px;
  }

  .timeline-node-col {
    display: none;
  }

  .timeline-stream-body,
  .nexttech-subsidiary-card {
    grid-column: 1;
    grid-row: 2;
  }

  .edu-credentials-grid {
    grid-template-columns: 1fr;
  }

  .pyramid-hud {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hud-identity {
    border-right: none;
    border-bottom: 1.5px solid #1E293B;
    padding-right: 0;
    padding-bottom: 12px;
  }

  .hud-action-col {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .workstation-shell {
    padding: 0 16px 36px;
  }

  .topbar {
    position: relative;
    top: 0;
    padding: 12px 14px;
    margin-bottom: 28px;
  }

  .hero-left-card {
    padding: 36px 16px 20px;
  }

  .section-block {
    padding: 20px 16px;
  }

  .hero-title {
    font-size: 28px;
    margin-top: 8px;
  }

  .section-title {
    font-size: 22px;
  }

  .timeline-company-name {
    font-size: 18.5px;
  }

  .timeline-nav-rail,
  .filter-bar {
    position: relative;
    top: 0;
    margin: 0 -16px 20px;
    padding: 12px 16px;
  }

  .scrolly-spine-track {
    display: none;
  }

  .timeline-stage-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline-node-col {
    display: none;
  }

  .timeline-marker-col,
  .timeline-stream-body,
  .nexttech-subsidiary-card {
    grid-column: 1;
    grid-row: auto;
  }

  .timeline-stream-body,
  .nexttech-subsidiary-card,
  .timeline-subrole-block {
    padding: 16px;
  }

  .arch-table-wrap {
    overflow-x: visible;
  }

  .arch-table,
  .arch-table thead,
  .arch-table tbody,
  .arch-table tr,
  .arch-table th,
  .arch-table td {
    display: block;
    width: 100%;
  }

  .arch-table thead {
    display: none;
  }

  .arch-table tr {
    border-bottom: 1px solid var(--border-subtle);
    padding: 8px 0;
  }

  .arch-table td {
    border-bottom: none;
    padding: 6px 12px;
  }

  .repo-grid {
    grid-template-columns: 1fr;
  }

  .repo-search-input {
    min-width: 100%;
  }

  .tech-keycap {
    width: 98px;
    height: 90px;
    padding: 6px 6px 8px;
  }

  .keycap-name {
    font-size: 10.5px;
  }

  .term-fastfetch-grid {
    grid-template-columns: 1fr;
    justify-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}