/* StuMana Landing Page Design System
 * 2025 Light Theme - Energizing for Kids
 * Using Tailwind v4 @theme color variables
 */

/* ===========================================
 * Landing-specific Theme Colors (Light/Bright)
 * =========================================== */
@theme {
  /* Landing background (clean white/cream) */
  --color-landing-bg: oklch(0.99 0.005 90);
  --color-landing-surface: oklch(0.97 0.01 90);
  --color-landing-elevated: oklch(1 0 0);

  /* Landing primary (vibrant blue) */
  --color-landing-primary: oklch(0.55 0.25 255);
  --color-landing-primary-hover: oklch(0.48 0.25 255);
  --color-landing-primary-muted: oklch(0.55 0.25 255 / 12%);

  /* Landing accent (energetic orange) */
  --color-landing-accent: oklch(0.7 0.2 50);
  --color-landing-accent-hover: oklch(0.62 0.2 50);
  --color-landing-accent-muted: oklch(0.7 0.2 50 / 12%);

  /* Landing success (fresh green) */
  --color-landing-success: oklch(0.6 0.2 145);
  --color-landing-success-muted: oklch(0.6 0.2 145 / 12%);

  /* Landing warning (sunny yellow-orange) */
  --color-landing-warning: oklch(0.75 0.18 55);
  --color-landing-warning-muted: oklch(0.75 0.18 55 / 12%);

  /* Landing violet (playful purple) */
  --color-landing-violet: oklch(0.55 0.25 290);
  --color-landing-violet-muted: oklch(0.55 0.25 290 / 12%);

  /* Landing rose (fun pink) */
  --color-landing-rose: oklch(0.65 0.2 10);
  --color-landing-rose-muted: oklch(0.65 0.2 10 / 12%);
}

/* ===========================================
 * Typography System (Be Vietnam Pro)
 * Soft modern font with native Vietnamese support
 * =========================================== */
.landing-headline {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.landing-body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.65;
}

.landing-display {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.landing-accent {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
}

/* ===========================================
 * Card Component (Light Theme)
 * =========================================== */
.landing-card {
  background: var(--color-landing-elevated);
  border: 1px solid oklch(0.9 0.01 90);
  border-radius: 1rem;
  box-shadow: 0 4px 20px oklch(0.5 0.05 255 / 8%);
  transition: all 0.3s ease;
}

.landing-card:hover {
  border-color: oklch(0.8 0.05 255);
  box-shadow: 0 8px 30px oklch(0.5 0.1 255 / 12%);
  transform: translateY(-2px);
}

.dashboard-preview {
  background: linear-gradient(135deg, oklch(0.98 0.02 255 / 50%), oklch(0.98 0.02 290 / 50%));
  border: 1px solid oklch(0.85 0.05 255);
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px oklch(0.5 0.1 255 / 15%);
}

/* ===========================================
 * Button Components (Light Theme - Energetic)
 * =========================================== */
.landing-btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3.5
         bg-landing-primary text-white font-semibold rounded-xl
         hover:bg-landing-primary-hover
         focus:outline-none focus:ring-4 focus:ring-landing-primary-muted
         transition-all duration-200
         shadow-lg shadow-landing-primary/25;
}

.landing-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px oklch(0.55 0.25 255 / 35%);
}

.landing-btn-ghost {
  @apply inline-flex items-center justify-center gap-2 px-5 py-2.5
         bg-transparent border-2 border-zinc-300 text-zinc-600 font-semibold rounded-xl
         hover:bg-zinc-100 hover:text-zinc-800 hover:border-zinc-400
         focus:outline-none focus:ring-4 focus:ring-zinc-200
         transition-all duration-200;
}

.landing-btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-5 py-2.5
         bg-landing-accent text-white font-semibold rounded-xl
         hover:bg-landing-accent-hover
         shadow-lg shadow-landing-accent/25
         transition-all duration-200;
}

/* ===========================================
 * Badge Components (Light Theme - Playful)
 * =========================================== */
.landing-badge-primary {
  @apply inline-flex items-center gap-1.5 px-3.5 py-1.5
         bg-landing-primary-muted border border-landing-primary/20
         text-landing-primary text-sm font-semibold rounded-full;
}

.landing-badge-ai {
  @apply inline-flex items-center gap-1 px-2 py-0.5
         bg-landing-violet-muted border border-landing-violet/20
         text-landing-violet text-xs font-bold rounded-full;
}

.landing-badge-scarcity {
  @apply inline-flex items-center gap-1.5 px-3 py-1.5
         bg-landing-accent-muted border border-landing-accent/20
         text-landing-accent text-sm font-semibold rounded-full;
}

.landing-badge-success {
  @apply inline-flex items-center gap-1.5 px-2.5 py-1
         bg-landing-success-muted text-landing-success text-xs font-semibold rounded-full;
}

.landing-badge-warning {
  @apply inline-flex items-center gap-1.5 px-3.5 py-1.5
         bg-landing-warning-muted border border-landing-warning/20
         text-landing-warning text-sm font-semibold rounded-full;
}

/* ===========================================
 * Section Containers
 * =========================================== */
.landing-section {
  @apply py-20 sm:py-24 lg:py-28 relative;
}

.landing-container {
  @apply container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl;
}

.section-header {
  @apply text-center max-w-2xl mx-auto mb-16;
}

/* ===========================================
 * Background (Light Theme)
 * =========================================== */
.landing-body-light {
  background: linear-gradient(180deg,
    oklch(0.99 0.01 255) 0%,
    oklch(0.98 0.02 290 / 30%) 50%,
    oklch(0.99 0.01 145 / 20%) 100%);
}

/* Fun subtle pattern for kids */
.bg-dots-pattern {
  background-image: radial-gradient(oklch(0.85 0.05 255) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ===========================================
 * Animation Utilities (Energetic)
 * SEO-safe: Content visible by default, animation only with JS
 * =========================================== */

/* Default: content visible (SEO-safe, no-JS fallback) */
.scroll-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Only hide when JS is available (body gets .js class) */
.js-enabled .scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Revealed state */
.js-enabled .scroll-reveal.revealed,
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.hover-lift {
  transition: all 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px oklch(0.5 0.1 255 / 15%);
}

/* Fun bounce animation */
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-bounce-soft {
  animation: bounce-soft 2s ease-in-out infinite;
}

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

  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ===========================================
 * Responsive Typography
 * =========================================== */
@media (max-width: 640px) {
  .landing-headline {
    letter-spacing: -0.015em;
  }
}

/* ===========================================
 * Dashboard Preview Components (Light)
 * =========================================== */
.dashboard-stat-card {
  @apply bg-white rounded-xl p-4 border border-zinc-200 shadow-sm;
}

.dashboard-list-item {
  @apply flex items-center justify-between p-3 bg-zinc-50 rounded-xl border border-zinc-100;
}

.dashboard-avatar {
  @apply w-9 h-9 rounded-full flex items-center justify-center text-xs font-bold;
}

.dashboard-insight {
  @apply p-4 rounded-xl bg-landing-violet-muted border border-landing-violet/15;
}

/* ===========================================
 * Navigation Styles (Light)
 * =========================================== */
.landing-nav {
  @apply fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-zinc-200;
}

.landing-nav-link {
  @apply text-sm font-medium text-zinc-600 hover:text-landing-primary transition-colors;
}

/* ===========================================
 * Trust Indicators (Light)
 * =========================================== */
.trust-check {
  @apply flex items-center gap-1.5 text-sm text-zinc-600 font-medium;
}

.trust-check svg {
  @apply w-4 h-4 text-landing-success;
}

/* ===========================================
 * Stats Display (Light)
 * =========================================== */
.stat-value {
  @apply text-3xl lg:text-4xl font-bold text-zinc-800;
}

.stat-label {
  @apply text-sm text-zinc-500 mt-1;
}

/* ===========================================
 * Colorful Decorative Elements
 * =========================================== */
.gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
}

.gradient-blob-blue {
  background: linear-gradient(135deg, oklch(0.7 0.2 255), oklch(0.6 0.2 290));
}

.gradient-blob-orange {
  background: linear-gradient(135deg, oklch(0.8 0.2 50), oklch(0.7 0.2 30));
}

.gradient-blob-green {
  background: linear-gradient(135deg, oklch(0.7 0.2 145), oklch(0.6 0.2 170));
}

/* ===========================================
 * Playful Decorative Shapes (Kid-friendly)
 * =========================================== */

/* Floating shapes container */
.floating-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Individual floating shape */
.floating-shape {
  position: absolute;
  opacity: 0.15;
  animation: float-gentle 8s ease-in-out infinite;
}

.floating-shape:nth-child(2) { animation-delay: -2s; }
.floating-shape:nth-child(3) { animation-delay: -4s; }
.floating-shape:nth-child(4) { animation-delay: -6s; }
.floating-shape:nth-child(5) { animation-delay: -1s; }
.floating-shape:nth-child(6) { animation-delay: -3s; }

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

/* Shape variations */
.shape-star {
  width: 40px;
  height: 40px;
  background: var(--color-landing-accent);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.shape-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-landing-primary);
}

.shape-triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid var(--color-landing-success);
}

.shape-square {
  width: 25px;
  height: 25px;
  background: var(--color-landing-rose);
  border-radius: 6px;
  transform: rotate(15deg);
}

.shape-diamond {
  width: 30px;
  height: 30px;
  background: var(--color-landing-violet);
  transform: rotate(45deg);
  border-radius: 4px;
}

.shape-hexagon {
  width: 35px;
  height: 20px;
  background: var(--color-landing-warning);
  position: relative;
}
.shape-hexagon::before,
.shape-hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 17.5px solid transparent;
  border-right: 17.5px solid transparent;
}
.shape-hexagon::before {
  bottom: 100%;
  border-bottom: 10px solid var(--color-landing-warning);
}
.shape-hexagon::after {
  top: 100%;
  border-top: 10px solid var(--color-landing-warning);
}

/* Confetti effect */
.confetti-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.6;
  animation: confetti-fall 6s linear infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100%) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti:nth-child(1) { left: 10%; background: var(--color-landing-primary); animation-delay: 0s; border-radius: 50%; }
.confetti:nth-child(2) { left: 20%; background: var(--color-landing-accent); animation-delay: 1s; border-radius: 2px; }
.confetti:nth-child(3) { left: 30%; background: var(--color-landing-success); animation-delay: 2s; border-radius: 50%; }
.confetti:nth-child(4) { left: 40%; background: var(--color-landing-violet); animation-delay: 0.5s; border-radius: 2px; }
.confetti:nth-child(5) { left: 50%; background: var(--color-landing-rose); animation-delay: 1.5s; border-radius: 50%; }
.confetti:nth-child(6) { left: 60%; background: var(--color-landing-warning); animation-delay: 2.5s; border-radius: 2px; }
.confetti:nth-child(7) { left: 70%; background: var(--color-landing-primary); animation-delay: 3s; border-radius: 50%; }
.confetti:nth-child(8) { left: 80%; background: var(--color-landing-success); animation-delay: 0.8s; border-radius: 2px; }
.confetti:nth-child(9) { left: 90%; background: var(--color-landing-accent); animation-delay: 1.8s; border-radius: 50%; }

/* Dotted pattern for sections */
.pattern-dots {
  background-image: radial-gradient(circle, var(--color-landing-primary) 1.5px, transparent 1.5px);
  background-size: 30px 30px;
  opacity: 0.08;
}

/* Wavy divider */
.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

.wave-divider .shape-fill {
  fill: var(--color-landing-surface);
}

/* Playful multi-layered wave divider */
.wave-divider-playful {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 5;
}

.wave-divider-playful svg {
  position: relative;
  display: block;
  width: 100%;
  height: 120px;
}

@media (min-width: 768px) {
  .wave-divider-playful svg {
    height: 160px;
  }
}

/* Colorful wave layers */
.wave-divider-playful .wave-back {
  fill: var(--color-landing-primary);
}

.wave-divider-playful .wave-mid {
  fill: var(--color-landing-violet);
}

.wave-divider-playful .wave-front {
  fill: var(--color-landing-surface);
}

/* Colorful underline for headings */
.heading-underline {
  position: relative;
  display: inline-block;
}

.heading-underline::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg,
    var(--color-landing-primary) 0%,
    var(--color-landing-violet) 25%,
    var(--color-landing-rose) 50%,
    var(--color-landing-accent) 75%,
    var(--color-landing-success) 100%
  );
  border-radius: 3px;
  opacity: 0.7;
}

/* Fun dashed borders */
.dashed-border-fun {
  border: 3px dashed var(--color-landing-primary);
  border-radius: 1rem;
  position: relative;
}

.dashed-border-fun::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 3px dashed var(--color-landing-accent);
  border-radius: 1.25rem;
  opacity: 0.5;
}

/* ===========================================
 * Bento Grid Layout
 * =========================================== */
.bento-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }

  .bento-large {
    grid-row: span 2;
  }

  .bento-wide {
    grid-column: span 2;
  }
}

/* ===========================================
 * Feature Card (Light Theme)
 * =========================================== */
.feature-card {
  @apply bg-white rounded-2xl p-6 lg:p-7
         border border-zinc-200
         shadow-sm hover:shadow-lg
         transition-all duration-300;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: oklch(0.8 0.1 255);
}

/* Feature Icon Box */
.feature-icon {
  @apply w-12 h-12 rounded-xl flex items-center justify-center mb-5
         shadow-lg;
}

.feature-icon-primary {
  @apply bg-gradient-to-br from-landing-primary to-blue-400;
  box-shadow: 0 6px 15px oklch(0.55 0.25 255 / 30%);
}

.feature-icon-success {
  @apply bg-gradient-to-br from-landing-success to-emerald-400;
  box-shadow: 0 6px 15px oklch(0.6 0.2 145 / 30%);
}

.feature-icon-accent {
  @apply bg-gradient-to-br from-landing-accent to-amber-400;
  box-shadow: 0 6px 15px oklch(0.7 0.2 50 / 30%);
}

.feature-icon-violet {
  @apply bg-gradient-to-br from-landing-violet to-purple-400;
  box-shadow: 0 6px 15px oklch(0.55 0.25 290 / 30%);
}

.feature-icon-rose {
  @apply bg-gradient-to-br from-landing-rose to-pink-400;
  box-shadow: 0 6px 15px oklch(0.65 0.2 10 / 30%);
}

/* ===========================================
 * AI Feature Card (Light Theme - Special)
 * =========================================== */
.ai-feature-card {
  @apply bg-gradient-to-br from-white to-landing-violet-muted
         rounded-2xl p-6 lg:p-7
         border-2 border-landing-violet/25
         shadow-lg
         transition-all duration-300;
  box-shadow: 0 8px 30px oklch(0.55 0.25 290 / 12%),
              inset 0 0 40px oklch(0.55 0.25 290 / 5%);
}

.ai-feature-card:hover {
  transform: translateY(-3px);
  border-color: oklch(0.55 0.25 290 / 40%);
  box-shadow: 0 12px 40px oklch(0.55 0.25 290 / 18%),
              inset 0 0 50px oklch(0.55 0.25 290 / 8%);
}

/* AI Badge with Pulse Animation */
.ai-pulse-badge {
  @apply inline-flex items-center gap-1 px-2.5 py-1
         bg-landing-violet text-white text-xs font-bold rounded-full;
  animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% {
    box-shadow: 0 0 8px oklch(0.55 0.25 290 / 50%);
  }
  50% {
    box-shadow: 0 0 20px oklch(0.55 0.25 290 / 70%);
  }
}

/* AI Example Preview Card */
.ai-preview-card {
  @apply bg-white/80 rounded-xl p-4 border border-landing-violet/20;
  backdrop-filter: blur(8px);
}

/* Feature Sub-items */
.feature-subitem {
  @apply flex items-center gap-3 text-sm;
}

.feature-subitem-icon {
  @apply w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0;
}

.feature-subitem-icon-primary {
  @apply bg-landing-primary-muted;
}

.feature-subitem-icon-success {
  @apply bg-landing-success-muted;
}

/* ===========================================
 * Benefit Card (Light Theme)
 * =========================================== */
.benefit-card {
  @apply bg-white rounded-2xl p-8 text-center
         border border-zinc-200
         shadow-sm
         transition-all duration-300;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px oklch(0.5 0.1 255 / 12%);
}

.benefit-icon {
  @apply w-16 h-16 mx-auto rounded-2xl flex items-center justify-center mb-6
         shadow-lg transition-transform duration-300;
}

.benefit-card:hover .benefit-icon {
  transform: scale(1.1);
}

.benefit-icon-success {
  @apply bg-gradient-to-br from-landing-success to-emerald-400;
  box-shadow: 0 8px 20px oklch(0.6 0.2 145 / 35%);
}

.benefit-icon-primary {
  @apply bg-gradient-to-br from-landing-primary to-blue-400;
  box-shadow: 0 8px 20px oklch(0.55 0.25 255 / 35%);
}

.benefit-icon-violet {
  @apply bg-gradient-to-br from-landing-violet to-purple-400;
  box-shadow: 0 8px 20px oklch(0.55 0.25 290 / 35%);
}

/* ===========================================
 * Stat Card (Light Theme)
 * =========================================== */
.stat-card {
  @apply text-center p-6 rounded-2xl bg-white border border-zinc-200 shadow-sm;
}

/* ===========================================
 * Testimonial Card (Light Theme)
 * =========================================== */
.testimonial-card {
  @apply bg-white rounded-2xl p-8 relative
         border border-zinc-200
         shadow-sm
         transition-all duration-300;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px oklch(0.5 0.1 255 / 10%);
}

.testimonial-quote {
  @apply absolute top-6 right-6 w-10 h-10;
}

.testimonial-avatar {
  @apply w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold;
}

.testimonial-avatar-primary {
  @apply bg-gradient-to-br from-landing-primary to-blue-400;
}

.testimonial-avatar-success {
  @apply bg-gradient-to-br from-landing-success to-emerald-400;
}

.testimonial-avatar-violet {
  @apply bg-gradient-to-br from-landing-violet to-purple-400;
}

/* ===========================================
 * Trust Badge (Light Theme)
 * =========================================== */
.trust-badge {
  @apply flex items-center gap-3 px-5 py-3 rounded-xl
         bg-white border border-zinc-200 shadow-sm;
}

/* ===========================================
 * Step Card (How It Works)
 * =========================================== */
.step-card {
  @apply relative;
}

.step-number {
  @apply absolute -top-3 -left-3 w-10 h-10 rounded-full
         flex items-center justify-center text-white font-bold
         shadow-lg z-10;
}

.step-number-primary {
  @apply bg-gradient-to-br from-landing-primary to-blue-400;
  box-shadow: 0 6px 15px oklch(0.55 0.25 255 / 35%);
}

.step-number-success {
  @apply bg-gradient-to-br from-landing-success to-emerald-400;
  box-shadow: 0 6px 15px oklch(0.6 0.2 145 / 35%);
}

.step-number-violet {
  @apply bg-gradient-to-br from-landing-violet to-purple-400;
  box-shadow: 0 6px 15px oklch(0.55 0.25 290 / 35%);
}

.step-content {
  @apply bg-white rounded-2xl p-8 h-full
         border border-zinc-200 shadow-sm
         transition-all duration-300;
}

.step-card:hover .step-content {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px oklch(0.5 0.1 255 / 12%);
}

.step-icon {
  @apply w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg;
}

.step-icon-primary {
  @apply bg-landing-primary-muted;
}

.step-icon-primary svg {
  @apply text-landing-primary;
}

.step-icon-success {
  @apply bg-landing-success-muted;
}

.step-icon-success svg {
  @apply text-landing-success;
}

.step-icon-violet {
  @apply bg-landing-violet-muted;
}

.step-icon-violet svg {
  @apply text-landing-violet;
}

.step-tag {
  @apply px-2.5 py-1 text-xs font-medium rounded-full;
}

.step-tag-primary {
  @apply bg-landing-primary-muted text-landing-primary;
}

.step-tag-success {
  @apply bg-landing-success-muted text-landing-success;
}

.step-tag-accent {
  @apply bg-landing-accent-muted text-landing-accent;
}

.step-tag-violet {
  @apply bg-landing-violet-muted text-landing-violet;
}

.step-tag-rose {
  @apply bg-landing-rose-muted text-landing-rose;
}

/* ===========================================
 * Pricing Card (Light Theme)
 * =========================================== */
.pricing-card {
  @apply bg-white rounded-2xl p-8 lg:p-10 relative
         border-2 border-landing-success/30
         shadow-xl
         transition-all duration-300;
  box-shadow: 0 10px 40px oklch(0.6 0.2 145 / 15%);
}

.pricing-card:hover {
  border-color: oklch(0.6 0.2 145 / 50%);
  box-shadow: 0 15px 50px oklch(0.6 0.2 145 / 20%);
}

.pricing-scarcity-badge {
  @apply absolute -top-4 left-1/2 -translate-x-1/2
         px-4 py-1.5 rounded-full
         bg-gradient-to-r from-landing-accent to-orange-400
         text-white text-sm font-semibold shadow-lg;
  box-shadow: 0 6px 15px oklch(0.7 0.2 50 / 40%);
}

.pricing-feature {
  @apply flex items-start gap-3;
}

.pricing-feature-icon {
  @apply w-6 h-6 rounded-full bg-landing-success-muted
         flex items-center justify-center flex-shrink-0 mt-0.5;
}

.pricing-note {
  @apply bg-white rounded-2xl p-6 lg:p-8
         border border-zinc-200 shadow-sm text-center;
}

/* ===========================================
 * FAQ Accordion (Native details/summary)
 * =========================================== */
.faq-details {
  @apply bg-white rounded-xl overflow-hidden
         border border-zinc-200 shadow-sm;
}

.faq-summary {
  @apply w-full p-6 flex items-center justify-between text-left
         hover:bg-zinc-50 transition-colors cursor-pointer
         list-none; /* Remove default marker */
}

/* Remove default marker for Safari */
.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::marker {
  display: none;
}

.faq-chevron {
  @apply w-5 h-5 text-zinc-400 flex-shrink-0 transition-transform duration-300;
}

/* Rotate chevron when open */
.faq-details[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  @apply px-6 pb-6;
}

/* Legacy support - keep old classes for any existing usage */
.faq-item {
  @apply bg-white rounded-xl overflow-hidden
         border border-zinc-200 shadow-sm;
}

.faq-trigger {
  @apply w-full p-6 flex items-center justify-between text-left
         hover:bg-zinc-50 transition-colors;
}

.faq-content {
  @apply overflow-hidden transition-all duration-300;
}

/* ===========================================
 * Final CTA Section (Light Theme)
 * =========================================== */
.final-cta-card {
  @apply max-w-3xl mx-auto text-center p-8 lg:p-12
         bg-white rounded-3xl
         border-2 border-landing-success/30
         shadow-xl relative z-10;
  box-shadow: 0 10px 40px oklch(0.6 0.2 145 / 15%),
              0 4px 15px oklch(0.5 0.1 255 / 8%);
}

.final-cta-card:hover {
  border-color: oklch(0.6 0.2 145 / 45%);
  box-shadow: 0 15px 50px oklch(0.6 0.2 145 / 20%),
              0 6px 20px oklch(0.5 0.1 255 / 10%);
}

.final-cta-scarcity-badge {
  @apply inline-flex items-center gap-2 px-4 py-2
         rounded-full bg-amber-50 border border-amber-200;
}

/* ===========================================
 * Footer (Light Theme)
 * =========================================== */
.landing-footer {
  @apply py-16 bg-landing-surface border-t border-zinc-200;
}

/* ===========================================
 * Mobile Menu (Light Theme)
 * =========================================== */
.mobile-menu-toggle {
  @apply w-10 h-10 items-center justify-center
         rounded-lg hover:bg-zinc-100 transition-colors;
  /* Display is controlled by md:hidden in HTML */
}

.mobile-menu-dropdown {
  @apply absolute top-full left-0 right-0
         bg-white/98 backdrop-blur-xl
         border-b border-zinc-200 shadow-lg;
}

.mobile-nav-link {
  @apply block py-3 px-4 text-lg text-zinc-700
         rounded-lg hover:bg-zinc-100 hover:text-landing-primary
         transition-colors;
}

/* ===========================================
 * Mobile Optimizations
 * =========================================== */

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

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Mobile touch targets - min 48px */
@media (max-width: 640px) {
  .landing-btn-primary,
  .landing-btn-ghost,
  .landing-btn-secondary {
    min-height: 48px;
    padding: 12px 24px;
  }

  .mobile-nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Mobile typography adjustments */
  .landing-headline {
    font-size: 1.75rem;
  }

  .landing-display {
    font-size: 2.25rem;
  }

  /* Mobile container padding */
  .landing-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Mobile section spacing */
  .landing-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Animation performance */
.landing-card,
.feature-card,
.step-card,
[data-animate] {
  will-change: transform, opacity;
}

/* ===========================================
 * Kid-Friendly Illustration Cards
 * =========================================== */

/* Student illustration card */
.student-illustration {
  position: relative;
  background: linear-gradient(135deg,
    oklch(0.95 0.03 255) 0%,
    oklch(0.97 0.02 290) 100%);
  border-radius: 1.5rem;
  padding: 1.5rem;
  overflow: hidden;
}

.student-illustration::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg,
    var(--color-landing-accent) 0%,
    var(--color-landing-warning) 100%);
  border-radius: 50%;
  opacity: 0.2;
}

/* Notebook lines effect */
.notebook-lines {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    oklch(0.85 0.05 255 / 30%) 27px,
    oklch(0.85 0.05 255 / 30%) 28px
  );
  background-position: 0 1rem;
}

/* Crayon/marker effect underline */
.marker-underline {
  position: relative;
  display: inline;
}

.marker-underline::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 0;
  height: 0.4em;
  background: linear-gradient(90deg,
    var(--color-landing-warning) 0%,
    var(--color-landing-accent) 100%);
  opacity: 0.3;
  border-radius: 3px;
  z-index: -1;
  transform: rotate(-0.5deg);
}

/* Sticker effect badges */
.sticker-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border-radius: 9999px;
  box-shadow:
    0 2px 8px oklch(0.5 0.1 255 / 15%),
    0 0 0 3px var(--color-landing-primary-muted);
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}

.sticker-badge:hover {
  transform: rotate(0deg) scale(1.05);
}

/* Paper fold effect for cards */
.paper-fold {
  position: relative;
  background: white;
  border-radius: 0.75rem 0.75rem 0.75rem 0;
}

.paper-fold::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 25px;
  border-color: transparent transparent var(--color-landing-surface) transparent;
}

/* Backpack illustration mini-icon */
.icon-backpack {
  position: relative;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg,
    var(--color-landing-primary) 0%,
    oklch(0.45 0.25 255) 100%);
  border-radius: 8px 8px 12px 12px;
}

.icon-backpack::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 12px;
  border: 3px solid var(--color-landing-primary);
  border-radius: 6px 6px 0 0;
  border-bottom: none;
}

/* Pencil decoration */
.pencil-decoration {
  position: absolute;
  width: 80px;
  height: 12px;
  background: linear-gradient(90deg,
    var(--color-landing-warning) 0%,
    var(--color-landing-warning) 85%,
    oklch(0.9 0.05 50) 85%,
    oklch(0.9 0.05 50) 100%);
  border-radius: 2px 6px 6px 2px;
  transform: rotate(-15deg);
}

.pencil-decoration::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent var(--color-landing-warning) transparent transparent;
}

/* Star burst effect */
.star-burst {
  position: relative;
}

.star-burst::before {
  content: '★';
  position: absolute;
  font-size: 1.5rem;
  color: var(--color-landing-warning);
  animation: twinkle 2s ease-in-out infinite;
}

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

/* Colorful corner ribbon */
.corner-ribbon {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.corner-ribbon::before {
  content: 'NEW';
  position: absolute;
  top: 18px;
  right: -25px;
  width: 100px;
  padding: 4px 0;
  background: linear-gradient(90deg,
    var(--color-landing-accent) 0%,
    var(--color-landing-warning) 100%);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px oklch(0.5 0.2 50 / 30%);
}

/* Bubble chat for testimonials */
.chat-bubble {
  position: relative;
  background: white;
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px oklch(0.5 0.05 255 / 10%);
}

.chat-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 2rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 10px 0 10px;
  border-color: white transparent transparent transparent;
}

/* Rainbow gradient text */
.rainbow-text {
  background: linear-gradient(90deg,
    var(--color-landing-primary) 0%,
    var(--color-landing-violet) 20%,
    var(--color-landing-rose) 40%,
    var(--color-landing-accent) 60%,
    var(--color-landing-warning) 80%,
    var(--color-landing-success) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wiggle animation for fun icons */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.animate-wiggle-slow {
  animation: wiggle 2s ease-in-out infinite;
}

/* Bounce in animation */
@keyframes bounce-in {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-bounce-in {
  animation: bounce-in 0.6s ease-out;
}

/* Colorful shadow effect */
.shadow-rainbow {
  box-shadow:
    4px 4px 0 0 var(--color-landing-primary),
    8px 8px 0 0 var(--color-landing-violet),
    12px 12px 0 0 var(--color-landing-rose);
}

.shadow-rainbow-sm {
  box-shadow:
    2px 2px 0 0 var(--color-landing-primary),
    4px 4px 0 0 var(--color-landing-accent);
}

/* Polka dot background */
.bg-polka-dots {
  background-image:
    radial-gradient(var(--color-landing-primary) 2px, transparent 2px),
    radial-gradient(var(--color-landing-accent) 2px, transparent 2px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.08;
}

/* Hand-drawn border effect */
.hand-drawn-border {
  border: 3px solid var(--color-landing-primary);
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  position: relative;
}

/* Sparkle effect */
.sparkle {
  position: relative;
}

.sparkle::before,
.sparkle::after {
  content: '✦';
  position: absolute;
  font-size: 0.75rem;
  color: var(--color-landing-warning);
  animation: sparkle-float 3s ease-in-out infinite;
}

.sparkle::before {
  top: -8px;
  right: -8px;
}

.sparkle::after {
  bottom: -8px;
  left: -8px;
  animation-delay: 1.5s;
}

@keyframes sparkle-float {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(0.7) rotate(180deg); }
}

/* Fun gradient border */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 1rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: linear-gradient(45deg,
    var(--color-landing-primary),
    var(--color-landing-violet),
    var(--color-landing-rose),
    var(--color-landing-accent),
    var(--color-landing-success),
    var(--color-landing-primary));
  border-radius: inherit;
  z-index: -1;
  background-size: 300% 300%;
  animation: gradient-rotate 4s ease infinite;
}

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

/* Playful card hover state */
.playful-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.playful-card:hover {
  transform: translateY(-8px) rotate(1deg);
}

/* Educational icon styles */
.edu-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg,
    oklch(0.95 0.05 255) 0%,
    oklch(0.92 0.06 290) 100%);
  border-radius: 1rem;
  overflow: hidden;
}

.edu-icon-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: white;
  opacity: 0.3;
  border-radius: 1rem 1rem 50% 50%;
}

/* ===========================================
 * Reduced Motion Support
 * =========================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-pulse,
  .animate-bounce,
  .animate-wiggle,
  .animate-wiggle-slow,
  .animate-bounce-in,
  .floating-shape,
  .confetti {
    animation: none;
  }

  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .gradient-border::before {
    animation: none;
    background-position: 0% 50%;
  }
}