/* === design-system.css === */
/* ==========================================================================
   Learn Quran Pak Online — Design System
   Tokens, typography, glass primitives (load before main.css)
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Amiri", "Traditional Arabic", "Scheherazade New", serif;

  /* Brand — Emerald + Gold */
  --color-primary: #059669;
  --color-primary-light: #10b981;
  --color-primary-dark: #047857;
  --color-primary-rgb: 5, 150, 105;
  --color-accent: #fbbf24;
  --color-accent-dark: #f59e0b;
  --color-accent-rgb: 251, 191, 36;

  /* Surfaces */
  --color-bg: #f8fafc;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f1f5f9;
  --color-bg-alt: #f1f5f9;
  --color-surface: #ffffff;
  --slate-800: #1e293b;
  --slate-950: #020617;
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-divider: #e2e8f0;
  --color-error: #ef4444;
  --color-success: #10b981;
  --color-warning: #f59e0b;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  --gradient-gold: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-hero: linear-gradient(160deg, #ecfdf5 0%, #f8fafc 40%, #fffbeb 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(16, 185, 129, 0.06));
  --gradient-mesh: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(16, 185, 129, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(251, 191, 36, 0.12), transparent),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(5, 150, 105, 0.08), transparent);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 16px;
  --glass-blur-heavy: 24px;
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: clamp(2.5rem, 5vw, 3.75rem);
  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --tracking-tight: -0.03em;

  /* Layout — Stripe-level spacing */
  --container-max: 1280px;
  --section-px: clamp(1rem, 4vw, 2rem);
  --section-py: clamp(3.75rem, 8vw, 7.5rem);
  --section-py-tablet: 5rem;
  --section-py-mobile: 3.75rem;
  --header-height: 72px;

  /* Icon scale (never exceed feature max) */
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 28px;
  --icon-feature: 56px;

  /* Typography scale */
  --text-hero: clamp(2.25rem, 5.5vw, 4rem);
  --text-section: clamp(1.625rem, 4vw, 2.625rem);
  --text-body-lg: 1.125rem;
  --leading-relaxed: 1.8;
  --leading-snug: 1.45;
  --pattern-opacity: 0.04;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 40px rgba(16, 185, 129, 0.25);
  --shadow-glow-primary: 0 0 32px rgba(5, 150, 105, 0.35);
  --shadow-glow-gold: 0 0 32px rgba(251, 191, 36, 0.3);
  --shadow-xl: 0 16px 32px rgba(15, 23, 42, 0.1);
  --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.14);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-fixed: 100;
  --z-modal: 200;
  --z-sticky: 90;
  --z-toast: 1000;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-bg-elevated: #1e293b;
  --color-bg-muted: #334155;
  --color-surface: #1e293b;
  --color-text: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #334155;
  --color-border-strong: #475569;
  --gradient-hero: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  --glass-bg: rgba(30, 41, 59, 0.75);
  --glass-bg-strong: rgba(30, 41, 59, 0.92);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
  flex-shrink: 0;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-fast); }
a:hover { color: var(--color-primary-light); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

@media (min-width: 768px) {
  .container { padding-inline: 24px; }
}

@media (min-width: 1280px) {
  .container { padding-inline: 32px; }
}
.container--narrow { max-width: 720px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Glass surface primitives */
.glass-card,
.feature-card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card--strong {
  background: var(--glass-bg-strong);
}

.glass-card--interactive {
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out);
  will-change: transform;
}

.glass-card--interactive:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.25);
}

/* Display type scale */
.ds-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.ds-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}

/* Icon tile — max 56px feature icons */
.ds-icon-tile {
  width: var(--icon-feature);
  height: var(--icon-feature);
  max-width: var(--icon-feature);
  max-height: var(--icon-feature);
  border-radius: var(--radius-lg);
  background: rgba(var(--color-primary-rgb), 0.1);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition:
    background var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out),
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base);
}

.ds-icon-tile svg {
  width: 28px;
  height: 28px;
}

.glass-card--interactive:hover .ds-icon-tile,
.feature-card--glass:hover .feature-card__icon {
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

/* Star rating */
.ds-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}

.ds-stars--lg {
  font-size: var(--text-base);
}

/* Ornamental divider */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-block: var(--space-10);
  color: var(--color-text-muted);
}

.divider-ornament::before,
.divider-ornament::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}

.divider-ornament__icon::before {
  content: "✦";
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
}

[data-theme="dark"] .divider-ornament__icon::before {
  color: var(--color-accent);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--duration-base) var(--ease-in-out),
    color var(--duration-base) var(--ease-in-out),
    border-color var(--duration-base) var(--ease-in-out),
    box-shadow var(--duration-base) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out-expo);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn--primary {
  color: var(--color-text-inverse);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow-primary);
}

.btn--primary:hover {
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
}

.btn--ghost {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-border-strong);
}

.btn--ghost:hover {
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.4);
  background: rgba(var(--color-primary-rgb), 0.06);
}

.btn--accent,
.btn--gold {
  color: var(--slate-950);
  background: var(--gradient-gold);
  box-shadow: var(--shadow-glow-gold);
}

.btn--accent:hover,
.btn--gold:hover {
  color: var(--slate-950);
  filter: brightness(1.05);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-xs);
}

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

.btn--outline:hover {
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.btn--icon {
  padding: 0.5rem;
  min-width: 2.5rem;
}


/* === performance.css === */
/* ==========================================================================
   Performance — instant paint, GPU layers, below-fold deferral
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
  html.lenis,
  html.lenis body {
    height: auto;
  }

  .lenis.lenis-smooth {
    scroll-behavior: auto;
  }
}

/* GPU promotion for animated layers only */
.scroll-top__stage,
.landing-scene__canvas,
.landing-scene__float,
.hero--premium .hero__media-frame,
.hero--premium .hero__media-border,
.feature-card--premium.is-hovered,
.courses--premium .feature-card--course.is-hovered,
.teachers--premium .teacher-card--premium.is-hovered,
.showcase__stage.is-hovered,
.testimonial-card--premium:hover,
.pricing-regional-card.is-hovered {
  transform: translateZ(0);
}

/* Defer layout work for off-screen sections */
.features,
.showcase,
.courses--premium,
.teachers,
.how-it-works--premium,
.testimonials--premium,
.testimonials,
.pricing-regional,
.faq--premium,
.faq,
.cta-section--premium,
.contact--premium,
.contact,
.footer--premium {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Landing scroll — native scroll + content-visibility for smooth paint */
body.page-landing {
  scroll-behavior: auto;
  overscroll-behavior-y: none;
}

body.page-landing .landing-scene__canvas {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-landing .features,
  body.page-landing .showcase,
  body.page-landing .courses--premium,
  body.page-landing .teachers,
  body.page-landing .how-it-works--premium,
  body.page-landing .testimonials--premium,
  body.page-landing .testimonials,
  body.page-landing .pricing-regional,
  body.page-landing .faq--premium,
  body.page-landing .faq,
  body.page-landing .cta-section--premium,
  body.page-landing .contact--premium,
  body.page-landing .contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}

.hero--premium {
  content-visibility: visible;
}

/* Faster font swap */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-display: swap;
}

/* Reduce paint on fixed chrome (disabled on mobile — breaks glass nav / drawer) */
@media (min-width: 768px) {
  .navbar {
    contain: layout style;
  }
}

.page-loader.is-hidden {
  display: none;
  pointer-events: none;
}


/* === main.css === */
/* ==========================================================================
   Learn Quran Pak Online — App Shell
   Navbar · Footer · Dashboard layout · Flash · Auth · Theme toggle
   Requires: design-system.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar — floating glass, sticky
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: var(--space-4);
  left: var(--section-px);
  right: var(--section-px);
  z-index: var(--z-fixed);
  max-width: calc(var(--container-max) + var(--section-px) * 2);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    top var(--duration-base) var(--ease-out-expo),
    background var(--duration-base) var(--ease-in-out),
    box-shadow var(--duration-base) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);
  transform: translateZ(0);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
  padding: 0 var(--space-6);
}

.navbar__inner {
  position: relative;
}

.navbar::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.65;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.22),
    transparent 42%,
    rgba(251, 191, 36, 0.16)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at 30% 0%, rgba(16, 185, 129, 0.18), transparent 60%);
  transition: opacity var(--duration-base) var(--ease-out-expo);
}

.navbar:hover::after {
  opacity: 1;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;
}

.navbar__logo:hover {
  color: var(--color-primary);
}

.navbar__logo-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  box-shadow: var(--shadow-glow-primary);
}

.navbar__nav {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transform: translateZ(0);
}

.navbar__nav > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition:
    color var(--duration-fast) var(--ease-in-out),
    background var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-fast) var(--ease-in-out);
  transform: translateZ(0);
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease-out-expo);
  opacity: 0.9;
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.08);
}

.navbar__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(5, 150, 105, 0.12);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  transform: scaleX(1);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.navbar__btn {
  position: relative;
  transform: translateZ(0);
  transition:
    transform 0.16s var(--ease-out-expo),
    box-shadow 0.18s ease;
}

.navbar__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.navbar__btn:active {
  transform: translateY(0);
}

.navbar__btn--primary {
  overflow: hidden;
}

.navbar__btn-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
}

.navbar__btn--primary:hover .navbar__btn-shine {
  transform: translateX(120%);
}

.navbar__actions .btn--ghost,
.navbar__actions .btn--primary {
  display: none;
}

.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-in-out);
}

.navbar__toggle:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    opacity var(--duration-fast) var(--ease-in-out);
  transform-origin: center;
}

.navbar--scrolled {
  top: var(--space-2);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--color-primary-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__link,
  .navbar__btn {
    transition: none;
  }
  .navbar__btn-shine {
    display: none;
  }
}

.navbar--open .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar--open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar--open .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .navbar__nav {
    display: flex;
  }

  .navbar__actions .btn--ghost,
  .navbar__actions .btn--primary {
    display: inline-flex;
  }

  .navbar__toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: calc(var(--header-height) + var(--space-6)) var(--section-px) auto;
  z-index: calc(var(--z-fixed) - 1);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) translateZ(0);
  transition:
    opacity var(--duration-base) var(--ease-out-expo),
    transform var(--duration-base) var(--ease-out-expo),
    visibility var(--duration-base);
  pointer-events: none;
}

@media (min-width: 768px) {
  .mobile-nav--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateZ(0);
    pointer-events: auto;
  }
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav__link {
  display: block;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-in-out);
}

.mobile-nav__link:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-text-secondary);
  transition:
    background var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out);
}

.theme-toggle:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
  color: var(--color-primary);
}

.theme-toggle__icon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition:
    opacity var(--duration-base) var(--ease-in-out),
    transform var(--duration-base) var(--ease-out-back);
}

.theme-toggle__icon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* --------------------------------------------------------------------------
   Main content offset
   -------------------------------------------------------------------------- */
#main-content {
  padding-top: calc(var(--header-height) + var(--space-10));
}

/* --------------------------------------------------------------------------
   Footer — premium
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  padding-block: var(--space-16) var(--space-10);
  background: var(--color-dark);
  color: var(--slate-400);
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(16, 185, 129, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(251, 191, 36, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='0.5' opacity='0.4'%3E%3Cpath d='M32 0L64 32L32 64L0 32Z'/%3E%3Cpath d='M32 8L56 32L32 56L8 32Z'/%3E%3Ccircle cx='32' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  pointer-events: none;
}

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

.footer__top {
  display: grid;
  gap: var(--space-12);
  margin-bottom: var(--space-10);
}

.footer__brand {
  max-width: 360px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #f8fafc;
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.footer__logo:hover {
  color: var(--emerald-400);
}

.footer__desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--slate-400);
  margin-bottom: var(--space-6);
}

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

.footer__social-link {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--slate-200);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out);
  transform: translateZ(0);
}

.footer__social-link:hover {
  transform: translateZ(0) translateY(-2px);
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--emerald-400);
}

.footer__columns {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}

.footer__column-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

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

.footer__link {
  font-size: var(--text-sm);
  color: var(--slate-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.footer__link:hover {
  color: var(--emerald-400);
}

.footer .divider-ornament::before,
.footer .divider-ornament::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.footer__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-xl);
  color: var(--emerald-400);
  opacity: 0.85;
  margin-bottom: var(--space-8);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__copyright {
  font-size: var(--text-sm);
  color: var(--slate-500);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.footer__legal a {
  font-size: var(--text-sm);
  color: var(--slate-400);
  text-decoration: none;
}

.footer__legal a:hover {
  color: var(--emerald-400);
}

@media (min-width: 640px) {
  .footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: 1.1fr 1.5fr;
    align-items: start;
  }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Dashboard layout — .dash-layout + .dashboard aliases
   -------------------------------------------------------------------------- */
.dash-layout,
.dashboard {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: 1fr;
  background: var(--color-bg);
}

.dash-sidebar,
.dashboard__sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 272px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-sticky);
  transform: translateX(-100%) translateZ(0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  box-shadow: var(--shadow-xl);
}

.dash-sidebar--open,
.dashboard__sidebar--open {
  transform: translateX(0) translateZ(0);
}

.dash-sidebar__brand,
.dashboard__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
  flex-shrink: 0;
}

.dash-sidebar__brand-icon,
.dashboard__sidebar-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-glow-primary);
  flex-shrink: 0;
}

.dash-sidebar__nav-wrap,
.dashboard__sidebar > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.dash-sidebar__nav,
.dashboard__nav {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dash-sidebar__link,
.dashboard__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out-expo);
  transform: translateZ(0);
}

.dash-sidebar__link:hover,
.dashboard__nav-link:hover,
.dash-sidebar__link--active,
.dashboard__nav-link--active {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
}

.dash-sidebar__user,
.dashboard__sidebar-user {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.dash-sidebar__user img,
.dashboard__sidebar-user img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--color-primary-rgb), 0.25);
}

.dash-sidebar__user-name,
.dashboard__sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.dash-sidebar__user-role,
.dashboard__sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-main,
.dashboard__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dash-header,
.dashboard__header {
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--section-px);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--color-border);
}

.dash-header__title,
.dashboard__header-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}

.dash-header__actions,
.dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dash-content,
.dashboard__content {
  flex: 1;
  padding: var(--space-6) var(--section-px) var(--space-12);
}

.dash-overlay,
.dashboard__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-sticky) - 1);
}

.dash-overlay--visible,
.dashboard__overlay--visible {
  display: block;
}

.dash-menu-toggle,
.dashboard__menu-toggle {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .dash-layout,
  .dashboard {
    grid-template-columns: 272px 1fr;
  }

  .dash-sidebar,
  .dashboard__sidebar {
    transform: none;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
  }

  .dash-overlay,
  .dashboard__overlay {
    display: none !important;
  }

  .dash-menu-toggle,
  .dashboard__menu-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Portal stat cards & chart placeholders
   -------------------------------------------------------------------------- */
.portal-stats,
.dashboard-stat-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}

.portal-stat,
.dashboard-stat {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out);
  transform: translateZ(0);
}

.portal-stat::before,
.dashboard-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-in-out);
}

.portal-stat:hover,
.dashboard-stat:hover {
  transform: translateZ(0) translateY(-3px);
  box-shadow: var(--shadow-md);
}

.portal-stat:hover::before,
.dashboard-stat:hover::before {
  opacity: 1;
}

.portal-stat__label,
.dashboard-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.portal-stat__value,
.dashboard-stat__value {
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: var(--leading-tight);
}

.portal-stat__change,
.dashboard-stat__change {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--space-2);
}

.portal-panel,
.dashboard-panel {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.portal-panel__title,
.dashboard-panel__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.portal-grid-2,
.dashboard-grid-2 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.portal-chart,
.dashboard-chart-placeholder {
  min-height: 220px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary-soft);
  border: 1px dashed rgba(var(--color-primary-rgb), 0.25);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.portal-list,
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.portal-list__item,
.dashboard-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  font-size: var(--text-sm);
  border: 1px solid transparent;
  transition:
    border-color var(--duration-fast) var(--ease-in-out),
    background var(--duration-fast) var(--ease-in-out);
}

.portal-list__item:hover,
.dashboard-list__item:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

@media (min-width: 640px) {
  .portal-stats,
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .portal-stats,
  .dashboard-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .portal-grid-2,
  .dashboard-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */
.flash-messages {
  position: fixed;
  top: calc(var(--header-height) + var(--space-6));
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline: var(--section-px);
  pointer-events: none;
}

.flash {
  pointer-events: auto;
  animation: flashIn var(--duration-base) var(--ease-out-expo);
}

@keyframes flashIn {
  from {
    opacity: 0;
    transform: translateY(-8px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

.flash__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  max-width: var(--container-max);
  margin-inline: auto;
}

.flash--success .flash__inner {
  border-color: rgba(var(--color-primary-rgb), 0.4);
  box-shadow: var(--shadow-lg), 0 0 24px rgba(16, 185, 129, 0.12);
}

.flash--error .flash__inner,
.flash--danger .flash__inner {
  border-color: rgba(239, 68, 68, 0.4);
}

.flash--warning .flash__inner {
  border-color: rgba(var(--color-accent-rgb), 0.45);
}

.flash--info .flash__inner {
  border-color: rgba(14, 165, 233, 0.35);
}

.flash__message {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.flash__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-text-muted);
  transition:
    background var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out);
}

.flash__close:hover {
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-text);
}

body:not(.auth-page) .flash-messages {
  top: calc(var(--header-height) + var(--space-10));
}

.dashboard .flash-messages,
.dash-layout .flash-messages {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--section-px);
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  z-index: 0;
  pointer-events: none;
}

.auth-page::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='0.5'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z'/%3E%3Cpath d='M40 10L70 40L40 70L10 40Z'/%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

.auth-page__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: authOrb 18s ease-in-out infinite;
  will-change: transform;
}

.auth-page__orb--primary {
  width: min(520px, 75vw);
  height: min(520px, 75vw);
  background: rgba(var(--color-primary-rgb), 0.22);
  top: -18%;
  right: -12%;
}

.auth-page__orb--accent {
  width: min(360px, 55vw);
  height: min(360px, 55vw);
  background: rgba(var(--color-accent-rgb), 0.18);
  bottom: -12%;
  left: -10%;
  animation-delay: -9s;
}

@keyframes authOrb {
  0%, 100% { transform: translate(0, 0) scale(1) translateZ(0); }
  50% { transform: translate(-20px, 15px) scale(1.05) translateZ(0); }
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
}

.auth-shell--wide {
  max-width: 540px;
}

.auth-card {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl), var(--shadow-glow-primary);
}

.auth-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.auth-card__brand:hover {
  color: var(--color-primary);
}

.auth-card__brand-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  display: grid;
  place-items: center;
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-glow-primary);
}

.auth-card__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.auth-card__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.auth-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.auth-card__footer {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-card__footer a {
  font-weight: 700;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.auth-back:hover {
  color: var(--color-primary);
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-divider);
}

.auth-topbar {
  position: fixed;
  top: var(--space-4);
  right: var(--section-px);
  z-index: var(--z-fixed);
}


/* === landing.css === */
/* ==========================================================================
   Learn Quran Pak Online — Landing Page
   Hero · Features · Live class · Teachers · Pricing · FAQ · Contact · CTA
   Requires: design-system.css, main.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section header (shared)
   -------------------------------------------------------------------------- */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-header__badge {
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-header__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Hero — fullscreen mesh + orbs
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--space-10));
  padding-bottom: var(--space-16);
  overflow: hidden;
}

.hero.hero--premium {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.55;
  will-change: transform;
  animation: heroOrb 22s ease-in-out infinite;
  transform: translateZ(0);
}

.hero__orb--primary {
  width: min(640px, 85vw);
  height: min(640px, 85vw);
  background: rgba(var(--color-primary-rgb), 0.28);
  top: -12%;
  right: -18%;
}

.hero__orb--accent {
  width: min(420px, 65vw);
  height: min(420px, 65vw);
  background: rgba(var(--color-accent-rgb), 0.22);
  bottom: 8%;
  left: -12%;
  animation-delay: -11s;
}

.hero__pattern {
  position: absolute;
  inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='0.55'%3E%3Cpath d='M40 0L80 40L40 80L0 40Z'/%3E%3Cpath d='M40 8L72 40L40 72L8 40Z'/%3E%3Cpath d='M40 16L64 40L40 64L16 40Z'/%3E%3Ccircle cx='40' cy='40' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, black 15%, transparent 72%);
}

@keyframes heroOrb {
  0%, 100% { transform: translate(0, 0) scale(1) translateZ(0); }
  33% { transform: translate(-28px, 22px) scale(1.06) translateZ(0); }
  66% { transform: translate(18px, -18px) scale(0.94) translateZ(0); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.hero__content {
  max-width: 660px;
}

.hero__badge {
  margin-bottom: var(--space-6);
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.hero--premium .hero__title {
  margin-bottom: 0;
}

.hero__title-accent {
  display: block;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(16, 185, 129, 0.15));
}

.hero__arabic {
  display: block;
  font-family: var(--font-arabic);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 400;
  color: var(--color-primary);
  margin-top: var(--space-4);
  direction: rtl;
  opacity: 0.9;
}

.hero__desc {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
  max-width: 540px;
}

.hero--premium .hero__desc {
  margin-bottom: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero--premium .hero__actions {
  margin-bottom: 0;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.hero__trust-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero__trust-avatars {
  display: flex;
}

.hero__trust-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  margin-left: -10px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.hero__trust-avatar:first-child {
  margin-left: 0;
}

.hero__trust-stat {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.hero__visual {
  position: relative;
  display: block;
  width: 100%;
}

.hero__card {
  position: relative;
  padding: var(--space-6);
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateZ(0);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  will-change: transform;
}

.hero__card:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(0);
}

.hero__card-main {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-xl), var(--shadow-glow-primary);
}

.hero__card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__float-card {
  position: absolute;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: float 5.5s ease-in-out infinite;
  will-change: transform;
}

.hero__float-card--top {
  top: 8%;
  right: -6%;
  animation-delay: -1.2s;
}

.hero__float-card--bottom {
  bottom: 12%;
  left: -10%;
  animation-delay: -2.8s;
}

.hero__float-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradient-gold);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-accent);
}

.hero__float-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.hero__float-text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* --------------------------------------------------------------------------
   Features grid — hover tilt
   -------------------------------------------------------------------------- */
.features__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.feature-card {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);
  transform-style: preserve-3d;
  transform: translateZ(0);
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-primary-soft);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-in-out);
  pointer-events: none;
}

.feature-card:hover {
  transform: translateZ(0) translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(16, 185, 129, 0.08);
  border-color: rgba(var(--color-primary-rgb), 0.25);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary-soft);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  display: grid;
  place-items: center;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
  transition: transform var(--duration-base) var(--ease-out-back);
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.08) translateZ(0);
  box-shadow: var(--shadow-glow-primary);
}

.feature-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.feature-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.feature-card__link::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-out-expo);
}

.feature-card__link:hover::after {
  transform: translateX(4px);
}

@media (min-width: 640px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */
.stats__wrapper {
  padding: var(--space-10);
  border-radius: var(--radius-2xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--shadow-glow-primary);
}

.stats__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}

.stat-item {
  text-align: center;
}

.stat-item__value {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

.stat-item__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Live class showcase
   -------------------------------------------------------------------------- */
.live-class {
  position: relative;
  overflow: hidden;
}

.live-class::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='%2310b981' stroke-width='0.4' d='M60 0v120M0 60h120M60 60m-40 0a40 40 0 1 0 80 0a40 40 0 1 0-80 0'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  pointer-events: none;
}

.live-class__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.live-class__preview {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--slate-950);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
  transform: translateZ(0);
}

.live-class__preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15, 23, 42, 0.85) 100%);
  z-index: 2;
  pointer-events: none;
}

.live-class__screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-class__live-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #fff;
  background: rgba(239, 68, 68, 0.9);
  border-radius: var(--radius-full);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.live-class__live-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: livePulse 1.5s ease-in-out infinite;
}

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

.live-class__toolbar {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

.live-class__teacher {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #f8fafc;
  font-size: var(--text-sm);
  font-weight: 600;
}

.live-class__teacher img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--emerald-500);
}

.live-class__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.live-class__feature {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out);
  transform: translateZ(0);
}

.live-class__feature:hover {
  transform: translateZ(0) translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.live-class__feature-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
}

.live-class__feature-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.live-class__feature-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
}

@media (min-width: 1024px) {
  .live-class__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* --------------------------------------------------------------------------
   Teachers
   -------------------------------------------------------------------------- */
.teachers-swiper {
  padding-bottom: var(--space-12) !important;
  overflow: visible;
}

.teacher-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  text-align: center;
  height: 100%;
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out);
  transform: translateZ(0);
}

.swiper-slide-active .teacher-card {
  box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
  border-color: rgba(var(--color-primary-rgb), 0.22);
}

.teacher-card__avatar-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto var(--space-5);
}

.teacher-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--gradient-primary) border-box;
  box-shadow: var(--shadow-md);
}

.teacher-card__badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  display: grid;
  place-items: center;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-glow-primary);
}

.teacher-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.teacher-card__role {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.teacher-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.teacher-card__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.teacher-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.teacher-card__rating {
  color: var(--color-accent-dark);
}

.swiper-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.swiper-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: grid;
  place-items: center;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out);
  transform: translateZ(0);
}

.swiper-nav__btn:hover {
  transform: translateZ(0) scale(1.05);
  background: rgba(var(--color-primary-rgb), 0.1);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-primary);
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: var(--color-border-strong);
  opacity: 1;
  transition:
    width var(--duration-base) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-in-out);
}

.swiper-pagination-bullet-active {
  width: 28px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials {
  position: relative;
}

.testimonials::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(600px, 90vw);
  height: min(400px, 60vh);
  transform: translate(-50%, -50%) translateZ(0);
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.testimonial-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  height: 100%;
  margin: 0;
}

.testimonial-card__stars {
  color: var(--gold-400);
  font-size: var(--text-lg);
  letter-spacing: 2px;
  margin-bottom: var(--space-4);
  text-shadow: var(--gradient-neon-gold);
}

.testimonial-card__quote {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-6);
  font-style: italic;
}

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

.testimonial-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--color-primary-rgb), 0.25);
}

.testimonial-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  font-style: normal;
  color: var(--color-text);
}

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

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.pricing__toggle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.pricing__toggle {
  position: relative;
  display: inline-flex;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.pricing__toggle-indicator {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  height: calc(100% - var(--space-2));
  width: calc(33.333% - var(--space-1));
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow-primary);
  transition: transform var(--duration-base) var(--ease-out-expo);
  transform: translateZ(0);
}

.pricing__toggle[data-active-plan="quarterly"] .pricing__toggle-indicator {
  transform: translateX(100%) translateZ(0);
}

.pricing__toggle[data-active-plan="annual"] .pricing__toggle-indicator {
  transform: translateX(200%) translateZ(0);
}

.pricing__toggle-btn {
  position: relative;
  z-index: 1;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--ease-in-out);
  min-width: 100px;
}

.pricing__toggle-btn--active,
.pricing__toggle-btn[aria-selected="true"] {
  color: var(--color-text-inverse);
}

.pricing__save-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(var(--color-accent-rgb), 0.15);
  color: var(--color-accent-dark);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

.pricing__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base) var(--ease-in-out);
  transform: translateZ(0);
}

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

.pricing-card--featured {
  border-color: rgba(var(--color-primary-rgb), 0.35);
  box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, var(--color-surface) 40%);
}

.pricing-card--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

.pricing-card__badge {
  align-self: flex-start;
  margin-bottom: var(--space-4);
}

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

.pricing-card__price {
  display: none;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.pricing-card__price.is-active {
  display: flex;
}

.pricing-card__amount {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.pricing-card__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.pricing-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.pricing-card__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.pricing-card__feature--disabled {
  color: var(--color-text-muted);
  opacity: 0.65;
}

.pricing-card__feature-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
}

.pricing-card__feature--disabled .pricing-card__feature-icon {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

.pricing-card__cta {
  width: 100%;
  margin-top: auto;
}

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

@media (min-width: 1024px) {
  .pricing__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .pricing-card--featured {
    transform: translateZ(0) scale(1.03);
  }

  .pricing-card--featured:hover {
    transform: translateZ(0) scale(1.03) translateY(-6px);
  }
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition:
    border-color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out);
}

.faq-item:hover {
  border-color: rgba(var(--color-primary-rgb), 0.2);
}

.faq-item[open],
.faq-item.is-open,
.faq-item--open {
  border-color: rgba(var(--color-primary-rgb), 0.3);
  box-shadow: var(--shadow-md), 0 0 24px rgba(16, 185, 129, 0.06);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-in-out);
}

.faq-item__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.16);
  border-radius: var(--radius-lg);
}

.faq-item__trigger::-webkit-details-marker {
  display: none;
}

.faq-item__trigger:hover {
  color: var(--color-primary);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    background var(--duration-fast) var(--ease-in-out);
}

.faq-item[open] .faq-item__icon,
.faq-item.is-open .faq-item__icon,
.faq-item--open .faq-item__icon {
  transform: rotate(45deg);
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
}

.faq-item__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.45s var(--ease-out-expo),
    opacity 0.25s ease,
    transform 0.25s ease;
}

.faq-item--open .faq-item__panel {
  max-height: 260px;
  opacity: 1;
  transform: translateY(0);
}

.faq-item__content {
  padding: 0 var(--space-6) var(--space-6);
}

.faq-item__answer {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--space-10);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact__info-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.contact__info-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary-soft);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
}

.contact__info-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.contact__info-text a,
.contact__info-text span {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.contact__info-text a:hover {
  color: var(--color-primary);
}

.contact__map {
  min-height: 200px;
}

.contact__form {
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

.contact__form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__form-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .contact__form-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   CTA banner
   -------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  padding: clamp(3rem, 8vw, 5rem);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--slate-950);
  border: 1px solid rgba(16, 185, 129, 0.25);
  box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 20% 50%, rgba(16, 185, 129, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 30%, rgba(251, 191, 36, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23fbbf24' stroke-width='0.4' d='M50 0L100 50L50 100L0 50Z'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  pointer-events: none;
}

.cta-banner__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cta-banner__title {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

.cta-banner__desc {
  font-size: var(--text-lg);
  color: var(--slate-400);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.cta-banner .btn--accent,
.cta-banner .btn--gold {
  box-shadow: var(--shadow-glow-accent);
}

/* --------------------------------------------------------------------------
   Islamic geometric section accents
   -------------------------------------------------------------------------- */
.section--pattern {
  position: relative;
}

.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23059669' stroke-width='0.45'%3E%3Cpolygon points='30,0 60,30 30,60 0,30'/%3E%3Cpolygon points='30,6 54,30 30,54 6,30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.pricing,
.teachers,
.testimonials {
  position: relative;
}


/* === premium-ui.css === */
/* ==========================================================================
   Premium UI — Global fixes & enterprise polish
   Load after landing.css
   ========================================================================== */

/* Critical: prevent SVG/icons blowing up to full container width */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
  flex-shrink: 0;
}

.icon,
.btn svg,
.theme-toggle svg,
.swiper-nav__btn svg,
.feature-card__link svg,
.hero__trust-logo svg,
.mobile-nav__chevron svg {
  width: var(--icon-md, 20px);
  height: var(--icon-md, 20px);
  max-width: none;
}

/* Navbar icons only — never shrink the brand mark */
.navbar__logo .brand-logo__svg {
  width: var(--logo-svg, 46px);
  height: var(--logo-svg, 46px);
  max-width: none;
  flex-shrink: 0;
}

/* Section rhythm */
.section {
  padding-block: var(--section-py, clamp(3.75rem, 8vw, 7.5rem));
}

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

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-header__title {
  font-size: var(--text-section, clamp(1.625rem, 4vw, 2.625rem));
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.section-header__desc {
  font-size: var(--text-body-lg, 1.125rem);
  line-height: 1.8;
  max-width: 42rem;
  margin-inline: auto;
}

/* Compact section lead (extra line under section header) */
.section-lead {
  max-width: 46rem;
  margin: calc(var(--space-5) * -1) auto var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--color-text-secondary);
}

@media (max-width: 767px) {
  .section-lead {
    margin: calc(var(--space-4) * -1) auto var(--space-7);
    padding-inline: var(--space-2);
  }
}

/* Hero typography */
.hero__title {
  font-size: var(--text-hero, clamp(2.25rem, 5.5vw, 4rem));
  line-height: 1.1;
}

.hero--premium .hero__title {
  margin-bottom: 0;
}

.hero__desc {
  font-size: var(--text-body-lg, 1.125rem);
  line-height: 1.75;
}

.hero--premium .hero__desc {
  margin-bottom: 0;
}

/* Feature cards — premium depth + tilt */
.features__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .features__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.feature-card {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), transparent 40%, rgba(251, 191, 36, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base);
}

.feature-card--glass:hover::after {
  opacity: 1;
}

.feature-card__icon,
.feature-card .ds-icon-tile {
  width: var(--icon-feature, 56px) !important;
  height: var(--icon-feature, 56px) !important;
  min-width: var(--icon-feature, 56px);
  font-size: 1.5rem !important;
  border-radius: var(--radius-lg);
  margin-bottom: 0;
}

.feature-card__icon svg {
  width: 28px;
  height: 28px;
}

.feature-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}

.feature-card__desc {
  font-size: var(--text-base);
  line-height: 1.75;
  flex: 1;
  margin: 0;
}

/* Hero visual */
@media (min-width: 1024px) {
  .hero--premium .hero__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.hero__card-main img {
  width: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}

.hero--premium .hero__card-main.glass-card {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.hero__float-icon {
  font-size: 1.25rem !important;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  flex-shrink: 0;
}

.hero--premium .hero__float-icon--svg svg {
  width: 22px;
  height: 22px;
  max-width: none;
}

.hero__trust-logo svg {
  width: 18px;
  height: 18px;
}

/* Teacher cards */
.teacher-card {
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border-radius: var(--radius-xl);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    box-shadow var(--duration-base);
}

.teacher-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl), 0 0 40px rgba(5, 150, 105, 0.12);
}

.teacher-card__avatar-wrap {
  width: 112px;
  height: 112px;
  margin: 0 auto var(--space-5);
  padding: 3px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow-primary);
}

.teacher-card__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-bg-elevated);
}

.teacher-card__name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.teacher-card__bio {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

/* Brand logo — see brand-logo-premium.css for 3D mark */

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.navbar__logo:hover {
  color: inherit;
  text-decoration: none;
}

.navbar__logo-text {
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.dashboard__sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.dashboard__sidebar-brand:hover {
  color: var(--color-primary);
}

/* Cursor glow (desktop) */
.cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}

body.has-cursor-glow .cursor-glow {
  opacity: 1;
}

/* Page loader */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Pricing / testimonial polish */
.pricing-card,
.testimonial-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
}

.timeline__marker {
  width: 48px;
  height: 48px;
  font-size: var(--text-lg);
}

@media (max-width: 767px) {
  .hero {
    min-height: 0;
    padding-bottom: var(--space-12);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .teacher-card__avatar-wrap {
    width: 96px;
    height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow {
    display: none;
  }
}


/* === brand-logo-premium.css === */
/**
 * Brand logo — premium 3D Mushaf mark, animated rings, pointer tilt
 */

.brand-logo--3d {
  --logo-tilt-x: 0deg;
  --logo-tilt-y: 0deg;
  --logo-shine-x: 30%;
  --logo-shine-y: 20%;
}

.brand-logo--sm {
  --logo-size: 42px;
  --logo-svg: 38px;
  --logo-bleed: 10px;
}

.brand-logo--md {
  --logo-size: 52px;
  --logo-svg: 46px;
  --logo-icon-scale: 1.22;
  --logo-bleed: 12px;
}

/* Navbar — bigger mark inside same circle (desktop) */
@media (min-width: 768px) {
  .navbar__logo .brand-logo {
    --logo-icon-scale: 1.28;
  }
}

.brand-logo--lg {
  --logo-size: 66px;
  --logo-svg: 58px;
  --logo-bleed: 14px;
}

/* Outer frame fits ring + glow — nothing clipped */
.brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  width: calc(var(--logo-size, 52px) + var(--logo-bleed, 12px) * 2);
  height: calc(var(--logo-size, 52px) + var(--logo-bleed, 12px) * 2);
  min-width: calc(var(--logo-size, 52px) + var(--logo-bleed, 12px) * 2);
  min-height: calc(var(--logo-size, 52px) + var(--logo-bleed, 12px) * 2);
}

.brand-logo__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--logo-size, 52px);
  height: var(--logo-size, 52px);
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 520px;
  transform: rotateX(var(--logo-tilt-y)) rotateY(var(--logo-tilt-x));
  transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.brand-logo__svg {
  position: relative;
  z-index: 4;
  width: var(--logo-svg, 46px);
  height: var(--logo-svg, 46px);
  filter: drop-shadow(0 4px 10px rgba(5, 150, 105, 0.35));
  transform: translateZ(12px) scale(var(--logo-icon-scale, 1));
  transform-origin: center center;
}

.brand-logo__disc {
  position: absolute;
  inset: 5px;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(155deg, #ffffff 0%, #ecfdf5 45%, #d1fae5 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 28px rgba(5, 150, 105, 0.32),
    0 2px 8px rgba(15, 23, 42, 0.08);
  transform: translateZ(4px);
}

.brand-logo__ring {
  position: absolute;
  inset: -7px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #047857,
    #059669,
    #fbbf24,
    #fde68a,
    #10b981,
    #34d399,
    #047857
  );
  opacity: 0.95;
  animation: logoRingSpin 5s linear infinite, logoRingPulse 3s ease-in-out infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

.brand-logo__ring--inner {
  inset: -3px;
  opacity: 0.5;
  animation: logoRingSpin 7s linear infinite reverse, logoRingPulse 3s ease-in-out infinite 0.5s;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 0.5px));
}

.brand-logo__glow {
  position: absolute;
  inset: -10px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, rgba(251, 191, 36, 0.15) 45%, transparent 72%);
  animation: logoGlowPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

.brand-logo__shine {
  position: absolute;
  inset: 6px;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(
    circle at var(--logo-shine-x) var(--logo-shine-y),
    rgba(255, 255, 255, 0.7),
    transparent 45%
  );
  mix-blend-mode: overlay;
  opacity: 0.8;
  animation: logoShinePulse 3s ease-in-out infinite;
}

.brand-logo__shine::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 58%
  );
  animation: logoShineSweep 4.5s ease-in-out infinite;
}

/* SVG layer 3D motion */
.brand-logo__mark {
  transform-origin: 24px 24px;
  animation: logoMarkFloat 4.2s ease-in-out infinite;
}

.brand-logo__page-l {
  transform-origin: 24px 22px;
  animation: logoPageLeft 3.6s ease-in-out infinite;
}

.brand-logo__page-r {
  transform-origin: 24px 22px;
  animation: logoPageRight 3.6s ease-in-out infinite;
}

.brand-logo__crescent {
  transform-origin: 24px 9px;
  animation: logoCrescentGlow 3s ease-in-out infinite;
}

.brand-logo__star {
  transform-origin: 24px 10px;
  animation: logoStarPulse 2.2s ease-in-out infinite;
}

.brand-logo__spine {
  animation: logoSpineGlow 2.5s ease-in-out infinite;
}

.brand-logo__noor {
  transform-origin: 24px 12px;
  animation: logoNoorPulse 3.5s ease-in-out infinite;
}

.brand-logo__mihrab {
  animation: logoMihrabGlow 3s ease-in-out infinite;
}

.brand-logo__bookmark {
  transform-origin: 33px 22px;
  animation: logoBookmarkSway 4s ease-in-out infinite;
}

.brand-logo__ayah--l,
.brand-logo__ayah--r {
  animation: logoAyahFade 3s ease-in-out infinite;
}

.brand-logo__ayah--r {
  animation-delay: -1.5s;
}

.brand-logo__star-ring {
  transform-origin: 24px 9.8px;
  animation: logoStarRing 2.8s ease-in-out infinite;
}

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

@keyframes logoRingPulse {
  0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.45)); }
}

@keyframes logoShineSweep {
  0%, 100% { transform: translateX(-80%) rotate(12deg); opacity: 0.3; }
  50% { transform: translateX(80%) rotate(12deg); opacity: 0.7; }
}

@keyframes logoNoorPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.98); }
  50% { opacity: 0.45; transform: scale(1.04); }
}

@keyframes logoMihrabGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

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

@keyframes logoAyahFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.65; }
}

@keyframes logoStarRing {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.08); }
}

@keyframes logoGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes logoMarkFloat {
  0%, 100% { transform: translateY(0) translateZ(8px) rotateX(0deg); }
  50% { transform: translateY(-2px) translateZ(14px) rotateX(2deg); }
}

@keyframes logoPageLeft {
  0%, 100% { transform: translateZ(6px) rotateY(-10deg); }
  50% { transform: translateZ(12px) rotateY(-5deg); }
}

@keyframes logoPageRight {
  0%, 100% { transform: translateZ(8px) rotateY(10deg); }
  50% { transform: translateZ(14px) rotateY(5deg); }
}

@keyframes logoCrescentGlow {
  0%, 100% { opacity: 0.92; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.15); }
}

@keyframes logoStarPulse {
  0%, 100% { opacity: 0.9; transform: scale(1) translateZ(16px); }
  50% { opacity: 1; transform: scale(1.12) translateZ(20px); }
}

@keyframes logoSpineGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

@keyframes logoShinePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

/* Hover boost */
.navbar__logo:hover .brand-logo__stage,
.footer__logo:hover .brand-logo__stage,
.dashboard__sidebar-brand:hover .brand-logo__stage,
.auth-card__brand:hover .brand-logo__stage {
  transform: rotateX(var(--logo-tilt-y)) rotateY(var(--logo-tilt-x)) scale(1.04);
}

/* Parents must not clip the ring */
.navbar,
.navbar__inner,
.navbar__logo,
.footer__logo,
.footer__brand,
.auth-card__brand,
.dashboard__sidebar-brand {
  overflow: visible;
}

.navbar__logo {
  align-items: center;
}

.navbar__logo:hover .brand-logo__glow,
.footer__logo:hover .brand-logo__glow {
  opacity: 1;
}

.page-loader__logo .brand-logo--md {
  --logo-size: 72px;
  --logo-svg: 64px;
  --logo-bleed: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo__stage {
    transition: none;
    transform: none !important;
  }

  .brand-logo__mark,
  .brand-logo__page-l,
  .brand-logo__page-r,
  .brand-logo__crescent,
  .brand-logo__star,
  .brand-logo__noor,
  .brand-logo__mihrab,
  .brand-logo__bookmark,
  .brand-logo__ayah--l,
  .brand-logo__ayah--r,
  .brand-logo__star-ring,
  .brand-logo__ring,
  .brand-logo__glow,
  .brand-logo__shine,
  .brand-logo__shine::after {
    animation: none !important;
  }
}


/* === hero-premium.css === */
/* ==========================================================================
   Hero Premium — World-class 3D landing hero
   Load after landing.css
   ========================================================================== */

@property --hero-spot-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --hero-spot-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 40%;
}

.hero.hero--premium {
  --hero-spot-x: 50%;
  --hero-spot-y: 40%;
  --hero-gap: var(--space-4);
  --hero-gap-tight: var(--space-2);
  --hero-pad-block: var(--space-6);
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(100dvh, 100svh);
  padding-top: calc(var(--header-height) + var(--hero-pad-block));
  padding-bottom: clamp(var(--space-10), 6vh, var(--space-16));
  box-sizing: border-box;
  overflow: clip;
  contain: layout style;
}

.hero--lite {
  contain: layout style paint;
}

@media (min-width: 1024px) {
  .hero.hero--premium {
    align-items: center;
    min-height: max(720px, calc(100dvh - var(--space-4)));
    padding-bottom: clamp(var(--space-12), 8vh, var(--space-20));
  }

  .hero--premium .hero__inner {
    gap: clamp(var(--space-8), 4vw, var(--space-12));
  }

  .hero__scroll {
    bottom: var(--space-6);
  }
}

.hero--premium .hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  gap: clamp(var(--space-8), 4vw, var(--space-10));
  align-items: center;
}

.hero--premium .hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  margin: 0;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  max-width: 680px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(255, 255, 255, 0.72) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 20px 50px rgba(5, 150, 105, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  transform: translateZ(0);
}

/* Single spacing system — reset duplicate margins from landing/premium-ui */
.hero--premium .hero__content > * {
  margin-block: 0;
}

.hero--premium .hero__bismillah.hero__arabic-line {
  margin: 0;
  padding-bottom: var(--hero-gap);
  border-bottom: 1px solid rgba(5, 150, 105, 0.15);
}

.hero--premium .hero__eyebrow {
  margin: 0;
}

.hero--premium .hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap-tight);
  margin: 0;
  line-height: 1.08;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  letter-spacing: -0.03em;
}

.hero--premium .hero__title-line {
  overflow: visible;
  line-height: 1.1;
}

.hero--premium .hero__desc {
  margin: 0;
  max-width: 540px;
}

.hero--premium .hero__chips {
  margin: 0;
}

.hero--premium .hero__actions {
  margin: 0;
}

.hero--premium .hero__trust-logos {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.hero.hero--premium {
  --hero-bg-parallax-x: 0px;
  --hero-bg-parallax-y: 0px;
}

.hero--premium .hero__bg {
  overflow: hidden;
}

/* Aurora — silky gradient blobs (GPU transform) */
.hero__aurora {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(var(--hero-bg-parallax-x), var(--hero-bg-parallax-y), 0);
}

.hero__aurora-blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  transform: translate3d(0, 0, 0);
  /* Gradient-only blobs — no filter:blur (GPU heavy) */
}

.hero__aurora-blob--1 {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: -8%;
  right: 5%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.12) 45%, transparent 70%);
  animation: heroAurora1 28s ease-in-out infinite;
}

.hero__aurora-blob--2 {
  width: min(48vw, 440px);
  height: min(48vw, 440px);
  bottom: 0%;
  left: -6%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.38) 0%, rgba(251, 191, 36, 0.1) 48%, transparent 72%);
  animation: heroAurora2 32s ease-in-out infinite;
  animation-delay: -8s;
}

.hero__aurora-blob--3 {
  width: min(40vw, 380px);
  height: min(40vw, 380px);
  top: 38%;
  left: 32%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.32) 0%, transparent 70%);
  animation: heroAurora3 36s ease-in-out infinite;
  animation-delay: -16s;
}

@keyframes heroAurora1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

@keyframes heroAurora2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}

@keyframes heroAurora3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at var(--hero-spot-x) var(--hero-spot-y), transparent 0%, rgba(255, 255, 255, 0.12) 38%, rgba(248, 250, 252, 0.88) 74%),
    linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.35) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.hero__mesh {
  position: absolute;
  inset: -20%;
  z-index: 1;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(5, 150, 105, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(900px) rotateX(56deg) translateY(-8%) scale(1.12);
  transform-origin: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 28%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 65% at 50% 28%, #000 18%, transparent 78%);
}

.hero--premium:not(.hero--lite) .hero__mesh {
  animation: heroMeshFloat 40s ease-in-out infinite alternate;
}

@keyframes heroMeshFloat {
  0% { transform: perspective(900px) rotateX(56deg) translateY(-8%) scale(1.12); }
  100% { transform: perspective(900px) rotateX(55deg) translateY(-7%) scale(1.14); }
}

.hero--premium .hero__orb {
  animation: heroOrbSmooth 32s ease-in-out infinite;
  opacity: 0.42;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.35) 0%, transparent 70%);
  filter: none;
}

.hero--premium .hero__orb--primary {
  animation-duration: 34s;
  animation-delay: 0s;
}

.hero--premium .hero__orb--accent {
  animation-duration: 40s;
  animation-delay: -14s;
}

.hero__orb--gold {
  width: min(320px, 50vw);
  height: min(320px, 50vw);
  background: radial-gradient(circle, rgba(251, 191, 36, 0.28) 0%, transparent 70%);
  top: 42%;
  right: 28%;
  animation-duration: 36s;
  animation-delay: -12s;
  filter: none;
}

@keyframes heroOrbSmooth {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-24px, 18px, 0) scale(1.05); }
  45% { transform: translate3d(14px, -12px, 0) scale(0.97); }
  70% { transform: translate3d(-10px, -16px, 0) scale(1.03); }
  90% { transform: translate3d(8px, 10px, 0) scale(0.99); }
}

.hero--premium .hero__canvas {
  opacity: 0.58;
  z-index: 1;
  mix-blend-mode: normal;
}

.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      720px circle at var(--hero-spot-x) var(--hero-spot-y),
      rgba(16, 185, 129, 0.14) 0%,
      rgba(16, 185, 129, 0.04) 35%,
      transparent 62%
    ),
    radial-gradient(
      480px circle at var(--hero-spot-x) var(--hero-spot-y),
      rgba(251, 191, 36, 0.06) 0%,
      transparent 50%
    );
}

.hero--lite .hero__spotlight,
.hero--lite .hero__vignette {
  transition:
    --hero-spot-x 0.45s var(--hero-ease),
    --hero-spot-y 0.45s var(--hero-ease);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(251, 191, 36, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.08);
}

.hero__eyebrow-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: heroPulse 2s ease-out infinite;
}

@keyframes heroPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent .hero__title-accent {
  display: inline;
  background: linear-gradient(120deg, #047857 0%, #10b981 40%, #d97706 75%, #fbbf24 100%);
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero--premium:not(.hero--lite) .hero__title-line--accent .hero__title-accent {
  background-size: 200% auto;
  animation: heroShimmer 8s ease-in-out infinite;
}

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

.hero__bismillah.hero__arabic-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding-bottom: var(--hero-gap);
  border-bottom: 1px solid rgba(5, 150, 105, 0.15);
  font-family: var(--font-arabic, "Amiri", serif);
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary-dark);
  direction: rtl;
  text-align: right;
  letter-spacing: 0.04em;
  opacity: 1;
}

.hero__bismillah-rule {
  flex: 1;
  max-width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 6, 0.55), transparent);
}

.hero__bismillah-rule:first-child {
  background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.45));
}

.hero__bismillah-rule:last-child {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.55), transparent);
}

@media (max-width: 640px) {
  .hero__bismillah.hero__arabic-line {
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
  }

  .hero__bismillah-rule {
    max-width: 40px;
  }
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.15s var(--hero-ease), border-color 0.15s ease, box-shadow 0.15s ease;
}

.hero__chip svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.hero__chip:hover {
  transform: translateY(-2px) translateZ(0);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: var(--shadow-md);
}

.hero__chip:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

.hero--premium .hero__actions .btn {
  position: relative;
  overflow: hidden;
}

.hero--premium .hero__actions .btn--primary {
  box-shadow: var(--shadow-lg), 0 8px 32px rgba(5, 150, 105, 0.35);
}

.hero--premium .hero__actions .btn {
  transition:
    transform 0.12s var(--hero-ease-snap),
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
  touch-action: manipulation;
}

.hero--premium .hero__actions .btn:active {
  transform: scale(0.97) translateZ(0);
  transition-duration: 0.06s;
}

.hero--premium .hero__actions .btn--primary:hover {
  box-shadow: var(--shadow-lg), 0 12px 40px rgba(5, 150, 105, 0.42);
}

/* Inline metrics — visible on all breakpoints */
.hero__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(255, 251, 235, 0.65));
  border: 1px solid rgba(5, 150, 105, 0.14);
}

.hero__metrics > li[aria-hidden="true"] {
  color: rgba(5, 150, 105, 0.35);
  font-weight: 700;
  user-select: none;
}

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

.hero__metric-value {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  background: linear-gradient(120deg, #047857, #10b981 50%, #b45309);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__metric-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (min-width: 1024px) {
  .hero__metrics {
    display: none;
  }
}

.hero__btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: heroBtnShine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroBtnShine {
  0%, 75%, 100% { transform: translateX(-120%); }
  40% { transform: translateX(120%); }
}

.hero__trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin: 0;
}

.hero__trust-logos-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  width: 100%;
}

@media (min-width: 640px) {
  .hero__trust-logos-label {
    width: auto;
  }
}

.hero__trust-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hero__trust-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* 3D Visual portal — visible on all breakpoints */
.hero--premium .hero__visual {
  display: block;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  perspective: 1400px;
  z-index: 3;
}

.hero__portal {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  transform-style: preserve-3d;
}

.hero__portal-backdrop {
  position: absolute;
  inset: -8% -12% -4% -8%;
  pointer-events: none;
  z-index: 0;
}

.hero__portal-grid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.2), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(251, 191, 36, 0.15), transparent 40%),
    linear-gradient(rgba(5, 150, 105, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, #000 30%, transparent 78%);
  animation: heroPortalGridDrift 20s linear infinite;
}

@keyframes heroPortalGridDrift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 32px 32px, 32px 32px; }
}

.hero__portal-ring {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 0 40px rgba(16, 185, 129, 0.12);
  opacity: 0.85;
}

.hero--premium:not(.hero--lite) .hero__portal-ring {
  animation: heroRingSpin 48s linear infinite;
}

.hero__portal-ring--2 {
  inset: -4%;
  border-color: rgba(251, 191, 36, 0.2);
}

.hero--premium:not(.hero--lite) .hero__portal-ring--2 {
  animation-direction: reverse;
  animation-duration: 40s;
}

.hero__portal-ring--3 {
  inset: 2%;
  border: 1px dashed rgba(5, 150, 105, 0.18);
  opacity: 0.6;
}

@keyframes heroRingSpin {
  from { transform: rotateZ(0deg) rotateX(68deg); }
  to { transform: rotateZ(360deg) rotateX(68deg); }
}

.hero--premium .hero__card {
  position: relative;
  z-index: 1;
  padding: var(--space-5);
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg);
  transition: none;
  will-change: transform;
}

.hero--premium .hero__card-main {
  position: relative;
  overflow: visible;
  padding: var(--space-3);
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Float badges — anchored to video frame only (inside hero__card-main) */
.hero--premium .hero__card-main .hero__float-card {
  z-index: 6;
  max-width: min(13.5rem, 46%);
  pointer-events: none;
}

.hero__float-card--top {
  top: 4%;
  right: 2%;
  z-index: 6;
  animation: heroFloatTop 4.5s ease-in-out infinite;
}

.hero__float-card--bottom {
  bottom: 8%;
  left: 2%;
  top: auto;
  right: auto;
  z-index: 6;
  animation: heroFloatBottom 5s ease-in-out infinite;
  animation-delay: -1.5s;
}

/* Hero media — premium video frame */
.hero__media {
  position: relative;
  width: 100%;
  z-index: 1;
  contain: layout style;
}

.hero__media--video .hero__media-frame {
  contain: strict;
  content-visibility: auto;
}

.hero__media-border {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: 2.75rem 1.15rem 2.75rem 1.15rem;
  background: linear-gradient(135deg, #059669, #10b981, #fbbf24, #34d399);
  opacity: 0.9;
}

.hero__media-border::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: linear-gradient(145deg, #f8fafc 0%, #ecfdf5 100%);
}


.hero__media-frame {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: 2.5rem 1rem 2.5rem 1rem;
  overflow: hidden;
  background: #0f172a;
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.06),
    0 28px 64px rgba(5, 150, 105, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transform: translateZ(0);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #0f172a;
  transform: translateZ(0) scale(1.02);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__media-frame--video.is-playing .hero__video {
  animation: heroVideoKenBurns 24s ease-in-out infinite alternate;
}

@keyframes heroVideoKenBurns {
  0% { transform: translateZ(0) scale(1.02); }
  100% { transform: translateZ(0) scale(1.07); }
}

.hero__media-frame--video.is-ready .hero__video {
  opacity: 1;
}

.hero__media-frame--video .hero__video {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.hero__media-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(15, 23, 42, 0.35) 100%);
}

.hero__video-live {
  position: absolute;
  top: var(--space-3, 0.75rem);
  left: var(--space-3, 0.75rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.hero__video-hd {
  position: absolute;
  top: var(--space-3, 0.75rem);
  right: var(--space-3, 0.75rem);
  z-index: 4;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ecfdf5;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.85), rgba(16, 185, 129, 0.75));
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.hero__media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, transparent 28%, transparent 72%, rgba(15, 23, 42, 0.25) 100%),
    linear-gradient(120deg, rgba(5, 150, 105, 0.12) 0%, transparent 45%, rgba(251, 191, 36, 0.08) 100%);
}

.hero__media-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 58%
  );
  opacity: 0.5;
  transform: translateX(-120%);
}

.hero--premium:not(.hero--lite) .hero__media-frame--video.is-playing .hero__media-shine {
  animation: heroVideoShine 5s ease-in-out infinite;
}

@keyframes heroVideoShine {
  0%, 100% { transform: translateX(-120%); opacity: 0.35; }
  50% { transform: translateX(120%); opacity: 0.65; }
}

.hero__card-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowPulse 4s ease-in-out infinite;
}

.hero__card-glow--primary {
  width: 180px;
  height: 180px;
  top: 5%;
  right: 0;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45), transparent 70%);
}

.hero__card-glow--gold {
  width: 120px;
  height: 120px;
  bottom: 25%;
  left: -5%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35), transparent 70%);
  animation-delay: -2s;
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  position: relative;
  z-index: 2;
  transform: translateZ(40px);
}

.hero__stat-card {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}

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

.hero__stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}

.hero__stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.hero--premium .hero__float-card {
  z-index: 5;
  box-shadow: var(--shadow-lg), 0 12px 40px rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@keyframes heroFloatTop {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes heroFloatBottom {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 8px, 0); }
}

.hero__float-icon--svg {
  background: var(--gradient-primary-soft);
  color: var(--color-primary);
}

.hero__float-icon--svg svg {
  width: 22px;
  height: 22px;
}

.hero__live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
  animation: heroPulse 1.8s ease-out infinite;
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.hero__scroll:hover {
  color: var(--color-primary);
  transform: translateX(-50%) translateY(2px);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--color-primary), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
  animation: heroScrollLine 2s ease-in-out infinite;
}

@keyframes heroScrollLine {
  0% { transform: translateY(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

.hero__scroll-wheel {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(5, 150, 105, 0.35);
  border-radius: 12px;
  position: relative;
}

.hero__scroll-wheel::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--color-primary);
  border-radius: 4px;
  animation: heroScrollWheel 2s ease-in-out infinite;
}

@keyframes heroScrollWheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.3; }
}

/* --------------------------------------------------------------------------
   Instant paint — CSS reveal before JS (no blank hero)
   -------------------------------------------------------------------------- */
.hero--premium [data-hero-reveal] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero--premium:not(.hero--ready) [data-hero-reveal] {
  animation: heroRevealIn 0.32s var(--hero-ease) both;
}

.hero--premium:not(.hero--ready) [data-hero-reveal="arabic"] { animation-delay: 0.02s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="eyebrow"] { animation-delay: 0.06s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="line1"] { animation-delay: 0.1s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="line2"] { animation-delay: 0.14s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="desc"] { animation-delay: 0.18s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="chips"] { animation-delay: 0.22s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="metrics"] { animation-delay: 0.26s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="actions"] { animation-delay: 0.3s; }
.hero--premium:not(.hero--ready) [data-hero-reveal="trust"] { animation-delay: 0.34s; }

@keyframes heroRevealIn {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero--premium.hero--ready [data-hero-reveal] {
  animation: none;
}

.hero--premium .hero__visual {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero--premium:not(.hero--ready) .hero__visual {
  animation: heroRevealIn 0.55s var(--hero-ease) 0.12s both;
}

.hero--premium .hero__title-line--accent .hero__title-accent {
  position: relative;
  filter: drop-shadow(0 2px 12px rgba(16, 185, 129, 0.2));
}

.hero__demo-btn {
  gap: var(--space-2);
}

.hero__demo-btn svg {
  transition: transform 0.15s var(--hero-ease-snap);
}

.hero__demo-btn:hover svg {
  transform: scale(1.12);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero--premium:not(.hero--ready) [data-hero-reveal],
  .hero--premium:not(.hero--ready) .hero__visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__aurora-blob,
  .hero__grain,
  .hero__mesh,
  .hero__portal-ring,
  .hero--premium .hero__orb,
  .hero__title-line--accent .hero__title-accent,
  .hero__btn-shine,
  .hero__scroll-line::after,
  .hero__scroll-wheel::before,
  .hero__eyebrow-pulse,
  .hero__media-border,
  .hero__media-shine,
  .hero__media-slide.is-active img,
  .hero__media-frame--video.is-playing .hero__video,
  .hero__portal-grid,
  .hero__card-glow {
    animation: none !important;
  }

  .hero__media-slide.is-active img,
  .hero__media-frame--video .hero__video {
    transform: translateZ(0) scale(1.02);
  }

  .hero--premium .hero__card {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .hero.hero--premium {
    min-height: auto;
    align-items: flex-start;
    padding-top: calc(var(--header-height) + var(--space-5));
    padding-bottom: var(--space-8);
    --hero-gap: var(--space-3);
    --hero-pad-block: var(--space-5);
  }

  .hero--premium .hero__content {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    max-width: none;
  }

  .hero--premium .hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .hero--premium .hero__visual {
    order: 2;
    max-width: 100%;
  }

  .hero--premium .hero__content {
    order: 1;
  }

  .hero--premium .hero__card {
    transform: none;
    padding: var(--space-3);
  }

  .hero--premium .hero__portal-backdrop .hero__portal-ring {
    display: none;
  }

  .hero--premium .hero__portal-grid {
    opacity: 0.2;
  }

  .hero__media-frame--video {
    aspect-ratio: 16 / 10;
    border-radius: 1.25rem 0.75rem 1.25rem 0.75rem;
  }

  .hero__float-card--top {
    top: 3%;
    right: 2%;
    max-width: min(11rem, 50%);
    padding: var(--space-2) var(--space-3);
  }

  .hero__float-card--bottom {
    bottom: 6%;
    left: 2%;
    max-width: min(11rem, 50%);
    padding: var(--space-2) var(--space-3);
  }

  .hero__float-card {
    gap: var(--space-2);
  }

  .hero__float-icon,
  .hero__float-icon--svg {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

  .hero__float-text strong {
    font-size: 0.6875rem;
    line-height: 1.25;
  }

  .hero__float-card .hero__float-text span {
    display: none;
  }

  .hero__stats {
    transform: none;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .hero__stat-card {
    padding: var(--space-2) var(--space-3);
  }

  .hero__stat-value {
    font-size: var(--text-lg);
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero--premium .hero__float-card--bottom,
  .hero--premium .hero__float-card--top {
    max-width: min(10rem, 54%);
    padding: var(--space-2);
  }

  .hero__float-icon,
  .hero__float-icon--svg {
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .hero__video-live {
    font-size: 0.625rem;
    padding: 0.28rem 0.5rem;
  }
}

/* Consistent gap to next section */
.hero.hero--premium + .features {
  margin-top: 0;
}

/* Tight gap between hero and first section */
.hero.hero--premium + .section {
  padding-top: clamp(1rem, 2vw, 1.75rem);
}

.hero.hero--premium + .features .section-header {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}


/* === features-premium.css === */
/* ==========================================================================
   Features — Premium 3D cards (GPU-only transforms)
   ========================================================================== */

/* Intro block above feature cards */
.features__intro {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hero.hero--premium + .features .features__intro {
  margin-top: 0;
}

.hero.hero--premium + .features .features__intro-inner {
  padding: var(--space-6) var(--space-5);
}

.features__intro-inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.55) 0%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 251, 235, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.page-landing .features__intro-inner {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.48) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 251, 235, 0.4) 100%);
}

.features__intro-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  line-height: 1.3;
}

.features__intro-desc {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.features__intro-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.features__intro-highlights li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
}

.features__intro-highlights li span {
  color: var(--color-primary);
  font-size: 0.65em;
}

.features--premium .features__grid,
.courses--premium .courses__grid {
  perspective: 1200px;
}

/* Override legacy landing.css hover (JS-driven tilt only) */
.features--premium .feature-card--premium:hover,
.courses--premium .feature-card--premium:hover,
.features--premium .feature-card--premium:hover::before,
.courses--premium .feature-card--premium:hover::before {
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  opacity: 1;
  box-shadow: none;
  border-color: transparent;
}

.features--premium .feature-card--premium::before,
.courses--premium .feature-card--premium::before {
  display: none;
}

.feature-card--premium {
  --tilt-x: 0;
  --tilt-y: 0;
  --lift: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  --glow: 0;
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  transition:
    transform 0.12s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
  will-change: transform;
}

.feature-card--premium:not(.is-hovered) {
  will-change: auto;
}

.feature-card--premium.is-hovered {
  --lift: -10;
  --glow: 1;
}

.feature-card--premium .feature-card__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.page-landing .feature-card--premium .feature-card__surface {
  background: rgba(255, 255, 255, 0.68);
}

.feature-card--premium.is-hovered .feature-card__surface {
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow:
    0 4px 8px rgba(15, 23, 42, 0.04),
    0 20px 48px rgba(5, 150, 105, 0.14),
    0 0 0 1px rgba(16, 185, 129, 0.08);
}

.feature-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--glow) * 0.85);
  background: radial-gradient(
    280px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(16, 185, 129, 0.12) 35%,
    transparent 65%
  );
  transition: opacity 0.15s ease;
  z-index: 2;
}

.feature-card__border-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, calc(var(--glow) * 0.6)),
    transparent 40%,
    rgba(251, 191, 36, calc(var(--glow) * 0.45))
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: var(--glow);
  z-index: 3;
  transition: opacity 0.15s ease;
}

.feature-card__body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  transform: translateZ(24px);
}

.feature-card--premium .feature-card__icon,
.feature-card--premium .ds-icon-tile {
  transform: translateZ(36px);
  transition:
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.feature-card--premium.is-hovered .feature-card__icon,
.feature-card--premium.is-hovered .ds-icon-tile {
  transform: translateZ(48px) scale(1.08) rotate(-4deg);
  background: var(--gradient-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35);
}

.feature-card--premium.is-hovered .feature-card__icon svg,
.feature-card--premium.is-hovered .ds-icon-tile svg {
  stroke: #fff;
}

.feature-card--premium .feature-card__title {
  transform: translateZ(20px);
  transition: color 0.15s ease;
}

.feature-card--premium.is-hovered .feature-card__title {
  color: var(--color-primary-dark);
}

.feature-card--premium .feature-card__desc {
  transform: translateZ(12px);
}

.feature-card--premium .feature-card__link {
  transform: translateZ(28px);
  margin-top: auto;
  padding-top: var(--space-2);
}

.feature-card--premium .feature-card__link svg {
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

.feature-card--premium.is-hovered .feature-card__link svg {
  transform: translateX(5px);
}

/* Scroll reveal — no AOS delay */
.feature-card--premium {
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 28px, 0) rotateX(0) rotateY(0);
}

.feature-card--premium.is-revealed {
  opacity: 1;
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  transition:
    opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.12s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease;
}

.features--premium .feature-card--premium:nth-child(1) { transition-delay: 0ms; }
.features--premium .feature-card--premium:nth-child(2) { transition-delay: 40ms; }
.features--premium .feature-card--premium:nth-child(3) { transition-delay: 80ms; }
.features--premium .feature-card--premium:nth-child(4) { transition-delay: 120ms; }
.features--premium .feature-card--premium:nth-child(5) { transition-delay: 160ms; }
.features--premium .feature-card--premium:nth-child(6) { transition-delay: 200ms; }
.features--premium .feature-card--premium:nth-child(7) { transition-delay: 240ms; }
.features--premium .feature-card--premium:nth-child(8) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .feature-card--premium,
  .feature-card--premium.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .feature-card--premium.is-hovered .feature-card__surface {
    box-shadow: var(--shadow-md);
  }
}

@media (max-width: 1023px) {
  .feature-card--premium,
  .feature-card--premium.is-revealed {
    transform: translate3d(0, 0, 0);
  }

  .feature-card--premium.is-hovered {
    --lift: -4;
  }
}


/* === showcase-premium.css === */
/* ==========================================================================
   Live Class Showcase — Premium 3D (GPU transforms)
   ========================================================================== */

.showcase--premium {
  --showcase-gap: var(--space-5);
  --showcase-gap-tight: var(--space-3);
  position: relative;
  overflow: hidden;
}

.showcase__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.showcase__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}

.showcase__orb--emerald {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: -8%;
  right: -5%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 70%);
}

.showcase__orb--gold {
  width: min(320px, 45vw);
  height: min(320px, 45vw);
  bottom: 5%;
  left: -8%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, transparent 70%);
}

.showcase__grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='none' stroke='%23059669' stroke-width='0.5' d='M40 0v80M0 40h80'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.showcase__container {
  position: relative;
  z-index: 1;
}

.showcase__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .showcase__grid {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* Content column */
.showcase__content {
  display: flex;
  flex-direction: column;
  gap: var(--showcase-gap);
}

.showcase__header {
  display: flex;
  flex-direction: column;
  gap: var(--showcase-gap-tight);
  margin: 0;
}

.showcase__badge {
  align-self: flex-start;
  margin: 0;
}

.showcase__title {
  margin: 0;
  font-size: var(--text-section, clamp(1.625rem, 4vw, 2.625rem));
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  color: var(--color-text);
}

.showcase__desc {
  margin: 0;
  font-size: var(--text-body-lg, 1.125rem);
  line-height: 1.75;
  color: var(--color-text-secondary);
  max-width: 36rem;
}

/* Platform pills — 3D lift on hover */
.showcase__platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.showcase__platform {
  --pill-lift: 0;
  --pill-tilt-x: 0;
  --pill-tilt-y: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: var(--radius-full);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(5, 150, 105, 0.08);
  transform: perspective(600px)
    rotateX(calc(var(--pill-tilt-y) * -1deg))
    rotateY(calc(var(--pill-tilt-x) * 1deg))
    translate3d(0, calc(var(--pill-lift) * -1px), 0);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
  cursor: default;
}

.showcase__platform svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
}

.showcase__platform.is-pill-hover,
.showcase__platform:hover {
  --pill-lift: 4;
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow:
    0 8px 20px rgba(5, 150, 105, 0.15),
    0 0 0 1px rgba(16, 185, 129, 0.1);
  background: #fff;
}

/* Feature list — interactive 3D rows */
.showcase__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase__list-item {
  --item-lift: 0;
  --item-tilt-x: 0;
  --item-tilt-y: 0;
  --item-glow: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transform: perspective(800px)
    rotateX(calc(var(--item-tilt-y) * -0.5deg))
    rotateY(calc(var(--item-tilt-x) * 0.5deg))
    translate3d(calc(var(--item-tilt-x) * 0.5px), calc(var(--item-lift) * -1px), 0);
  transition:
    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
  position: relative;
  overflow: hidden;
}

.showcase__list-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--item-glow);
  background: linear-gradient(
    105deg,
    rgba(16, 185, 129, 0.08) 0%,
    transparent 45%,
    rgba(251, 191, 36, 0.06) 100%
  );
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.showcase__list-item.is-item-hover,
.showcase__list-item:hover {
  --item-lift: 6;
  --item-glow: 1;
  border-color: rgba(5, 150, 105, 0.28);
  background: #fff;
  box-shadow:
    0 12px 32px rgba(5, 150, 105, 0.12),
    0 0 0 1px rgba(16, 185, 129, 0.06);
}

.showcase__list-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  color: var(--color-primary-dark);
  transform: translateZ(12px);
  transition:
    transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.showcase__list-icon svg {
  width: 22px;
  height: 22px;
}

.showcase__list-item.is-item-hover .showcase__list-icon,
.showcase__list-item:hover .showcase__list-icon {
  transform: translateZ(20px) scale(1.06) rotate(-3deg);
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
}

.showcase__list-text {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-secondary);
  padding-top: 2px;
  transition: color 0.15s ease;
}

.showcase__list-item.is-item-hover .showcase__list-text,
.showcase__list-item:hover .showcase__list-text {
  color: var(--color-text);
}

/* CTA — 3D press */
.showcase__actions {
  margin: 0;
  padding-top: var(--space-2);
}

.showcase__cta {
  position: relative;
  overflow: hidden;
  transform: perspective(600px) translateZ(0);
  box-shadow:
    0 4px 14px rgba(5, 150, 105, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease;
}

.showcase__cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.showcase__cta:hover {
  transform: perspective(600px) translateY(-3px) scale(1.02);
  box-shadow:
    0 12px 28px rgba(5, 150, 105, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.showcase__cta:hover .showcase__cta-shine {
  transform: translateX(120%);
}

.showcase__cta:active {
  transform: perspective(600px) translateY(1px) scale(0.98);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

/* Visual / mock card — main 3D tilt target */
.showcase__visual {
  position: relative;
}

.showcase__stage {
  --tilt-x: 0;
  --tilt-y: 0;
  --lift: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  --glow: 0;
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
  transform: perspective(1200px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  transition: transform 0.12s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.showcase__stage.is-hovered {
  --lift: -12;
  --glow: 1;
}

.showcase__mock {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.5),
    rgba(251, 191, 36, 0.35),
    rgba(5, 150, 105, 0.4)
  );
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 24px 56px rgba(15, 23, 42, 0.14),
    0 0 48px rgba(5, 150, 105, calc(var(--glow) * 0.15));
  transform-style: preserve-3d;
  transition: box-shadow 0.2s ease;
}

.showcase__stage.is-hovered .showcase__mock {
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.06),
    0 32px 64px rgba(5, 150, 105, 0.22),
    0 0 64px rgba(16, 185, 129, 0.2);
}

.showcase__mock-border {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    rgba(16, 185, 129, calc(var(--glow) * 0.8)),
    rgba(251, 191, 36, calc(var(--glow) * 0.6)),
    rgba(16, 185, 129, calc(var(--glow) * 0.8))
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--glow);
  pointer-events: none;
  z-index: 3;
  animation: showcaseBorderSpin 8s linear infinite;
}

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

.showcase__mock-shine {
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--radius-2xl) - 2px);
  pointer-events: none;
  z-index: 4;
  opacity: calc(var(--glow) * 0.9);
  background: radial-gradient(
    400px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.2) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    transparent 60%
  );
  transition: opacity 0.15s ease;
}

.showcase__mock-glow {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
  filter: blur(40px);
  opacity: calc(0.4 + var(--glow) * 0.4);
  pointer-events: none;
  z-index: 0;
}

.showcase__mock-inner {
  position: relative;
  z-index: 2;
  border-radius: calc(var(--radius-2xl) - 2px);
  overflow: hidden;
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 45%, #0f172a 100%);
  transform: translateZ(24px);
}

.showcase__mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.6);
}

.showcase__mock-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #f8fafc;
}

.showcase__mock-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(239, 68, 68, 0.92);
  border-radius: var(--radius-full);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
}

.showcase__mock-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: showcaseLivePulse 1.4s ease-in-out infinite;
}

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

.showcase__mock-video {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 140px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
}

.showcase__mock-video-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(15, 23, 42, 0.9) 100%),
    linear-gradient(135deg, rgba(5, 150, 105, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(16, 185, 129, 0.2) 0%, transparent 60%);
  animation: showcaseVideoShimmer 6s ease-in-out infinite alternate;
}

@keyframes showcaseVideoShimmer {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}

.showcase__mock-teacher {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.showcase__mock-teacher-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--emerald-500, #10b981);
  background: linear-gradient(135deg, #065f46, #10b981);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.showcase__mock-teacher-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.showcase__mock-teacher-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: #f8fafc;
}

.showcase__mock-teacher-lesson {
  display: block;
  font-size: var(--text-xs);
  color: #94a3b8;
}

.showcase__mock-students {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-4) var(--space-5);
  background: rgba(15, 23, 42, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.showcase__mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    hsl(calc(150 + var(--av-i, 0) * 12), 45%, 42%),
    hsl(calc(160 + var(--av-i, 0) * 10), 50%, 32%)
  );
  border: 2px solid rgba(30, 41, 59, 0.9);
  opacity: calc(0.55 + (var(--av-i, 0) % 5) * 0.1);
  transform: translateZ(calc(4px + (var(--av-i, 0) % 3) * 2px));
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.showcase__stage.is-hovered .showcase__mock-avatar {
  opacity: calc(0.7 + (var(--av-i, 0) % 5) * 0.08);
}

.showcase__mock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(15, 23, 42, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.showcase__mock-count {
  margin: 0;
  font-size: var(--text-sm);
  color: #94a3b8;
}

.showcase__mock-count strong {
  color: #f8fafc;
  font-size: var(--text-lg);
}

.showcase__mock-join {
  flex-shrink: 0;
  transform: translateZ(16px);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.15s ease;
}

.showcase__stage.is-hovered .showcase__mock-join {
  transform: translateZ(24px) scale(1.04);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45);
}

/* Floating badges */
.showcase__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transform: translateZ(40px);
  animation: showcaseFloat 5s ease-in-out infinite;
  pointer-events: none;
}

.showcase__float--zoom {
  top: -6%;
  right: -2%;
  animation-delay: 0s;
}

.showcase__float--safe {
  bottom: 8%;
  left: -4%;
  animation-delay: -2.5s;
}

@keyframes showcaseFloat {
  0%, 100% { transform: translate3d(0, 0, 40px); }
  50% { transform: translate3d(0, -8px, 48px); }
}

.showcase__float-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  font-size: 10px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.showcase__float-icon--shield svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* Scroll reveal */
.showcase__content,
.showcase__stage {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 0.65s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.showcase__stage {
  transform: translate3d(0, 32px, 0);
}

.showcase--premium.is-revealed .showcase__content {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.showcase--premium.is-revealed .showcase__stage {
  opacity: 1;
  transform: perspective(1200px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .showcase__mock-border,
  .showcase__mock-live-dot,
  .showcase__mock-video-bg,
  .showcase__float {
    animation: none !important;
  }

  .showcase__content,
  .showcase__stage,
  .showcase--premium.is-revealed .showcase__stage {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .showcase__stage.is-hovered,
  .showcase__list-item:hover,
  .showcase__platform:hover {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .showcase__float {
    display: none;
  }

  .showcase__stage.is-hovered {
    --lift: -6;
  }

}


/* === courses-premium.css === */
/* ==========================================================================
   Courses — Premium 3D cards (extends features-premium)
   ========================================================================== */

.courses--premium {
  position: relative;
  overflow: hidden;
}

.courses__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.courses__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.4;
}

.courses__orb--emerald {
  width: min(380px, 50vw);
  height: min(380px, 50vw);
  top: 10%;
  left: -6%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

.courses__orb--amber {
  width: min(300px, 42vw);
  height: min(300px, 42vw);
  bottom: 0;
  right: -4%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
}

.courses__container {
  position: relative;
  z-index: 1;
}

.courses__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 1120px;
  margin-inline: auto;
  perspective: 1200px;
}

@media (min-width: 640px) {
  .courses__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .courses__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

/* Course-specific card polish */
.courses--premium .feature-card--course .feature-card__surface {
  min-height: 100%;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.07);
}

.courses--premium .feature-card--course .feature-card__surface::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 3px;
  border-radius: 0 0 var(--radius-full) var(--radius-full);
  background: linear-gradient(90deg, var(--emerald-600, #059669), var(--emerald-400, #34d399));
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}

.courses--premium .feature-card--course.is-hovered .feature-card__surface::after {
  opacity: 1;
  height: 4px;
}

.courses--premium .feature-card--course .feature-card__body {
  min-height: 260px;
}

.courses__tag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(236, 253, 245, 0.9);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--radius-full);
  transform: translateZ(16px);
  transition:
    transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.18s ease,
    color 0.18s ease;
}

.courses--premium .feature-card--course.is-hovered .courses__tag {
  transform: translateZ(28px) scale(1.04);
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

.courses__link {
  font-weight: 600;
}

/* Stagger reveal — 4 cards */
.courses--premium .feature-card--premium:nth-child(1) { transition-delay: 0ms; }
.courses--premium .feature-card--premium:nth-child(2) { transition-delay: 60ms; }
.courses--premium .feature-card--premium:nth-child(3) { transition-delay: 120ms; }
.courses--premium .feature-card--premium:nth-child(4) { transition-delay: 180ms; }

@media (max-width: 1023px) {
  .courses--premium .feature-card--course .feature-card__body {
    min-height: 220px;
  }
}


/* === teachers-premium.css === */
/* ==========================================================================
   Teachers — Premium 3D cards (GPU transforms)
   ========================================================================== */

.teachers--premium {
  position: relative;
  overflow: hidden;
}

.teachers__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.teachers__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}

.teachers__orb--emerald {
  width: min(400px, 52vw);
  height: min(400px, 52vw);
  top: -5%;
  right: -8%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, transparent 70%);
}

.teachers__orb--violet {
  width: min(280px, 38vw);
  height: min(280px, 38vw);
  bottom: 10%;
  left: -6%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
}

.teachers__container {
  position: relative;
  z-index: 1;
}

.teachers-swiper--premium {
  padding-bottom: var(--space-12) !important;
  overflow: visible;
  perspective: 1400px;
}

.teachers-swiper--premium .swiper-slide {
  height: auto;
  display: flex;
}

/* Premium card shell */
.teachers--premium .teacher-card--premium {
  --tilt-x: 0;
  --tilt-y: 0;
  --lift: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  --glow: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  transform-style: preserve-3d;
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
  transition:
    transform 0.14s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.2s ease;
  will-change: transform;
}

.teachers--premium .teacher-card--premium:not(.is-hovered) {
  will-change: auto;
}

.teachers--premium .teacher-card--premium.is-hovered {
  --lift: -12;
  --glow: 1;
}

.teachers--premium .teacher-card--premium:hover {
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
}

.teachers--premium .teacher-card__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-2xl);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.94) 100%
  );
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 36px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transform: translateZ(0);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__surface {
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow:
    0 8px 16px rgba(15, 23, 42, 0.05),
    0 28px 56px rgba(5, 150, 105, 0.16),
    0 0 0 1px rgba(16, 185, 129, 0.08);
}

.teachers--premium .swiper-slide-active .teacher-card__surface {
  border-color: rgba(5, 150, 105, 0.22);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 20px 48px rgba(5, 150, 105, 0.12);
}

.teacher-card__border-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, calc(var(--glow) * 0.65)),
    transparent 42%,
    rgba(99, 102, 241, calc(var(--glow) * 0.35)),
    rgba(251, 191, 36, calc(var(--glow) * 0.4))
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: var(--glow);
  z-index: 3;
  transition: opacity 0.15s ease;
}

.teacher-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--glow) * 0.85);
  background: radial-gradient(
    320px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.5) 0%,
    rgba(16, 185, 129, 0.1) 35%,
    transparent 65%
  );
  z-index: 2;
  transition: opacity 0.15s ease;
}

.teacher-card__body {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  transform-style: preserve-3d;
}

/* Avatar — rotating ring */
.teachers--premium .teacher-card__avatar-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 0 var(--space-2);
  padding: 0;
  background: none;
  box-shadow: none;
  transform: translateZ(32px);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__avatar-wrap {
  transform: translateZ(48px) scale(1.04);
}

.teacher-card__avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #059669,
    #34d399,
    #6366f1,
    #fbbf24,
    #059669
  );
  animation: teacherRingSpin 6s linear infinite;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__avatar-ring {
  opacity: 1;
  animation-duration: 3s;
}

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

.teachers--premium .teacher-card__avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  transition: box-shadow 0.2s ease;
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__avatar {
  box-shadow: 0 12px 32px rgba(5, 150, 105, 0.25);
}

.teachers--premium .teacher-card__badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
  transform: translateZ(20px);
}

.teachers--premium .teacher-card__badge svg {
  width: 14px;
  height: 14px;
}

/* Typography */
.teachers--premium .teacher-card__name {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  transform: translateZ(20px);
  transition: color 0.15s ease;
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__name {
  color: var(--color-primary-dark);
}

.teachers--premium .teacher-card__role {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  transform: translateZ(16px);
}

.teacher-card__rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transform: translateZ(14px);
}

.teachers--premium .teacher-card__stars {
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.teacher-card__rating-num {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* Language pills */
.teachers--premium .teacher-card__languages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  transform: translateZ(12px);
}

.teachers--premium .teacher-card__lang {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: rgba(236, 253, 245, 0.9);
  border: 1px solid rgba(5, 150, 105, 0.15);
  border-radius: var(--radius-full);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.teachers--premium .teacher-card--premium.is-hovered .teacher-card__lang {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(5, 150, 105, 0.25);
}

.teachers--premium .teacher-card__exp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  background: rgba(241, 245, 249, 0.9);
  border-radius: var(--radius-full);
  transform: translateZ(10px);
}

.teachers--premium .teacher-card__exp svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.teachers--premium .teacher-card__bio {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  transform: translateZ(8px);
}

/* CTA — premium 3D button */
.teachers--premium .teacher-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 220px;
  margin-top: auto;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(5, 150, 105, 0.35);
  border-radius: var(--radius-full);
  overflow: hidden;
  transform: translateZ(28px);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.12);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.teacher-card__cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.45s ease;
  pointer-events: none;
}

.teachers--premium .teacher-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

.teachers--premium .teacher-card__cta:hover {
  color: #fff;
  background: var(--gradient-primary);
  border-color: transparent;
  transform: translateZ(36px) translateY(-2px);
  box-shadow: 0 10px 28px rgba(5, 150, 105, 0.35);
}

.teachers--premium .teacher-card__cta:hover .teacher-card__cta-shine {
  transform: translateX(120%);
}

.teachers--premium .teacher-card__cta:hover svg {
  transform: translateX(4px);
}

.teachers--premium .teacher-card__cta:active {
  transform: translateZ(28px) translateY(0);
}

/* Swiper nav — premium */
.teachers-swiper__nav .swiper-nav__btn {
  border: 1px solid rgba(5, 150, 105, 0.2);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.teachers-swiper__nav .swiper-nav__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
  background: #fff;
}

.teachers-swiper--premium .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(5, 150, 105, 0.25);
  opacity: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.teachers-swiper--premium .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
}

@media (prefers-reduced-motion: reduce) {
  .teacher-card__avatar-ring {
    animation: none !important;
  }

  .teachers--premium .teacher-card--premium,
  .teachers--premium .teacher-card--premium.is-hovered {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .teachers--premium .teacher-card--premium.is-hovered {
    --lift: -6;
  }
}


/* === how-it-works-premium.css === */
/* ==========================================================================
   How It Works — Premium realtime timeline
   ========================================================================== */

.how-it-works--premium {
  position: relative;
  overflow: hidden;
}

.how-it-works__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.how-it-works__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(84px);
  opacity: 0.35;
}

.how-it-works__orb--emerald {
  width: min(420px, 56vw);
  height: min(420px, 56vw);
  top: -8%;
  right: -7%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
}

.how-it-works__orb--violet {
  width: min(320px, 48vw);
  height: min(320px, 48vw);
  bottom: 0;
  left: -6%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
}

.how-it-works__grid {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: linear-gradient(rgba(5, 150, 105, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.3) 1px, transparent 1px);
  background-size: 56px 56px;
}

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

.timeline--premium {
  position: relative;
  display: grid;
  gap: var(--space-5);
  max-width: 980px;
  margin-inline: auto;
  perspective: 1200px;
}

.timeline--premium .timeline__progress-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  width: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.18) 0%,
    rgba(16, 185, 129, 0.5) 45%,
    rgba(99, 102, 241, 0.35) 100%
  );
  transform-origin: top center;
  animation: timelineLineFlow 5s ease-in-out infinite;
}

@keyframes timelineLineFlow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

.timeline--premium .timeline__step {
  --tilt-x: 0;
  --tilt-y: 0;
  --lift: 0;
  --glow: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: start;
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 32px, 0);
  transition:
    opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}

.timeline--premium .timeline__step.is-visible {
  opacity: 1;
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * -1px), 0);
}

.timeline--premium .timeline__step.is-active,
.timeline--premium .timeline__step:hover {
  --lift: 10;
  --glow: 1;
}

.timeline__marker-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}

.timeline__marker-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(5, 150, 105, 0.95),
    rgba(52, 211, 153, 0.95),
    rgba(99, 102, 241, 0.65),
    rgba(5, 150, 105, 0.95)
  );
  animation: timelineRingSpin 6.5s linear infinite;
}

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

.timeline--premium .timeline__marker {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.timeline__body {
  position: relative;
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(248, 250, 252, 0.94) 100%
  );
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 14px 30px rgba(15, 23, 42, 0.07);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.timeline__body::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, calc(var(--glow) * 0.55)),
    transparent 40%,
    rgba(99, 102, 241, calc(var(--glow) * 0.3))
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.timeline__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--glow) * 0.9);
  background: radial-gradient(
    280px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(16, 185, 129, 0.12) 34%,
    transparent 66%
  );
}

.timeline--premium .timeline__step.is-active .timeline__body,
.timeline--premium .timeline__step:hover .timeline__body {
  border-color: rgba(5, 150, 105, 0.34);
  box-shadow:
    0 6px 12px rgba(15, 23, 42, 0.06),
    0 22px 50px rgba(5, 150, 105, 0.16);
}

.timeline__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.timeline__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}

.timeline__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.0625rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.timeline__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.78;
  color: var(--color-text-secondary);
}

.timeline__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(241, 245, 249, 0.9);
  border-radius: var(--radius-full);
}

.timeline__meta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: timelineMetaPulse 1.8s ease-in-out infinite;
}

@keyframes timelineMetaPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.55; }
}

@media (max-width: 767px) {
  .timeline--premium .timeline__progress-line {
    left: 23px;
  }

  .timeline--premium .timeline__step {
    grid-template-columns: 48px 1fr;
    gap: var(--space-3);
  }

  .timeline__marker-wrap {
    width: 48px;
    height: 48px;
  }

  .timeline__body {
    padding: var(--space-4) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline--premium .timeline__progress-line,
  .timeline__marker-ring,
  .timeline__meta-dot {
    animation: none !important;
  }

  .timeline--premium .timeline__step,
  .timeline--premium .timeline__step.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* === testimonials-premium.css === */
/* ==========================================================================
   Testimonials — World-class single-focus carousel
   ========================================================================== */

.testimonials--premium {
  --testimonial-stage-max: 44rem;
  --testimonial-autoplay-ms: 11000;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.testimonials--premium.section--alt {
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.98) 0%,
    rgba(241, 245, 249, 0.94) 42%,
    rgba(236, 253, 245, 0.22) 50%,
    rgba(241, 245, 249, 0.94) 58%,
    rgba(248, 250, 252, 0.98) 100%
  );
}

.testimonials--premium::before {
  display: none;
}

/* --------------------------------------------------------------------------
   Background — layered aurora, orbs, mesh, beams (GPU-friendly)
   -------------------------------------------------------------------------- */
.testimonials__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout style paint;
  transform: translateZ(0);
}

/* Slow morphing aurora wash */
.testimonials__aurora {
  position: absolute;
  inset: -40%;
  opacity: 1;
  filter: blur(72px) saturate(150%);
  background-image:
    radial-gradient(ellipse 55% 45% at 12% 32%, rgba(16, 185, 129, 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 50% 42% at 88% 22%, rgba(251, 191, 36, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 48% 50% at 52% 92%, rgba(14, 165, 233, 0.12) 0%, transparent 58%),
    radial-gradient(ellipse 40% 38% at 68% 48%, rgba(52, 211, 153, 0.14) 0%, transparent 52%);
  animation: testimonialAuroraFlow 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
}

@keyframes testimonialAuroraFlow {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate3d(2.5%, -2%, 0) scale(1.05) rotate(0.8deg);
  }
  66% {
    transform: translate3d(-2%, 2.5%, 0) scale(1.03) rotate(-0.6deg);
  }
}

/* Soft gradient orbs — no heavy blur filters */
.testimonials__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  opacity: 0.85;
}

.testimonials__orb--emerald {
  width: min(58vw, 620px);
  height: min(58vw, 620px);
  top: -22%;
  left: -16%;
  background: radial-gradient(
    circle at 42% 42%,
    rgba(16, 185, 129, 0.32) 0%,
    rgba(16, 185, 129, 0.1) 38%,
    transparent 72%
  );
  animation: testimonialOrbDrift1 36s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.testimonials__orb--gold {
  width: min(46vw, 480px);
  height: min(46vw, 480px);
  right: -12%;
  bottom: -8%;
  background: radial-gradient(
    circle at 58% 38%,
    rgba(251, 191, 36, 0.26) 0%,
    rgba(251, 191, 36, 0.08) 40%,
    transparent 74%
  );
  animation: testimonialOrbDrift2 42s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -12s;
}

.testimonials__orb--teal {
  width: min(38vw, 400px);
  height: min(38vw, 400px);
  top: 38%;
  left: 42%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(45, 212, 191, 0.2) 0%,
    rgba(14, 165, 233, 0.06) 45%,
    transparent 70%
  );
  animation: testimonialOrbDrift3 38s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: -20s;
}

@keyframes testimonialOrbDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(5%, 4%, 0) scale(1.06); }
  50% { transform: translate3d(3%, 8%, 0) scale(1.03); }
  75% { transform: translate3d(-4%, 3%, 0) scale(1.07); }
}

@keyframes testimonialOrbDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(-6%, -4%, 0) scale(1.05); }
  60% { transform: translate3d(-3%, 5%, 0) scale(1.08); }
  85% { transform: translate3d(4%, 2%, 0) scale(1.02); }
}

@keyframes testimonialOrbDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(-5%, 6%, 0) scale(1.04); }
  70% { transform: translate3d(6%, -3%, 0) scale(1.06); }
}

/* Perspective mesh + drifting dot field */
.testimonials__mesh {
  position: absolute;
  pointer-events: none;
}

.testimonials__mesh--grid {
  inset: -18%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(5, 150, 105, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 150, 105, 0.07) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(880px) rotateX(54deg) translateY(-6%) scale(1.14);
  transform-origin: center top;
  -webkit-mask-image: radial-gradient(ellipse 88% 62% at 50% 32%, #000 12%, transparent 76%);
  mask-image: radial-gradient(ellipse 88% 62% at 50% 32%, #000 12%, transparent 76%);
  animation:
    testimonialMeshFloat 48s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate,
    testimonialMeshSlide 80s linear infinite;
}

.testimonials__mesh--dots {
  inset: 0;
  opacity: 0.045;
  background-image: radial-gradient(rgba(5, 150, 105, 0.65) 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  animation: testimonialDotsDrift 55s linear infinite;
}

@keyframes testimonialMeshFloat {
  0% {
    transform: perspective(880px) rotateX(54deg) translateY(-6%) scale(1.14);
  }
  100% {
    transform: perspective(880px) rotateX(52deg) translateY(-4%) scale(1.16);
  }
}

@keyframes testimonialMeshSlide {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 52px 52px, 52px 52px; }
}

@keyframes testimonialDotsDrift {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}

/* Subtle rotating light beams */
.testimonials__beam {
  position: absolute;
  inset: -45%;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 140%;
  margin-left: -70%;
  margin-top: -70%;
  opacity: 0.07;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(16, 185, 129, 0.35) 28deg,
    transparent 56deg,
    rgba(251, 191, 36, 0.22) 120deg,
    transparent 160deg,
    rgba(14, 165, 233, 0.18) 220deg,
    transparent 280deg
  );
  animation: testimonialBeamRotate 100s linear infinite;
  will-change: transform;
}

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

/* Film grain + edge vignette */
.testimonials__grain {
  position: absolute;
  inset: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

.testimonials__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 75% at 50% 45%, transparent 35%, rgba(248, 250, 252, 0.55) 100%),
    linear-gradient(90deg, rgba(248, 250, 252, 0.65) 0%, transparent 12%, transparent 88%, rgba(248, 250, 252, 0.65) 100%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.4) 0%, transparent 18%, transparent 82%, rgba(248, 250, 252, 0.45) 100%);
  pointer-events: none;
}

.testimonials__container {
  position: relative;
  z-index: 1;
}

.testimonials--premium .section-header {
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Stage */
.testimonials-swiper__stage {
  position: relative;
  max-width: var(--testimonial-stage-max);
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(0.5rem, 2vw, 1rem);
  perspective: 1400px;
}

.testimonials-swiper__stage::before,
.testimonials-swiper__stage::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 18%;
  width: 72px;
  z-index: 4;
  pointer-events: none;
}

.testimonials-swiper__stage::before {
  left: -8px;
  background: linear-gradient(90deg, var(--color-bg-alt, #f8fafc) 15%, transparent);
}

.testimonials-swiper__stage::after {
  right: -8px;
  background: linear-gradient(270deg, var(--color-bg-alt, #f8fafc) 15%, transparent);
}

/* Swiper — one card, cinematic fade */
.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card--premium {
  opacity: 1;
  transform: none;
}

.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card__quote-mark,
.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card__star,
.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card__verified,
.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card__quote,
.testimonials-swiper--premium:not(.swiper-initialized) .swiper-slide:first-child .testimonial-card__author {
  opacity: 1;
  transform: none;
}

.testimonials-swiper--premium {
  overflow: visible;
  padding: var(--space-6) var(--space-2);
}

.testimonials-swiper--premium .swiper-wrapper {
  align-items: center;
}

.testimonials-swiper--premium .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}

/* Card shell */
.testimonials--premium .testimonial-card--premium {
  --shine-x: 50%;
  --shine-y: 42%;
  --glow: 0;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: var(--testimonial-stage-max);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius-2xl) + 2px);
  background: transparent;
  box-shadow: none;
  transform: translate3d(0, 18px, 0) scale(0.96);
  opacity: 0;
  transition: none;
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card--premium {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card--premium.is-animated {
  animation: testimonialCardIn 1.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes testimonialCardIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.94);
    filter: blur(6px);
  }
  55% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.testimonial-card__aura {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(16, 185, 129, 0.14) 0%,
    rgba(251, 191, 36, 0.06) 42%,
    transparent 68%
  );
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__aura {
  opacity: 1;
  animation: testimonialAuraPulse 4s ease-in-out infinite alternate;
}

@keyframes testimonialAuraPulse {
  0% { transform: scale(0.98); opacity: 0.75; }
  100% { transform: scale(1.04); opacity: 1; }
}

.testimonial-card__ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
  animation: testimonialRingRotate 10s linear infinite;
}

.testimonial-card__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    rgba(5, 150, 105, 0.9),
    rgba(251, 191, 36, 0.7),
    rgba(14, 165, 233, 0.5),
    rgba(5, 150, 105, 0.9)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__ring {
  opacity: 0.92;
}

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

.testimonial-card__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--radius-2xl);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 252, 0.94) 48%,
    rgba(236, 253, 245, 0.38) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 24px 64px rgba(5, 150, 105, 0.12),
    0 48px 96px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  overflow: hidden;
}

/* Light sweep across card */
.testimonial-card__sweep {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.testimonial-card__sweep::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(16, 185, 129, 0.12) 50%,
    transparent 58%
  );
  transform: skewX(-12deg) translateX(-120%);
  opacity: 0;
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__sweep::after {
  animation: testimonialSweep 1.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes testimonialSweep {
  0% {
    transform: skewX(-12deg) translateX(-120%);
    opacity: 0;
  }
  12% { opacity: 1; }
  100% {
    transform: skewX(-12deg) translateX(320%);
    opacity: 0;
  }
}

.testimonial-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  opacity: calc(0.35 + var(--glow) * 0.45);
  background: radial-gradient(
    280px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.65) 0%,
    rgba(16, 185, 129, 0.1) 38%,
    transparent 70%
  );
  transition: opacity 0.35s ease;
}

/* Head */
.testimonial-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: clamp(1rem, 2.5vw, 1.35rem);
}

.testimonial-card__quote-mark {
  flex-shrink: 0;
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 0.85;
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
  background: linear-gradient(145deg, rgba(5, 150, 105, 0.35), rgba(251, 191, 36, 0.28));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(8px);
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__quote-mark {
  animation: testimonialReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.testimonials--premium .testimonial-card__stars {
  display: inline-flex;
  gap: 3px;
  margin: 0;
  font-size: 0;
}

.testimonial-card__star {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.35));
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__star:nth-child(1) { animation: testimonialStarIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.22s forwards; }
.testimonials-swiper--premium .swiper-slide-active .testimonial-card__star:nth-child(2) { animation: testimonialStarIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s forwards; }
.testimonials-swiper--premium .swiper-slide-active .testimonial-card__star:nth-child(3) { animation: testimonialStarIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.38s forwards; }
.testimonials-swiper--premium .swiper-slide-active .testimonial-card__star:nth-child(4) { animation: testimonialStarIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.46s forwards; }
.testimonials-swiper--premium .swiper-slide-active .testimonial-card__star:nth-child(5) { animation: testimonialStarIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.54s forwards; }

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

.testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  background: rgba(236, 253, 245, 0.9);
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateY(6px);
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__verified {
  animation: testimonialReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* Quote */
.testimonials--premium .testimonial-card__quote {
  position: relative;
  z-index: 3;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.75;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-style: normal;
  opacity: 0;
  transform: translateY(14px);
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__quote {
  animation: testimonialReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.testimonials--premium .testimonial-card__quote::before {
  content: "\201C";
  margin-right: 0.12em;
  color: rgba(5, 150, 105, 0.45);
  font-weight: 700;
}

.testimonials--premium .testimonial-card__quote::after {
  content: "\201D";
  margin-left: 0.08em;
  color: rgba(5, 150, 105, 0.45);
  font-weight: 700;
}

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

/* Author */
.testimonials--premium .testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding-top: clamp(1rem, 2.5vw, 1.25rem);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  opacity: 0;
  transform: translateY(12px);
}

.testimonials-swiper--premium .swiper-slide-active .testimonial-card__author {
  animation: testimonialReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
}

.testimonial-card__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.testimonial-card__avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #059669, #fbbf24, #0ea5e9, #059669);
  animation: testimonialRingRotate 6s linear infinite;
  opacity: 0.85;
}

.testimonials--premium .testimonial-card__avatar {
  position: relative;
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
}

.testimonials--premium .testimonial-card__name {
  display: block;
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-style: normal;
}

.testimonials--premium .testimonial-card__location {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.testimonials--premium .testimonial-card--premium:hover {
  --glow: 1;
}

/* Chrome — progress + counter */
.testimonials-swiper__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--testimonial-stage-max);
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  padding: 0 var(--space-2);
}

.testimonials-swiper__progress {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.testimonials-swiper__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #059669, #10b981, #fbbf24);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

.testimonials-swiper__counter {
  flex-shrink: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.testimonials-swiper__counter-current {
  color: var(--color-primary);
  font-size: 1rem;
}

.testimonials-swiper__counter-sep {
  margin: 0 0.2em;
  opacity: 0.45;
}

.testimonials-swiper__nav,
.testimonials-swiper__pagination {
  display: none !important;
}

@media (min-width: 768px) {
  .testimonials--premium {
    --testimonial-stage-max: 40rem;
  }
}

@media (min-width: 1024px) {
  .testimonials--premium {
    --testimonial-stage-max: 44rem;
  }

  .testimonials-swiper__stage::before,
  .testimonials-swiper__stage::after {
    width: 96px;
  }
}

@media (max-width: 768px) {
  .testimonials__aurora {
    filter: blur(52px) saturate(135%);
    inset: -30%;
  }

  .testimonials__beam {
    opacity: 0.045;
  }

  .testimonials__orb--teal {
    opacity: 0.55;
  }
}

@media (max-width: 639px) {
  .testimonial-card__verified {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .testimonial-card__head {
    justify-content: center;
    text-align: center;
  }

  .testimonials--premium .testimonial-card__author {
    flex-direction: column;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__aurora,
  .testimonials__orb,
  .testimonials__mesh--grid,
  .testimonials__mesh--dots,
  .testimonials__beam {
    animation: none;
  }

  .testimonials__mesh--grid {
    transform: perspective(880px) rotateX(54deg) translateY(-6%) scale(1.14);
  }

  .testimonial-card__ring,
  .testimonial-card__avatar-wrap::before {
    animation: none;
  }

  .testimonials-swiper--premium .swiper-slide-active .testimonial-card--premium,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__sweep::after,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__quote-mark,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__star,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__verified,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__quote,
  .testimonials-swiper--premium .swiper-slide-active .testimonial-card__author {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .testimonials--premium .testimonial-card--premium {
    opacity: 1;
    transform: none;
  }

  .testimonials-swiper--premium .swiper-slide:not(.swiper-slide-active) {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
  }
}


/* === forms-premium.css === */
/* ==========================================================================
   Premium Forms — Apple / Google / Microsoft-grade inputs
   ========================================================================== */

.form-group {
  margin-bottom: var(--space-5);
}

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

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Field with icon + animated border */
.form-field {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  transition: box-shadow var(--duration-base) var(--ease-out-expo);
}

.form-field::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.5),
    rgba(16, 185, 129, 0.2),
    rgba(251, 191, 36, 0.35),
    rgba(5, 150, 105, 0.5)
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity var(--duration-base);
  animation: formBorderFlow 6s linear infinite;
}

.form-field:focus-within::before {
  opacity: 1;
}

.form-field:focus-within {
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12), var(--shadow-md);
}

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

.form-field__icon {
  display: grid;
  place-items: center;
  width: 48px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.form-field:focus-within .form-field__icon {
  color: var(--color-primary);
}

.form-field__icon svg {
  width: 20px;
  height: 20px;
}

.form-input {
  flex: 1;
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  outline: none;
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  flex: 1;
  width: 100%;
  min-height: 148px;
  padding: 0.875rem 1rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  outline: none;
  resize: vertical;
}

.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field--textarea {
  align-items: stretch;
}

.form-field--textarea .form-field__icon {
  align-self: flex-start;
  padding-top: 0.875rem;
}

.form-input--plain {
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  transition:
    border-color var(--duration-base),
    box-shadow var(--duration-base);
}

.form-input--plain:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
  outline: none;
}

.form-row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Checkbox / toggle premium */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Alerts */
.form-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.form-alert--error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #b91c1c;
}

.form-alert--success {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #047857;
}

.form-alert--info {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #92400e;
}

/* Secure pay badge */
.pay-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(251, 191, 36, 0.06));
  border: 1px solid rgba(5, 150, 105, 0.15);
  margin-bottom: var(--space-6);
}

.pay-secure svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.pay-secure__text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.pay-secure__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}


/* === pricing-regional.css === */
/* ==========================================================================
   Regional Pricing — Premium world-class UI
   ========================================================================== */

.pricing-regional--premium {
  position: relative;
  overflow: hidden;
}

.pricing-regional__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pricing-regional__aurora {
  position: absolute;
  inset: -20%;
  opacity: 0.9;
  filter: blur(70px) saturate(160%);
  transform: translate3d(0, 0, 0);
  background-image:
    radial-gradient(at 10% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 52%),
    radial-gradient(at 90% 10%, rgba(251, 191, 36, 0.14) 0%, transparent 55%),
    radial-gradient(at 55% 70%, rgba(14, 165, 233, 0.10) 0%, transparent 58%);
  animation: pricingAuroraDrift 18s ease-in-out infinite alternate;
}

@keyframes pricingAuroraDrift {
  0% { transform: translate3d(-10px, 8px, 0) scale(1.02); }
  100% { transform: translate3d(14px, -10px, 0) scale(1.06); }
}

.pricing-regional__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.18;
  animation: pricingOrbFloat 22s ease-in-out infinite;
}

.pricing-regional__orb--emerald {
  width: min(520px, 62vw);
  height: min(520px, 62vw);
  top: -12%;
  left: -10%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, transparent 70%);
}

.pricing-regional__orb--gold {
  width: min(420px, 52vw);
  height: min(420px, 52vw);
  right: -8%;
  bottom: 0;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 72%);
  animation-delay: -7s;
}

@keyframes pricingOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.03); }
}

.pricing-regional__container {
  position: relative;
  z-index: 1;
}

/* Region badge */
.pricing-regional__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  max-width: 520px;
  margin: 0 auto var(--space-8);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(5, 150, 105, 0.14);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px rgba(5, 150, 105, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pricing-regional__switcher {
  display: none !important;
}

.pricing-regional__detected {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.pricing-regional__detected-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}

.pricing-regional__detected-icon svg {
  width: 18px;
  height: 18px;
}

.pricing-regional__code {
  color: var(--color-primary);
  font-weight: 700;
}

/* Grid */
.pricing-regional__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: stretch;
  perspective: 1400px;
}

@media (min-width: 768px) {
  .pricing-regional__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.pricing-regional__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-10);
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
}

/* Card shell — 3D tilt */
.pricing-regional-card {
  --tilt-x: 0;
  --tilt-y: 0;
  --lift: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  --glow: 0;
  position: relative;
  border-radius: var(--radius-2xl);
  min-height: 100%;
  opacity: 0;
  transform: perspective(1000px) translate3d(0, 28px, 0);
  transform-style: preserve-3d;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-regional-card.is-pricing-visible {
  opacity: 1;
  transform: perspective(1000px)
    rotateX(calc(var(--tilt-y) * -1deg))
    rotateY(calc(var(--tilt-x) * 1deg))
    translate3d(0, calc(var(--lift) * 1px), 0);
}

.pricing-regional-card.is-hovered {
  --lift: -6;
  --glow: 1;
}

.pricing-regional-card__border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(5, 150, 105, calc(0.26 + var(--glow) * 0.24)),
    rgba(56, 189, 248, calc(0.14 + var(--glow) * 0.14)),
    rgba(251, 191, 36, calc(0.16 + var(--glow) * 0.18))
  );
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: calc(0.45 + var(--glow) * 0.35);
  transition: opacity 0.25s ease;
}

.pricing-regional-card__shine {
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--radius-2xl) - 2px);
  pointer-events: none;
  z-index: 3;
  opacity: calc(var(--glow) * 0.55);
  background: radial-gradient(
    360px circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, 0.42) 0%,
    rgba(16, 185, 129, 0.08) 32%,
    transparent 66%
  );
  transition: opacity 0.15s ease;
}

.pricing-regional-card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px);
  border-radius: calc(var(--radius-2xl) - 2px);
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.75);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 26px rgba(15, 23, 42, 0.08);
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.pricing-regional-card.is-hovered .pricing-regional-card__inner,
.pricing-regional-card--featured .pricing-regional-card__inner {
  border-color: rgba(5, 150, 105, 0.22);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.08),
    0 26px 54px rgba(5, 150, 105, 0.12);
}

.pricing-regional-card--featured .pricing-regional-card__inner {
  background: rgba(236, 253, 245, 0.74);
}

@media (min-width: 768px) {
  .pricing-regional-card--featured.is-pricing-visible {
    transform: perspective(1000px)
      rotateX(calc(var(--tilt-y) * -1deg))
      rotateY(calc(var(--tilt-x) * 1deg))
      translate3d(0, calc((var(--lift) - 4) * 1px), 0)
      scale(1.03);
  }
}

.pricing-regional-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: 0.3rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.86);
  color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  z-index: 4;
}

.pricing-regional-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary-soft);
  display: grid;
  place-items: center;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  transform: translateZ(16px);
  transition:
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.2s ease,
    color 0.2s ease;
}

.pricing-regional-card.is-hovered .pricing-regional-card__icon {
  transform: translateZ(24px) scale(1.04) rotate(-3deg);
  background: var(--gradient-primary);
  color: #fff;
}

.pricing-regional-card__icon svg {
  width: 26px;
  height: 26px;
}

.pricing-regional-card__name {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 0 var(--space-1);
  letter-spacing: var(--tracking-tight);
}

.pricing-regional-card__tagline {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.pricing-regional-card__price {
  margin-bottom: var(--space-4);
}

.pricing-regional-card__amount {
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.pricing-regional-card__period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.pricing-regional-card__desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.pricing-regional-card__features {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.pricing-regional-card__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.pricing-regional-card__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(236, 253, 245, 0.9);
  color: var(--color-primary);
}

.pricing-regional-card__check svg {
  width: 12px;
  height: 12px;
}

.pricing-regional-card__cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  transform: translateZ(20px);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.18s ease;
}

.pricing-regional-card__cta-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.pricing-regional-card__cta:hover {
  transform: translateZ(24px) translateY(-1px);
  box-shadow: 0 14px 36px rgba(5, 150, 105, 0.26);
}

.pricing-regional-card__cta:hover .pricing-regional-card__cta-shine {
  transform: translateX(120%);
}

.pricing-regional-card__cta svg {
  width: 16px;
  height: 16px;
}

.pricing-regional__secure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 640px;
  margin: var(--space-10) auto 0;
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-align: center;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.pricing-regional__secure-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary-soft);
  color: var(--color-primary);
}

.pricing-regional-card__amount.is-updating {
  animation: pricePulse 0.4s var(--ease-out-expo);
}

@keyframes pricePulse {
  0% { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.pricing-regional-card:nth-child(1).is-pricing-visible { transition-delay: 0ms; }
.pricing-regional-card:nth-child(2).is-pricing-visible { transition-delay: 80ms; }
.pricing-regional-card:nth-child(3).is-pricing-visible { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .pricing-regional__orb,
  .pricing-regional__aurora {
    animation: none !important;
  }

  .pricing-regional-card,
  .pricing-regional-card.is-pricing-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* === faq-premium.css === */
/* ==========================================================================
   FAQ — Premium accordion (Apple / Microsoft style)
   ========================================================================== */

.faq--premium {
  position: relative;
  overflow: hidden;
}

/* Reset legacy landing.css per-card box inside grouped layout */
.faq--premium .faq-item--premium {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.faq--premium .faq-item--premium:hover,
.faq--premium .faq-item--premium.is-open {
  border: none;
  box-shadow: none;
}

.faq--premium .faq-item__panel {
  max-height: none;
  opacity: 1;
  transform: none;
}

.faq__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.faq__aurora {
  position: absolute;
  inset: -15%;
  opacity: 0.85;
  filter: blur(72px) saturate(140%);
  background-image:
    radial-gradient(at 15% 30%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(at 85% 20%, rgba(14, 165, 233, 0.08) 0%, transparent 52%),
    radial-gradient(at 50% 90%, rgba(251, 191, 36, 0.06) 0%, transparent 55%);
  animation: faqAuroraDrift 20s ease-in-out infinite alternate;
}

@keyframes faqAuroraDrift {
  0% { transform: translate3d(-8px, 6px, 0) scale(1.02); }
  100% { transform: translate3d(10px, -8px, 0) scale(1.05); }
}

.faq__container {
  position: relative;
  z-index: 1;
}

/* Single grouped surface — iOS / Fluent style */
.faq__group {
  max-width: 44rem;
  margin-inline: auto;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 48px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.faq-item--premium + .faq-item--premium {
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.faq-item--premium {
  transition: background-color 0.25s ease;
}

.faq-item--premium.is-open {
  background: rgba(236, 253, 245, 0.45);
}

.faq-item__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(18px, 2.2vw, 22px) clamp(20px, 2.4vw, 28px);
  font-family: inherit;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-item__trigger:hover {
  color: var(--color-primary);
}

.faq-item__trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.35);
}

.faq-item__question {
  flex: 1;
  min-width: 0;
}

.faq-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: rgba(5, 150, 105, 0.08);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    color 0.25s ease;
}

.faq-item__icon svg {
  width: 20px;
  height: 20px;
}

.faq-item--premium.is-open .faq-item__icon {
  transform: rotate(180deg);
  background: var(--gradient-primary);
  color: #fff;
}

/* Smooth height via grid */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item--premium.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel[hidden] {
  display: none;
}

.faq-item--premium.is-open .faq-item__panel[hidden] {
  display: grid;
}

.faq-item__content {
  overflow: hidden;
  min-height: 0;
}

.faq-item__answer {
  margin: 0;
  padding: 0 clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.faq-item--premium.is-open .faq-item__answer {
  animation: faqAnswerIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes faqAnswerIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__aurora {
    animation: none;
  }

  .faq-item__panel {
    transition: none;
  }

  .faq-item--premium.is-open .faq-item__answer {
    animation: none;
  }

  .faq-item__icon {
    transition: background 0.2s ease, color 0.2s ease;
  }
}


/* === contact-premium.css === */
/* ==========================================================================
   Contact — Premium section (Apple / Google style)
   ========================================================================== */

.contact--premium {
  position: relative;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.contact__aurora {
  position: absolute;
  inset: -18%;
  opacity: 0.88;
  filter: blur(74px) saturate(150%);
  background-image:
    radial-gradient(at 12% 25%, rgba(16, 185, 129, 0.14) 0%, transparent 52%),
    radial-gradient(at 88% 15%, rgba(14, 165, 233, 0.1) 0%, transparent 54%),
    radial-gradient(at 50% 85%, rgba(251, 191, 36, 0.08) 0%, transparent 56%);
  animation: contactAuroraDrift 22s ease-in-out infinite alternate;
}

@keyframes contactAuroraDrift {
  0% { transform: translate3d(-8px, 6px, 0) scale(1.02); }
  100% { transform: translate3d(12px, -8px, 0) scale(1.05); }
}

.contact__container {
  position: relative;
  z-index: 1;
}

.contact--premium .contact__grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact--premium .contact__grid {
    grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  }
}

/* Info panel */
.contact__info-card {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 44px rgba(15, 23, 42, 0.07);
}

.contact--premium .contact__info {
  gap: var(--space-5);
}

.contact--premium .contact__info-item {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.contact--premium .contact__info-item + .contact__info-item {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.contact--premium .contact__info-icon {
  width: 44px;
  height: 44px;
  font-size: inherit;
  border-radius: var(--radius-md);
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.12);
  color: var(--color-primary);
}

.contact--premium .contact__info-icon svg {
  width: 20px;
  height: 20px;
}

.contact--premium .contact__info-text strong {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.contact--premium .contact__info-text a,
.contact--premium .contact__info-text span {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
}

.contact__whatsapp {
  width: 100%;
  margin-top: var(--space-2);
  justify-content: center;
}

/* Form card */
.contact__form-wrap {
  position: relative;
}

.contact__form--premium {
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 20px 52px rgba(15, 23, 42, 0.08);
}

.contact__form-head {
  margin-bottom: var(--space-6);
}

.contact__form-title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.contact__form-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.contact__form--premium .form-group {
  margin-bottom: var(--space-4);
}

.contact__form--premium .form-field::before {
  opacity: 0.22;
}

.contact__form--premium .form-field:focus-within::before {
  opacity: 0.85;
}

.contact__form--premium .form-field.is-invalid::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(239, 68, 68, 0.35));
  opacity: 1;
}

.contact__form--premium .form-field.is-invalid {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
}

.contact__form-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .contact__form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact__submit {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.contact__submit-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.contact__submit:hover .contact__submit-shine {
  transform: translateX(120%);
}

.contact__submit.is-loading {
  pointer-events: none;
  opacity: 0.85;
}

.contact__form-note {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.contact__form-alert {
  margin-bottom: var(--space-5);
}

.contact__form-alert[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact__aurora {
    animation: none;
  }

  .contact__submit-shine {
    display: none;
  }
}


/* === cta-premium.css === */
/* ==========================================================================
   CTA Banner — Premium Quran-relevant closing section
   ========================================================================== */

.cta-section--premium {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.cta-banner--premium {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(16, 185, 129, 0.22);
  background: linear-gradient(145deg, #020617 0%, #0f172a 42%, #052e1f 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 24px 64px rgba(5, 150, 105, 0.18);
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-banner__aurora {
  position: absolute;
  inset: -30%;
  opacity: 0.75;
  filter: blur(80px);
  background-image:
    radial-gradient(at 15% 40%, rgba(16, 185, 129, 0.35) 0%, transparent 50%),
    radial-gradient(at 85% 20%, rgba(251, 191, 36, 0.2) 0%, transparent 52%),
    radial-gradient(at 60% 90%, rgba(14, 165, 233, 0.12) 0%, transparent 55%);
  animation: ctaAuroraShift 20s ease-in-out infinite alternate;
}

@keyframes ctaAuroraShift {
  0% { transform: translate3d(-12px, 8px, 0) scale(1.02); }
  100% { transform: translate3d(14px, -10px, 0) scale(1.06); }
}

.cta-banner__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
}

.cta-banner__orb--emerald {
  width: 280px;
  height: 280px;
  left: -80px;
  bottom: -60px;
  background: rgba(16, 185, 129, 0.35);
}

.cta-banner__orb--gold {
  width: 220px;
  height: 220px;
  right: -40px;
  top: -40px;
  background: rgba(251, 191, 36, 0.22);
}

.cta-banner__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='0.5'%3E%3Cpolygon points='40,0 80,40 40,80 0,40'/%3E%3Cpath d='M40 12v56M12 40h56'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

.cta-banner__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  padding: clamp(28px, 5vw, 52px);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-banner__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.cta-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.85rem;
  margin-bottom: var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(167, 243, 208, 0.95);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: var(--radius-full);
}

.cta-banner__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
  animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.9); }
}

.cta-banner__title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.cta-banner__desc {
  margin: 0 0 var(--space-6);
  max-width: 36rem;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.75;
  color: rgba(226, 232, 240, 0.88);
}

.cta-banner__highlights {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cta-banner__highlights li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(241, 245, 249, 0.92);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cta-banner__highlight-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #6ee7b7;
}

.cta-banner__highlight-icon svg {
  width: 16px;
  height: 16px;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.cta-banner__btn--primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(251, 191, 36, 0.35);
}

.cta-banner__btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.cta-banner__btn--primary:hover .cta-banner__btn-shine {
  transform: translateX(120%);
}

.cta-banner__btn--secondary {
  color: #ecfdf5;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.cta-banner__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  transform: translateY(-1px);
  color: #fff;
}

.cta-banner__note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(148, 163, 184, 0.95);
}

.cta-banner__note a {
  color: #6ee7b7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta-banner__note a:hover {
  color: #a7f3d0;
}

/* Right visual — learning path card */
.cta-banner__visual {
  display: flex;
  justify-content: center;
}

.cta-banner__card {
  position: relative;
  width: min(100%, 380px);
  transform: perspective(900px) rotateY(-6deg) rotateX(4deg);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-banner--premium:hover .cta-banner__card {
  transform: perspective(900px) rotateY(-3deg) rotateX(2deg) translateY(-4px);
}

.cta-banner__card-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, transparent 65%);
  pointer-events: none;
}

.cta-banner__card-inner {
  position: relative;
  padding: clamp(22px, 3vw, 28px);
  border-radius: var(--radius-xl);
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.cta-banner__card-label {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(110, 231, 183, 0.9);
}

.cta-banner__path {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cta-banner__path li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(241, 245, 249, 0.95);
}

.cta-banner__path li span {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #022c22;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  border-radius: var(--radius-md);
}

.cta-banner__card-stat {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-banner__card-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

.cta-banner__card-stat span {
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.95);
}

@media (max-width: 899px) {
  .cta-banner__visual {
    order: -1;
  }

  .cta-banner__card {
    transform: none;
  }

  .cta-banner--premium:hover .cta-banner__card {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner__aurora,
  .cta-banner__badge-dot {
    animation: none;
  }

  .cta-banner__card,
  .cta-banner--premium:hover .cta-banner__card {
    transform: none;
  }
}


/* === footer-premium.css === */
/* ==========================================================================
   Footer — World-class premium
   ========================================================================== */

.footer--premium {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 5rem) clamp(2rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, #020617 0%, #0f172a 55%, #052e1f 100%);
  color: rgba(148, 163, 184, 0.95);
  overflow: hidden;
}

.footer--premium::before,
.footer--premium::after {
  display: none;
}

.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.footer__aurora {
  position: absolute;
  inset: -25%;
  opacity: 0.7;
  filter: blur(80px);
  background-image:
    radial-gradient(at 10% 90%, rgba(16, 185, 129, 0.28) 0%, transparent 50%),
    radial-gradient(at 90% 10%, rgba(251, 191, 36, 0.14) 0%, transparent 52%);
  animation: footerAurora 22s ease-in-out infinite alternate;
}

@keyframes footerAurora {
  0% { transform: translate3d(-8px, 6px, 0); }
  100% { transform: translate3d(10px, -8px, 0); }
}

.footer__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
}

.footer__orb--emerald {
  width: 320px;
  height: 320px;
  left: -100px;
  bottom: -80px;
  background: rgba(16, 185, 129, 0.3);
}

.footer__orb--gold {
  width: 240px;
  height: 240px;
  right: -60px;
  top: -40px;
  background: rgba(251, 191, 36, 0.18);
}

.footer__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2310b981' stroke-width='0.45'%3E%3Cpolygon points='36,0 72,36 36,72 0,36'/%3E%3Cpath d='M36 10v52M10 36h52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

.footer__container {
  position: relative;
  z-index: 1;
}

/* Parent organization — Maskan e Pak */
.footer__parent {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(32px, 5vw, 48px);
  padding: clamp(22px, 3.5vw, 32px);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(251, 191, 36, 0.06) 100%);
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .footer__parent {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}

.footer__parent-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
  flex-shrink: 0;
}

.footer__parent-badge svg {
  width: 28px;
  height: 28px;
}

.footer__parent-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(110, 231, 183, 0.85);
}

.footer__parent-name {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.footer--premium .footer__link--text {
  cursor: default;
}

.footer--premium .footer__link--text:hover {
  color: rgba(148, 163, 184, 0.95);
  transform: none;
}

.footer__parent-tagline {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(226, 232, 240, 0.92);
  line-height: 1.5;
}

.footer__parent-desc {
  margin: 0 0 var(--space-5);
  max-width: 62ch;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: rgba(203, 213, 225, 0.88);
}

.footer__parent-desc strong {
  color: #f8fafc;
  font-weight: 700;
}

.footer__parent-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.footer__parent-meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(203, 213, 225, 0.9);
}

.footer__parent-meta svg {
  width: 16px;
  height: 16px;
  color: #6ee7b7;
  flex-shrink: 0;
}

.footer--premium .footer__top {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
  margin-bottom: clamp(28px, 4vw, 40px);
}

@media (min-width: 1024px) {
  .footer--premium .footer__top {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
    align-items: start;
  }
}

.footer--premium .footer__brand {
  max-width: 400px;
  overflow: visible;
}

.footer--premium .footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  text-decoration: none;
  color: #f8fafc;
  transition: color 0.2s ease;
  overflow: visible;
}

.footer--premium .footer__logo:hover {
  color: #6ee7b7;
}

.footer--premium .footer__logo-text {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.footer--premium .footer__desc {
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: rgba(203, 213, 225, 0.88);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(226, 232, 240, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__contact-item:hover {
  color: #6ee7b7;
}

.footer__contact-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #6ee7b7;
}

.footer__contact-icon svg {
  width: 18px;
  height: 18px;
}

.footer--premium .footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer--premium .footer__social-link {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: rgba(241, 245, 249, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.footer--premium .footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer--premium .footer__social-link:hover {
  transform: translateY(-3px);
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.footer--premium .footer__columns {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .footer--premium .footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer--premium .footer__column-title {
  margin: 0 0 var(--space-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f8fafc;
}

.footer--premium .footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer--premium .footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.95);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer--premium .footer__link:hover {
  color: #6ee7b7;
  transform: translateX(3px);
}

.footer--premium .footer__link--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* Mini CTA strip */
.footer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: clamp(28px, 4vw, 36px);
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.footer__cta-label {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6ee7b7;
}

.footer__cta-title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

.footer__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer__cta-btn--outline {
  color: #ecfdf5;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__cta-btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(16, 185, 129, 0.45);
  color: #fff;
}

/* Quranic quote */
.footer__quote-block {
  margin: 0 0 clamp(24px, 4vw, 32px);
  padding: clamp(22px, 3vw, 28px);
  text-align: center;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.footer__quote-icon {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: 1.5rem;
  color: rgba(110, 231, 183, 0.5);
  line-height: 1;
}

.footer__quote-arabic {
  margin: 0 0 var(--space-3);
  font-family: var(--font-arabic, 'Amiri', serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.65;
  color: #6ee7b7;
}

.footer__quote-translation {
  margin: 0;
  max-width: 36rem;
  margin-inline: auto;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(148, 163, 184, 0.95);
  font-style: italic;
}

/* Trust row */
.footer__trust {
  list-style: none;
  margin: 0 0 clamp(24px, 4vw, 32px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
}

.footer__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(203, 213, 225, 0.85);
}

.footer__trust svg {
  width: 18px;
  height: 18px;
  color: #6ee7b7;
  flex-shrink: 0;
}

.footer--premium .footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .footer--premium .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer--premium .footer__copyright {
  margin: 0;
  font-size: var(--text-sm);
  color: rgba(100, 116, 139, 0.95);
}

.footer--premium .footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.footer--premium .footer__legal a {
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.95);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer--premium .footer__legal a:hover {
  color: #6ee7b7;
}

.footer--premium .footer__legal-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.95);
  cursor: pointer;
  transition: color 0.2s ease;
}

.footer--premium .footer__legal-btn:hover {
  color: #6ee7b7;
}

@media (prefers-reduced-motion: reduce) {
  .footer__aurora {
    animation: none;
  }

  .footer--premium .footer__link:hover {
    transform: none;
  }

  .footer--premium .footer__social-link:hover {
    transform: none;
  }
}


/* === contact-bar.css === */
/* Global contact strip above footer */
.contact-bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(5, 150, 105, 0.12);
  background: linear-gradient(
    180deg,
    rgba(236, 253, 245, 0.65) 0%,
    rgba(248, 250, 252, 0.95) 100%
  );
}

.contact-bar__inner {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
}

@media (min-width: 768px) {
  .contact-bar__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }
}

.contact-bar__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(5, 150, 105, 0.14);
  background: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.contact-bar__item:hover {
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.1);
  transform: translateY(-2px);
}

.contact-bar__item--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.45);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.12);
}

.contact-bar__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.contact-bar__value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  word-break: break-word;
}

.contact-bar__item--whatsapp .contact-bar__value {
  color: #15803d;
}


/* === quran-marquee.css === */
/* ==========================================================================
   Quran Marquee — premium 3D strip
   ========================================================================== */

.quran-marquee--premium {
  position: relative;
  margin: calc(var(--hero-gap) * -0.5) 0 calc(var(--hero-gap) * 0.65);
  transform: translateZ(0);
}

.quran-marquee__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 2;
  pointer-events: none;
}

.quran-marquee__fade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0));
}

.quran-marquee__fade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0));
}

.hero--premium .quran-marquee__fade--left,
.hero--premium .quran-marquee__fade--right {
  /* Hero background is light; keep fades subtle */
  background: linear-gradient(90deg, rgba(244, 247, 249, 0.92), rgba(244, 247, 249, 0));
}

.quran-marquee__track {
  overflow: hidden;
  border-radius: var(--radius-full);
  border: 1px solid rgba(5, 150, 105, 0.14);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 26px rgba(15, 23, 42, 0.06);
  transform: perspective(900px) rotateX(6deg);
}

.quran-marquee__row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 1rem;
  white-space: nowrap;
  will-change: transform;
  animation: quranMarquee 26s linear infinite;
}

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

.quran-marquee__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(5, 150, 105, 0.06);
  border: 1px solid rgba(5, 150, 105, 0.12);
  color: rgba(15, 23, 42, 0.88);
  font-family: var(--font-arabic);
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.quran-marquee__ref {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(5, 150, 105, 0.85);
}

.quran-marquee__sep {
  color: rgba(217, 119, 6, 0.55);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  .quran-marquee__row {
    animation: none;
    transform: none;
  }

  .quran-marquee__track {
    transform: none;
  }
}



/* === scroll-top-premium.css === */
/* ==========================================================================
   Scroll To Top — World-class 3D FAB + scroll progress ring
   ========================================================================== */

.scroll-top {
  --st-progress: 0;
  --st-tilt-x: 0deg;
  --st-tilt-y: 0deg;
  --st-lift: 0px;
  --st-glow: 0.55;

  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--color-primary-dark);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0) scale(0.88);
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition:
    opacity 0.35s var(--ease-out-expo),
    visibility 0.35s,
    transform 0.45s var(--ease-out-expo);
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-top.is-visible:not(.is-entered) {
  animation: scrollTopEnter 0.55s var(--ease-out-expo) forwards;
}

.scroll-top.is-entered {
  transform:
    translate3d(0, var(--st-lift), 0)
    scale(1)
    rotateX(var(--st-tilt-y))
    rotateY(var(--st-tilt-x));
}

.scroll-top.is-launching .scroll-top__arrow {
  animation: scrollTopArrowLaunch 0.65s var(--ease-out-expo);
}

.scroll-top.is-launching .scroll-top__chev {
  animation: scrollTopChevLaunch 0.65s var(--ease-out-expo);
}

.scroll-top:focus-visible {
  outline: 3px solid rgba(var(--color-primary-rgb), 0.35);
  outline-offset: 4px;
}

/* 3D stage */
.scroll-top__stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transform: translateZ(0);
}

/* Infinite background rings (subtle, premium) */
.scroll-top__stage::before,
.scroll-top__stage::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateZ(-10px) scale(0.75);
  filter: blur(0px);
  transition: opacity 0.25s ease;
}

.scroll-top__stage::before {
  background:
    radial-gradient(closest-side, transparent 72%, rgba(16, 185, 129, 0.22) 74%, transparent 78%),
    radial-gradient(closest-side, transparent 56%, rgba(251, 191, 36, 0.16) 58%, transparent 62%),
    radial-gradient(closest-side, transparent 38%, rgba(59, 130, 246, 0.12) 40%, transparent 44%);
  animation: scrollTopRings 2.6s linear infinite;
}

.scroll-top__stage::after {
  inset: -28%;
  background:
    radial-gradient(closest-side, transparent 66%, rgba(255, 255, 255, 0.65) 68%, transparent 72%),
    radial-gradient(closest-side, transparent 46%, rgba(16, 185, 129, 0.14) 48%, transparent 52%);
  animation: scrollTopRings 3.4s linear infinite reverse;
}

.scroll-top.is-visible .scroll-top__stage::before,
.scroll-top.is-visible .scroll-top__stage::after {
  opacity: 0.9;
}

.scroll-top.is-hovered .scroll-top__stage::before,
.scroll-top.is-hovered .scroll-top__stage::after {
  opacity: 1;
  filter: saturate(1.08);
}

/* Scroll progress ring */
.scroll-top__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 0;
}

.scroll-top__progress-track {
  fill: none;
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 2.5;
}

.scroll-top__progress-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--st-progress));
  filter: drop-shadow(0 0 6px rgba(var(--color-primary-rgb), 0.35));
  transition: stroke-dashoffset 0.08s linear;
}

.scroll-top__glow {
  position: absolute;
  inset: -14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 25%, rgba(16, 185, 129, calc(0.32 * var(--st-glow))), transparent 58%),
    radial-gradient(circle at 75% 80%, rgba(251, 191, 36, calc(0.22 * var(--st-glow))), transparent 55%);
  filter: blur(16px);
  opacity: calc(0.5 + var(--st-progress) * 0.5);
  transform: translateZ(-8px) scale(calc(0.95 + var(--st-progress) * 0.08));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.scroll-top__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(236, 253, 245, 0.75) 45%,
    rgba(255, 251, 235, 0.65) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateZ(4px);
  z-index: 1;
}

.scroll-top__body {
  position: absolute;
  inset: 3px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateZ(12px);
  z-index: 2;
  overflow: hidden;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.scroll-top__shine {
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.75) 48%,
    transparent 62%
  );
  transform: translateX(-120%) rotate(12deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.scroll-top.is-hovered .scroll-top__shine {
  opacity: 1;
  animation: scrollTopShine 1.8s ease-in-out infinite;
}

.scroll-top__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  transform: translateZ(18px);
}

.scroll-top__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.scroll-top__arrow,
.scroll-top__chev {
  transition: transform 0.2s var(--ease-out-expo);
}

.scroll-top.is-hovered .scroll-top__arrow {
  transform: translateY(-1px);
}

.scroll-top.is-hovered .scroll-top__chev--l {
  transform: translate(-1px, -1px);
}

.scroll-top.is-hovered .scroll-top__chev--r {
  transform: translate(1px, -1px);
}

.scroll-top.is-hovered .scroll-top__body {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.12);
}

.scroll-top.is-hovered {
  --st-glow: 1;
}

.scroll-top:active .scroll-top__body {
  transform: translateZ(8px) scale(0.96);
}

/* Keyframes */
@keyframes scrollTopEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.82) rotateX(12deg);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) scale(1.04) rotateX(-4deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
  }
}

@keyframes scrollTopShine {
  0% { transform: translateX(-120%) rotate(12deg); }
  100% { transform: translateX(120%) rotate(12deg); }
}

@keyframes scrollTopArrowLaunch {
  0% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}

@keyframes scrollTopChevLaunch {
  0% { transform: translate(0, 0); opacity: 1; }
  50% { transform: translate(0, -3px); opacity: 0.9; }
  100% { transform: translate(0, -8px); opacity: 0; }
}

@keyframes scrollTopRings {
  0% { transform: translateZ(-10px) scale(0.72) rotate(0deg); }
  50% { transform: translateZ(-10px) scale(0.88) rotate(180deg); }
  100% { transform: translateZ(-10px) scale(0.72) rotate(360deg); }
}

@media (max-width: 640px) {
  .scroll-top {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .scroll-top__body {
    inset: 2px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top,
  .scroll-top.is-visible:not(.is-entered) {
    animation: none;
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .scroll-top.is-entered {
    transform: none;
  }

  .scroll-top__shine,
  .scroll-top.is-launching .scroll-top__arrow,
  .scroll-top.is-launching .scroll-top__chev {
    animation: none !important;
  }

  .scroll-top__stage::before,
  .scroll-top__stage::after {
    animation: none !important;
  }

  .scroll-top__progress-fill {
    transition: none;
  }
}


/* === landing-scene-premium.css === */
/* ==========================================================================
   Landing Scene — scroll-linked 3D Quran / LMS background
   ========================================================================== */

body.page-landing {
  --landing-scroll: 0;
  --landing-tint-r: 5;
  --landing-tint-g: 150;
  --landing-tint-b: 105;
  --landing-section-bg: rgba(248, 250, 252, 0.9);
  --landing-section-alt-bg: rgba(241, 245, 249, 0.88);
}

body.page-landing #main-content,
body.page-landing .footer--premium {
  position: relative;
  z-index: 2;
}

/* Glass sections — background animations visible through */
body.page-landing .section:not(.hero):not(.cta-section--premium):not(.footer--premium) {
  background-color: rgba(248, 250, 252, 0.52);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-block: 1px solid rgba(255, 255, 255, 0.45);
}

body.page-landing .section--alt:not(.hero):not(.cta-section--premium) {
  background-color: rgba(241, 245, 249, 0.48);
}

body.page-landing .hero.hero--premium {
  background: transparent;
  position: relative;
  z-index: 2;
}

body.page-landing .hero--premium .hero__content {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 24px 64px rgba(5, 150, 105, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.page-landing .hero--premium .hero__vignette {
  opacity: 0.65;
  background:
    radial-gradient(ellipse 90% 70% at var(--hero-spot-x) var(--hero-spot-y), transparent 0%, rgba(255, 255, 255, 0.08) 42%, rgba(248, 250, 252, 0.55) 78%),
    linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.2) 100%);
}

body.page-landing .hero--premium .hero__canvas,
body.page-landing .hero--lite .hero__canvas {
  display: none !important;
}

body.page-landing .hero--lite .hero__orb,
body.page-landing .hero--lite .hero__mesh,
body.page-landing .hero--lite .hero__pattern,
body.page-landing .hero--lite .hero__grain {
  display: none;
}

body.page-landing .hero--lite .hero__aurora {
  opacity: 0.35;
}

body.page-landing .hero--lite .hero__portal-ring {
  animation: none;
}

/* Fixed scene stack — sits behind glass content */
.landing-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

body.page-landing .navbar,
body.has-landing-scene .navbar {
  z-index: calc(var(--z-fixed) + 2);
}

body.page-landing.nav-open .navbar {
  z-index: calc(var(--z-fixed) + 25);
}

body.page-landing .mobile-nav-backdrop--visible {
  z-index: calc(var(--z-fixed) + 18);
}

body.page-landing .mobile-nav.mobile-nav--open {
  z-index: calc(var(--z-fixed) + 22);
}

.landing-scene__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
  mix-blend-mode: normal;
}

.landing-scene__ambient {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--landing-scroll) * -80px), 0);
  will-change: transform;
}

.landing-scene__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: calc(0.5 + var(--landing-scroll) * 0.12);
  will-change: transform, opacity;
  animation: landingOrbDrift 40s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes landingOrbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  66% { transform: translate3d(-3%, -2%, 0) scale(0.96); }
}

.landing-scene__orb--emerald {
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  top: 8%;
  left: -8%;
  background: radial-gradient(circle, rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.45), transparent 70%);
}

.landing-scene__orb--gold {
  width: min(44vw, 440px);
  height: min(44vw, 440px);
  top: 42%;
  right: -6%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.38), transparent 70%);
  animation-duration: 46s;
  animation-delay: -14s;
}

.landing-scene__orb--sapphire {
  width: min(38vw, 380px);
  height: min(38vw, 380px);
  bottom: 12%;
  left: 28%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.28), transparent 70%);
  opacity: calc(0.32 + var(--landing-scroll) * 0.18);
  animation-duration: 52s;
  animation-delay: -22s;
}

.landing-scene__pattern {
  position: absolute;
  inset: -20%;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(900px) rotateX(62deg) translateY(-6%) scale(1.15)
    translate3d(0, calc(var(--landing-scroll) * -60px), 0);
  transform-origin: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 15%, transparent 72%);
  animation: landingMeshDrift 70s ease-in-out infinite alternate;
}

@keyframes landingMeshDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 56px 56px, 56px 56px; }
}

.landing-scene__mesh {
  position: absolute;
  inset: 0;
  background: var(--gradient-mesh);
  opacity: calc(0.55 - var(--landing-scroll) * 0.2);
}

.landing-scene__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, transparent 45%, rgba(248, 250, 252, 0.42) 100%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.12) 0%, transparent 40%, rgba(248, 250, 252, 0.22) 100%);
}

/* CSS 3D floating motifs */
.landing-scene__floats {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.landing-scene__float {
  position: absolute;
  color: rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.32);
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 12px 28px rgba(5, 150, 105, 0.12));
  transition: color 0.6s ease;
  animation: landingFloatIdle 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

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

.landing-scene__float--star { animation-duration: 11s; animation-delay: -2s; }
.landing-scene__float--class { animation-duration: 10s; animation-delay: -4s; }
.landing-scene__float--pen { animation-duration: 8s; animation-delay: -1s; }
.landing-scene__float--beads { animation-duration: 12s; animation-delay: -5s; }
.landing-scene__float--arabic { animation-duration: 13s; animation-delay: -3s; }

.landing-scene__float svg {
  width: 100%;
  height: 100%;
  display: block;
}

.landing-scene__float--mushaf {
  width: clamp(56px, 8vw, 88px);
  top: 14%;
  left: 6%;
}

.landing-scene__float--star {
  width: clamp(64px, 9vw, 96px);
  top: 22%;
  right: 8%;
  color: rgba(251, 191, 36, 0.28);
}

.landing-scene__float--class {
  width: clamp(72px, 10vw, 110px);
  top: 58%;
  left: 4%;
  color: rgba(59, 130, 246, 0.2);
}

.landing-scene__float--pen {
  width: clamp(40px, 5vw, 56px);
  bottom: 28%;
  right: 10%;
}

.landing-scene__float--beads {
  width: clamp(100px, 14vw, 160px);
  bottom: 18%;
  left: 12%;
}

.landing-scene__float--arabic {
  width: auto;
  top: 48%;
  right: 5%;
}

.landing-scene__arabic-text {
  font-family: var(--font-arabic);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.35), rgba(251, 191, 36, 0.25));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.55;
}

/* Scroll journey indicators (right edge) */
.landing-scene__milestones {
  position: fixed;
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 0;
}

.landing-scene__milestone {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.2);
  box-shadow: 0 0 0 1px rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.15);
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.landing-scene__milestone.is-active {
  transform: scale(1.45);
  background: rgb(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b));
  box-shadow: 0 0 12px rgba(var(--landing-tint-r), var(--landing-tint-g), var(--landing-tint-b), 0.45);
}

/* Theme zones driven by scroll section */
body.page-landing[data-landing-zone="live"] {
  --landing-tint-r: 37;
  --landing-tint-g: 99;
  --landing-tint-b: 235;
}

body.page-landing[data-landing-zone="learn"] {
  --landing-tint-r: 217;
  --landing-tint-g: 119;
  --landing-tint-b: 6;
}

body.page-landing[data-landing-zone="grow"] {
  --landing-tint-r: 5;
  --landing-tint-g: 150;
  --landing-tint-b: 105;
}

/* Glass panels — animations visible through cards & blocks */
body.page-landing .glass-card--strong,
body.page-landing .showcase__stage,
body.page-landing .teacher-card--premium .teacher-card__surface,
body.page-landing .testimonial-card--premium .testimonial-card__surface,
body.page-landing .pricing-regional-card .pricing-regional-card__surface,
body.page-landing .faq-item--premium,
body.page-landing .contact-premium__form-wrap {
  background: rgba(255, 255, 255, 0.66) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 1023px) {
  .landing-scene__canvas {
    opacity: 0.45;
  }

  .landing-scene__float {
    opacity: 0.75;
  }

  .landing-scene__float--pen,
  .landing-scene__float--beads {
    display: none;
  }

  .landing-scene__milestones {
    display: none;
  }
}

@media (max-width: 640px) {
  .landing-scene__float--class,
  .landing-scene__float--arabic {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scene__canvas {
    display: none;
  }

  .landing-scene__orb,
  .landing-scene__pattern {
    transform: none !important;
  }

  .landing-scene__float {
    display: none;
  }

  .landing-scene__milestones {
    display: none;
  }
}


/* === responsive.css === */
/* ==========================================================================
   Responsive — Landing + Dashboard (tablet & mobile)
   Load last in main.php and dashboard.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilities (used in dashboard layout & views)
   -------------------------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.text-center { text-align: center; }
.text-muted,
.text-secondary { color: var(--color-text-muted); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.tracking-wide { letter-spacing: 0.06em; }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   Global — prevent horizontal scroll
   -------------------------------------------------------------------------- */
html {
  overflow-x: clip;
}

body.page-landing,
body.dashboard-portal {
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Dashboard: keep icons & avatars at designed sizes */
body.dashboard-portal .form-field__icon svg {
  max-width: 20px;
  max-height: 20px;
  width: 20px;
  height: 20px;
}

body.dashboard-portal .profile-avatar__img {
  max-width: none;
  height: 100%;
}

body.dashboard-portal .profile-avatar svg {
  max-width: 100%;
  width: 100%;
  height: 100%;
}

body.dashboard-portal .live-video-icon__svg {
  max-width: none;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Landing — layout & hero spacing
   -------------------------------------------------------------------------- */
body.page-landing #main-content {
  padding-top: 0;
}

body.page-landing .hero.hero--premium {
  padding-top: calc(var(--header-height) + var(--space-8) + var(--space-4));
  min-height: auto;
  min-height: min(100dvh, 100svh);
}

@media (max-width: 767px) {
  body.page-landing .hero.hero--premium {
    padding-top: calc(56px + var(--space-5) + env(safe-area-inset-top, 0px));
    padding-bottom: var(--space-8);
    padding-inline: max(var(--space-3), env(safe-area-inset-left, 0px))
      max(var(--space-3), env(safe-area-inset-right, 0px));
    min-height: auto;
    overflow: visible;
  }

  .hero--premium .hero__inner {
    padding-inline: 0;
    gap: var(--space-5);
  }

  .hero--premium .hero__content {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    width: 100%;
    box-sizing: border-box;
  }

  .hero--premium .hero__arabic-line,
  .hero--premium .hero__bismillah {
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    line-height: 1.55;
  }

  .hero--premium .hero__eyebrow {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero--premium .hero__title {
    font-size: clamp(1.625rem, 6.5vw, 2.1rem);
    line-height: 1.15;
  }

  .hero--premium .hero__desc {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .hero--premium .hero__metrics {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    justify-content: flex-start;
  }

  .hero--premium .hero__metric-value {
    font-size: var(--text-base);
  }

  .hero--premium .hero__metric-label {
    font-size: 0.625rem;
  }

  .hero--premium .hero__visual {
    margin-top: 0;
    width: 100%;
  }

  .hero--premium .hero__portal {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero--premium .hero__media-frame,
  .hero--premium .hero__media-frame--video {
    max-width: 100%;
    margin-inline: auto;
  }

  .hero--premium .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero--premium .hero__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .hero--premium .hero__chips {
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .hero--premium .hero__chip {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
  }

  .hero--premium .hero__trust-logos {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    width: 100%;
    align-items: center;
  }

  .hero--premium .hero__trust-logos-label {
    width: 100%;
    font-size: var(--text-xs);
  }

  .hero--premium .hero__trust-logo {
    font-size: var(--text-xs);
  }

  .quran-marquee--premium {
    margin-inline: calc(var(--space-3) * -1);
  }

  .quran-marquee__track {
    transform: none;
  }
}

@media (max-width: 380px) {
  .navbar__logo-text {
    max-width: min(7rem, 32vw);
    font-size: 0.6875rem;
  }

  .navbar__logo .brand-logo {
    --logo-size: 36px;
    --logo-svg: 32px;
    --logo-bleed: 9px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero--premium .hero__inner {
    gap: var(--space-8);
  }
}

/* Section rhythm on small screens */
@media (max-width: 767px) {
  .section {
    padding-block: clamp(2.5rem, 8vw, 4rem);
  }

  .section-header__title {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .section-lead {
    font-size: var(--text-sm);
  }
}

/* Features / courses grids */
@media (max-width: 639px) {
  .features--premium .features__grid,
  .courses--premium .courses__grid {
    gap: var(--space-4);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .features--premium .features__grid,
  .courses--premium .courses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pricing — 2 columns on tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .pricing-regional__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-regional__grid > .pricing-regional-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .pricing-regional__toolbar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: var(--radius-xl);
    max-width: none;
  }

  .pricing-regional__detected {
    justify-content: center;
  }
}

/* Contact */
@media (max-width: 899px) {
  .contact--premium .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .contact--premium .contact__info-card {
    position: static;
  }
}

/* CTA */
@media (max-width: 899px) {
  .cta-banner--premium .cta-banner__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Footer & contact bar */
@media (max-width: 639px) {
  .footer--premium .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer--premium .footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

  .contact-bar__item {
    text-align: center;
    align-items: center;
  }
}

/* Teachers swiper — contain overflow */
@media (max-width: 1023px) {
  .teachers-swiper--premium {
    overflow: hidden;
    padding-inline: var(--space-1);
  }

  .teachers--premium .swiper-nav {
    display: none;
  }
}

/* Testimonials stage */
@media (max-width: 767px) {
  .testimonials-swiper__stage::before,
  .testimonials-swiper__stage::after {
    display: none;
  }
}

/* Showcase */
@media (max-width: 1023px) {
  .showcase--premium .showcase__grid {
    grid-template-columns: 1fr;
  }

  .showcase--premium .showcase__stage {
    order: -1;
  }
}

/* How it works */
@media (max-width: 767px) {
  .timeline--premium .timeline__step {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--space-5);
  }

  .timeline--premium .timeline__progress-line {
    display: none;
  }
}

/* Scroll top — safe area */
@media (max-width: 767px) {
  .scroll-top-premium {
    right: max(var(--space-4), env(safe-area-inset-right, 0px));
    bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Navbar — mobile & tablet
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar {
    top: max(var(--space-3), env(safe-area-inset-top, 0px));
    left: max(var(--space-3), env(safe-area-inset-left, 0px));
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
    border-radius: var(--radius-lg);
    max-width: none;
    width: auto;
  }

  .navbar__inner {
    padding: var(--space-2) var(--space-3);
    min-height: 60px;
    gap: var(--space-2);
    overflow: visible;
  }

  .navbar {
    overflow: visible;
  }

  .navbar__logo {
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    align-items: center;
  }

  .navbar__logo-text {
    font-size: 0.75rem;
    max-width: min(8.5rem, 38vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar__actions {
    flex-shrink: 0;
    gap: var(--space-1);
  }

  /* CTAs in drawer — navbar-mobile-premium.css */
}

/* Landing — stack chrome above 3D scene */
body.page-landing .navbar,
body.page-landing .mobile-nav-backdrop,
body.page-landing .mobile-nav {
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  backdrop-filter: blur(var(--glass-blur-heavy));
}

body.page-landing.nav-open .scroll-top-premium {
  z-index: calc(var(--z-fixed) + 5);
}

/* Full-screen mobile menu */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fixed) - 2);
  background: rgba(15, 23, 42, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-backdrop--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile drawer layout — see navbar-mobile-premium.css */

@media (min-width: 768px) {
  .mobile-nav-backdrop {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard — tablet (768–1023) permanent feel
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dashboard__content {
    padding: var(--space-5) var(--section-px) var(--space-10);
  }
}

/* Dashboard overlay stacking */
@media (max-width: 1023px) {
  .dashboard__overlay {
    z-index: calc(var(--z-sticky) + 1);
  }

  .dashboard__sidebar {
    z-index: calc(var(--z-sticky) + 2);
  }

  body.dashboard-nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* Dashboard — mobile */
@media (max-width: 767px) {
  .dashboard__sidebar {
    width: min(300px, 88vw);
  }

  .dashboard__header {
    flex-wrap: wrap;
    padding: var(--space-3) var(--section-px);
    gap: var(--space-3);
  }

  .dashboard__header > .flex {
    flex: 1 1 100%;
    min-width: 0;
  }

  .dashboard__header-title {
    font-size: clamp(1.05rem, 4.5vw, 1.25rem);
    line-height: 1.3;
  }

  .dashboard__header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .dashboard__header-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    max-width: 140px;
  }

  .dashboard__content {
    padding: var(--space-4) var(--section-px) var(--space-10);
  }

  .dashboard-stat-grid {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .dashboard-stat {
    padding: var(--space-4);
  }

  .dashboard-panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .dashboard-panel__header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .dashboard-panel__header .btn-group,
  .dashboard-panel__header form {
    width: 100%;
  }

  .dashboard-panel__header .btn-group .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .dash-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .dash-page-header__title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .dash-page-header .btn-group {
    width: 100%;
  }

  .dash-page-header .btn-group .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .dashboard-list__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .dashboard-list__item .btn {
    width: 100%;
    justify-content: center;
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

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

  .dashboard-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .dashboard-tabs::-webkit-scrollbar {
    display: none;
  }

  .dashboard-tabs .dashboard-tab {
    flex-shrink: 0;
  }

  /* Tables — scroll + readable cells */
  .data-table-wrap {
    margin-inline: calc(var(--section-px) * -1);
    padding-inline: var(--section-px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .data-table {
    font-size: var(--text-xs);
  }

  .data-table th,
  .data-table td {
    padding: var(--space-3) var(--space-3);
    white-space: nowrap;
  }

  .dash-user-cell {
    min-width: 180px;
  }

  /* Unwrapped tables — force scroll container */
  .dashboard__content > .dashboard-panel > table.data-table,
  .dashboard__content > table.data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 479px) {
  .dashboard__sidebar-brand span:not(.dashboard__sidebar-brand-icon) {
    font-size: 0.75rem;
    line-height: 1.25;
  }

  .portal-stat__value,
  .dashboard-stat__value {
    font-size: 1.5rem;
  }
}

/* Auth welcome on small phones */
@media (max-width: 699px) {
  body.auth-page--welcome .auth-layout__panel,
  body.auth-page .auth-layout__panel {
    padding-top: var(--space-3);
  }

  body.auth-page--welcome .auth-shell--welcome .auth-card--premium {
    padding: var(--space-5);
  }
}

/* Checkout */
@media (max-width: 899px) {
  .checkout-premium__grid {
    grid-template-columns: 1fr;
  }
}

/* Safe areas */
@supports (padding: max(0px)) {
  .dashboard__content {
    padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  }

  body.page-landing .footer--premium {
    padding-bottom: max(var(--space-10), env(safe-area-inset-bottom));
  }
}


/* === navbar-mobile-premium.css === */
/**
 * Mobile navbar — premium drawer, 3D hamburger, no list bullets
 */

/* --------------------------------------------------------------------------
   Hamburger — lightweight 3D cube morph
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .navbar {
    contain: none;
    isolation: isolate;
  }

  .navbar__toggle {
    display: grid;
    flex-direction: unset;
    gap: 0;
    padding: 0;
    background: transparent;
  }

  .navbar__toggle:hover {
    background: transparent;
  }

  .navbar__toggle--3d {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(236, 253, 245, 0.75));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 8px 22px rgba(5, 150, 105, 0.14),
      0 2px 6px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition:
      box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    perspective: 420px;
  }

  .navbar__toggle--3d::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.45), rgba(251, 191, 36, 0.35));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.85;
  }

  .navbar__toggle--3d:active {
    transform: scale(0.94);
  }

  .navbar--open .navbar__toggle--3d {
    background: linear-gradient(145deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.88));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 10px 28px rgba(5, 150, 105, 0.22);
  }

  .navbar__toggle-cube {
    display: grid;
    place-items: center;
    width: 22px;
    height: 18px;
    transform-style: preserve-3d;
    transform: rotateX(var(--toggle-tilt-x, 0deg)) rotateY(var(--toggle-tilt-y, 0deg));
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .navbar__toggle-face {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 16px;
    transform: translateZ(6px);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar--open .navbar__toggle-face {
    transform: translateZ(10px) rotateY(180deg);
  }

  .navbar__toggle-line {
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, #047857, #059669 55%, #d97706);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
    transform-origin: center center;
    transition:
      transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.18s ease,
      width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .navbar__toggle-line--top {
    transform-origin: 12px 1px;
  }

  .navbar__toggle-line--bot {
    transform-origin: 12px calc(100% - 1px);
  }

  .navbar--open .navbar__toggle-line--top {
    transform: translateY(6.75px) rotate(45deg);
  }

  .navbar--open .navbar__toggle-line--mid {
    opacity: 0;
    transform: scaleX(0) translateZ(-4px);
  }

  .navbar--open .navbar__toggle-line--bot {
    transform: translateY(-6.75px) rotate(-45deg);
  }

  /* Hide legacy bars if present */
  .navbar__toggle-bar {
    display: none !important;
  }

  /* Cleaner mobile bar — CTA only inside drawer */
  .navbar__actions .btn--ghost,
  .navbar__actions .btn--primary {
    display: none !important;
  }

  /* Compact logo in top bar — full circle visible */
  .navbar__logo .brand-logo {
    --logo-size: 40px;
    --logo-svg: 36px;
    --logo-icon-scale: 1.1;
    --logo-bleed: 10px;
  }
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mobile-nav-backdrop {
    z-index: calc(var(--z-fixed) + 5);
    background: rgba(2, 12, 10, 0.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0.32s;
  }

  .mobile-nav-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* --------------------------------------------------------------------------
   Premium slide-in drawer
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-fixed) + 10);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: none;
    overflow: hidden;
  }

  .mobile-nav__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 20rem);
    max-width: 100%;
    height: 100%;
    margin-left: auto;
    padding:
      max(calc(56px + var(--space-3) + env(safe-area-inset-top, 0px)), calc(var(--header-height) + var(--space-4)))
      var(--space-4)
      max(var(--space-5), env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(236, 253, 245, 0.94) 42%,
      rgba(255, 251, 235, 0.92) 100%
    );
    border-left: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
      -24px 0 64px rgba(15, 23, 42, 0.14),
      -4px 0 24px rgba(5, 150, 105, 0.08);
    -webkit-backdrop-filter: blur(28px) saturate(1.15);
    backdrop-filter: blur(28px) saturate(1.15);
    transform: translate3d(105%, 0, 0);
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav--open {
    pointer-events: auto;
  }

  .mobile-nav--open .mobile-nav__sheet {
    transform: translate3d(0, 0, 0);
  }

  .mobile-nav__glow {
    position: absolute;
    top: 12%;
    right: -20%;
    width: 70%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 68%);
    pointer-events: none;
    filter: blur(28px);
  }

  .mobile-nav__head,
  .mobile-nav__list,
  .mobile-nav__footer {
    position: relative;
    z-index: 2;
  }

  .mobile-nav__head {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(5, 150, 105, 0.12);
    flex-shrink: 0;
  }

  .mobile-nav__eyebrow {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .mobile-nav__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: 1.15;
  }

  /* No bullet dots */
  .mobile-nav__list,
  .mobile-nav__list > li,
  .mobile-nav__item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

  .mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .mobile-nav--open .mobile-nav__link {
    animation: mobileNavLinkIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.04s + var(--nav-i, 0) * 0.04s);
  }

  .mobile-nav__link--active {
    color: var(--color-primary-dark);
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(16, 185, 129, 0.06));
    border-color: rgba(5, 150, 105, 0.28);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.12);
  }

  .mobile-nav__link:active {
    transform: scale(0.98) translate3d(0, 0, 0);
  }

  .mobile-nav__label {
    flex: 1;
    min-width: 0;
  }

  .mobile-nav__chevron {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    flex-shrink: 0;
    transition:
      transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.2s ease;
  }

  .mobile-nav__link:hover .mobile-nav__chevron,
  .mobile-nav__link:focus-visible .mobile-nav__chevron {
    transform: translateX(3px);
    background: rgba(var(--color-primary-rgb), 0.16);
  }

  .mobile-nav__footer {
    margin-top: auto;
    padding-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid rgba(5, 150, 105, 0.1);
  }

  .mobile-nav__link--ghost {
    justify-content: center;
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
    opacity: 1;
  }

  .mobile-nav--open .mobile-nav__link--ghost {
    animation: mobileNavLinkIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
  }

  .mobile-nav__cta {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-weight: 700;
    border-radius: var(--radius-lg);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .mobile-nav--open .mobile-nav__cta {
    animation: mobileNavCtaIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
  }

  body.nav-open .navbar {
    z-index: calc(var(--z-fixed) + 25);
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  body.nav-open .mobile-nav-backdrop {
    z-index: calc(var(--z-fixed) + 18);
  }

  body.nav-open .mobile-nav {
    z-index: calc(var(--z-fixed) + 22);
  }

  /* Closed drawer must not block taps on landing hero */
  .mobile-nav:not(.mobile-nav--open) {
    visibility: hidden;
  }

  .mobile-nav:not(.mobile-nav--open) .mobile-nav__sheet {
    pointer-events: none;
  }
}

@media (min-width: 768px) {
  .mobile-nav,
  .mobile-nav-backdrop {
    display: none !important;
  }
}

@keyframes mobileNavLinkIn {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes mobileNavCtaIn {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-nav__sheet,
  .mobile-nav-backdrop,
  .navbar__toggle-line,
  .navbar__toggle-face,
  .navbar__toggle-cube {
    transition-duration: 0.01ms !important;
  }

  .mobile-nav__link,
  .mobile-nav__cta,
  .mobile-nav__link--ghost {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* === cookie-consent-premium.css === */
/**
 * Cookie consent — glassmorphism + 3D premium panel
 */

.cookie-consent {
  --cc-tilt-x: 0deg;
  --cc-tilt-y: 0deg;
  --cc-shine-x: 50%;
  --cc-shine-y: 50%;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast, 1000) + 100);
  pointer-events: none;
}

.cookie-consent.is-active {
  pointer-events: auto;
}

.cookie-consent[hidden] {
  display: none !important;
}

.cookie-consent__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cookie-consent.is-visible .cookie-consent__backdrop {
  opacity: 1;
}

.cookie-consent__stage {
  position: absolute;
  left: 50%;
  bottom: max(var(--space-4, 1rem), env(safe-area-inset-bottom, 0px));
  z-index: 2;
  width: min(560px, calc(100vw - var(--space-8, 2rem)));
  max-height: calc(100vh - var(--header-height, 72px) - var(--space-8, 2rem));
  transform: translateX(-50%);
  perspective: 1200px;
  transform-style: preserve-3d;
  pointer-events: auto;
}

/* Only one panel visible — prevents invisible overlay blocking clicks */
.cookie-consent__panels {
  position: relative;
  width: 100%;
  pointer-events: auto;
}

.cookie-consent__panels > .cookie-consent__panel {
  display: none;
  width: 100%;
  min-width: 0;
  pointer-events: auto;
}

.cookie-consent__panels > .cookie-consent__panel.is-active {
  display: block;
}

.cookie-consent__aurora {
  position: absolute;
  inset: -40% -20%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(16, 185, 129, 0.35), transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(251, 191, 36, 0.28), transparent 60%),
    radial-gradient(ellipse 45% 50% at 50% 90%, rgba(5, 150, 105, 0.22), transparent 70%);
  filter: blur(28px);
  opacity: 0.85;
  pointer-events: none;
  animation: cc-aurora-drift 14s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes cc-aurora-drift {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, -4%, 0) scale(1.06); }
}

.cookie-consent__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
  animation: cc-orb-float 8s ease-in-out infinite;
  z-index: 0;
}

.cookie-consent__orb--1 {
  width: 120px;
  height: 120px;
  top: -30px;
  left: -20px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.45), transparent 70%);
}

.cookie-consent__orb--2 {
  width: 90px;
  height: 90px;
  top: 10px;
  right: -10px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4), transparent 70%);
  animation-delay: -2.5s;
}

.cookie-consent__orb--3 {
  width: 70px;
  height: 70px;
  bottom: 20px;
  left: 45%;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.35), transparent 70%);
  animation-delay: -4s;
}

@keyframes cc-orb-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}

.cookie-consent__panel {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--cc-tilt-y)) rotateY(var(--cc-tilt-x)) translateZ(0);
  transition: transform 0.12s ease-out, box-shadow 0.3s ease;
  pointer-events: auto;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(236, 253, 245, 0.88) 100%
  );
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy, 24px)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur-heavy, 24px)) saturate(1.35);
  border-radius: var(--radius-xl, 1rem);
  padding: clamp(1.15rem, 3.5vw, 1.5rem);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 24px 48px -12px rgba(5, 150, 105, 0.22),
    0 40px 80px -24px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.65);
}

.cookie-consent__panel--settings.is-active {
  max-height: calc(100vh - var(--header-height, 72px) - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.cookie-consent__panel-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--cc-shine-x) var(--cc-shine-y),
    rgba(255, 255, 255, 0.55),
    transparent 42%
  );
  opacity: 0.65;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

.cookie-consent__panel-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.55),
    rgba(255, 255, 255, 0.2) 40%,
    rgba(251, 191, 36, 0.45)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.cookie-consent__header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4, 1rem);
  align-items: start;
  margin-bottom: var(--space-5, 1.25rem);
  position: relative;
  z-index: 1;
}

.cookie-consent__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg, 0.75rem);
  background: linear-gradient(145deg, rgba(5, 150, 105, 0.12), rgba(251, 191, 36, 0.1));
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: var(--color-primary, #059669);
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.15);
  transform: translateZ(24px);
  animation: cc-icon-pulse 3s ease-in-out infinite;
}

@keyframes cc-icon-pulse {
  0%, 100% { transform: translateZ(24px) scale(1); }
  50% { transform: translateZ(28px) scale(1.04); }
}

.cookie-consent__icon svg {
  width: 36px;
  height: 36px;
}

.cookie-consent__title {
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: var(--color-text, #0f172a);
}

.cookie-consent__desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-secondary, #475569);
}

.cookie-consent__link {
  color: var(--color-primary, #059669);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.cookie-consent__panel .btn,
.cookie-consent__back,
.cookie-consent__switch {
  position: relative;
  z-index: 6;
  pointer-events: auto;
  cursor: pointer;
}

.cookie-consent__actions--settings {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid rgba(5, 150, 105, 0.12);
}

.cookie-consent__btn {
  flex: 1 1 auto;
  min-width: 7.5rem;
  font-weight: 600;
}

.cookie-consent__btn--glass {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(5, 150, 105, 0.22);
  color: var(--color-text, #0f172a);
  backdrop-filter: blur(8px);
}

.cookie-consent__btn--glass:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(5, 150, 105, 0.35);
}

.cookie-consent__btn--text {
  flex: 1 1 100%;
  background: transparent;
  border: none;
  color: var(--color-text-secondary, #64748b);
  box-shadow: none;
  min-width: auto;
}

.cookie-consent__btn--text:hover {
  color: var(--color-primary, #059669);
  background: rgba(5, 150, 105, 0.06);
}

/* Settings panel */
.cookie-consent__settings-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: var(--space-4, 1rem);
  position: relative;
  z-index: 1;
}

.cookie-consent__settings-intro {
  flex: 1;
  min-width: 0;
}

.cookie-consent__settings-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary, #059669);
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.2);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.cookie-consent__settings-sub {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #64748b);
}

.cookie-consent__settings-note {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 0.75rem;
  color: var(--color-text-muted, #94a3b8);
  text-align: center;
}

.cookie-consent__back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text, #0f172a);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}

.cookie-consent__back:hover {
  background: #fff;
  transform: translateX(-3px);
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.18);
}

.cookie-consent__categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  z-index: 1;
}

.cookie-consent__category {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg, 0.75rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.cookie-consent__category:hover {
  border-color: rgba(5, 150, 105, 0.2);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.1);
}

.cookie-consent__category.is-enabled {
  border-color: rgba(5, 150, 105, 0.35);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.85));
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.12);
}

.cookie-consent__category--essential {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(255, 255, 255, 0.8));
  border-color: rgba(5, 150, 105, 0.18);
}

.cookie-consent__category-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md, 0.5rem);
  background: rgba(5, 150, 105, 0.1);
  color: var(--color-primary, #059669);
  flex-shrink: 0;
}

.cookie-consent__category-icon svg {
  width: 22px;
  height: 22px;
}

.cookie-consent__category-icon--functional {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.cookie-consent__category-icon--analytics {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
}

.cookie-consent__category-info h3 {
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text, #0f172a);
}

.cookie-consent__category-info p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-text-secondary, #64748b);
}

.cookie-consent__always {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary, #059669);
  white-space: nowrap;
  padding: 0.35rem 0.5rem;
  background: rgba(5, 150, 105, 0.1);
  border-radius: 999px;
}

.cookie-consent__switch {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.cookie-consent__switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-consent__switch-track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.1);
  transition: background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.cookie-consent__switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cookie-consent__switch input:checked + .cookie-consent__switch-track {
  background: var(--gradient-primary, linear-gradient(135deg, #059669, #10b981));
  box-shadow: 0 0 20px rgba(5, 150, 105, 0.4);
}

.cookie-consent__switch input:checked + .cookie-consent__switch-track::after {
  transform: translateX(20px);
}

.cookie-consent__switch input:focus-visible + .cookie-consent__switch-track {
  outline: 2px solid var(--color-primary, #059669);
  outline-offset: 2px;
}

body.cookie-consent-open {
  overflow: hidden;
}

.footer--premium .footer__legal-btn {
  font-size: var(--text-sm);
  color: rgba(148, 163, 184, 0.95);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer--premium .footer__legal-btn:hover {
  color: #6ee7b7;
}

@media (max-width: 520px) {
  .cookie-consent__stage {
    width: calc(100vw - var(--space-4, 1rem));
    bottom: max(var(--space-3, 0.75rem), env(safe-area-inset-bottom, 0px));
  }

  .cookie-consent__btn {
    min-width: 100%;
  }

  .cookie-consent__actions--settings .cookie-consent__btn {
    min-width: 100%;
  }

  .cookie-consent__category {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .cookie-consent__category .cookie-consent__switch,
  .cookie-consent__category .cookie-consent__always {
    grid-column: 2;
    justify-self: end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent__aurora,
  .cookie-consent__orb,
  .cookie-consent__icon {
    animation: none;
  }

  .cookie-consent__panel {
    transition: opacity 0.2s ease;
  }

}