/* --- 1. VARIABLES --- */
:root {
  --bg: #ffffff;
  --bg2: #f8f8f8;
  --bg3: #f0f0f0;
  --gold: #4338CA;
  --gold-lt: #6366F1;
  --blue: #4F46E5;
  --teal: #7C3AED;
  --emerald: #0D9488;
  --rose: #E11D48;
  --violet: #6D28D9;
  --text: #0F172A;
  --text2: #374151;
  --text3: #6B7280;
  --card: rgba(255,253,248,0.88);
  --card-b: rgba(255,253,248,0.97);
  --border: rgba(99,102,241,0.14);
  --border-b: rgba(99,102,241,0.28);
  --glow-gold: 0 0 28px rgba(67,56,202,0.22);
  --glow-blue: 0 0 28px rgba(79,70,229,0.22);
  --glow-teal: 0 0 28px rgba(109,40,217,0.20);
  --nav-h: 74px;
  --ticker-h: 0px;
  --r: 20px;
  --r-sm: 10px;
  --max: 1320px;
  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --section-pad: clamp(5.5rem, 12vh, 12rem);
}

[data-theme="dark"] {
  --bg: #090B10;
  --bg2: #0f131f;
  --bg3: #161e33;
  --text: #f8fafc;
  --text2: #94a3b8;
  --text3: #64748b;
  --card: rgba(15, 23, 42, 0.7);
  --card-b: rgba(30, 41, 59, 0.8);
  --border: rgba(16, 185, 129, 0.2);
  --border-b: rgba(16, 185, 129, 0.4);
  --gold: #10b981;
  --gold-lt: #34d399;
}

/* --- 2. RESET & FOUNDATIONS --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: scroll;
  line-height: 1.75;
  padding-top: calc(var(--nav-h) + var(--ticker-h));
  position: relative;
  z-index: 0;
}

.page {
  position: relative;
  overflow-x: hidden;
  scroll-margin-top: calc(var(--nav-h) + var(--ticker-h));
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- GLOBAL HELPERS --- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--blue), var(--teal), var(--gold));
  background-size: 200% 100%;
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9997;
  animation: progress-shimmer 3s linear infinite;
}

@keyframes progress-shimmer {
  from { background-position: 0% 0%; }
  to { background-position: 200% 0%; }
}

.word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; }
.word { display: inline-block; will-change: transform, opacity; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold), var(--blue));
  border-radius: 99px;
}

.text-gold { color: var(--gold); }
.container { max-width: var(--max); margin: 0 auto; padding: 0 clamp(2rem, 6vw, 4rem); }
.section { padding: var(--section-pad) 0; border-top: 1px solid var(--border); }
.section-header { margin-bottom: 4rem; }
.section-tag {
  display: block; margin-bottom: .6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 500;
  color: var(--gold); letter-spacing: .14em;
  text-transform: uppercase; opacity: .85;
}
.section-header h2 { font-size: clamp(1.8rem, 4.5vw, 2.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.18; }
.section-desc { margin-top: .85rem; font-size: .95rem; color: var(--text2); max-width: 620px; line-height: 1.7; }

/* --- UTILITIES --- */
.magnetic { will-change: transform; }
#page-wipe { display: none; }

/* --- DIAGNOSTICS PRELOADER --- */
.diagnostics-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

.terminal-loader {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--gold);
  max-width: 600px;
  padding: 2rem;
  line-height: 1.8;
}

.loader-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  animation: fadeIn 0.3s ease-out;
}

.loader-line .prompt {
  color: var(--gold);
  font-weight: 700;
}

.loader-line .cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--gold);
  animation: blink-cursor 1s step-end infinite;
}

.terminal-green { color: #10b981; }
.terminal-gold { color: var(--gold); }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.diagnostics-preloader.slide-up {
  animation: slideUpAndFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

@keyframes slideUpAndFade {
  0% {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }
  99% {
    visibility: visible;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    visibility: hidden;
  }
}