/* ============================================
   Art Show Hub - Marketing Site Styles
   Elevated Design with Modern Visual Effects
   ============================================ */

/* ============================================
   1. CSS Custom Properties (Variables)
   ============================================ */
:root {
  /* Brand Colors */
  --color-primary: #0049b2;
  --color-primary-dark: #003a8f;
  --color-primary-light: #1a5bc4;
  --color-secondary: #15b7ff;
  --color-secondary-dark: #0099dd;
  --color-secondary-light: #4dc9ff;
  --color-accent-pink: #fc9cff;
  --color-accent-red: #ff6464;
  --color-accent-yellow: #ffe473;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #0a1628 0%, #0d2847 50%, #0f3060 100%);
  --gradient-hero-alt: linear-gradient(180deg, #0a1628 0%, #0d2847 100%);
  --gradient-cta: linear-gradient(135deg, var(--color-accent-red) 0%, #ff8a64 100%);
  --gradient-cta-hover: linear-gradient(135deg, #ff4a4a 0%, var(--color-accent-red) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-pink) 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

  /* Neutrals */
  --color-text: #1a1a2e;
  --color-text-light: #4a4a68;
  --color-text-muted: #7a7a96;
  --color-background: #ffffff;
  --color-background-alt: #f8fafc;
  --color-background-dark: #0a1628;
  --color-background-card: #ffffff;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;

  /* Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography - platform font via var(--font-ui) (see PlatformFont.php) */
  --font-primary: var(--font-ui);
  --font-display: var(--font-ui);

  /* Font Sizes */
  --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: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;
  --text-7xl: 5.5rem;

  /* 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;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 800px;
  --header-height: 80px;

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 40px rgba(21, 183, 255, 0.3);
  --shadow-glow-pink: 0 0 40px rgba(252, 156, 255, 0.3);
  --shadow-cta: 0 8px 24px rgba(255, 100, 100, 0.4);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   2. CSS Reset
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

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

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================
   3. Typography
   ============================================ */
.font-display {
  font-family: var(--font-display);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-white { color: #ffffff; }

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   4. Layout Utilities
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding: var(--space-16) 0;
}

.section-lg {
  padding: var(--space-24) 0;
}

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

/* Width */
.w-full { width: 100%; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }

/* ============================================
   5. Components - Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-lg {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

.btn-primary {
  background: var(--gradient-cta);
  color: #ffffff;
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background: var(--gradient-cta-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 100, 100, 0.5);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-primary:hover::after {
  left: 100%;
}

.btn-secondary {
  background: var(--color-primary);
  color: #ffffff;
}

.btn-secondary:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: #ffffff;
  transform: translateY(-3px);
}

.btn-white {
  background-color: #ffffff;
  color: var(--color-primary);
  font-weight: 700;
}

.btn-white:hover {
  background-color: var(--color-background-alt);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 2px solid var(--color-secondary);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(21, 183, 255, 0.2);
  transition: all var(--transition-base);
}

.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(21, 183, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-ghost:hover {
  background: rgba(21, 183, 255, 0.15);
  border-color: var(--color-secondary);
  box-shadow: 0 0 30px rgba(21, 183, 255, 0.4);
  transform: translateY(-2px);
}

.btn-ghost:hover::before {
  left: 100%;
}

/* Ghost buttons are styled for dark heroes (white text). On light sections
   the white text vanishes - use dark ink there. */
.fd-section-alt .btn-ghost,
.fd-confirm .btn-ghost {
  background: rgba(21, 183, 255, 0.08);
  color: #0f4c6e;
}
.fd-section-alt .btn-ghost:hover,
.fd-confirm .btn-ghost:hover {
  background: rgba(21, 183, 255, 0.16);
  color: #0f4c6e;
}

/* Button with arrow */
.btn-arrow::after {
  content: '\2192';
  margin-left: var(--space-2);
  transition: transform var(--transition-fast);
}

.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* ============================================
   6. Components - Cards
   ============================================ */
.card {
  background-color: var(--color-background-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-8px);
}

.card-body {
  padding: var(--space-8);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}

/* Feature Card - Modern Style */
.feature-card {
  padding: var(--space-8);
  text-align: center;
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.feature-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-8px);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 73, 178, 0.1) 0%, rgba(21, 183, 255, 0.1) 100%);
  border-radius: var(--radius-xl);
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.feature-card:hover .icon {
  background: var(--gradient-accent);
  color: #ffffff;
  transform: scale(1.1) rotate(5deg);
}

.feature-card .icon svg {
  width: 36px;
  height: 36px;
}

.feature-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  font-weight: 700;
}

.feature-card p {
  color: var(--color-text-light);
  font-size: var(--text-base);
  line-height: 1.7;
}

/* Pricing Card - Premium Style */
/* The base .btn is white-space: nowrap plus overflow: hidden. That is right for
   a pill that sizes to its own label, and silently destructive for a full-width
   button with a fixed width: a label 30px too long is chopped at BOTH ends, so
   "Charter pricing is open. Notify me" rendered as "harter pricing is open.
   Notify m". Nothing looks broken, it just reads as gibberish. Full-width
   buttons wrap instead. Keep the labels short anyway: this is the safety net,
   not the licence. */
.btn.w-full {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
  text-align: center;
}

.pricing-card {
  background-color: var(--color-background);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  text-align: center;
  border: 2px solid var(--color-border);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.pricing-card.featured {
  border-color: var(--color-secondary);
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
  z-index: 1;
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gradient-accent);
}

.pricing-card .badge {
  position: absolute;
  top: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-cta);
  color: #ffffff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

.pricing-card.featured h3 {
  margin-top: var(--space-10);
}

.pricing-card h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.pricing-card .price {
  font-size: var(--text-5xl);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  line-height: 1;
  text-align: center;
}

.pricing-card .price span {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-1);
}

.pricing-card .description {
  color: var(--color-text-light);
  margin-bottom: var(--space-8);
  font-size: var(--text-base);
}

.pricing-card ul {
  text-align: left;
  margin-bottom: var(--space-8);
}

.pricing-card li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.pricing-card li:last-child {
  border-bottom: none;
}

.pricing-card li svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
}

.pricing-card li.disabled {
  color: var(--color-text-muted);
}

.pricing-card li.disabled svg {
  color: var(--color-text-muted);
}

/* ============================================
   7. Components - Header & Navigation
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 1000;
  transition: all var(--transition-base);
}

.header.scrolled {
  box-shadow: var(--shadow-md);
  background-color: rgba(255, 255, 255, 0.98);
}

.header.header-dark {
  background-color: rgba(10, 22, 40, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.header.header-dark.scrolled {
  background-color: rgba(10, 22, 40, 0.98);
}

.header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}

.logo img, .logo svg {
  height: 44px;
  width: auto;
}

.nav-desktop {
  display: none;
}

.nav-desktop ul {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-desktop a {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition-fast);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.header-dark .nav-desktop a {
  color: rgba(255, 255, 255, 0.9);
}

.nav-desktop a:hover,
.nav-desktop a.active {
  color: var(--color-secondary);
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-fast);
}

.nav-desktop a:hover::after,
.nav-desktop a.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: all var(--transition-fast);
  border-radius: var(--radius-full);
}

.header-dark .nav-toggle span {
  background-color: #ffffff;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation */
.nav-mobile {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-background);
  padding: var(--space-6);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  /* Above page content (the hero and its layers are positioned, so without
     this the open menu slid in underneath them), below the header (1000)
     and the launch banner (1001). */
  z-index: 999;
}

.nav-mobile.active {
  transform: translateX(0);
}

.nav-mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-mobile a {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-lg);
  font-weight: 600;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nav-mobile a:hover,
.nav-mobile a.active {
  background: linear-gradient(135deg, rgba(0, 73, 178, 0.1) 0%, rgba(21, 183, 255, 0.1) 100%);
  color: var(--color-primary);
}

.nav-mobile .btn {
  margin-top: var(--space-6);
  width: 100%;
}

/* ============================================
   8. Components - Footer
   ============================================ */
.footer {
  background: var(--gradient-hero);
  color: #ffffff;
  padding: var(--space-20) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-16);
  position: relative;
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .logo {
  color: #ffffff;
  margin-bottom: var(--space-5);
}

.footer-brand p {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  line-height: 1.8;
}

.footer-links h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-5);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-links ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  display: inline-block;
}

.footer-links a:hover {
  color: var(--color-secondary);
  transform: translateX(4px);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  position: relative;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-sm);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  color: #ffffff;
  transition: all var(--transition-base);
}

.footer-social a:hover {
  background: var(--color-secondary);
  transform: translateY(-4px);
}

.footer-social svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   9. Hero Section - Premium Dark Style
   ============================================ */
.hero {
  background: var(--gradient-hero);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glowing orbs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  pointer-events: none;
}

.hero-glow-1 {
  width: 600px;
  height: 600px;
  background: var(--color-secondary);
  top: -200px;
  right: -100px;
  opacity: 0.15;
}

.hero-glow-2 {
  width: 400px;
  height: 400px;
  background: var(--color-accent-pink);
  bottom: -100px;
  left: -100px;
  opacity: 0.1;
}

.hero-glow-3 {
  width: 300px;
  height: 300px;
  background: var(--color-accent-yellow);
  top: 50%;
  left: 30%;
  opacity: 0.08;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-content {
  max-width: 700px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: var(--space-6);
}

.hero-badge svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-yellow);
}

.hero h1 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--space-6);
  color: #ffffff;
  line-height: 1.1;
}

.hero h1 .highlight {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-10);
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-stat {
  text-align: left;
}

.hero-stat-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-secondary);
}

.hero-stat-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-image {
  display: none;
  position: relative;
}

.hero-image-wrapper {
  position: relative;
  background: var(--gradient-card);
  border-radius: var(--radius-2xl);
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-xl);
}

.hero-image-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--gradient-accent);
  border-radius: var(--radius-2xl);
  z-index: -1;
  opacity: 0.5;
  filter: blur(20px);
}

/* Geometric decorations */
.hero-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-shape {
  position: absolute;
  opacity: 0.1;
}

.hero-shape-1 {
  width: 60px;
  height: 60px;
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  top: 20%;
  right: 10%;
  transform: rotate(45deg);
  animation: float 6s ease-in-out infinite;
}

.hero-shape-2 {
  width: 40px;
  height: 40px;
  background: var(--color-accent-pink);
  border-radius: 50%;
  bottom: 30%;
  right: 25%;
  animation: float 8s ease-in-out infinite reverse;
}

.hero-shape-3 {
  width: 80px;
  height: 80px;
  border: 3px solid var(--color-accent-yellow);
  top: 60%;
  left: 5%;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: float 7s ease-in-out infinite;
}

.hero-shape-4 {
  width: 50px;
  height: 50px;
  border: 3px solid #ffffff;
  border-radius: 50% 0 50% 50%;
  top: 75%;
  right: 15%;
  transform: rotate(-45deg);
  animation: float-rotate 9s ease-in-out infinite;
}

@keyframes float-rotate {
  0%, 100% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(-20px) rotate(45deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
}

/* ============================================
   9b. Brand Stripes Decoration
   ============================================ */
/* Colored stripes inspired by the logo icon */
.brand-stripes {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: var(--space-6) auto;
  width: 80px;
}

.brand-stripes span {
  width: 4px;
  height: 24px;
  border-radius: var(--radius-full);
  animation: stripe-wave 2s ease-in-out infinite;
}

.brand-stripes span:nth-child(1) {
  background: var(--color-secondary);
  animation-delay: 0s;
}

.brand-stripes span:nth-child(2) {
  background: var(--color-accent-pink);
  animation-delay: 0.1s;
}

.brand-stripes span:nth-child(3) {
  background: var(--color-accent-red);
  animation-delay: 0.2s;
}

.brand-stripes span:nth-child(4) {
  background: var(--color-accent-yellow);
  animation-delay: 0.3s;
}

@keyframes stripe-wave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.4); }
}

/* Horizontal stripe divider */
.stripe-divider {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: var(--space-8) auto;
  height: 4px;
}

.stripe-divider span {
  width: 40px;
  height: 100%;
  border-radius: var(--radius-full);
}

.stripe-divider span:nth-child(1) { background: var(--color-secondary); }
.stripe-divider span:nth-child(2) { background: var(--color-accent-pink); }
.stripe-divider span:nth-child(3) { background: var(--color-accent-red); }
.stripe-divider span:nth-child(4) { background: var(--color-accent-yellow); }

/* Hero stripes decoration */
.hero-stripes {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}

.hero-stripes span {
  width: 50px;
  height: 5px;
  border-radius: var(--radius-full);
  opacity: 0.8;
}

.hero-stripes span:nth-child(1) { background: var(--color-secondary); }
.hero-stripes span:nth-child(2) { background: var(--color-accent-pink); }
.hero-stripes span:nth-child(3) { background: var(--color-accent-red); }
.hero-stripes span:nth-child(4) { background: var(--color-accent-yellow); }

/* Infinite scrolling marquee stripes */
.stripe-marquee {
  width: 100%;
  overflow: hidden;
  padding: var(--space-4) 0;
  background: var(--color-background-alt);
}

.stripe-marquee-inner {
  display: flex;
  gap: 8px;
  animation: marquee-scroll 20s linear infinite;
  width: max-content;
}

.stripe-marquee-inner span {
  width: 60px;
  height: 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.stripe-marquee-inner span:nth-child(4n+1) { background: var(--color-secondary); }
.stripe-marquee-inner span:nth-child(4n+2) { background: var(--color-accent-pink); }
.stripe-marquee-inner span:nth-child(4n+3) { background: var(--color-accent-red); }
.stripe-marquee-inner span:nth-child(4n+4) { background: var(--color-accent-yellow); }

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Neon glow stripes */
.stripe-neon {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: var(--space-8) 0;
}

.stripe-neon span {
  width: 60px;
  height: 6px;
  border-radius: var(--radius-full);
  animation: neon-pulse 2s ease-in-out infinite;
}

.stripe-neon span:nth-child(1) {
  background: var(--color-secondary);
  box-shadow: 0 0 10px var(--color-secondary), 0 0 20px var(--color-secondary), 0 0 30px var(--color-secondary);
  animation-delay: 0s;
}

.stripe-neon span:nth-child(2) {
  background: var(--color-accent-pink);
  box-shadow: 0 0 10px var(--color-accent-pink), 0 0 20px var(--color-accent-pink), 0 0 30px var(--color-accent-pink);
  animation-delay: 0.2s;
}

.stripe-neon span:nth-child(3) {
  background: var(--color-accent-red);
  box-shadow: 0 0 10px var(--color-accent-red), 0 0 20px var(--color-accent-red), 0 0 30px var(--color-accent-red);
  animation-delay: 0.4s;
}

.stripe-neon span:nth-child(4) {
  background: var(--color-accent-yellow);
  box-shadow: 0 0 10px var(--color-accent-yellow), 0 0 20px var(--color-accent-yellow), 0 0 30px var(--color-accent-yellow);
  animation-delay: 0.6s;
}

@keyframes neon-pulse {
  0%, 100% {
    opacity: 0.7;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.3);
  }
}

/* Expanding stripes on hover */
.stripe-expand {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: var(--space-6) 0;
}

.stripe-expand span {
  width: 40px;
  height: 6px;
  border-radius: var(--radius-full);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.stripe-expand span:nth-child(1) { background: var(--color-secondary); }
.stripe-expand span:nth-child(2) { background: var(--color-accent-pink); }
.stripe-expand span:nth-child(3) { background: var(--color-accent-red); }
.stripe-expand span:nth-child(4) { background: var(--color-accent-yellow); }

.stripe-expand:hover span {
  width: 80px;
}

.stripe-expand span:hover {
  width: 120px;
  height: 8px;
  box-shadow: 0 4px 15px currentColor;
}

/* Wave stripes - colors flow through */
.stripe-wave {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: var(--space-6) 0;
}

.stripe-wave span {
  width: 50px;
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg,
    var(--color-secondary),
    var(--color-accent-pink),
    var(--color-accent-red),
    var(--color-accent-yellow),
    var(--color-secondary)
  );
  background-size: 400% 100%;
  animation: wave-flow 3s ease-in-out infinite;
}

.stripe-wave span:nth-child(1) { animation-delay: 0s; }
.stripe-wave span:nth-child(2) { animation-delay: 0.15s; }
.stripe-wave span:nth-child(3) { animation-delay: 0.3s; }
.stripe-wave span:nth-child(4) { animation-delay: 0.45s; }

@keyframes wave-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   Floating Elements
   ============================================ */
.content-with-floats {
  position: relative;
  overflow: hidden;
}

.floating-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.float-element {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.4s ease-out, filter 0.2s ease;
  /* Larger hit area */
  padding: 10px;
  margin: -10px;
}

.float-element:not(.orb):hover {
  filter: brightness(1.5);
}

/* Glowing dots */
.float-element.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
  opacity: 0.25;
}

/* Soft rings */
.float-element.ring {
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  opacity: 0.2;
}

/* Small squares */
.float-element.square {
  border: 2px solid;
  background: transparent;
  opacity: 0.2;
  transform: rotate(15deg);
}

/* Tiny triangles */
.float-element.triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid;
  opacity: 0.2;
}

/* Soft gradient orbs */
.float-element.orb {
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.15;
}

/* Hide on smaller screens */
@media (max-width: 768px) {
  .floating-tech {
    display: none;
  }
}

/* ============================================
   10. Section Styles
   ============================================ */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
}

.section-header h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
  font-weight: 800;
}

.section-header p {
  font-size: var(--text-xl);
  color: var(--color-text-light);
  line-height: 1.7;
}

.section-alt {
  background-color: var(--color-background-alt);
}

.section-dark {
  background: var(--gradient-hero);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.section-dark .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

/* How It Works - Modern Steps */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  counter-reset: step;
}

.step {
  text-align: center;
  position: relative;
  padding: var(--space-8);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.step:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-8px);
}

.step-number {
  width: 70px;
  height: 70px;
  background: var(--gradient-accent);
  color: #ffffff;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0 auto var(--space-5);
  box-shadow: var(--shadow-glow);
}

.step h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  font-weight: 700;
}

.step p {
  color: var(--color-text-light);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Testimonials - Premium Cards */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.testimonial {
  background-color: var(--color-background);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: all var(--transition-base);
}

.testimonial:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-8px);
}

.testimonial::before {
  content: '"';
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  font-size: 80px;
  font-family: Georgia, serif;
  color: var(--color-secondary);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.testimonial-content {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
  padding-top: var(--space-6);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #ffffff;
  font-size: var(--text-lg);
}

.testimonial-info h4 {
  font-size: var(--text-base);
  font-weight: 700;
}

.testimonial-info p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* CTA Section - Vibrant */
.cta-section {
  background: var(--gradient-hero);
  color: #ffffff;
  text-align: center;
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glowing orbs for CTA */
.cta-section .cta-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.cta-section .cta-glow-1 {
  width: 400px;
  height: 400px;
  background: var(--color-secondary);
  top: -150px;
  left: 10%;
  opacity: 0.15;
}

.cta-section .cta-glow-2 {
  width: 300px;
  height: 300px;
  background: var(--color-accent-pink);
  bottom: -100px;
  right: 15%;
  opacity: 0.12;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  font-weight: 800;
}

.cta-section p {
  font-size: var(--text-xl);
  opacity: 0.9;
  margin-bottom: var(--space-10);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Social Proof Bar */
.social-proof-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  margin-top: 0;
}

.social-proof-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.social-proof-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.social-proof-item .stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--color-accent-yellow);
}

.social-proof-item .stars svg {
  color: var(--color-accent-yellow);
}

/* ============================================
   11. Forms
   ============================================ */
.form-group {
  margin-bottom: var(--space-6);
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  transition: all var(--transition-fast);
  background-color: var(--color-background);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(21, 183, 255, 0.15);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.form-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.honeypot {
  position: absolute;
  left: -9999px;
}

/* ============================================
   12. Tables
   ============================================ */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.comparison-table th {
  background: var(--gradient-hero);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.comparison-table th:first-child {
  text-align: left;
}

.comparison-table th:not(:first-child) {
  text-align: center;
}

.comparison-table td:not(:first-child) {
  text-align: center;
  font-weight: 600;
}

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

.comparison-table tr:hover td {
  background-color: var(--color-background-alt);
}

.comparison-table .check {
  color: var(--color-success);
  font-size: var(--text-xl);
}

.comparison-table .cross {
  color: var(--color-text-muted);
  font-size: var(--text-xl);
}

/* ============================================
   13. FAQ Accordion
   ============================================ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  counter-reset: faq-counter;
}

.faq-item {
  border: none;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  overflow: hidden;
  transition: all var(--transition-base);
  border-left: 4px solid var(--color-secondary);
  background: var(--color-background);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  counter-increment: faq-counter;
}

/* Cycle through brand colors for left border */
.faq-item:nth-child(4n+1) { border-left-color: var(--color-secondary); }
.faq-item:nth-child(4n+2) { border-left-color: var(--color-accent-pink); }
.faq-item:nth-child(4n+3) { border-left-color: var(--color-accent-red); }
.faq-item:nth-child(4n+4) { border-left-color: var(--color-accent-yellow); }

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}

.faq-item.active {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.faq-question {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: var(--text-lg);
  text-align: left;
  background: linear-gradient(135deg, rgba(21, 183, 255, 0.03) 0%, rgba(252, 156, 255, 0.03) 50%, rgba(255, 228, 115, 0.03) 100%);
  transition: all var(--transition-fast);
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}

/* Large background number in question area */
.faq-question::before {
  content: counter(faq-counter);
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 100px;
  font-weight: 800;
  line-height: 1;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* Colored background numbers */
.faq-item:nth-child(4n+1) .faq-question::before { color: var(--color-secondary); }
.faq-item:nth-child(4n+2) .faq-question::before { color: var(--color-accent-pink); }
.faq-item:nth-child(4n+3) .faq-question::before { color: var(--color-accent-red); }
.faq-item:nth-child(4n+4) .faq-question::before { color: #c9a800; }

.faq-question:hover {
  background: linear-gradient(135deg, rgba(21, 183, 255, 0.06) 0%, rgba(252, 156, 255, 0.06) 50%, rgba(255, 228, 115, 0.06) 100%);
}

.faq-question-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.faq-question svg {
  width: 24px;
  height: 24px;
  transition: transform var(--transition-base);
  flex-shrink: 0;
  color: var(--color-text-light);
  position: relative;
  z-index: 1;
}

.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}

/* Match chevron color to the item's accent color */
.faq-item:nth-child(4n+1).active .faq-question svg { color: var(--color-secondary); }
.faq-item:nth-child(4n+2).active .faq-question svg { color: var(--color-accent-pink); }
.faq-item:nth-child(4n+3).active .faq-question svg { color: var(--color-accent-red); }
.faq-item:nth-child(4n+4).active .faq-question svg { color: var(--color-accent-yellow); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer-content {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--color-text-light);
  line-height: 1.8;
}

/* ============================================
   14. Page-Specific Styles
   ============================================ */
/* Page Header - Dark Style */
.page-header {
  /* header-height covers the fixed nav. The launch banner sits ABOVE the nav
     and was never in this sum, so the title crowded it. --launch-banner-h is
     set on <html> by the banner's own script and falls back to 0 when there is
     no banner, so this stays correct on pages without one. */
  padding: calc(var(--header-height) + var(--launch-banner-h, 0px) + var(--space-24)) 0 var(--space-20);
  background: var(--gradient-hero);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.page-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  color: #ffffff;
  font-weight: 800;
  position: relative;
}

.page-header h1 .text-highlight {
  color: var(--color-secondary);
  text-shadow: 0 0 20px rgba(21, 183, 255, 0.3);
  animation: text-glow 3s ease-in-out infinite;
}

/* Color variants for different pages */
.page-header h1 .text-highlight.highlight-pink {
  color: var(--color-accent-pink);
  text-shadow: 0 0 20px rgba(252, 156, 255, 0.3);
  animation: text-glow-pink 3s ease-in-out infinite;
}

.page-header h1 .text-highlight.highlight-red {
  color: var(--color-accent-red);
  text-shadow: 0 0 20px rgba(255, 100, 100, 0.3);
  animation: text-glow-red 3s ease-in-out infinite;
}

.page-header h1 .text-highlight.highlight-yellow {
  color: var(--color-accent-yellow);
  text-shadow: 0 0 20px rgba(255, 228, 115, 0.3);
  animation: text-glow-yellow 3s ease-in-out infinite;
}

@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(21, 183, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 30px rgba(21, 183, 255, 0.5), 0 0 50px rgba(21, 183, 255, 0.2);
  }
}

@keyframes text-glow-pink {
  0%, 100% {
    text-shadow: 0 0 20px rgba(252, 156, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 30px rgba(252, 156, 255, 0.5), 0 0 50px rgba(252, 156, 255, 0.2);
  }
}

@keyframes text-glow-red {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 100, 100, 0.3);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 100, 100, 0.5), 0 0 50px rgba(255, 100, 100, 0.2);
  }
}

@keyframes text-glow-yellow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(255, 228, 115, 0.3);
  }
  50% {
    text-shadow: 0 0 30px rgba(255, 228, 115, 0.5), 0 0 50px rgba(255, 228, 115, 0.2);
  }
}

.page-header p {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

/* Features Page */
.feature-category {
  margin-bottom: var(--space-20);
}

.feature-category h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 800;
  position: relative;
  padding-bottom: var(--space-4);
}

/* Animated gradient underline */
.feature-category h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-secondary),
    var(--color-accent-pink),
    var(--color-accent-red),
    var(--color-accent-yellow),
    var(--color-secondary)
  );
  background-size: 200% 100%;
  animation: gradient-flow 5s ease-in-out infinite;
  border-radius: 2px;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.feature-category h3 svg {
  width: 40px;
  height: 40px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.feature-category h3 .badge {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-light);
  background: transparent;
  padding: 0;
  margin-left: var(--space-2);
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.7;
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.feature-item {
  padding: var(--space-8);
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.feature-item:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.feature-item h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  font-weight: 700;
}

.feature-item p {
  color: var(--color-text-light);
  line-height: 1.7;
}

.feature-item .badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--gradient-accent);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* About Page */
.about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.about-text h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-6);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-4);
}

.about-text h2 svg {
  width: 36px;
  height: 36px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.about-text h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-secondary),
    var(--color-accent-pink),
    var(--color-accent-red),
    var(--color-accent-yellow),
    var(--color-secondary)
  );
  background-size: 200% 100%;
  animation: gradient-flow 5s ease-in-out infinite;
  border-radius: 2px;
}

.about-text p {
  color: var(--color-text-light);
  margin-bottom: var(--space-5);
  line-height: 1.8;
  font-size: var(--text-lg);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.value-card {
  padding: var(--space-8);
  padding-left: calc(var(--space-8) + 5px);
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    var(--color-secondary),
    var(--color-accent-pink),
    var(--color-accent-red),
    var(--color-accent-yellow)
  );
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.value-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
  font-weight: 700;
}

.value-card p {
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Contact Page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.contact-info {
  padding: var(--space-10);
  background: var(--gradient-hero);
  border-radius: var(--radius-2xl);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.contact-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.contact-info > * {
  position: relative;
}

.contact-info h3 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
  font-weight: 700;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.contact-method svg {
  width: 28px;
  height: 28px;
  color: var(--color-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-method h4 {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
  font-weight: 700;
}

.contact-method p,
.contact-method a {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-base);
}

.contact-method a:hover {
  color: var(--color-secondary);
}

.contact-method .faq-link {
  color: var(--color-accent-yellow);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-method .faq-link:hover {
  color: var(--color-accent-pink);
}

/* Contact page social links */
.contact-social {
  justify-content: flex-start;
}

.contact-social a {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.contact-social a:hover {
  background: var(--gradient-accent);
  background-clip: padding-box;
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-4px);
}

.contact-social a:hover svg {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
}

/* Legal Pages */
.legal-content {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
}

.legal-content h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
  font-weight: 800;
}

.legal-content .last-updated {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-10);
}

.legal-content h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-weight: 700;
}

.legal-content p {
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  line-height: 1.8;
}

.legal-content ul {
  list-style: disc;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.legal-content li {
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
  line-height: 1.8;
}

/* ============================================
   15. Utilities
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 0;
  background: var(--gradient-cta);
  color: #ffffff;
  padding: var(--space-3) var(--space-5);
  z-index: 9999;
  transition: top var(--transition-fast);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-accent-yellow);
  outline-offset: 2px;
}

.skip-link:not(:focus) {
  top: -60px;
}

.hidden {
  display: none !important;
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--transition-slow);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Blog Page */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.blog-card {
  background-color: var(--color-background);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-secondary);
}

.blog-card-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.blog-card-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
}

.blog-card:nth-child(6n+1) .blog-card-image {
  background: linear-gradient(135deg, var(--color-secondary), #0d8ab3);
}

.blog-card:nth-child(6n+2) .blog-card-image {
  background: linear-gradient(135deg, var(--color-accent-pink), #c46fd4);
}

.blog-card:nth-child(6n+3) .blog-card-image {
  background: linear-gradient(135deg, var(--color-accent-red), #c94040);
}

.blog-card:nth-child(6n+4) .blog-card-image {
  background: linear-gradient(135deg, var(--color-accent-yellow), #d4a800);
}

.blog-card:nth-child(6n+5) .blog-card-image {
  background: linear-gradient(135deg, #0d8ab3, var(--color-accent-pink));
}

.blog-card:nth-child(6n+6) .blog-card-image {
  background: linear-gradient(135deg, var(--color-accent-red), var(--color-accent-yellow));
}

.blog-card-category {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}

.blog-card-content {
  padding: var(--space-6);
}

.blog-card-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.blog-card-content h3 a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-card-content h3 a:hover {
  color: var(--color-secondary);
}

.blog-card-content p {
  color: var(--color-text-light);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.blog-card-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.blog-card-meta svg {
  width: 14px;
  height: 14px;
}

/* ============================================
   16. Responsive - Tablet (768px+)
   ============================================ */
@media (min-width: 768px) {
  :root {
    --header-height: 90px;
  }

  .hero h1 {
    font-size: var(--text-5xl);
  }

  .hero-buttons {
    flex-direction: row;
  }

  .section-header h2 {
    font-size: var(--text-4xl);
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }

  .feature-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-content {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-header h1 {
    font-size: var(--text-5xl);
  }

  .cta-section h2 {
    font-size: var(--text-5xl);
  }
}

/* ============================================
   17. Responsive - Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .nav-desktop {
    display: block;
  }

  .nav-mobile {
    display: none;
  }

  .hero {
    padding: calc(var(--header-height) + var(--space-24)) 0 var(--space-24);
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }

  .hero h1 {
    font-size: var(--text-6xl);
  }

  .hero-image {
    display: block;
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    align-items: flex-start;
  }
}

/* ============================================
   18. Responsive - Large (1280px+)
   ============================================ */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--space-8);
  }

  .section-lg {
    padding: var(--space-32) 0;
  }

  .hero h1 {
    font-size: var(--text-7xl);
  }
}

/* ============================================
   19. Print Styles
   ============================================ */
@media print {
  .header,
  .footer,
  .nav-mobile,
  .btn {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  a {
    text-decoration: underline;
  }

  .hero {
    padding-top: 0;
    min-height: auto;
    background: none !important;
    color: #000;
  }

  .hero h1,
  .hero p {
    color: #000 !important;
  }
}

/* ============================================
   Launch Banner (slim strip above header)
   ============================================ */
.launch-banner {
  display: block;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent-pink) 100%);
  color: #0a1628;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  z-index: 110;
  transition: filter var(--transition-fast);
}

.launch-banner:hover,
.launch-banner:focus {
  filter: brightness(1.05);
}

.launch-banner-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  max-width: var(--container-max);
}

.launch-banner-inner strong {
  font-weight: 700;
}

.launch-banner-sep {
  opacity: 0.5;
}

.launch-banner-arrow {
  display: inline-block;
  margin-left: 0.25em;
  transition: transform var(--transition-fast);
}

.launch-banner:hover .launch-banner-arrow,
.launch-banner:focus .launch-banner-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .launch-banner {
    font-size: 0.82rem;
    padding: 8px 14px;
  }
  .launch-banner-sep {
    display: none;
  }
  .launch-banner-inner {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Charter headline: big and unmistakable (Kasey, 17 Sept 2026). */
.launch-banner { padding: 14px 20px; font-size: 1rem; }
.launch-banner-inner { gap: 0.6em; flex-wrap: wrap; justify-content: center; }
.launch-banner-headline {
  font-size: 1.3em;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
}
.launch-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: #0a1628;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9em;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.launch-banner-cta .launch-banner-arrow { margin-left: 0; }
@media (max-width: 640px) {
  .launch-banner { padding: 12px 14px; font-size: 0.9rem; }
  .launch-banner-headline { font-size: 1.2em; display: block; width: 100%; }
}

/* Live-site banner: two separate links on one strip. */
.launch-banner--live .launch-banner-inner {
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.75em;
  row-gap: 2px;
}
.launch-banner-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 4px;
}
.launch-banner-link:hover,
.launch-banner-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.launch-banner-link:focus-visible {
  outline: 2px solid #0a1628;
  outline-offset: 2px;
}
.launch-banner-link:hover .launch-banner-arrow,
.launch-banner-link:focus-visible .launch-banner-arrow {
  transform: translateX(3px);
}
@media (max-width: 640px) {
  .launch-banner--live .launch-banner-inner {
    flex-direction: column;
  }
  .launch-banner-detail {
    display: none;
  }
}

/* ============================================
   Front Door - Marketing Front Door pages
   (landing, ground-floor, ground-floor/apply, ground-floor/thanks)
   All classes prefixed .fd- to avoid collisions.
   ============================================ */

/* ----- Shared section helpers ----- */
.fd-section {
  padding: 56px 0;
  position: relative;
}

/* On pages with the launch banner, the first section in <main> needs to
   clear the fixed header (~96px) + banner (~42px). Heroes (.fd-hero /
   .fd-gf-hero) set their own top padding. This catches everything else
   - like the apply form and the thanks page - so headlines never butt
   against the nav. */
/* The banner sits ABOVE the fixed header, so the header moves down by the
   banner's real height (measured in the layout and written to a variable).
   Before this the header simply painted over the banner: it existed in the
   DOM and nobody could see it. */
.launch-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}
body.has-launch-banner .header {
  top: var(--launch-banner-h, 41px);
}
body.has-launch-banner .nav-mobile {
  top: calc(var(--launch-banner-h, 41px) + var(--header-height));
}
body.has-launch-banner main > section:first-child {
  padding-top: 160px;
}
body.has-launch-banner main > .fd-hero:first-child,
body.has-launch-banner main > .fd-gf-hero:first-child {
  /* Banner (~41px) + header, plus breathing room above the eyebrow. */
  padding-top: 176px;
}
.fd-section-light  { background: #ffffff; }
.fd-section-alt    { background: var(--color-background-alt); }
.fd-section-dark   { background: var(--gradient-hero); color: #ffffff; }

.fd-prose {
  max-width: 760px;
}
.fd-prose h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  color: var(--color-text);
}
.fd-prose p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 14px;
}
.fd-prose p:last-child { margin-bottom: 0; }
.fd-prose p strong { color: var(--color-text); font-weight: 700; }

.fd-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}
.fd-section-header h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.fd-section-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* ----- Hero ----- */
.fd-hero {
  position: relative;
  background: var(--gradient-hero);
  color: #ffffff;
  /* Top padding must clear the fixed header (~96px) + launch banner (~42px) + comfortable breathing room. */
  padding: 160px 0 60px;
  overflow: hidden;
}
.fd-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}
.fd-hero-glow-1 {
  width: 500px; height: 500px;
  background: var(--color-secondary);
  top: -150px; left: -100px;
}
.fd-hero-glow-2 {
  width: 420px; height: 420px;
  background: var(--color-accent-pink);
  bottom: -120px; right: -80px;
  opacity: 0.3;
}
.fd-hero-container { position: relative; z-index: 1; }
.fd-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.fd-hero-headline {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.fd-hl {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
/* Feature pills - visual rhythm between the headline and subhead. */
.fd-hero-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0 auto 28px;
  max-width: 820px;
}
.fd-hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fd-hero-pills li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.fd-hero-pills svg {
  width: 14px;
  height: 14px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.fd-hero-sub {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.fd-hero-tagline {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-yellow);
  margin-bottom: 36px;
}

/* ----- Signup form (used in hero, doors, final CTA) ----- */
.fd-signup {
  max-width: 520px;
  margin: 0 auto;
}
.fd-signup-row {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 6px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fd-signup-row:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(21, 183, 255, 0.18);
}
.fd-signup input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-primary);
  font-size: 1rem;
  outline: none;
  min-width: 0;
}
.fd-signup input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.fd-signup button {
  white-space: nowrap;
}
.fd-signup-helper {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 14px;
  text-align: center;
}
.fd-signup-secondary {
  text-align: center;
  margin-top: 14px;
}
.fd-signup-secondary a {
  color: var(--color-accent-yellow);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.fd-signup-secondary a:hover {
  border-bottom-color: var(--color-accent-yellow);
}
.fd-consent {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 18px;
  text-align: center;
  line-height: 1.5;
}
.fd-signup-success {
  background: rgba(21, 183, 255, 0.12);
  border: 1px solid rgba(21, 183, 255, 0.35);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: var(--color-secondary);
  font-weight: 500;
  margin-top: 16px;
  text-align: center;
}
/* Signup form on light bg (the Charter door) */
.fd-signup-door .fd-signup-row {
  background: #ffffff;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.fd-signup-door input[type="email"] {
  color: var(--color-text);
}
.fd-signup-door input[type="email"]::placeholder {
  color: var(--color-text-muted);
}
.fd-signup-door .fd-signup-helper {
  color: var(--color-text-muted);
}
.fd-signup-door .fd-signup-success {
  background: rgba(0, 73, 178, 0.06);
  border-color: rgba(0, 73, 178, 0.25);
  color: var(--color-primary);
}

/* ----- Feature grid ----- */
.fd-feature-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding: 0;
  margin: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.fd-feature-grid li {
  position: relative;
  padding-left: 36px;
}
.fd-feature-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  box-shadow: 0 0 0 4px rgba(21, 183, 255, 0.1);
}
.fd-feature-grid h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
}
.fd-feature-grid p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
}

/* ----- Two Doors ----- */
.fd-section-doors {
  background: linear-gradient(180deg, var(--color-background-alt) 0%, #ffffff 100%);
}
.fd-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.fd-door {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.fd-door-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.fd-door h3 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--color-text);
}
.fd-door-eyebrow {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}
.fd-door > p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 24px;
  flex: 1;
}
.fd-door-ground {
  border-top: 4px solid var(--color-accent-red);
}
.fd-door-charter {
  border-top: 4px solid var(--color-secondary);
}
.fd-door .btn {
  align-self: flex-start;
}

/* ----- Final CTA section ----- */
.fd-section-cta {
  background: var(--gradient-hero);
  color: #ffffff;
  text-align: center;
}
.fd-cta-inner {
  max-width: 680px;
}
.fd-cta-inner h2 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.fd-cta-inner > p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 32px;
}
.fd-signup-cta {
  max-width: 520px;
  margin: 0 auto;
}

/* ----- Ground Floor pitch page ----- */
.fd-gf-hero {
  background: var(--gradient-hero);
  color: #ffffff;
  /* Top padding must clear the fixed header (~96px) + launch banner (~42px) + a comfortable gap. */
  padding: 160px 0 56px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fd-gf-hero .container { position: relative; z-index: 1; }
.fd-gf-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}
.fd-gf-eyebrow {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-yellow);
  margin-bottom: 14px;
}
.fd-gf-headline {
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 auto 18px;
  max-width: 760px;
}
.fd-gf-sub {
  font-size: 1.18rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  max-width: 680px;
  margin: 0 auto 28px;
}
.fd-gf-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.fd-gf-block {
  max-width: 820px;
  margin: 0 auto;
}
.fd-gf-block h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  color: var(--color-text);
}
.fd-gf-lede {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin: 0 0 14px;
}
.fd-gf-lede-tight { margin-bottom: 4px; }

/* Checkmark list - used by "What you receive" and "What we're asking" */
.fd-gf-checks {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 14px;
}
.fd-gf-checks li {
  position: relative;
  padding-left: 40px;
}
.fd-gf-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"),
    linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  background-size: 14px 14px, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
}
.fd-gf-checks h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.35;
  color: var(--color-text);
}
.fd-gf-checks p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-light);
  margin: 0;
}

.fd-gf-steps {
  list-style: none;
  counter-reset: gf-step;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.fd-gf-steps li {
  counter-increment: gf-step;
  padding: 18px 22px 18px 72px;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.fd-gf-steps li::before {
  content: counter(gf-step);
  position: absolute;
  left: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-gf-steps h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.fd-gf-steps p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-text-light);
  margin: 0;
}

.fd-gf-who ul {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 10px;
}
.fd-gf-who li {
  padding-left: 32px;
  position: relative;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--color-text-light);
}
.fd-gf-who li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-yellow);
}

/* Charter fallback panel on Ground Floor page */
.fd-charter-fallback {
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 36px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.fd-charter-fallback h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.fd-charter-fallback p {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 22px;
  line-height: 1.6;
}

/* ----- Application form ----- */
.fd-apply-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: var(--shadow-md);
}
.fd-apply-wrap h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.fd-apply-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text-light);
  margin-bottom: 36px;
}
.fd-form-grid {
  display: grid;
  gap: 22px;
}
.fd-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.fd-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}
.fd-field label .fd-req {
  color: var(--color-accent-red);
  margin-left: 2px;
}
.fd-field input,
.fd-field textarea,
.fd-field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--color-text);
  background: #ffffff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.fd-field input:focus,
.fd-field textarea:focus,
.fd-field select:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(21, 183, 255, 0.15);
}
.fd-field textarea { min-height: 110px; resize: vertical; }
.fd-field .fd-field-help {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 6px;
}
.fd-form-actions {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fd-form-actions .btn {
  min-width: 240px;
}
.fd-form-consent {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}
.fd-error-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #b91c1c;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.fd-error-banner ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

/* ----- Confirmation page ----- */
.fd-confirm {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 24px;
}
.fd-confirm-icon {
  width: 84px; height: 84px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-secondary), var(--color-accent-pink));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}
.fd-confirm h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.fd-confirm p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-light);
  margin-bottom: 20px;
}
.fd-confirm p:last-of-type { margin-bottom: 36px; }

/* ----- Mobile ----- */
@media (max-width: 720px) {
  .fd-section { padding: 60px 0; }
  .fd-hero { padding: 132px 0 56px; }
  .fd-hero-headline { font-size: clamp(2rem, 7vw, 2.6rem); }
  .fd-hero-pills { gap: 8px; margin-bottom: 22px; }
  .fd-hero-pills li { font-size: 0.88rem; padding: 7px 13px; }
  .fd-hero-pills svg { width: 12px; height: 12px; }
  .fd-hero-sub { font-size: 1rem; }
  .fd-signup-row { flex-direction: column; padding: 12px; }
  .fd-signup input[type="email"] { padding: 10px 12px; }
  .fd-signup button { width: 100%; }
  .fd-doors { grid-template-columns: 1fr; }
  .fd-door { padding: 32px 24px; }
  .fd-form-row-2 { grid-template-columns: 1fr; }
  .fd-apply-wrap { padding: 32px 24px; }
}

/* ──────────────────────────────────────────────────────────────
   Header - minimal mode (coming-soon master switch ON)
   Strips nav + CTA so only a centered, larger logo remains.
   ────────────────────────────────────────────────────────────── */
.header.header-minimal {
  height: auto;
  min-height: 96px;
  padding: 18px 0;
}

.header.header-minimal .container {
  justify-content: center;
}

.header.header-minimal .logo {
  margin: 0;
  gap: 0;
}

.header.header-minimal .logo img,
.header.header-minimal .logo svg {
  height: 72px;
}

@media (max-width: 720px) {
  .header.header-minimal { min-height: 76px; padding: 14px 0; }
  .header.header-minimal .logo img,
  .header.header-minimal .logo svg { height: 56px; }
}

/* ──────────────────────────────────────────────────────────────
   Footer - minimal mode (coming-soon master switch ON)
   ────────────────────────────────────────────────────────────── */
.footer.footer-minimal {
  padding: 32px 0 24px;
}
.footer-minimal-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 18px;
  text-align: center;
}
.footer-minimal-brand .logo img,
.footer-minimal-brand .logo svg {
  height: 40px;
  width: auto;
}
.footer.footer-minimal .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   Marketing front door + Ground Floor - mobile tightening
   ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Tighter rhythm across all front-door sections */
  .fd-section { padding: 40px 0; }
  body.has-launch-banner main > section:first-child { padding-top: 132px; }
  .fd-section-header { margin-bottom: 24px; }
  .fd-section-header h2 { font-size: clamp(1.65rem, 6vw, 2rem); }
  .fd-section-lede { font-size: 1rem; }

  /* Ground Floor hero - keep it centered, just smaller */
  .fd-gf-hero { padding: 132px 0 40px; }
  .fd-gf-eyebrow { font-size: 0.78rem; letter-spacing: 0.1em; margin-bottom: 10px; }
  .fd-gf-headline { font-size: clamp(1.9rem, 7vw, 2.4rem); margin-bottom: 14px; }
  .fd-gf-sub { font-size: 1rem; margin-bottom: 20px; }
  .fd-gf-actions .btn { width: 100%; }

  /* Ground Floor content blocks */
  .fd-gf-block h2 { font-size: clamp(1.5rem, 6vw, 1.85rem); margin-bottom: 12px; }
  .fd-gf-lede { font-size: 1rem; }

  /* Checkmark list - tighter padding, smaller check */
  .fd-gf-checks { gap: 12px; margin-top: 14px; }
  .fd-gf-checks li { padding-left: 34px; }
  .fd-gf-checks li::before { width: 22px; height: 22px; top: 3px; background-size: 12px 12px, 100% 100%; }
  .fd-gf-checks h3 { font-size: 1rem; }
  .fd-gf-checks p { font-size: 0.94rem; }

  /* Steps */
  .fd-gf-steps { gap: 12px; margin-top: 18px; }
  .fd-gf-steps li { padding: 14px 16px 14px 60px; }
  .fd-gf-steps li::before { left: 14px; top: 14px; width: 34px; height: 34px; font-size: 0.95rem; }
  .fd-gf-steps h3 { font-size: 1rem; }
  .fd-gf-steps p { font-size: 0.94rem; }

  /* "Who we're hoping to hear from" bullets */
  .fd-gf-who ul { gap: 8px; margin: 14px 0; }
  .fd-gf-who li { font-size: 0.98rem; padding-left: 28px; }
  .fd-gf-who li::before { width: 14px; height: 14px; top: 6px; }

  /* Charter fallback panel */
  .fd-charter-fallback { padding: 24px 18px; }

  /* Apply page form padding */
  .fd-apply-intro { font-size: 1rem; }

  /* Footer minimal mode */
  .footer.footer-minimal { padding: 24px 0 18px; }
  .footer-minimal-brand .logo img,
  .footer-minimal-brand .logo svg { height: 32px; }
  .footer.footer-minimal .footer-bottom { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .fd-section { padding: 32px 0; }
  body.has-launch-banner main > section:first-child { padding-top: 120px; }
  .fd-gf-hero { padding: 120px 0 32px; }
  .fd-gf-checks li { padding-left: 32px; }
  .fd-gf-checks li::before { width: 20px; height: 20px; }
  .fd-charter-fallback { padding: 22px 16px; }

  /* Apply form: full-width primary action; tighter wrap padding */
  .fd-apply-wrap { padding: 24px 18px; }
  .fd-apply-wrap h1 { font-size: 1.6rem; }
  .fd-apply-intro { margin-bottom: 22px; }
  .fd-form-grid { gap: 16px; }
  .fd-form-actions { margin-top: 24px; }
  .fd-form-actions .btn { min-width: 0; width: 100%; }

  /* Thanks page tightening */
  .fd-confirm h1 { font-size: 1.6rem; }
  .fd-confirm p { font-size: 1rem; }
}




/* Mobile: 16px input font prevents iOS Safari from auto-zooming on focus.
   Older users especially get disoriented by the zoom-and-reflow jump. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Banner offset follows the banner's real height (17 Sept 2026). The fixed
   160px / 176px values assumed a one-line strip; the bold Charter banner and
   the two-link live banner wrap to two lines and pushed the header over the
   hero headline. --launch-banner-h is measured by the layout script. */
body.has-launch-banner main > section:first-child {
  padding-top: calc(var(--launch-banner-h, 41px) + var(--header-height) + 40px);
}
body.has-launch-banner main > .fd-hero:first-child,
body.has-launch-banner main > .fd-gf-hero:first-child {
  padding-top: calc(var(--launch-banner-h, 41px) + var(--header-height) + 56px);
}
@media (max-width: 768px) {
  body.has-launch-banner main > section:first-child,
  body.has-launch-banner main > .fd-hero:first-child,
  body.has-launch-banner main > .fd-gf-hero:first-child {
    padding-top: calc(var(--launch-banner-h, 41px) + var(--header-height) + 20px);
  }
}

/* ============================================
   Launch banner, redesigned 17 Sept 2026.
   Dark bar with a brand-gradient rule underneath, the Charter message on the
   left, one button and a quiet Ground Floor link on the right. Replaces the
   gradient strip whose pieces wrapped into a loose column of fragments.
   ============================================ */
.launch-banner.ash-banner {
  background: #0a1628;
  color: #e2e8f0;
  padding: 0;
  text-align: left;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-secondary, #15b7ff), var(--color-accent-pink, #fc9cff)) 1;
}
.launch-banner.ash-banner:hover, .launch-banner.ash-banner:focus { filter: none; }
.ash-banner-inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}
.ash-banner-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ash-banner-chip {
  flex: none;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a1628;
  background: linear-gradient(90deg, var(--color-secondary, #15b7ff), var(--color-accent-pink, #fc9cff));
  padding: 5px 10px;
  border-radius: 999px;
}
.ash-banner-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.ash-banner-headline { color: #ffffff; font-size: 1.12rem; font-weight: 800; letter-spacing: 0.005em; white-space: nowrap; }
.ash-banner-detail { color: #cbd5e1; font-size: 0.92rem; }
.ash-banner-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.ash-banner-btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: #ffffff; color: #0a1628 !important; text-decoration: none;
  font-weight: 700; font-size: 0.9rem; padding: 8px 16px; border-radius: 999px;
  transition: transform var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}
.ash-banner-btn:hover, .ash-banner-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(21, 183, 255, 0.8); }
.ash-banner-btn:focus-visible, .ash-banner-link:focus-visible { outline: 2px solid #15b7ff; outline-offset: 3px; }
.ash-banner-link { color: #cbd5e1 !important; text-decoration: none; font-size: 0.86rem; white-space: nowrap; }
.ash-banner-link span { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.4); }
.ash-banner-link:hover span { text-decoration-color: #ffffff; }

@media (max-width: 1020px) {
  .ash-banner-detail { display: none; }
}
@media (max-width: 720px) {
  .ash-banner-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px; text-align: center; }
  .ash-banner-main { justify-content: center; }
  .ash-banner-chip { display: none; }
  .ash-banner-copy { justify-content: center; }
  .ash-banner-headline { font-size: 1rem; white-space: normal; }
  .ash-banner-actions { justify-content: center; gap: 12px; flex-wrap: wrap; }
  .ash-banner-btn { padding: 6px 14px; font-size: 0.84rem; }
  .ash-banner-link { font-size: 0.8rem; }
}

/* A primary button with an arrow: .btn-primary::after is the hover shine
   (absolute, off to the left), which swallowed the arrow glyph. The arrow
   wins; the shine is dropped on these buttons. */
.btn-primary.btn-arrow::after {
  position: static;
  width: auto;
  height: auto;
  background: none;
  left: auto;
  transition: transform var(--transition-fast);
}
.btn-primary.btn-arrow:hover::after { left: auto; transform: translateX(4px); }