.eduloo-page section {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

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

@keyframes bubble {
  0% {
    transform: translateY(100vh) scale(0.42);
    opacity: 0;
  }
  8% {
    opacity: 0.04;
  }
  18% {
    opacity: 0.12;
  }
  32% {
    opacity: 0.22;
  }
  48% {
    opacity: 0.32;
  }
  60% {
    opacity: 0.24;
  }
  68% {
    opacity: 0.15;
  }
  74% {
    opacity: 0.08;
  }
  80% {
    opacity: 0.03;
  }
  86% {
    opacity: 0;
  }
  100% {
    transform: translateY(-140px) scale(1.14);
    opacity: 0;
  }
}

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

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite !important;
}

.hero-kicker {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  margin: 0 0 16px !important;
  opacity: 0.9 !important;
}

@keyframes meet-loo-twinkle {
  0%,
  100% {
    transform: rotate(-8deg) scale(0.8);
    opacity: 0.35;
  }
  50% {
    transform: rotate(14deg) scale(1.1);
    opacity: 0.9;
  }
}

@keyframes lookDownLeft {
  0%,
  10%,
  80%,
  100% {
    transform: translate(0, 0);
  }
  25%,
  65% {
    transform: translate(-1.5px, 1.5px);
  }
}

@keyframes surpriseMouth {
  0%,
  10%,
  80%,
  100% {
    transform: scale(1);
  }
  25%,
  65% {
    transform: scale(1.1, 1.4) translateY(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .meet-loo-tip {
    transition: none !important;
  }

  .meet-loo-tip:hover {
    transform: none !important;
  }

  .meet-loo-mascot,
  .meet-loo-feature__mascot img,
  .meet-loo-feature__sparkle {
    animation: none !important;
  }
}

@keyframes how-pulse-h {
  0%,
  100% {
    left: 0%;
    opacity: 0;
  }
  10% {
    left: 0%;
    opacity: 1;
  }
  50% {
    left: 50%;
    opacity: 1;
  }
  90% {
    left: 100%;
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
}

@keyframes how-pulse-v {
  0%,
  100% {
    top: 0%;
    opacity: 0;
  }
  10% {
    top: 0%;
    opacity: 1;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  90% {
    top: 100%;
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-step {
    transition: none !important;
  }

  .how-step:hover {
    transform: none !important;
  }

  .how-steps__pulse {
    animation: none !important;
    opacity: 0 !important;
  }
}

@keyframes showcaseDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.26);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item::before,
  .faq-button .material-symbols-outlined,
  .faq-answer {
    transition: none !important;
  }
}

.hero-svg-scene {
  position: absolute !important;
  top: -180px !important;
  right: -220px !important;
  width: min(760px, 68vw) !important;
  aspect-ratio: 1 / 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.9 !important;
}

.hero-svg-ribbons {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.hero-ribbon {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
}

.hero-ribbon-a {
  stroke: url(#heroRibbonGradientA);
  stroke-width: 32px;
  stroke-dasharray: 60 30;
  animation: ribbonOrbitA 30s linear infinite;
  will-change: transform;
}

.hero-ribbon-b {
  stroke: url(#heroRibbonGradientB);
  stroke-width: 24px;
  stroke-dasharray: 40 20;
  opacity: 0.8;
  animation: ribbonOrbitB 40s linear infinite;
  will-change: transform;
}

.hero-ribbon-c {
  stroke: url(#heroRibbonGradientA);
  stroke-width: 16px;
  stroke-dasharray: 20 40;
  opacity: 0.6;
  animation: ribbonOrbitA 25s linear infinite reverse;
  will-change: transform;
}

.hero-orb {
  opacity: 0.55;
}

.hero-orb-a {
  transform-origin: 220px 220px;
  animation: orbPulse 7s ease-in-out infinite;
  will-change: transform;
}

.hero-orb-b {
  transform-origin: 760px 710px;
  animation: orbPulse 9s ease-in-out infinite reverse;
  will-change: transform;
}

@keyframes ribbonOrbitA {
  from {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(-10px);
  }
  to {
    transform: rotate(360deg) translateY(0);
  }
}

@keyframes ribbonOrbitB {
  from {
    transform: rotate(360deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(14px);
  }
  to {
    transform: rotate(0deg) translateY(0);
  }
}

@keyframes orbPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.95;
  }
}

@keyframes noiseDrift {
  from {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-18px, 12px);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes flowSlide {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -640;
  }
}

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

@keyframes sparkDrift {
  0%,
  100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: translateY(-12px) scale(1.1);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .hero-svg-scene {
    top: -70px !important;
    right: 0 !important;
    width: min(360px, 92vw) !important;
    opacity: 0.55 !important;
    -webkit-mask-image: radial-gradient(
      closest-side,
      black 40%,
      transparent 92%
    ) !important;
    mask-image: radial-gradient(
      closest-side,
      black 40%,
      transparent 92%
    ) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eduloo-page *,
  .eduloo-page *::before,
  .eduloo-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  .hero-svg-ribbons {
    display: none !important;
  }

  .hero-svg-scene {
    background-image: url('/assets/img/hero-scene.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--outline) var(--surface-container) !important;
}

body.theme-dark,
.theme-dark {
  --primary: #fb596e;
  --primary-dim: #ec4258;
  --primary-strong: #ff8a99;
  --primary-container: #7a2a3b;
  --on-primary: #380812;
  --on-primary-container: #ffdae0;

  --secondary: #4ad6c2;
  --secondary-dim: #2cb9a7;
  --secondary-container: #134640;
  --on-secondary: #00261f;
  --on-secondary-container: #a8ecdf;

  --tertiary: #f2b25a;
  --tertiary-container: #523700;
  --on-tertiary-container: #ffe4ac;

  --info: #8fb6ff;
  --info-container: #1e2f58;
  --on-info-container: #cfdcff;

  --surface: #141413;
  --surface-bright: #201f1d;
  --surface-dim: #0d0d0c;
  --surface-container-lowest: #181716;
  --surface-container-low: #1e1d1b;
  --surface-container: #252422;
  --surface-container-high: #2d2c29;
  --surface-container-highest: #393733;
  --surface-warm: #2b2823;

  --on-surface: #f3f0ea;
  --on-surface-variant: #b4ada2;
  --on-background: #f3f0ea;
  --outline: #908779;
  --outline-variant: #4e483f;
  --inverse-surface: #f3f0ea;
  --inverse-primary: #ec4258;
  --error: #ff8b85;
  --success: #4ad6c2;
  --warning: #f2b25a;

  --cta-gradient-start: var(--primary);
  --cta-gradient-mid: color-mix(
    in srgb,
    var(--primary) 70%,
    var(--primary-strong) 30%
  );
  --cta-gradient-end: var(--primary-strong);
  --cta-text-strong: var(--on-primary-container);
  --cta-text-soft: color-mix(
    in srgb,
    var(--on-primary-container) 78%,
    var(--primary) 22%
  );
  --cta-deco-strong: color-mix(
    in srgb,
    var(--on-primary-container) 52%,
    transparent
  );
  --cta-deco-soft: color-mix(in srgb, var(--tertiary) 28%, transparent);
  --cta-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.7);
  --cta-btn-bg: var(--on-primary-container);
  --cta-btn-fg: var(--primary-container);
  --cta-btn-shadow: rgba(7, 3, 11, 0.44);
  --cta-btn-shadow-hover: rgba(7, 3, 11, 0.56);

  --progress-gradient: linear-gradient(
    90deg,
    var(--primary) 0%,
    color-mix(in srgb, var(--primary) 55%, var(--secondary) 45%) 55%,
    var(--secondary) 100%
  );

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(0, 0, 0, 0.4);
  --shadow-lift:
    0 6px 14px rgba(0, 0, 0, 0.45), 0 22px 44px rgba(0, 0, 0, 0.55);
  --shadow-shell: 0 2px 6px rgba(0, 0, 0, 0.3), 0 24px 52px rgba(0, 0, 0, 0.5);
  --shadow-cta: 0 10px 24px -6px rgba(255, 122, 141, 0.35);

  --glass-nav-bg: rgba(28, 24, 19, 0.82);
  --focus-ring: 0 0 0 3px rgba(255, 122, 141, 0.45);

  --theme-switch-shell-bg: linear-gradient(
    140deg,
    rgba(40, 34, 28, 0.94) 0%,
    rgba(30, 25, 20, 0.94) 52%,
    rgba(45, 40, 31, 0.88) 100%
  );
  --theme-switch-shell-border: rgba(255, 122, 141, 0.26);
  --theme-switch-shadow:
    0 10px 20px -14px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --theme-switch-slot-bg: rgba(255, 245, 232, 0.08);
  --theme-switch-hover-bg: linear-gradient(
    140deg,
    rgba(60, 52, 42, 0.68) 0%,
    rgba(48, 40, 32, 0.64) 52%,
    rgba(70, 60, 45, 0.6) 100%
  );
  --theme-switch-hover-shadow:
    inset 0 0 0 1px rgba(255, 245, 232, 0.12),
    0 8px 16px -12px rgba(0, 0, 0, 0.64);
  --theme-switch-icon-muted: rgba(245, 241, 234, 0.8);
  --theme-switch-knob-bg: var(--on-surface);
  --theme-switch-knob-active: linear-gradient(
    130deg,
    var(--primary) 0%,
    var(--secondary) 100%
  );
  --theme-switch-knob-shadow: 0 9px 18px -14px rgba(0, 0, 0, 0.7);
  --theme-switch-ring: color-mix(in srgb, var(--tertiary) 55%, transparent);
  color-scheme: dark;
}

/* Targets the pricing PAGE's <main>, not .pricing-page: that class is also on
   the landing-page embed wrapper, where this ambience painted a slab behind
   the plan cards instead of letting them sit on the landing background. */
body.theme-dark .hero-pattern,
body.theme-dark main.pricing-main {
  background:
    radial-gradient(
      circle at 14% 18%,
      color-mix(in srgb, var(--primary) 20%, transparent),
      color-mix(in srgb, var(--primary) 0%, transparent) 42%
    ),
    radial-gradient(
      circle at 82% 16%,
      color-mix(in srgb, var(--info) 20%, transparent),
      color-mix(in srgb, var(--info) 0%, transparent) 40%
    ),
    var(--surface) !important;
}

body.theme-dark .hero-mockup,
body.theme-dark .hero-mockup-inner,
body.theme-dark .feature-card,
body.theme-dark .pricing-cta-card,
body.theme-dark .plan-card,
body.theme-dark .comparison-wrap {
  background: var(--surface-container-lowest) !important;
  border-color: color-mix(in srgb, var(--primary) 18%, transparent) !important;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5) !important;
}

body.theme-dark .hero-notification,
body.theme-dark .hero-badge-float,
body.theme-dark .meta-pill,
body.theme-dark .pricing-kicker,
body.theme-dark .why-kicker {
  background: rgba(37, 36, 34, 0.9) !important;
  border-color: color-mix(in srgb, var(--info) 34%, transparent) !important;
  color: var(--secondary) !important;
}

body.theme-dark ::-webkit-scrollbar-track {
  background: var(--surface-container) !important;
}

body.theme-dark ::-webkit-scrollbar-thumb {
  background: var(--outline) !important;
  border-color: var(--surface-container) !important;
}

body.theme-dark * {
  scrollbar-color: var(--outline) var(--surface-container) !important;
}

body.theme-dark .hero-pattern,
body.theme-dark main.pricing-main,
body.theme-dark .why-section {
  background:
    radial-gradient(
      circle at 14% 16%,
      color-mix(in srgb, var(--primary) 20%, transparent),
      transparent 44%
    ),
    radial-gradient(
      circle at 82% 18%,
      color-mix(in srgb, var(--secondary) 16%, transparent),
      transparent 46%
    ),
    color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-dim) 14%) !important;
}

body.theme-dark .hero-mockup,
body.theme-dark .hero-mockup-inner,
body.theme-dark .feature-card,
body.theme-dark .pricing-cta-card,
body.theme-dark .plan-card,
body.theme-dark .comparison-wrap,
body.theme-dark .stat-card,
body.theme-dark .why-list li {
  background: var(--eduloo-dark-surface-card) !important;
  border: 1px solid var(--eduloo-dark-surface-border) !important;
  box-shadow: var(--eduloo-dark-surface-shadow) !important;
}

body.theme-dark .hero-notification,
body.theme-dark .hero-badge-float,
body.theme-dark .meta-pill,
body.theme-dark .pricing-kicker,
body.theme-dark .why-kicker {
  background: var(--eduloo-dark-chip-bg) !important;
  color: var(--eduloo-dark-chip-text) !important;
  border: 1px solid var(--eduloo-dark-surface-border) !important;
}

body.theme-dark ::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-dim) 88%, black 12%) !important;
}

body.theme-dark ::-webkit-scrollbar-thumb {
  background: color-mix(
    in srgb,
    var(--outline) 74%,
    var(--primary-container) 26%
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--surface-dim) 88%,
    black 12%
  ) !important;
}

body.theme-dark * {
  scrollbar-color: color-mix(
      in srgb,
      var(--outline) 74%,
      var(--primary-container) 26%
    )
    color-mix(in srgb, var(--surface-dim) 88%, black 12%) !important;
}

body h2,
body h2::before,
body h2::after {
  border-bottom: none !important;
}

.study-accordion__panel.is-active,
.study-accordion__gallery:not(:hover) .study-accordion__panel.is-active,
.study-accordion__gallery:hover .study-accordion__panel:hover {
  flex-grow: 14 !important;
}

.study-accordion__gallery:hover .study-accordion__panel.is-active:not(:hover) {
  flex-grow: 1 !important;
}

.study-accordion__gallery:hover
  .study-accordion__panel.is-active:not(:hover)
  .study-accordion__panel-icon {
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: color-mix(in srgb, white 18%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .study-accordion__panel,
  .study-accordion__panel:hover,
  .study-accordion__panel-icon,
  .study-accordion__panel-label,
  .study-accordion__entry {
    transition: none !important;
    transform: none !important;
  }
}

.study-accordion__gallery:hover
  .study-accordion__panel.is-active:not(:hover)
  .study-accordion__expand {
  opacity: 0 !important;
  transform: scale(0.6) !important;
  pointer-events: none !important;
}

body.theme-dark .why-list > li,
body.theme-dark .hero-notification,
body.theme-dark .hero-badge-float,
body.theme-dark .meta-pill,
body.theme-dark .pricing-kicker,
body.theme-dark .why-kicker,
body.theme-dark .showcase-slide-kicker,
body.theme-dark .showcase-slide-tag,
body.theme-dark .showcase-slide-media {
  background: var(--surface-container) !important;
}