/* ════════════════════════════════════════════════════════════════════
   Aedan Rose — Global Stylesheet
   ────────────────────────────────────────────────────────────────────
   Shared base styles for all public pages (index, about, features,
   pricing, blog, compare, etc). Browsers cache this file after the
   first hit, so subsequent page navigations are dramatically faster.

   Page-specific styles still live inline (in each page's <style> tag)
   and can override anything here since inline styles come after this
   external link in the cascade.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Reset ─────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── Brand color tokens ────────────────────────────────────────── */
:root {
  --electric-orange: #ff6b00;
  --electric-blue: #00d4ff;
  --cosmic-purple: #2d1b69;
  --dark-matter: #0a0a0a;
  --nebula-pink: #ff006e;
  --starlight: #ffffff;
  --plasma-green: #39ff14;

  /* RGB channel values for transparency */
  --electric-orange-rgb: 255, 107, 0;
  --electric-blue-rgb: 0, 212, 255;
  --cosmic-purple-rgb: 45, 27, 105;
  --nebula-pink-rgb: 255, 0, 110;
  --plasma-green-rgb: 57, 255, 20;
}

/* ─── Base typography + body ───────────────────────────────────── */
html {
  background: var(--dark-matter);
}

body {
  font-family: 'Exo 2', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--starlight);
  background: var(--dark-matter);
  overflow-x: hidden;
  position: relative;
}

/* Ensure content sits above the (optional) galaxy background */
.navbar,
.hero,
.feature-hero,
.section,
.section-alt,
.faq,
.faq-section,
.cta-footer,
footer,
.mobile-menu {
  position: relative;
  z-index: 1;
}

/* ─── Animations used across pages ────────────────────────────── */
@keyframes cosmicShift {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.1) rotate(2deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}