/*
====================================
SPARKLY FUN - PREMIUM LANDING PAGE
====================================
Design System: Magical Space + Premium Kid-Friendly EdTech
Theme: Space gradient + Glass Bubbles + Neon Glows + 3D Animations
Mood: Calm space + magical stars + premium feel
Author: Sparkly Fun Team
Version: 3.0 — Refactored for Graduation Defense
*/

/* ==================== CSS VARIABLES ==================== */
:root {
  /* Color Palette - MAGICAL SPACE THEME */
  --color-space-deep: #0B1F3B;
  --color-space-darker: #081A33;
  --color-space-navy: #0D2847;
  
  /* Neon Accent Colors */
  --color-neon-pink: #FF5FD7;
  --color-neon-cyan: #39D2C0;
  --color-neon-green: #55FF9A;
  --color-neon-purple: #A855F7;
  --color-neon-yellow: #F2C94C;
  --color-soft-blue: #2F80ED;
  
  /* Text Colors - Snow White (not harsh white) */
  --color-text-white: #F7FAFF;
  --color-text-dim: #B8C5D6;
  --color-text-muted: #8899AA;

  /* Brand Color Aliases */
  --color-primary-blue: var(--color-soft-blue);
  --color-aqua-mint: var(--color-neon-cyan);
  --color-purple-glow: var(--color-neon-purple);
  --color-sunshine-yellow: var(--color-neon-yellow);
  --color-magenta-glow: var(--color-neon-pink);
  --color-green-glow: var(--color-neon-green);
  
  /* Legacy aliases for compatibility */
  --color-cyan: #39D2C0;
  --color-cyan-light: #6FDBCB;
  --color-purple: #A855F7;
  --color-pink: #FF5FD7;
  --color-green: #55FF9A;
  --color-green-light: #7BFFB5;
  --color-yellow: #F2C94C;
  --color-orange: #FFB347;
  --color-magenta: #FF5FD7;
  --color-purple-electric: #A855F7;

  /* Typography - Round & Friendly */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Spacing (8pt grid) - Generous */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* Border Radius - Bubble Glass (Very Rounded) */
  --radius-sm: 20px;
  --radius-md: 24px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-pill: 500px;
  --glass-radius: 28px;

  /* Shadows - DREAMY SOFT (Calm, Premium) */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.3);
  
  /* Neon Glow Effects */
  --glow-pink: 0 0 20px rgba(255, 95, 215, 0.4), 0 0 40px rgba(255, 95, 215, 0.2);
  --glow-cyan: 0 0 20px rgba(57, 210, 192, 0.4), 0 0 40px rgba(57, 210, 192, 0.2);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.2);
  --glow-green: 0 0 20px rgba(85, 255, 154, 0.4), 0 0 40px rgba(85, 255, 154, 0.2);
  --glow-yellow: 0 0 25px rgba(242, 201, 76, 0.5), 0 0 50px rgba(242, 201, 76, 0.25);
  
  --shadow-glow-blue: var(--glow-cyan);
  --shadow-glow-aqua: var(--glow-cyan);
  --shadow-glow-purple: var(--glow-purple);
  --shadow-glow-yellow: var(--glow-yellow);
  --shadow-glow-pink: var(--glow-pink);
  --shadow-glow-cyan: var(--glow-cyan);

  /* Glass Effect - BUBBLE GLASS (True Glassmorphism) */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-bg-darker: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: 16px;
  --glass-border-width: 1px;
  
  /* Calm Hover Transitions */
  --transition-hover: 0.3s ease;
  
  /* Gradient Glowing Rims (Cyan → Purple → Pink) */
  --glass-border-gradient: linear-gradient(135deg, 
    var(--color-neon-cyan) 0%,
    var(--color-neon-purple) 50%, 
    var(--color-neon-pink) 100%);
  
  /* Card Specific Neon Border Colors */
  --neon-border-pink: rgba(255, 95, 215, 0.6);
  --neon-border-cyan: rgba(57, 210, 192, 0.6);
  --neon-border-green: rgba(85, 255, 154, 0.6);
  --neon-border-purple: rgba(168, 85, 247, 0.6);
  --neon-border-yellow: rgba(242, 201, 76, 0.6);
  
  /* Floating Depth - Soft Shadow & Inner Glow */
  --glass-outer-glow: 0 15px 40px rgba(0, 0, 0, 0.35),
                      0 8px 20px rgba(57, 210, 192, 0.1),
                      0 0 15px rgba(168, 85, 247, 0.08);
  --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
                      inset 0 0 20px rgba(255, 255, 255, 0.05);
  
  /* Glossy Surface Reflection (Specular Shine from Top) */
  --glass-reflection: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.05) 30%, 
    transparent 50%, 
    rgba(255, 255, 255, 0.02) 100%);

  /* Transitions - Smooth & Calm */
  --transition-fast: 0.25s ease;
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-reveal: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== RESET & BASE ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Hide scrollbar for all elements */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

/* Hide Scrollbar - Complete removal */
html, body {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-white);
  /* Unified Space Background - Deep Navy to Blue gradient */
  background: 
    /* Blur orbs / Bokeh planets layer */
    radial-gradient(ellipse 600px 400px at 15% 25%, rgba(47, 128, 237, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 500px 350px at 85% 20%, rgba(168, 85, 247, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 300px at 70% 60%, rgba(57, 210, 192, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 350px 250px at 25% 75%, rgba(255, 95, 215, 0.08) 0%, transparent 70%),
    /* Main space gradient */
    linear-gradient(180deg, 
      var(--color-space-darker) 0%, 
      var(--color-space-deep) 30%,
      var(--color-space-navy) 70%,
      var(--color-space-deep) 100%);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

/* Cloud fog overlay at bottom of sections */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, 
    rgba(11, 31, 59, 0.9) 0%,
    rgba(11, 31, 59, 0.5) 40%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Prevent horizontal scroll */
body,
html {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==================== PARTICLE CANVAS BACKGROUND ==================== */
#particleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ==================== TYPOGRAPHY - Round & Friendly ==================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-white);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
}
h4 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}
h5 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 600;
}

/* Typography colors - Snow White (soft, not harsh) */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* GRADUATION DEFENSE SAFEGUARD: Enhanced readability for projector screens */
/* Small white paragraph text gets subtle text-shadow against deep navy background */
p, 
.section-text, 
.feature-description, 
.feature-detail-text,
.footer-text,
.hero-subtitle,
.section-subtitle,
.cta-subtitle,
.cta-option-text,
.impact-title,
.benefit-title,
.gamification-item span,
.gamification-text small,
.footer-copyright,
.footer-links a,
.mini-card small {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.3);
  font-weight: 400;
}

/* Bump font-weight slightly for critical readability text */
p, .section-text, .footer-text, .hero-subtitle, .section-subtitle {
  font-weight: 425;
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-text-dim);
  line-height: 1.8;
}

/* ==================== NAVIGATION - Glass Container ==================== */
.glass-nav {
  background: rgba(11, 31, 59, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 12px 0;
  margin: 0 auto;
  transition: all var(--transition-normal);
  z-index: 1000;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Nav container as glass bubble */
.glass-nav .container {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-nav.scrolled {
  background: rgba(11, 31, 59, 0.85);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(57, 210, 192, 0.1);
}

.glass-nav.scrolled .container {
  background: rgba(255, 255, 255, 0.05);
}

.navbar-brand {
  padding: 0;
}

.logo-svg {
  transition: transform var(--transition-normal);
}

.logo-svg:hover {
  transform: scale(1.05);
}

.sparkle-dot,
.sparkle-star {
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.navbar-nav .nav-link {
  color: var(--color-text-dim);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 20px;
  margin: 0 4px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-normal);
  position: relative;
}

.navbar-nav .nav-link:hover {
  color: var(--color-text-white);
  background: rgba(57, 210, 192, 0.1);
}

.navbar-nav .nav-link.active {
  color: var(--color-text-white);
  background: rgba(57, 210, 192, 0.15);
  border: 1px solid rgba(57, 210, 192, 0.4);
  box-shadow: 0 0 15px rgba(57, 210, 192, 0.3);
}

.navbar-toggler {
  border: none;
  padding: 8px;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon-custom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
}

.navbar-toggler-icon-custom span {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-neon-cyan), var(--color-neon-purple));
  border-radius: 2px;
  transition: all var(--transition-normal);
}

/* ==================== BUTTONS - Rounded Pill + Glow ==================== */
.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.btn-lg {
  padding: 16px 40px;
  font-size: 1.125rem;
  border-radius: var(--radius-pill);
}

/* Primary CTA - Warm Yellow/Gold with Glow */
.btn-primary-cta {
  background: linear-gradient(135deg, var(--color-neon-yellow), #E5B84A);
  color: var(--color-space-deep);
  font-weight: 700;
  border: 1.5px solid rgba(242, 201, 76, 0.5);
  box-shadow: var(--glow-yellow);
}

.btn-primary-cta:hover {
  box-shadow: 0 0 25px rgba(242, 201, 76, 0.4), 
              0 6px 20px rgba(0, 0, 0, 0.2);
  color: var(--color-space-deep);
}

.btn-primary-yellow {
  background: linear-gradient(135deg, var(--color-neon-yellow), #DEAF32);
  color: var(--color-space-deep);
  font-weight: 700;
  border: 1.5px solid rgba(242, 201, 76, 0.5);
  box-shadow: var(--glow-yellow);
}

.btn-primary-yellow:hover {
  box-shadow: 0 0 25px rgba(242, 201, 76, 0.4), 
              0 6px 20px rgba(0, 0, 0, 0.2);
  color: var(--color-space-deep);
}

/* Secondary - Transparent Glass with Neon Border */
.btn-secondary-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(57, 210, 192, 0.4);
  color: var(--color-text-white);
  box-shadow: 0 0 10px rgba(57, 210, 192, 0.15);
}

.btn-secondary-glass:hover {
  background: rgba(57, 210, 192, 0.08);
  border-color: rgba(57, 210, 192, 0.6);
  box-shadow: 0 0 20px rgba(57, 210, 192, 0.25),
              0 4px 15px rgba(0, 0, 0, 0.15);
  color: var(--color-text-white);
}

@keyframes gentle-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(242, 201, 76, 0.4), 0 4px 12px rgba(242, 201, 76, 0.25);
  }
  50% {
    box-shadow: 0 0 30px rgba(242, 201, 76, 0.5), 0 6px 18px rgba(242, 201, 76, 0.35);
  }
}

/* ==================== BUBBLE GLASS CARDS - True Glassmorphism ==================== */
.glass-card,
.feature-card,
.feature-detail-card,
.mini-card,
.why-card,
.impact-card,
.value-item,
.gamification-item,
.parent-benefit,
.cta-card,
.cta-option-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--glass-radius);
  border: var(--glass-border-width) solid rgba(255, 255, 255, 0.12);
  position: relative;
  transition: all var(--transition-normal);
  transform-style: preserve-3d;
  overflow: hidden;
}

/* Inner Highlight Shine (Specular from Top) */
.glass-card::before,
.feature-card::before,
.feature-detail-card::before,
.mini-card::before,
.why-card::before,
.impact-card::before,
.cta-card::before,
.cta-option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.12) 0%, 
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%);
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Glossy Surface Reflection Layer */
.glass-card::after,
.feature-card::after,
.feature-detail-card::after,
.mini-card::after,
.why-card::after,
.impact-card::after,
.cta-card::after,
.cta-option-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-reflection);
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  border-radius: var(--glass-radius);
}

/* Soft Outer Glow + Inner Glow */
.glass-card,
.feature-card,
.feature-detail-card,
.mini-card,
.why-card,
.impact-card,
.cta-card,
.cta-option-card {
  box-shadow: var(--glass-outer-glow), var(--glass-inner-glow);
}

/* =========================== */
/* NEON BORDER COLORS BY CARD  */
/* =========================== */

/* Pink Neon Border Cards */
.feature-card:nth-child(3n+1),
.feature-detail-card:nth-child(3n+1),
.cta-option-card:nth-child(1) {
  border-color: var(--neon-border-pink);
  box-shadow: var(--glass-outer-glow), 
              0 0 15px rgba(255, 95, 215, 0.2);
}

/* Cyan Neon Border Cards */
.feature-card:nth-child(3n+2),
.feature-detail-card:nth-child(3n+2),
.cta-option-card:nth-child(2) {
  border-color: var(--neon-border-cyan);
  box-shadow: var(--glass-outer-glow), 
              0 0 15px rgba(57, 210, 192, 0.2);
}

/* Green/Yellow Neon Border Cards */
.feature-card:nth-child(3n),
.feature-detail-card:nth-child(3n),
.cta-option-card:nth-child(3) {
  border-color: var(--neon-border-yellow);
  box-shadow: var(--glass-outer-glow), 
              0 0 15px rgba(242, 201, 76, 0.2);
}

/* Specific Padding for Different Card Types */
.glass-card {
  padding: var(--spacing-xl);
}

.feature-card,
.feature-detail-card,
.mini-card,
.why-card,
.impact-card {
  padding: var(--spacing-lg);
}

.value-item,
.gamification-item,
.parent-benefit {
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Ensure inner content floats above glass layers */
.glass-card > *,
.feature-card > *,
.feature-detail-card > *,
.mini-card > *,
.why-card > *,
.impact-card > *,
.cta-card > *,
.cta-option-card > * {
  position: relative;
  z-index: 2;
}

/* ==================== HOVER STATES - Soft Glow Only (No Movement) ==================== */
/* Base hover - NO transforms, just soft glow enhancement */
.glass-card:hover,
.feature-card:hover,
.feature-detail-card:hover,
.mini-card:hover,
.why-card:hover,
.impact-card:hover,
.cta-card:hover,
.cta-option-card:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(57, 210, 192, 0.35);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(57, 210, 192, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Soft pink glow on hover */
.feature-card:nth-child(3n+1):hover,
.feature-detail-card:nth-child(3n+1):hover,
.cta-option-card:nth-child(1):hover {
  border-color: rgba(255, 95, 215, 0.4);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 25px rgba(255, 95, 215, 0.2);
}

/* Soft cyan glow on hover */
.feature-card:nth-child(3n+2):hover,
.feature-detail-card:nth-child(3n+2):hover,
.cta-option-card:nth-child(2):hover {
  border-color: rgba(57, 210, 192, 0.45);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 25px rgba(57, 210, 192, 0.2);
}

/* Soft mint/yellow glow on hover */
.feature-card:nth-child(3n):hover,
.feature-detail-card:nth-child(3n):hover,
.cta-option-card:nth-child(3):hover {
  border-color: rgba(85, 255, 154, 0.4);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 0 25px rgba(85, 255, 154, 0.18);
}

/* Value items - subtle background change only */
.value-item:hover,
.gamification-item:hover,
.parent-benefit:hover {
  background: rgba(57, 210, 192, 0.06);
  border-color: rgba(57, 210, 192, 0.25);
}

/* ==================== SECTIONS ==================== */
.section-padding {
  padding: var(--spacing-3xl) 0;
  position: relative;
  z-index: 1;
}

/* Section Title - Gradient Text with Subtle Glow */
.section-title {
  font-weight: 800;
  background: linear-gradient(135deg, 
    var(--color-text-white) 0%, 
    var(--color-neon-cyan) 50%, 
    var(--color-neon-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--spacing-md);
  filter: drop-shadow(0 0 8px rgba(57, 210, 192, 0.25));
}

.section-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-dim);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.section-text {
  font-size: 1.125rem;
  color: var(--color-text-dim);
  line-height: 1.8;
}

/* ==================== HERO SECTION ==================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 100px;
}

.hero-title {
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-white);
}

.hero-subtitle {
  color: var(--color-text-dim);
  font-size: 1.2rem;
  line-height: 1.7;
}

/* ==================== 3D ASSETS & VISUAL EXCELLENCE ==================== */
.asset-3d-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2000px;
  padding: 30px;
  z-index: 10;
}

/* Base styling for all 3D assets */
.asset-3d {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  will-change: transform, filter;
  z-index: 2;
}

/* Standard Sizing - Premium Impact */
.hero-section .asset-3d { max-height: 560px; width: auto; }
.feature-card .asset-3d { max-height: 160px; width: auto; }
.feature-detail-card .asset-3d { max-height: 120px; width: auto; }
.impact-card .asset-3d { max-height: 100px; width: auto; }

/* Floating Animation Variants - Gentle Up/Down */
@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-2deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

.floating-3d-1 { animation: float1 6s ease-in-out infinite; }
.floating-3d-2 { animation: float2 7s ease-in-out infinite; }
.floating-3d-3 { animation: float3 5.5s ease-in-out infinite; }

/* Magic Bloom Effect */
.magic-bloom {
  filter: drop-shadow(0 0 12px rgba(57, 210, 192, 0.35))
          drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

/* ==================== VALUE HIGHLIGHTS ==================== */
.value-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-sm);
}

.value-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--glass-bg-darker);
  position: relative;
  overflow: hidden;
}

.value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--color-neon-cyan),
    var(--color-neon-purple)
  );
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.value-item:hover::before {
  opacity: 0.6;
}

.value-item span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-white);
}

.value-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Hero CTA wrapper */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* ==================== FEATURE CARDS ==================== */
.feature-card {
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card[data-tilt]:hover {
  /* No transform - cards stay in place */
}

.feature-icon-wrapper {
  display: inline-block;
  transition: filter var(--transition-hover);
}

.feature-card:hover .feature-icon-wrapper {
  filter: brightness(1.1);
}

.feature-icon {
  filter: drop-shadow(0 0 12px rgba(57, 210, 192, 0.5));
  transition: filter var(--transition-normal);
}

.feature-card:hover .feature-icon {
  filter: drop-shadow(0 0 20px rgba(57, 210, 192, 0.7));
}

.feature-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-white);
}

.feature-description {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
}

.feature-detail-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-white);
  margin-bottom: var(--spacing-xs);
}

.feature-detail-text {
  color: var(--color-text-dim);
  font-size: 1rem;
  line-height: 1.7;
}

/* ==================== FEATURE DETAIL ICON WRAPPER ==================== */
.feature-detail-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  padding: 10px;
}

.feature-detail-icon-wrapper svg {
  filter: drop-shadow(0 0 10px rgba(57, 210, 192, 0.2));
  transition: filter var(--transition-normal);
}

.feature-detail-card:hover .feature-detail-icon-wrapper svg {
  filter: drop-shadow(0 0 18px rgba(57, 210, 192, 0.4));
}

/* ==================== FEATURE GROUPS ==================== */
.feature-group {
  margin-bottom: var(--spacing-2xl);
}

.feature-group-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: center;
}

.feature-group-icon {
  padding: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(57, 210, 192, 0.3);
  box-shadow: 0 0 15px rgba(57, 210, 192, 0.15);
  transition: all var(--transition-normal);
}

.feature-group-icon:hover {
  box-shadow: var(--glow-cyan);
}

.feature-group-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-white);
  margin: 0;
}

/* Feature Detail Cards */
.feature-detail-card {
  height: 100%;
}

/* ==================== GAMIFICATION SECTION — REDESIGNED ==================== */
.gamification-main-card {
  padding: var(--spacing-xl);
}

/* 2-column modern grid for gamification items */
.gamification-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.gamification-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--glass-bg-darker);
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.gamification-item:hover {
  background: rgba(57, 210, 192, 0.06);
  border-color: rgba(57, 210, 192, 0.25);
}

/* Left accent line on hover */
.gamification-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--color-neon-cyan), var(--color-neon-purple));
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.gamification-item:hover::before {
  opacity: 1;
}

.gamification-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.gamification-icon svg {
  filter: drop-shadow(0 0 6px rgba(57, 210, 192, 0.2));
}

.gamification-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gamification-text strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-white);
}

.gamification-text small {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.gamification-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.gamification-item span {
  font-size: 1.05rem;
  color: var(--color-text-dim);
}

/* ==================== CONNECTED FEATURES ==================== */
.connected-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Mini Cards */
.mini-card,
.why-card,
.impact-card {
  height: 100%;
  text-align: center;
}

.mini-icon {
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.mini-icon svg {
  filter: drop-shadow(0 0 8px rgba(57, 210, 192, 0.15));
  transition: filter var(--transition-normal);
}

.mini-card:hover .mini-icon svg {
  filter: drop-shadow(0 0 14px rgba(57, 210, 192, 0.3));
}

.mini-card small {
  color: var(--color-text-dim);
  font-size: 0.9rem;
}

.why-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-sm);
}

.why-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 0;
}

/* ==================== PARENT BENEFITS — SYMMETRICAL LAYOUT ==================== */
.parent-benefit,
.parent-benefit-balanced {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  background: var(--glass-bg-darker);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  height: 100%;
  transition: all var(--transition-normal);
}

.parent-benefit:hover,
.parent-benefit-balanced:hover {
  background: rgba(57, 210, 192, 0.04);
  border-color: rgba(57, 210, 192, 0.2);
}

/* Force equal heights in the parents row */
.parents-row {
  align-items: stretch !important;
}

.parents-row .col-md-6 {
  display: flex;
}

.parents-row .col-md-6 .parent-benefit,
.parents-row .col-md-6 .parent-benefit-balanced {
  flex: 1;
}

.benefit-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.benefit-icon svg {
  filter: drop-shadow(0 0 8px rgba(57, 210, 192, 0.15));
}

.benefit-content {
  flex: 1;
  min-width: 0;
}

.benefit-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-white);
  margin-bottom: 8px;
}

.value-item span,
.gamification-item span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-white);
}

/* ==================== IMPACT CARDS ==================== */
.impact-card {
  padding: var(--spacing-lg);
  height: 100%;
  transition: all var(--transition-normal);
  border-radius: var(--radius-xl) !important;
}

.impact-card:hover {
  transform: translateY(-8px);
}

.impact-icon {
  font-size: 3rem;
}

.impact-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-dim);
  margin: 0;
}

/* ==================== CTA SECTION ==================== */
.cta-card {
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.cta-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--color-text-white);
}

.cta-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-dim);
  max-width: 600px;
  margin: 0 auto var(--spacing-xl);
}

.cta-option-card {
  padding: var(--spacing-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all var(--transition-normal);
}

.cta-option-card:hover {
  transform: translateY(-8px);
}

.cta-option-icon {
  margin-bottom: var(--spacing-md);
}

.cta-option-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: var(--spacing-xs);
}

.cta-option-text {
  font-size: 1rem;
  color: var(--color-text-dim);
  margin-bottom: var(--spacing-md);
}

/* ==================== FOOTER ==================== */
.footer {
  background: rgba(11, 31, 59, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
  position: relative;
  z-index: 1;
}

.footer-title {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-text {
  color: var(--color-text-dim);
  font-size: 1rem;
}

.footer-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-white);
}

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

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--color-text-dim);
  text-decoration: none;
  transition: all var(--transition-fast);
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--color-neon-cyan);
  padding-left: 8px;
}

.social-links {
  display: flex;
  gap: var(--spacing-sm);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  transition: all var(--transition-normal);
}

.social-link:hover {
  background: rgba(57, 210, 192, 0.1);
  border-color: var(--color-neon-cyan);
  color: var(--color-neon-cyan);
  transform: translateY(-4px);
  box-shadow: var(--glow-cyan);
}

.footer-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
}

.footer-copyright {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ==================== ANIMATIONS - Scroll Reveal & Micro-interactions ==================== */
/* Reveal Animations - Fade + Slide Up (500-900ms duration) */
/* Fallback: show content after 2s if JS doesn't load */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fallbackReveal 0.1s ease-out 2s forwards;
}

@keyframes fallbackReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* When JS works, the revealed class is added and animation is cancelled */
.reveal-fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Hero section should always be visible immediately */
.hero-section .reveal-fade-up {
  opacity: 1;
  transform: translateY(0);
  animation: heroFadeIn 1s ease-out forwards;
}

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

/* Staggered Delay Variations */
[data-delay="100"].revealed {
  transition-delay: 0.1s;
}

[data-delay="200"].revealed {
  transition-delay: 0.2s;
}

[data-delay="300"].revealed {
  transition-delay: 0.3s;
}

[data-delay="400"].revealed {
  transition-delay: 0.4s;
}

[data-delay="500"].revealed {
  transition-delay: 0.5s;
}

/* 3D Tilt Effect */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Twinkling Stars Animation (for particle canvas) */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Icon Floating Effect */
@keyframes icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.floating-icon {
  animation: icon-float 4s ease-in-out infinite;
}

/* ==================== RESPONSIVE DESIGN ==================== */
/* Tablet */
@media (max-width: 991px) {
  :root {
    --spacing-3xl: 64px;
    --spacing-2xl: 48px;
  }

  .section-padding {
    padding: var(--spacing-2xl) 0;
  }

  .hero-section {
    padding-top: 80px;
  }

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

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

  .glass-nav .container {
    border-radius: var(--radius-lg);
    padding: 6px 16px;
  }

  .navbar-collapse {
    background: rgba(11, 31, 59, 0.95);
    backdrop-filter: blur(20px);
    padding: 20px;
    border-radius: var(--radius-lg);
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  }

  .navbar-nav .nav-link {
    margin: 4px 0;
  }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --spacing-3xl: 48px;
    --spacing-2xl: 32px;
    --spacing-xl: 32px;
    --glass-radius: 24px;
  }

  .section-padding {
    padding: var(--spacing-xl) 0;
  }

  .hero-section {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .value-highlights {
    grid-template-columns: 1fr;
  }

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

  .hero-cta .btn {
    width: 100%;
  }

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

  .robot-mascot {
    max-width: 350px;
  }

  .glass-card {
    padding: var(--spacing-md);
  }

  .cta-card {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .footer {
    padding: var(--spacing-xl) 0 var(--spacing-md);
  }

  .feature-group-title {
    font-size: 1.5rem;
  }

  .glass-nav .container {
    background: transparent;
    border: none;
    padding: 0 15px;
  }

  .parent-benefit,
  .parent-benefit-balanced {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* Extra small devices */
@media (max-width: 360px) {
  .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  .btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
  }

  .robot-mascot {
    max-width: 280px;
  }

  .hero-title {
    font-size: 2rem;
  }
}

/* ==================== ACCESSIBILITY ==================== */
/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 4px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .glass-card {
    border-width: 2px;
  }

  .btn {
    border: 2px solid currentColor;
  }
}

/* ==================== UTILITIES ==================== */
.text-gradient-cyan {
  background: linear-gradient(135deg, var(--color-neon-cyan), var(--color-neon-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-pink {
  background: linear-gradient(135deg, var(--color-neon-pink), var(--color-neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ensure no horizontal overflow */
.container,
.container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}

.row {
  margin-left: -12px;
  margin-right: -12px;
}

[class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* ==================== CALM PREMIUM EFFECTS ==================== */

/* Subtle background grid - very faint */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 150px,
      rgba(57, 210, 192, 0.015) 150px,
      rgba(57, 210, 192, 0.015) 151px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 150px,
      rgba(168, 85, 247, 0.015) 150px,
      rgba(168, 85, 247, 0.015) 151px
    );
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* Remove aggressive holographic shimmer - use subtle inner glow only */
.glass-card::before,
.feature-card::before,
.feature-detail-card::before,
.mini-card::before,
.why-card::before,
.impact-card::before,
.cta-card::before,
.cta-option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.08) 0%, 
    rgba(255, 255, 255, 0.02) 60%,
    transparent 100%);
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Remove animated ::after border glow - use static subtle glow */
.glass-card::after,
.feature-card::after,
.feature-detail-card::after,
.mini-card::after,
.why-card::after,
.impact-card::after,
.cta-card::after,
.cta-option-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(255, 255, 255, 0.02) 50%,
    transparent 100%);
  border-radius: var(--glass-radius);
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

/* Cards - stable, no 3D transforms */
.glass-card,
.feature-card,
.feature-detail-card,
.cta-option-card {
  position: relative;
  transition: 
    background var(--transition-hover),
    border-color var(--transition-hover),
    box-shadow var(--transition-hover);
}

/* Remove section perspective - keep flat */
section {
  position: relative;
}

/* Calm button hover - subtle glow only */
.btn {
  position: relative;
  overflow: hidden;
  transition: 
    box-shadow var(--transition-hover),
    border-color var(--transition-hover),
    background var(--transition-hover);
}

.btn::before {
  display: none; /* Remove light sweep animation */
}

.btn:hover {
  /* No transform - just subtle glow */
}

/* Remove glitch effect from titles */
.section-title {
  position: relative;
}

.section-title:hover {
  /* No animation - keep text stable */
}

/* Calm text glow - very subtle */
h1, h2, h3 {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

/* Hero section - subtle background glow */
.hero-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(57, 210, 192, 0.06) 0%,
    rgba(168, 85, 247, 0.03) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Assets - calm hover */
.asset-3d {
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25));
  transition: filter var(--transition-hover);
}

.asset-3d:hover {
  filter: drop-shadow(0 18px 35px rgba(57, 210, 192, 0.2)) brightness(1.03);
}

/* Remove section neon lines */
.section-padding::before {
  display: none;
}

/* Remove hero illustration particle effects */
.hero-illustration::after {
  display: none;
}

/* Calm navigation */
.glass-nav {
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 0 10px rgba(57, 210, 192, 0.05);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: rgba(57, 210, 192, 0.6);
  transition: width var(--transition-hover);
  transform: translateX(-50%);
}

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

/* Footer - subtle top border */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(57, 210, 192, 0.3),
    rgba(168, 85, 247, 0.3),
    transparent
  );
  opacity: 0.6;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
/* GPU acceleration for animations */
.glass-card,
.feature-card,
.btn,
[data-tilt] {
  will-change: transform;
}

/* Lazy load images optimization */
img {
  max-width: 100%;
  height: auto;
}

/* Prevent layout shift */
svg {
  display: block;
}

/* ==================== ICON & EMOJI STYLES ==================== */
.impact-icon, .gamification-icon, .benefit-icon, .mini-icon {
  font-size: 2.5rem;
  display: inline-block;
  position: relative;
  transition: filter var(--transition-hover);
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(57, 210, 192, 0.15));
}

.gamification-icon::after, .benefit-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, var(--color-neon-cyan) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0.05;
  filter: blur(10px);
}

/* Icons - subtle brightness on hover only */
.glass-card:hover .gamification-icon, 
.glass-card:hover .benefit-icon {
  filter: drop-shadow(0 0 10px rgba(57, 210, 192, 0.3)) brightness(1.05);
}

/* ==================== ENHANCED UI/UX IMPROVEMENTS ==================== */

/* Improved Card Depth & Visual Hierarchy */
.glass-card,
.feature-card,
.feature-detail-card,
.cta-option-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Premium Card Corners - Subtle Accent */
.feature-card::before,
.feature-detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    rgba(57, 210, 192, 0.15) 0%,
    transparent 50%
  );
  border-radius: var(--glass-radius) 0 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Section Dividers - Elegant Lines */
section:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(57, 210, 192, 0.2) 20%,
    rgba(168, 85, 247, 0.3) 50%,
    rgba(57, 210, 192, 0.2) 80%,
    transparent 100%
  );
}

/* Enhanced Typography - Better Readability */
.hero-title {
  letter-spacing: -0.02em;
  text-shadow: 
    0 2px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(57, 210, 192, 0.1);
}

.section-title {
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
}

/* Decorative Dots beside Section Titles */
.section-title::before,
.section-title::after {
  content: '\2726';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.5em;
  opacity: 0.4;
  color: var(--color-neon-cyan);
}

.section-title::before {
  left: -30px;
}

.section-title::after {
  right: -30px;
}

/* Better Button States */
.btn {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.btn-primary-yellow,
.btn-primary-cta {
  background: linear-gradient(
    135deg,
    var(--color-neon-yellow) 0%,
    #E5B84A 50%,
    var(--color-neon-yellow) 100%
  );
  background-size: 200% 200%;
  animation: subtle-shimmer 4s ease-in-out infinite;
}

@keyframes subtle-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Enhanced Value Items */
.value-item {
  position: relative;
  overflow: hidden;
}

.value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    var(--color-neon-cyan),
    var(--color-neon-purple)
  );
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.value-item:hover::before {
  opacity: 0.6;
}

/* Gamification Items - Enhanced */
.gamification-item {
  position: relative;
  border-left: 3px solid transparent;
  transition: 
    background var(--transition-hover),
    border-color var(--transition-hover);
}

.gamification-item:hover {
  border-left-color: var(--color-neon-cyan);
  background: rgba(57, 210, 192, 0.05);
}

/* CTA Cards - Premium Feel */
.cta-option-card {
  position: relative;
  overflow: hidden;
}

.cta-option-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(57, 210, 192, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

/* Hero Section - Ambient Glow */
.hero-section {
  position: relative;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to top,
    rgba(11, 31, 59, 0.8) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Image Containers - Soft Glow Effect */
.asset-3d-wrapper {
  position: relative;
}

.asset-3d-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background: radial-gradient(
    circle,
    rgba(57, 210, 192, 0.12) 0%,
    rgba(168, 85, 247, 0.06) 40%,
    transparent 70%
  );
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}

/* Navigation - Enhanced Active State */
.navbar-nav .nav-link.active {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(57, 210, 192, 0.12) 0%,
    rgba(168, 85, 247, 0.08) 100%
  );
}

/* Footer Links - Better Hover */
.footer-links a {
  position: relative;
  display: inline-block;
}

.footer-links a::before {
  content: '\2192';
  position: absolute;
  left: -15px;
  opacity: 0;
  transform: translateX(-5px);
  transition: all var(--transition-hover);
  color: var(--color-neon-cyan);
}

.footer-links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Social Links - Improved */
.social-link {
  position: relative;
  overflow: hidden;
}

.social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(57, 210, 192, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 100%
  );
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.social-link:hover::before {
  opacity: 1;
}

/* Mini Cards - Enhanced */
.mini-card {
  position: relative;
  overflow: hidden;
}

.mini-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-neon-cyan),
    var(--color-neon-purple),
    var(--color-neon-pink)
  );
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.mini-card:hover::after {
  opacity: 0.6;
}

/* Impact Cards - Better Visual */
.impact-card {
  text-align: center;
}

.impact-card .asset-3d-wrapper {
  margin-bottom: var(--spacing-sm);
}

/* Connected Features Grid - Enhanced */
.connected-features {
  position: relative;
}

.connected-features::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 60%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(57, 210, 192, 0.3),
    transparent
  );
}

.connected-features::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(168, 85, 247, 0.3),
    transparent
  );
}

/* Scroll Indicator (optional - for hero) */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.5;
  animation: bounce-gentle 2s ease-in-out infinite;
}

@keyframes bounce-gentle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Loading state for images */
.asset-3d {
  opacity: 1;
  transition: 
    opacity 0.5s ease,
    filter var(--transition-hover);
}

/* Better Focus States */
.btn:focus-visible,
.nav-link:focus-visible,
.glass-card:focus-visible {
  outline: 2px solid var(--color-neon-cyan);
  outline-offset: 3px;
}

/* Selection Color */
::selection {
  background: rgba(57, 210, 192, 0.3);
  color: var(--color-text-white);
}

::-moz-selection {
  background: rgba(57, 210, 192, 0.3);
  color: var(--color-text-white);
}

/* ==================== FUTURISTIC CURSOR ==================== */
.cursor-main,
.cursor-ring {
  display: none !important;
}

/* Cursor click effect */
.cursor-click-ring {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(168, 85, 247, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99996;
  transform: translate(-50%, -50%);
  animation: clickExpand 0.5s ease-out forwards;
}

@keyframes clickExpand {
  0% { 
    width: 20px; 
    height: 20px; 
    opacity: 1;
    border-width: 3px;
  }
  100% { 
    width: 80px; 
    height: 80px; 
    opacity: 0;
    border-width: 1px;
  }
}

/* ==================== 3D MASCOT STYLES ==================== */
.mascot-3d-scene {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.mascot-3d {
  max-width: 100%;
  height: auto;
  transform-style: preserve-3d;
  animation: mascot3DFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(57, 210, 192, 0.3));
  transition: filter 0.3s ease;
}

.mascot-3d:hover {
  filter: drop-shadow(0 40px 80px rgba(57, 210, 192, 0.5));
}

@keyframes mascot3DFloat {
  0%, 100% {
    transform: translateY(0) rotateY(0deg) rotateX(0deg);
  }
  25% {
    transform: translateY(-15px) rotateY(5deg) rotateX(2deg);
  }
  50% {
    transform: translateY(-25px) rotateY(0deg) rotateX(-2deg);
  }
  75% {
    transform: translateY(-15px) rotateY(-5deg) rotateX(2deg);
  }
}

/* 3D parallax effect on mascot based on mouse position */
.mascot-container.parallax-active .mascot-3d {
  transition: transform 0.1s ease-out;
}

/* Mascot glow pulse */
.mascot-container::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 30px;
  background: radial-gradient(ellipse, rgba(57, 210, 192, 0.3), transparent);
  filter: blur(20px);
  animation: mascotShadowPulse 4s ease-in-out infinite;
}

@keyframes mascotShadowPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

/* Mobile: disable custom cursor */
@media (max-width: 768px), (hover: none) {
  body.futuristic-cursor,
  body.futuristic-cursor * {
    cursor: auto !important;
  }
  .cursor-main, .cursor-ring, .cursor-click-ring {
    display: none !important;
  }
}

/* =========================================================
   LANGUAGE TOGGLE BUTTON - Premium Design
   ========================================================= */
.btn-lang-toggle {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-neon-cyan);
  background: rgba(57, 210, 192, 0.08);
  border: 1.5px solid rgba(57, 210, 192, 0.35);
  border-radius: 500px;
  padding: 6px 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}

.btn-lang-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57, 210, 192, 0.15), rgba(168, 85, 247, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 500px;
}

.btn-lang-toggle:hover {
  color: var(--color-space-deep);
  background: var(--color-neon-cyan);
  border-color: var(--color-neon-cyan);
  box-shadow: 0 0 18px rgba(57, 210, 192, 0.5), 0 0 40px rgba(57, 210, 192, 0.2);
  transform: translateY(-1px) scale(1.04);
}

.btn-lang-toggle:hover::before {
  opacity: 1;
}

.btn-lang-toggle:active {
  transform: scale(0.97);
}

/* Pulse ring on language button */
.btn-lang-toggle::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 500px;
  border: 1px solid rgba(57, 210, 192, 0.25);
  animation: langBtnPulse 2.5s ease infinite;
  pointer-events: none;
}

@keyframes langBtnPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.1); }
}

/* =========================================================
   RTL ARABIC SUPPORT - Full Layout Flip
   ========================================================= */

/* Base RTL */
html[dir="rtl"] {
  direction: rtl;
}

body.rtl {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Poppins', 'Inter', sans-serif;
  direction: rtl;
  text-align: right;
}

/* Arabic font rendering */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Poppins', sans-serif;
  line-height: 1.7;
  letter-spacing: 0;
}

body.rtl p,
body.rtl span,
body.rtl a,
body.rtl li,
body.rtl small {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Inter', sans-serif;
  line-height: 2.0;
  letter-spacing: 0;
}

/* NAV RTL — Keep navbar layout IDENTICAL to LTR (logo left, links right).
   Only text direction changes, no layout flip. */
body.rtl .glass-nav .container {
  direction: ltr; /* Keep navbar internal layout as-is */
}

/* But text inside nav links should render RTL properly */
body.rtl .navbar-nav .nav-link,
body.rtl .navbar-nav .btn {
  font-family: 'Noto Sans Arabic', 'Cairo', 'Poppins', sans-serif;
}

/* Navbar toggler stays on right for mobile RTL */
@media (max-width: 991px) {
  body.rtl .glass-nav .container {
    direction: ltr;
  }
}

body.rtl .ms-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

body.rtl .ms-lg-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

body.rtl .ms-lg-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Value Items RTL */
body.rtl .value-highlights {
  direction: rtl;
}

body.rtl .value-item {
  flex-direction: row-reverse;
}

body.rtl .value-icon {
  margin-right: 0;
  margin-left: 0.6rem;
}

/* Hero CTA RTL */
body.rtl .hero-cta {
  direction: rtl;
}

body.rtl .me-3 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

/* Feature group header RTL */
body.rtl .feature-group-header {
  flex-direction: row-reverse;
}

body.rtl .feature-group-icon {
  margin-right: 0;
  margin-left: 1rem;
}

/* Gamification items RTL */
body.rtl .gamification-item {
  flex-direction: row-reverse;
}

body.rtl .gamification-icon {
  margin-right: 0;
  margin-left: 1rem;
}

body.rtl .gamification-text {
  text-align: right;
}

body.rtl .gamification-text small {
  display: block;
  text-align: right;
}

/* Benefit cards RTL */
body.rtl .parent-benefit {
  flex-direction: row-reverse;
}

body.rtl .benefit-icon {
  margin-right: 0;
  margin-left: 1.25rem;
}

body.rtl .benefit-content {
  text-align: right;
}

/* Footer RTL */
body.rtl .footer-links {
  padding-right: 0;
}

body.rtl .social-links {
  justify-content: flex-end;
}

/* Text alignment overrides in RTL */
body.rtl .text-start {
  text-align: right !important;
}

/* Row reversal in RTL for key sections */
body.rtl .hero-section .row {
  flex-direction: row-reverse;
}

/* Padding fix for RTL hero */
body.rtl .hero-content {
  padding-right: 0;
  padding-left: 2rem;
}

@media (max-width: 991px) {
  body.rtl .hero-content {
    padding-left: 0;
  }
}

/* Language switch transition */
[data-i18n] {
  transition: opacity 0.2s ease;
}

body.lang-switching [data-i18n] {
  opacity: 0;
}

/* =========================================================
   DESIGN SYSTEM ENHANCEMENTS - Premium Visual Upgrades
   ========================================================= */

/* Enhanced Glass Cards - More depth and luminosity */
.glass-card {
  position: relative;
  overflow: hidden;
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(57, 210, 192, 0.4) 30%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(168, 85, 247, 0.4) 70%,
    transparent 100%);
  pointer-events: none;
}

/* Feature detail cards — more distinct hover aura */
.feature-detail-card:hover {
  border-color: rgba(57, 210, 192, 0.4) !important;
  box-shadow: 
    var(--glass-outer-glow),
    0 0 30px rgba(57, 210, 192, 0.15),
    inset 0 1px 0 rgba(57, 210, 192, 0.15);
}

/* Section titles — gradient text shimmer */
.section-title {
  background: linear-gradient(135deg, 
    var(--color-text-white) 0%, 
    var(--color-neon-cyan) 40%, 
    var(--color-neon-purple) 70%,
    var(--color-text-white) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 5s linear infinite;
}

@keyframes shimmerText {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Hero title — bigger gradient shimmer */
.hero-title {
  background: linear-gradient(135deg,
    #F7FAFF 0%,
    #60d5ff 25%,
    #a78bfa 50%,
    #FF5FD7 75%,
    #F7FAFF 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerHero 6s linear infinite;
}

@keyframes shimmerHero {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* CTA title — golden glow shimmer */
.cta-title {
  background: linear-gradient(135deg,
    #F7FAFF 0%,
    #FFD166 30%,
    #FF6FB1 60%,
    #F7FAFF 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerCTA 5s linear infinite;
}

@keyframes shimmerCTA {
  0% { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* Feature detail cards — colorful icon hover */
.feature-detail-card:nth-child(1) .feature-detail-icon-wrapper svg,
.feature-detail-card:nth-child(1) .asset-3d-wrapper img {
  filter: drop-shadow(0 0 8px rgba(57, 210, 192, 0.4));
}

/* Gamification items — glow icons */
.gamification-icon svg {
  filter: drop-shadow(0 0 6px rgba(242, 201, 76, 0.3));
  transition: filter 0.3s ease;
}

.gamification-item:hover .gamification-icon svg {
  filter: drop-shadow(0 0 12px rgba(242, 201, 76, 0.6));
}

/* Impact cards — neon border pulse on hover */
.impact-card {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.impact-card:hover {
  border-color: rgba(57, 210, 192, 0.5) !important;
  box-shadow: 
    0 0 20px rgba(57, 210, 192, 0.2),
    var(--glass-outer-glow) !important;
  transform: translateY(-6px) scale(1.02) !important;
}

/* Social links — more vivid hover */
.social-link {
  position: relative;
}

.social-link::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.social-link:hover::after {
  border-color: rgba(57, 210, 192, 0.4);
  box-shadow: 0 0 15px rgba(57, 210, 192, 0.3);
}

/* Nav link active indicator */
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  width: 60%;
  margin: 2px auto 0;
  background: linear-gradient(90deg, var(--color-neon-cyan), var(--color-neon-purple));
  border-radius: 2px;
  animation: navActiveGlow 2s ease infinite alternate;
}

@keyframes navActiveGlow {
  from { box-shadow: 0 0 4px rgba(57, 210, 192, 0.4); }
  to { box-shadow: 0 0 10px rgba(57, 210, 192, 0.8); }
}

/* Mini-cards enhanced hover */
.mini-card:hover {
  border-color: rgba(57, 210, 192, 0.5) !important;
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 8px 25px rgba(57, 210, 192, 0.2) !important;
}

/* Feature detail card accent border */
.feature-detail-card {
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.feature-detail-card:hover {
  border-left-color: rgba(57, 210, 192, 0.6) !important;
}

body.rtl .feature-detail-card {
  border-left: none;
  border-right: 2px solid transparent;
}

body.rtl .feature-detail-card:hover {
  border-right-color: rgba(57, 210, 192, 0.6) !important;
}

/* Section subtitles styling improvement */
.section-subtitle {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  line-height: 1.8;
  margin-top: 0.5rem;
}

/* Better CTA option cards */
.cta-option-card {
  position: relative;
  overflow: hidden;
}

.cta-option-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(57, 210, 192, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.cta-option-card:hover::before {
  opacity: 1;
}

/* Improved footer links */
.footer-links a {
  position: relative;
  padding-bottom: 2px;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-neon-cyan);
  transition: width 0.3s ease;
}

.footer-links a:hover::after {
  width: 100%;
}

body.rtl .footer-links a::after {
  left: auto;
  right: 0;
}

/* Scroll reveal improved */
.reveal-fade-up {
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile RTL nav fix — keep nav layout direction: ltr to preserve logo-left/links-right */
@media (max-width: 991px) {
  body.rtl .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0.5rem;
  }

  body.rtl .navbar-collapse .nav-item {
    width: 100%;
    text-align: left;
  }
}

/* Language switch smooth animation */
@keyframes langFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

body.rtl [data-i18n] {
  animation: langFadeIn 0.3s ease forwards;
}

/* =========================================================
   DESIGN UPGRADES — Premium Glow & Animation Enhancements
   ========================================================= */

/* Glassmorphism cards — subtle inner shimmer pulse */
.glass-card {
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}

/* Animated gradient border on CTA card */
.cta-card {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.cta-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(57, 210, 192, 0.4) 0%,
    rgba(168, 85, 247, 0.3) 50%,
    rgba(255, 95, 215, 0.4) 100%);
  background-size: 300% 300%;
  animation: borderGlow 6s ease infinite;
  z-index: -1;
  border-radius: 28px;
}

@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Hero section — floating glow orbs */
.hero-section::before {
  background-size: 200% 200%;
  animation: orbPulse 8s ease infinite;
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Steps cards — color-coded glow on hover */
.step-card:nth-child(1):hover { box-shadow: 0 20px 50px rgba(57, 210, 192, 0.25), var(--glass-inner-glow) !important; }
.step-card:nth-child(2):hover { box-shadow: 0 20px 50px rgba(168, 85, 247, 0.25), var(--glass-inner-glow) !important; }
.step-card:nth-child(3):hover { box-shadow: 0 20px 50px rgba(255, 95, 215, 0.25), var(--glass-inner-glow) !important; }

/* Why section cards — accent top glow */
.why-card {
  border-top: 2px solid transparent;
  transition: border-color 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.why-card:hover {
  border-top-color: var(--color-neon-cyan);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(57, 210, 192, 0.2), var(--glass-outer-glow) !important;
}

/* Better value-item icon glow */
.value-icon svg {
  filter: drop-shadow(0 0 6px rgba(57, 210, 192, 0.3));
  transition: filter 0.3s ease, transform 0.3s ease;
}

.value-item:hover .value-icon svg {
  filter: drop-shadow(0 0 14px rgba(57, 210, 192, 0.7));
  transform: scale(1.1);
}

/* Section dividers — gradient lines */
.section-padding + .section-padding {
  position: relative;
}

/* Button improvements — glowing focus ring */
.btn-primary-cta:focus-visible,
.btn-secondary-glass:focus-visible,
.btn-lang-toggle:focus-visible {
  outline: 2px solid var(--color-neon-cyan);
  outline-offset: 3px;
}

/* Floating badge on hero — subtle bounce */
.badge-new, .hero-badge {
  animation: badgeBounce 3s ease infinite;
}

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

/* RTL main content — proper text alignment for body */
body.rtl main {
  direction: rtl;
}

body.rtl .text-center {
  text-align: center !important;
}

body.rtl section {
  direction: rtl;
}

/* Footer RTL improved */
body.rtl .footer {
  direction: rtl;
}

body.rtl .footer .row {
  direction: rtl;
}

body.rtl .footer-links {
  padding-left: 0;
  padding-right: 0;
  text-align: right;
}

body.rtl .footer-links li {
  text-align: right;
}

body.rtl .social-links {
  justify-content: flex-start;
}

body.rtl .footer-subtitle {
  text-align: right;
}

body.rtl .footer-title {
  text-align: right;
}

body.rtl .footer-text {
  text-align: right;
}

body.rtl .footer-copyright {
  text-align: center;
}