/* HUSHIKO Landing Page Styles */
/* TYPOGRAPHY & CONTRAST FIXES - 2025-01-08 */

/* ===========================
   CSS Variables & Reset
   =========================== */

:root {
  /* Primary Colors - HUSHIKO BRAND 2025 (SOFT LAVENDER) */
  --color-purple: #9B87D9;              /* Soft Lavender - calming, bedtime-friendly */
  --color-purple-light: #C4B8E8;        /* Light lavender for hover states */
  --color-purple-dark: #6B5B95;         /* Deep purple for readable text */
  --color-purple-deeper: #4A3B6B;       /* Deepest purple for headings - strong contrast */

  /* Secondary Colors */
  --color-orange: #FF9F66;              /* Sunrise Orange - secondary brand color */
  --color-orange-light: #FFB78A;        /* Light orange for accents */
  --color-pink: #F4A6B8;                /* Rose-peach - nurturing, warm */
  --color-pink-light: #FCDCE5;          /* Soft blush for backgrounds */
  --color-pink-accent: #E08CA0;         /* Deeper rose for CTAs */

  /* Balance & Inclusion */
  --color-blue-soft: #7FA3C4;           /* Soft sky blue - calming, inclusive */
  --color-blue-light: #B8D4E8;          /* Light blue for secondary elements */
  --color-blue: #5AB9EA;                /* Sky Blue - info color */
  --color-green: #52C997;               /* Story Green - success */

  /* Neutral Colors */
  --color-cream: #FFF8F0;               /* Cloud Cream - warm background */
  --color-cream-darker: #F5EFE7;        /* Slightly deeper for cards */
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F5F5F7;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-500: #8B8B9E;
  --color-gray-600: #4B5563;
  --color-gray-700: #3D3D5C;
  --color-gray-900: #1A1A2E;
  --color-dark: #2C2C2C;

  /* Semantic Colors */
  --color-success: #52C997;             /* Story Green */
  --color-warning: #F4B860;             /* Warm amber */
  --color-error: #FF6B6B;               /* Alert Coral */

  /* Gradients - SOFT LAVENDER VERSION */
  --gradient-bedtime: linear-gradient(180deg, #FFF8F0 0%, #F5EFE7 100%);
  --gradient-magic: linear-gradient(135deg, #9B87D9 0%, #FF9F66 100%); /* Lavender to Orange */
  --gradient-deep: linear-gradient(135deg, #6B5B95 0%, #4A3B6B 100%); /* Dark gradient for white text */
  --gradient-hero: linear-gradient(135deg, #9B87D9 0%, #6B5B95 100%); /* Soft hero gradient */

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Typography - HUSHIKO BRAND 2025 */
  --font-heading: 'Quicksand', 'Poppins', sans-serif; /* Rounded, friendly, childlike */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif; /* Warm, child-friendly */

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-full: 50px;

  /* Shadows - SOFT LAVENDER */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 20px rgba(155, 135, 217, 0.15); /* Soft Lavender shadow */
  --shadow-xl: 0 20px 40px rgba(155, 135, 217, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-cream);
  color: var(--color-gray-900); /* FIX: Darker default text color (11.5:1 contrast) */
  line-height: 1.7; /* FIX: Increased from 1.6 for better readability */
  font-size: clamp(1rem, 2vw, 1.125rem); /* FIX: Responsive body font size */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ===========================
   Typography - FIXED CONTRAST
   =========================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3; /* FIX: Increased from 1.2 */
  color: var(--color-purple-deeper); /* FIX: Default to deepest purple (8.2:1 contrast) */
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1; /* Tighter for large headings */
  margin-bottom: 1.5rem;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3;
  margin-bottom: 2rem;
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.4;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem; /* FIX: Increased spacing */
  color: var(--color-gray-900); /* FIX: Explicit dark color */
}

/* ===========================
   Layout Components
   =========================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.section-title {
  text-align: center;
  margin-bottom: 0.75rem;
  color: var(--color-purple-dark); /* FIX: Changed from --color-purple (5.8:1 contrast for large text) */
}

.section-subtitle {
  text-align: center;
  color: var(--color-gray-600);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto var(--spacing-lg);
  line-height: 1.6;
}

/* ===========================
   Buttons
   =========================== */

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-purple) 0%, #8B6EAD 100%);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(155, 135, 217, 0.4);
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 25px rgba(155, 135, 217, 0.5);
  animation: none; /* Stop pulse on hover */
}

/* Subtle glow animation for main CTA - less distracting than pulse */
@keyframes subtle-glow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(155, 135, 217, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(155, 135, 217, 0.5);
  }
}

/* Apply subtle glow to hero CTA */
.hero .btn-primary {
  animation: subtle-glow 3s ease-in-out infinite;
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-purple-deeper); /* FIX: Darker purple for better contrast */
  border: 2px solid var(--color-purple);
}

.btn-secondary:hover {
  background: var(--color-purple);
  color: var(--color-white);
  transform: translateY(-2px);
}

.btn-large {
  padding: 1.25rem 3rem;
  font-size: 1.25rem;
}

/* Button Modifiers (BEM - UI FIX 2025-11-19) */
.btn-primary--large,
.btn-secondary--large {
  padding: 1.5rem 3rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.btn-primary--compact,
.btn-secondary--compact {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
}

.btn-primary--small,
.btn-secondary--small {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-primary--full,
.btn-secondary--full {
  width: 100%;
  display: block;
}

.btn-primary--icon,
.btn-secondary--icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Remove pulse animation from non-hero buttons */
.btn-primary--no-pulse {
  animation: none !important;
}

/* ===========================
   Navigation
   =========================== */

header {
  position: sticky;
  top: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}

.navbar {
  padding: 1rem 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-purple-dark); /* FIX: Better contrast */
}

.logo-icon {
  font-size: 2rem;
}

.logo-image {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: var(--color-gray-900); /* FIX: Darker for better contrast */
  font-weight: 500;
  transition: color var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--color-purple-dark); /* FIX: Darker hover color */
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-purple);
  transition: width var(--transition-fast);
}

.nav-link:hover::after {
  width: 100%;
}

.language-selector select {
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-purple);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-gray-900); /* FIX: Darker text */
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.language-selector select:hover {
  background: var(--color-purple);
  color: var(--color-white);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-nav-login {
  padding: 0.5rem 1.5rem;
  color: var(--color-purple-dark); /* FIX: Better contrast */
  font-weight: 600;
  transition: all var(--transition-fast);
  border-radius: var(--radius-full);
}

.btn-nav-login:hover {
  background: rgba(155, 135, 217, 0.1);
}

.btn-nav-register {
  padding: 0.5rem 1.5rem;
  background: var(--color-purple);
  color: var(--color-white);
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn-nav-register:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: #8B6EAD;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0.5rem;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--color-purple);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* ===========================
   Hero Section
   =========================== */

.hero {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
}

.hero-brand {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-purple);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  animation: fadeInUp 0.6s ease;
}

.hero-content h1 {
  color: var(--color-purple-dark);
  margin-bottom: 1rem;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  animation: fadeInUp 0.6s ease 0.1s backwards;
}

.subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-gray-600);
  margin-bottom: 1.5rem;
  max-width: 500px;
  line-height: 1.6;
  animation: fadeInUp 0.6s ease 0.2s backwards;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  animation: fadeInUp 0.6s ease 0.3s backwards;
}

.cta-note {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-top: 0.75rem;
  animation: fadeInUp 0.6s ease 0.35s backwards;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 3rem;
  animation: fadeInUp 0.6s ease 0.4s backwards;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.badge-icon {
  font-size: 1.5rem;
}

.badge-text {
  font-size: 0.9rem;
  color: var(--color-gray-600); /* FIX: Changed from #666 */
  font-weight: 500;
}

.hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInRight 0.8s ease;
}

.hero-fairy-img {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: float 3s ease-in-out infinite;
}

.hero-placeholder {
  background: var(--gradient-deep); /* FIX: Use dark gradient for white text */
  border-radius: var(--radius-lg);
  padding: 4rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-xl);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mascot {
  font-size: 8rem;
  animation: float 3s ease-in-out infinite;
}

.demo-text {
  color: var(--color-white);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
}

/* ===========================
   Features Section
   =========================== */

.features {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-white);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.feature {
  background: var(--color-cream);
  padding: 2rem;
  border-radius: var(--radius-md);
  text-align: center;
  transition: all var(--transition-base);
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.3s forwards; /* CSS fallback - show after 0.3s */
}

.feature.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

.feature:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  font-size: 4rem;
  margin: 0 auto 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  width: 120px;
  height: 120px;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.feature:hover .feature-icon {
  transform: scale(1.2) rotate(5deg);
}

.feature h3 {
  color: var(--color-purple-deeper); /* FIX: Darkest purple for small headings (8.2:1) */
  margin-bottom: 1rem;
}

.feature p {
  color: var(--color-gray-600); /* FIX: Changed from #666 */
  line-height: 1.6;
  margin-bottom: 0;
}

/* ===========================
   How It Works Section
   =========================== */

.how-it-works {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
}

/* Gradient mesh for depth - visible but not distracting */
.how-it-works::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(155, 135, 217, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 85% 75%, rgba(255, 159, 102, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.how-it-works .container {
  position: relative;
  z-index: 1;
}

/* Steps Container - Default 3 columns */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  align-items: start;
}

/* 5-step layout with connectors and images */
.steps--5 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: visible;
  padding-bottom: 1rem;
}

.steps--5 .step {
  flex: 0 0 140px;
  max-width: 160px;
}

.steps--5 .step-connector {
  flex: 0 0 30px;
  min-width: 30px;
}

.steps--5 .step-image {
  width: 100%;
  max-width: 160px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: 0 auto 1rem;
  box-shadow: var(--shadow-md);
}

/* Step connector (arrows between steps) */
.step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: auto;
  margin-top: 0;
  padding-top: 50px;
  color: var(--color-purple);
  font-size: 1.5rem;
  opacity: 1;
  flex-shrink: 0;
}

.step-connector::before {
  content: '→';
  font-weight: 400;
}

.step {
  text-align: center;
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.3s forwards; /* CSS fallback */
}

.step.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

/* Step icon (emoji) */
.step-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform var(--transition-base);
}

.step:hover .step-icon {
  transform: scale(1.15);
}

/* Step number badge */
.step-number {
  width: 36px;
  height: 36px;
  background: var(--gradient-magic);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 auto 1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  position: relative;
}

/* Subtle ring animation on step numbers */
.step-number::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--color-purple-light);
  opacity: 0;
  transition: all var(--transition-base);
}

.step:hover .step-number {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.step:hover .step-number::after {
  opacity: 1;
  inset: -6px;
}

.step h3 {
  color: var(--color-purple-deeper);
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.step p {
  color: var(--color-gray-600);
  margin-bottom: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Legacy step-image support */
.step-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 0 auto 1.5rem;
  display: block;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.step:hover .step-image {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* ===========================
   Social Proof Section
   =========================== */

.social-proof {
  padding: var(--spacing-md) var(--spacing-md);
  background: var(--gradient-deep);
  position: relative;
  overflow: hidden;
}

/* Subtle sparkle effect */
.social-proof::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
  pointer-events: none;
}

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

.stats-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }

.stat-value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Hover effect */
.stat-item:hover .stat-value {
  transform: scale(1.05);
  transition: transform var(--transition-fast);
}

/* ===========================
   Pricing Section
   =========================== */

.pricing {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-white);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  align-items: start;
}

.pricing-card {
  background: var(--color-cream);
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
  transition: all var(--transition-base);
  opacity: 0;
  border: 3px solid transparent;
  animation: fadeInUp 0.6s ease 0.3s forwards; /* CSS fallback */
}

.pricing-card.fade-in {
  animation: fadeInUp 0.6s ease forwards;
}

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

.pricing-card.featured {
  border-color: var(--color-purple);
  background: var(--color-white);
  transform: scale(1.05);
}

.pricing-card.featured:hover {
  transform: scale(1.08) translateY(-5px);
}

.pricing-card .badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-purple);
  color: var(--color-white);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.pricing-image {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pricing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pricing-card h3 {
  color: var(--color-purple-deeper); /* FIX: Darkest purple */
  margin-bottom: 0.75rem;
  margin-top: 0;
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-purple-dark); /* FIX: Changed from --color-purple (5.8:1 contrast) */
  margin: 0.5rem 0;
  font-family: var(--font-heading);
}

.period {
  color: var(--color-gray-600); /* FIX: Changed from #666 */
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.pricing-features {
  text-align: left;
  margin: 1rem 0;
  padding: 0 0.5rem;
}

.pricing-features li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-gray-900); /* FIX: Darker text */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.pricing-card .btn-primary {
  width: 100%;
  margin-top: 1.5rem;
}

/* ===========================
   Testimonials Section
   =========================== */

.testimonials {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--color-cream);
  position: relative;
  overflow: hidden;
}

/* Gradient mesh for testimonials - visible but not distracting */
.testimonials::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 70% 50% at 75% 20%, rgba(244, 166, 184, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 25% 85%, rgba(155, 135, 217, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

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

.testimonial-slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
}

/* Carousel navigation dots */
.testimonial-dots {
  display: none; /* Hidden on desktop, shown on mobile */
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gray-300);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.testimonial-dot.active,
.testimonial-dot:hover {
  background: var(--color-purple);
  transform: scale(1.2);
}

.testimonial {
  background: var(--color-white);
  padding: 2.5rem 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  /* opacity removed - handled by magic-effects.css animations */
}

/* Mobile carousel behavior */
@media (max-width: 768px) {
  .testimonial-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-bottom: 1rem;
  }

  .testimonial-slider::-webkit-scrollbar {
    display: none;
  }

  .testimonial {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }

  .testimonial-dots {
    display: flex;
  }
}

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

.stars {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-style: italic;
  color: var(--color-gray-900); /* FIX: Darker text */
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.testimonial-author {
  color: var(--color-purple-dark); /* FIX: Changed from --color-purple (5.8:1 contrast) */
  font-weight: 600;
  font-style: normal;
}

/* ===========================
   FAQ Section - Enchanted Storybook
   =========================== */

.faq-enchanted {
  padding: var(--spacing-xl) var(--spacing-md);
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 100%);
  position: relative;
  overflow: hidden;
}

/* Floating magic particles */
.faq-magic-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.faq-magic-particles .particle {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.4;
  animation: float-particle 8s ease-in-out infinite;
}

.particle-1 { top: 10%; left: 5%; animation-delay: 0s; }
.particle-2 { top: 20%; right: 8%; animation-delay: 1.5s; }
.particle-3 { top: 60%; left: 3%; animation-delay: 3s; }
.particle-4 { top: 80%; right: 5%; animation-delay: 4.5s; }
.particle-5 { top: 40%; right: 2%; animation-delay: 6s; }

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

/* Header styling */
.faq-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.book-decoration {
  margin-bottom: 1rem;
}

.book-icon {
  font-size: 3.5rem;
  display: inline-block;
  animation: book-float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(155, 135, 217, 0.3));
}

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

.faq-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--color-purple-deeper);
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.faq-subtitle {
  font-size: 1.1rem;
  color: var(--color-gray-600);
  max-width: 500px;
  margin: 0 auto;
}

/* Book container */
.faq-book {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
}

/* Decorative book spine */
.book-spine {
  width: 20px;
  background: linear-gradient(180deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
  border-radius: 4px 0 0 4px;
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,0.2),
    2px 0 8px rgba(155, 135, 217, 0.3);
  flex-shrink: 0;
}

.faq-chapters {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual chapter/question */
.faq-chapter {
  background: var(--color-white);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 4px solid transparent;
}

.faq-chapter:hover {
  transform: translateX(8px);
  box-shadow:
    0 8px 30px rgba(155, 135, 217, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1);
  border-left-color: var(--color-purple);
}

.faq-chapter.active {
  border-left-color: var(--color-orange);
  background: linear-gradient(135deg, #fff 0%, #faf8ff 100%);
}

/* Chapter header (question) */
.chapter-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}

.chapter-header:hover {
  background: rgba(155, 135, 217, 0.05);
}

.chapter-header:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: -2px;
}

.chapter-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  transition: transform 0.3s ease;
}

.faq-chapter:hover .chapter-icon {
  transform: scale(1.15) rotate(-5deg);
}

.chapter-number {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--gradient-hero);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.chapter-question {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-purple-deeper);
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.faq-chapter:hover .chapter-question {
  color: var(--color-purple);
}

.chapter-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-icon {
  color: var(--color-purple);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-chapter.active .chapter-toggle {
  background: var(--color-orange);
  transform: rotate(45deg);
}

.faq-chapter.active .toggle-icon {
  color: var(--color-white);
}

/* Chapter content (answer) */
.chapter-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.chapter-answer {
  padding: 0 1.5rem 1.5rem 4.5rem;
  position: relative;
}

.answer-decoration {
  position: absolute;
  top: 0;
  left: 1.5rem;
}

.answer-decoration .sparkle {
  color: var(--color-orange);
  font-size: 0.75rem;
  opacity: 0.6;
  animation: sparkle-pulse 2s ease-in-out infinite;
}

.sparkle-1 { animation-delay: 0s; }
.sparkle-2 { animation-delay: 1s; margin-left: 0.5rem; }

@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

.chapter-answer p {
  color: var(--color-gray-600);
  line-height: 1.8;
  font-size: 1rem;
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-cream);
}

/* Footer decoration */
.faq-footer-decoration {
  text-align: center;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}

.faq-footer-decoration .wand {
  font-size: 2rem;
  display: inline-block;
  animation: wand-wave 2s ease-in-out infinite;
}

@keyframes wand-wave {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

.faq-footer-decoration .stars {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.25rem;
  letter-spacing: 0.5rem;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  .book-spine {
    width: 12px;
  }

  .chapter-header {
    padding: 1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .chapter-icon {
    font-size: 1.5rem;
  }

  .chapter-number {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .chapter-question {
    font-size: 0.95rem;
    flex-basis: calc(100% - 120px);
  }

  .chapter-answer {
    padding: 0 1rem 1.25rem 1rem;
  }

  .chapter-answer p {
    padding-left: 0.75rem;
  }

  .answer-decoration {
    display: none;
  }

  .faq-magic-particles .particle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .book-spine {
    width: 8px;
  }

  .chapter-header {
    padding: 0.875rem;
  }

  .chapter-icon {
    font-size: 1.25rem;
  }

  .chapter-toggle {
    width: 28px;
    height: 28px;
  }

  .faq-title {
    font-size: 1.75rem;
  }

  .book-icon {
    font-size: 2.5rem;
  }
}

/* ===========================
   Final CTA Section - Redesigned
   =========================== */

.cta-final {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--gradient-deep);
  text-align: center;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

/* Decorative elements */
.cta-final__decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.1;
  pointer-events: none;
}

.cta-final__decoration--left {
  left: -100px;
  top: -50px;
  background: var(--color-orange);
}

.cta-final__decoration--right {
  right: -100px;
  bottom: -50px;
  background: var(--color-purple-light);
}

.cta-final__content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}

.cta-final__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: float 3s ease-in-out infinite;
}

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

.cta-final h2 {
  color: var(--color-white);
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.cta-final__subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
}

.cta-final__features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cta-final__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(5px);
}

.cta-final__feature-icon {
  font-size: 1.1rem;
}

.cta-final__button {
  background: var(--color-white);
  color: var(--color-purple-dark);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-final__button:hover {
  transform: translateY(-3px) scale(1.02);
  background: var(--color-cream);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
}

.app-badges {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-badges img {
  height: 45px;
  width: auto;
  transition: all var(--transition-fast);
  opacity: 0.9;
}

.app-badges a:hover img {
  transform: scale(1.05);
  opacity: 1;
}

/* ===========================
   Footer - Redesigned
   =========================== */

.footer {
  background: linear-gradient(180deg, var(--color-gray-900) 0%, #1a1a2e 100%);
  color: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Brand column - wider */
.footer-col--brand {
  max-width: 280px;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.footer-logo__img {
  height: 40px;
  width: auto;
  transition: opacity var(--transition-fast);
}

.footer-logo:hover .footer-logo__img {
  opacity: 0.8;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-heading {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

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

.footer-links a:hover {
  color: var(--color-purple-light);
  transform: translateX(3px);
}

/* Contact section */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-email {
  color: var(--color-purple-light);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition-fast);
}

.footer-email:hover {
  color: var(--color-white);
}

.footer-response {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
}

/* Social links */
.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--color-white);
  transition: all var(--transition-fast);
}

.social-link:hover {
  background: var(--color-purple);
  transform: translateY(-3px);
}

.social-link svg {
  width: 18px;
  height: 18px;
}

/* Footer bottom */
.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-bottom p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  margin: 0;
}

/* Responsive footer */
@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
    max-width: none;
    text-align: center;
  }

  .footer-logo {
    margin-bottom: 1rem;
  }

  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links a:hover {
    transform: none;
  }
}

/* ===========================
   Animations
   =========================== */

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* ===========================
   Responsive Design
   =========================== */

/* Tablet - steps still horizontal but smaller */
@media (max-width: 1024px) and (min-width: 769px) {
  .steps--5 .step {
    flex: 0 0 120px;
    max-width: 140px;
  }

  .steps--5 .step-connector {
    flex: 0 0 20px;
    min-width: 20px;
    width: 20px;
  }

  .steps--5 .step-image {
    max-width: 120px;
    height: 80px;
  }

  .steps--5 h3 {
    font-size: 0.9rem;
  }

  .steps--5 p {
    font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  /* Navigation */
  .nav-menu {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 100%;
    max-width: 300px;
    height: calc(100vh - 70px);
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    transition: right var(--transition-base);
    gap: 1.5rem;
  }

  .nav-menu.active {
    right: 0;
  }

  .mobile-menu-toggle {
    display: flex;
  }

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

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

  .mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }

  .nav-actions {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }

  .btn-nav-login,
  .btn-nav-register {
    width: 100%;
    text-align: center;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--spacing-md);
    min-height: auto;
  }

  .cta-buttons {
    justify-content: center;
  }

  .hero-badges {
    justify-content: center;
  }

  /* Features */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Steps */
  .steps {
    grid-template-columns: 1fr;
  }

  .steps--5 {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .steps--5 .step {
    flex: 0 0 auto;
    max-width: 280px;
    width: 100%;
  }

  .steps--5 .step-connector {
    width: 30px;
    height: 30px;
    margin-top: 0;
    transform: rotate(90deg);
  }

  .step-icon {
    font-size: 2.5rem;
  }

  /* Social Proof */
  .stats-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  /* Pricing */
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.featured {
    transform: scale(1);
  }

  /* Testimonials */
  .testimonial-slider {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
  }

  body {
    font-size: 1rem; /* Smaller on very small screens */
  }

  h1 {
    font-size: clamp(2rem, 8vw, 3rem); /* FIX: Better mobile sizing */
  }

  h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  h3 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  .hero-placeholder {
    padding: 2rem 1rem;
    min-height: 300px;
  }

  .mascot {
    font-size: 5rem;
  }

  .pricing-card {
    padding: 2rem 1rem;
  }

  .price {
    font-size: 2.5rem; /* FIX: Smaller on mobile */
  }
}

/* ===========================
   Accessibility
   =========================== */

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

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-purple-dark); /* FIX: Better contrast for outline */
  outline-offset: 2px;
}

/* ===========================
   Loading Spinner (UI FIX 2025-11-19)
   =========================== */

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-gray-200);
  border-top-color: var(--color-purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner--small {
  width: 24px;
  height: 24px;
  border-width: 2px;
}

.spinner--large {
  width: 64px;
  height: 64px;
  border-width: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===========================
   Toast Notifications (UI FIX 2025-11-19)
   =========================== */

.toast {
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  min-width: 300px;
  max-width: 500px;
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 9999;
  animation: toast-slide-in 0.3s ease;
}

.toast--success {
  background: var(--color-success);
  color: var(--color-white);
}

.toast--error {
  background: var(--color-error);
  color: var(--color-white);
}

.toast--warning {
  background: var(--color-warning);
  color: var(--color-gray-900);
}

.toast--info {
  background: var(--color-blue);
  color: var(--color-white);
}

.toast-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.toast-message {
  flex: 1;
}

.toast-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast.toast--exiting {
  animation: toast-slide-out 0.3s ease forwards;
}

/* Mobile toast */
@media (max-width: 768px) {
  .toast {
    left: 1rem;
    right: 1rem;
    top: 1rem;
    min-width: auto;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-dark: #000000;
    --color-white: #FFFFFF;
    --color-purple-deeper: #2A1B4B; /* FIX: Even darker for high contrast */
  }
}