/* =============================================
   TALOSEC DESIGN SYSTEM v5
   Premium cybersecurity academy — refined, professional
   Clean whites, precise spacing, blue brand accent
   ============================================= */

/* ---- Google Fonts (loaded in HTML, fallback here) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- Variables (Dark) ---- */
[data-theme="dark"] {
  --void: #09090b;
  --surface: #0f0f11;
  --card: #131316;
  --card-hover: #18181b;
  --elevated: #1c1c20;
  --input: #0c0c0e;

  --border: rgba(244,244,246,.08);
  --border-hover: rgba(244,244,246,.14);
  --border-bright: rgba(244,244,246,.25);
  --border-gradient: linear-gradient(90deg, rgba(244,244,246,.06) 0%, rgba(244,244,246,.18) 50%, rgba(244,244,246,.06) 100%);

  --starlight: #f4f4f6;
  --haze: #a1a1aa;
  --muted: #71717a;
  --dim: #52525b;
  --faint: #3f3f46;

  --accent: #60a5fa;
  --accent-strong: #2563eb;
  --accent-dim: rgba(37,99,235,.15);
  --accent-glow: rgba(37,99,235,.25);

  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #3b82f6;

  --card-gradient-from: rgba(244,244,246,.08);
  --card-gradient-to: rgba(244,244,246,.02);
  --card-gradient-hover-from: rgba(244,244,246,.14);
  --card-gradient-hover-to: rgba(244,244,246,.04);
}

/* ---- Variables (Light — default) ---- */
:root, [data-theme="light"] {
  --void: #ffffff;
  --surface: #f9fafb;
  --card: #ffffff;
  --card-hover: #f4f4f6;
  --elevated: #eeeef0;
  --input: #f4f4f6;

  --border: rgba(9,9,11,.08);
  --border-hover: rgba(9,9,11,.15);
  --border-bright: rgba(9,9,11,.25);
  --border-gradient: linear-gradient(90deg, rgba(9,9,11,.03) 0%, rgba(9,9,11,.1) 50%, rgba(9,9,11,.03) 100%);

  --starlight: #09090b;
  --haze: #3f3f46;
  --muted: #6b7280;
  --dim: #9ca3af;
  --faint: #e5e7eb;

  --accent: #2563eb;
  --accent-strong: #1e40af;
  --accent-dim: rgba(37,99,235,.08);
  --accent-glow: rgba(37,99,235,.15);

  --success: #16a34a;
  --warning: #ca8a04;
  --danger: #dc2626;
  --info: #3b82f6;

  --card-gradient-from: rgba(9,9,11,.04);
  --card-gradient-to: rgba(9,9,11,.01);
  --card-gradient-hover-from: rgba(9,9,11,.07);
  --card-gradient-hover-to: rgba(9,9,11,.02);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.03);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.05);

  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.0,.2,1);
  --ease-spring: cubic-bezier(.175,.885,.32,1.275);
  --transition: .2s var(--ease);
  --transition-slow: .4s var(--ease);
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--void);
  color: var(--haze);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-size: 15px;
}
a {
  color: var(--starlight);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}
a:hover { opacity: .8; }
img { max-width: 100%; display: block; }
button, .btn, .card, .hero-stat, .nav-links a, .faq-item, .feature-icon {
  transition: all var(--transition);
}
::selection { background: rgba(37,99,235,.15); color: var(--starlight); }

/* ---- Layout ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 840px; margin: 0 auto; padding: 0 24px; }
.container-xs { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; position: relative; }
.section-lg { padding: 140px 0; }

/* ---- Divider (gradient line) ---- */
.divider {
  height: 1px;
  border: none;
  background: var(--border-gradient);
}

/* ---- Typography ---- */
h1, h2, h3, h4, h5, h6 {
  color: var(--starlight);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.h-display {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.h-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.h-subtitle {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 500;
}
.text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-subtle {
  background: linear-gradient(135deg, var(--starlight) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-starlight { color: var(--starlight); }
.text-haze { color: var(--haze); }
.text-muted { color: var(--muted); }
.text-dim { color: var(--dim); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }

/* ---- Label ---- */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  padding: 6px 16px;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-full);
  background: var(--accent-dim);
}
.label-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ---- Terminal tag ---- */
.terminal-tag {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--haze);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(37,99,235,.2), 0 4px 12px rgba(37,99,235,.15);
}
.btn-primary:hover {
  opacity: 1;
  color: #fff;
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,99,235,.25), 0 8px 24px rgba(37,99,235,.15);
}
.btn-dark {
  background: var(--starlight);
  color: var(--void);
  box-shadow: var(--shadow-sm);
}
.btn-dark:hover {
  opacity: .92;
  color: var(--void);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: var(--card);
  color: var(--starlight);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--border-hover);
  background: var(--card-hover);
  color: var(--starlight);
  opacity: 1;
}
.btn-outline {
  background: transparent;
  color: var(--starlight);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--border-hover);
  background: var(--accent-dim);
  color: var(--starlight);
  transform: translateY(-1px);
  opacity: 1;
}
.btn-ghost {
  background: transparent;
  color: var(--haze);
}
.btn-ghost:hover {
  color: var(--starlight);
  background: var(--accent-dim);
  opacity: 1;
}
.btn-lg { padding: 16px 32px; font-size: 15px; border-radius: var(--radius-lg); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-xs { padding: 6px 12px; font-size: 12px; }
.btn-icon { width: 40px; height: 40px; padding: 0; }
.btn[aria-busy="true"],
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* ---- Cards ---- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  overflow: hidden;
}
.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-body { padding: 24px; }
.card-img-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--elevated) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.card-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Glass card variant */
.card-glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.5);
}
.card-glass:hover {
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.7);
}

/* Accent card variant */
.card-accent {
  border-color: var(--accent-dim);
  background: linear-gradient(135deg, var(--accent-dim), transparent);
}
.card-accent:hover {
  border-color: var(--accent-glow);
}

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
}
.badge-green { border-color: rgba(22,163,74,.15); color: #16a34a; background: rgba(22,163,74,.06); }
.badge-purple { border-color: rgba(37,99,235,.15); color: #2563eb; background: rgba(37,99,235,.06); }
.badge-yellow { border-color: rgba(202,138,4,.15); color: #ca8a04; background: rgba(202,138,4,.06); }
.badge-red { border-color: rgba(220,38,38,.15); color: #dc2626; background: rgba(220,38,38,.06); }
.badge-blue { border-color: rgba(37,99,235,.15); color: #2563eb; background: rgba(37,99,235,.06); }
.badge-accent { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-dim); }

/* ---- Grid ---- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 32px; }

/* ---- Nav ---- */
.nav {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  width: 100%;
  padding: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(15,23,42,.06);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
}
.nav-logo img {
  height: 60px;
  width: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 0;
  padding: 0;
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--starlight);
  background: transparent;
}
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-cta .btn-ghost {
  color: var(--haze);
  font-weight: 500;
}
.nav-cta .btn-ghost:hover {
  color: var(--starlight);
}
.nav-cta .btn-primary.btn-sm {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 1px 3px rgba(37,99,235,.2);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--starlight);
  box-shadow: var(--shadow-xs);
}
.nav-toggle:hover {
  background: var(--card-hover);
  border-color: var(--border-hover);
}
.nav-toggle svg { width: 20px; height: 20px; }
.mobile-menu-btn { display: none; }

/* ---- Hero ---- */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(ellipse, rgba(37,99,235,.06) 0%, rgba(37,99,235,.02) 30%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--void), transparent);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero .h-display {
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.hero-content p {
  font-size: 18px;
  color: var(--muted);
  max-width: 580px;
  margin: 20px auto 36px;
  line-height: 1.7;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
}
.hero-stat {
  min-width: 150px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}
.hero-stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-dim);
}
.hero-stat .num {
  font-size: 30px;
  font-weight: 800;
  color: var(--starlight);
  letter-spacing: -.03em;
}
.hero-stat .label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
}

/* ---- Section Header ---- */
.section-header { text-align: center; max-width: 600px; margin: 0 auto 56px; }
.section-header .label-tag { margin-bottom: 16px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { margin-top: 0; font-size: 16px; color: var(--muted); line-height: 1.7; }

/* ---- Course Card ---- */
.course-card { padding: 0; }
.course-card .card-body { padding: 20px; }
.course-card .card-body h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.01em; }
.course-card .card-body p,
.course-card .card-body .desc {
  font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-card .meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--dim);
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-weight: 500;
}
.course-card .meta span { display: flex; align-items: center; gap: 4px; }

/* ---- Mentor Card ---- */
.mentor-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
}
.mentor-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.mentor-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.mentor-card .desc { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }

/* ---- Testimonial Card ---- */
.test-card { padding: 28px; }
.test-card .stars { color: #f59e0b; font-size: 14px; margin-bottom: 14px; letter-spacing: 2px; }
.test-card .quote { font-size: 14px; color: var(--haze); line-height: 1.8; margin-bottom: 20px; font-style: italic; }
.test-card .author-row { display: flex; align-items: center; gap: 12px; }
.test-card .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent-glow));
  border: 2px solid var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent); font-size: 13px;
}
.test-card .author-name { font-size: 14px; font-weight: 600; color: var(--starlight); }
.test-card .author-role { font-size: 12px; color: var(--dim); }

/* ---- Step Card ---- */
.step-card { text-align: left; padding: 28px 24px; }
.step-card .step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: var(--accent);
  margin-bottom: 20px;
}
.step-card h3 { font-size: 16px; margin-bottom: 8px; font-weight: 700; }
.step-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }

/* ---- FAQ ---- */
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  overflow: hidden;
  transition: all var(--transition);
}
.faq-item:hover { border-color: var(--border-hover); }
.faq-q {
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--starlight);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.faq-q .arrow { font-size: 11px; color: var(--dim); transition: transform .3s var(--ease); }
.faq-item.open { border-color: var(--accent-dim); background: var(--accent-dim); }
.faq-item.open .faq-q .arrow { transform: rotate(180deg); color: var(--accent); }
.faq-a { padding: 0 22px 18px; font-size: 14px; color: var(--muted); line-height: 1.75; display: none; }
.faq-item.open .faq-a { display: block; }

/* ---- Footer ---- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer h4 {
  font-size: 12px; font-weight: 600; color: var(--starlight);
  margin-bottom: 18px; text-transform: uppercase; letter-spacing: .1em;
}
.footer p { font-size: 14px; color: var(--muted); line-height: 1.7; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { font-size: 14px; color: var(--muted); transition: color var(--transition); }
.footer-links a:hover { color: var(--accent); opacity: 1; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ---- Utility Classes ---- */
.overflow-hidden { overflow: hidden; }
.relative { position: relative; }
.z-1 { z-index: 1; }
.w-full { width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 48px; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* ---- Feature icon (improved) ---- */
.feature-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 18px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-dim);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero-stats { gap: 10px; }
  .hero-stat { width: 100%; max-width: 280px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .nav-inner { flex-wrap: wrap; }
  .nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .nav-links.show {
    display: flex;
  }
  .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .nav-links a:last-child { border-bottom: none; }
  .mobile-menu-btn {
    display: block;
    background: none;
    border: 1px solid var(--border);
    color: var(--starlight);
    font-size: 18px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-md);
  }
  .mobile-menu-btn:hover {
    background: var(--card-hover);
    border-color: var(--border-hover);
  }
  .nav-cta .btn-ghost {
    display: none;
  }
  .nav-toggle { display: flex; }
  .hero { padding: 100px 20px 60px; min-height: auto; }
  .container { padding: 0 16px; }
}
@media (max-width: 480px) {
  .hero-stat { min-width: unset; }
  .h-display { font-size: 32px; }
}