/* Red Saber Marketing Site — design tokens + base */

:root {
  /* Brand */
  --cyan-500: #00E1FF;
  --cyan-600: #00b8d4;
  --cyan-100: #e0faff;
  --navy-700: #22468B;
  --navy-900: #22468B;
  --navy-600: #2e5aad;
  --orange-500: #FF4800;
  --orange-600: #FF8B00;
  --orange-100: #fde8de;
  --yellow-500: #F8CC14;
  --yellow-600: #c9a40e;
  --yellow-100: #fef7d0;

  /* Red InnCol */
  --ri-yellow: #F9CD13;
  --ri-blue: #24478C;
  --ri-red: #E51A37;
  --ri-black: #1D1D1B;

  /* Neutrals */
  --white: #ffffff;
  --surface: #f0faff;
  --surface-2: #ddf5fc;
  --text-primary: #1D1D1B;
  --text-secondary: #3e5a80;
  --text-inverse: #ffffff;
  --border: #b8dff0;

  /* Semantic */
  --bg: var(--white);
  --bg-dark: var(--navy-900);
  --primary: var(--cyan-500);
  --cta: var(--orange-500);
  --cta-hover: var(--orange-600);
 

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #152d5e 0%, #22468B 60%, #1a3570 100%);
  --gradient-brand-h: linear-gradient(90deg, #152d5e 0%, #22468B 100%);
  --gradient-accent: linear-gradient(90deg, #00E1FF 0%, #00b8d4 100%);
  --gradient-warm: linear-gradient(135deg, #F15A29 0%, #F8CC14 100%);
  --gradient-book-fan: linear-gradient(90deg, #e91e8c 0%, #F15A29 25%, #F8CC14 50%, #6cc04a 75%, #00E1FF 100%);

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-weight: 700; }
h3 { font-weight: 700; }
p { margin: 0; text-wrap: pretty; }

/* Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 640px) { .container { padding: 0 var(--space-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-8); } }

.section {
  padding: var(--space-16) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--space-24) 0; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  min-height: 56px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  transition: background-color 150ms ease, transform 100ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--cta);
  color: var(--text-inverse);
  box-shadow: 0 8px 24px -8px rgba(241, 90, 41, 0.5);
}
.btn-primary:hover {
  background-color: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(241, 90, 41, 0.6);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}
.btn-secondary:hover { background-color: rgba(255,255,255,0.1); }
.btn-ghost-dark {
  background: transparent;
  color: var(--navy-700);
  border: 2px solid var(--navy-700);
}
.btn-ghost-dark:hover { background: var(--navy-700); color: white; }

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--space-8);
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.card:hover {
  box-shadow: 0 8px 32px rgba(34, 70, 139, 0.12);
  transform: translateY(-2px);
  border-color: var(--cyan-500);
}
.card-glass {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: var(--space-8);
  color: white;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.card-glass:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(0, 225, 255, 0.45);
  transform: translateY(-2px);
}
.card-glass.no-glass { background: rgba(34, 70, 139, 0.7); backdrop-filter: none; -webkit-backdrop-filter: none; }
@supports not (backdrop-filter: blur(1px)) {
  .card-glass { background: rgba(34, 70, 139, 0.85); }
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-cyan { background: rgba(0, 225, 255, 0.15); color: #00E1FF; border: 1px solid rgba(0, 225, 255, 0.4); }
.badge-yellow { background: rgba(248, 204, 20, 0.15); color: #F8CC14; border: 1px solid rgba(248, 204, 20, 0.4); }
.badge-navy { background: var(--surface-2); color: var(--navy-700); }
.badge-orange { background: var(--orange-100); color: var(--orange-600); }

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan-600);
  margin-bottom: var(--space-3);
}
.eyebrow.on-dark { color: var(--cyan-500); }

/* Section header */
.section-h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .section-h2 { font-size: var(--text-4xl); } }
.section-lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 640px;
  margin-bottom: var(--space-12);
}
.section-lead.center { margin-left: auto; margin-right: auto; text-align: center; }
.on-dark { color: white; }
.on-dark .section-lead { color: rgba(255,255,255,0.78); }

/* Animations */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes drift-aurora {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(0, 225, 255, 0.5); }
  100% { box-shadow: 0 0 0 16px rgba(0, 225, 255, 0); }
}
@keyframes slide-down-nav {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

.float-y { animation: float-y 6s ease-in-out infinite; }
.fade-up {
  opacity: 1;
  animation: fade-up 0.5s ease-out both;
}
/* If JS-disabled or animation skipped, content stays visible */
.fade-up.no-anim, .no-anim .fade-up { animation: none; opacity: 1; transform: none; }

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

/* Star field — pure CSS */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.starfield .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: white;
  animation: twinkle 3s ease-in-out infinite;
}
.starfield .star.lg { width: 3px; height: 3px; background: var(--cyan-500); }

/* Decorative book-fan bar */
.book-fan-bar {
  height: 6px;
  width: 100%;
  background: var(--gradient-book-fan);
}

/* utility */
.flex { display: flex; }
.grid { display: grid; }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.text-center { text-align: center; }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* Sections backgrounds */
.bg-dark { background: var(--gradient-brand); color: white; }
.bg-navy { background: var(--navy-700); color: white; }
.bg-surface { background: var(--surface); }
.bg-warm { background: var(--gradient-warm); color: var(--text-primary); }

/* Skip link for a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--navy-900);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  z-index: 10000;
}
.skip-link:focus { left: 8px; }