/* ═══════════════════════════════════════════════════════════════════════════
   IMMERSA LANDING v3 — Token Overrides (cyan accent · old brand palette)
   ───────────────────────────────────────────────────────────────────────────
   Loaded INSTEAD OF tokens.css. Keeps the new layout/components but swaps
   the visual language back to the original cyan/gold Immersa brand.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Base surface — original Immersa navy ────────────────────────── */
  --c-bg:          #05080f;
  --c-surface:     #0c1220;
  --c-surface-2:   #151f35;
  --c-surface-3:   #1e2d4a;
  --c-border:      #151f35;
  --c-border-soft: rgba(30, 45, 74, 0.5);
  --c-border-strong: #1e2d4a;

  /* ─── Text ──────────────────────────────────────────────────────── */
  --c-text:        #dce8f5;
  --c-text-muted:  #9aafcc;
  --c-text-dim:    #6b7e9e;

  /* ─── Brand — cyan primary, gold secondary ─────────────────────── */
  --c-accent:      #00e5ff;
  --c-accent-hi:   #66f0ff;
  --c-accent-dim:  #00a8bf;
  --c-accent-soft: rgba(0, 229, 255, 0.12);
  --c-accent-glow: rgba(0, 229, 255, 0.22);
  --c-gold:        #d4a843;
  --c-gold-soft:   rgba(212, 168, 67, 0.12);

  /* ─── Signal ────────────────────────────────────────────────────── */
  --c-success:     #00c48c;
  --c-warn:        #d4a843;
  --c-danger:      #ff4d6d;
  --c-info:        #7c5cff;

  /* ─── Elevation ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 0 0 1px var(--c-accent), 0 12px 32px rgba(0, 229, 255, 0.22);
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);

  /* ─── Radii ─────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ─── Spacing ───────────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* ─── Typography — Sora + Tajawal + Space Mono (old stack) ──────── */
  --f-sans:    'Tajawal', 'SF Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Sora', 'Tajawal', system-ui, sans-serif;
  --f-mono:    'Space Mono', 'SF Mono', 'Consolas', monospace;

  /* ─── Motion ────────────────────────────────────────────────────── */
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ─── Layout ────────────────────────────────────────────────────── */
  --max-content: 1200px;
  --max-narrow:  880px;
  --max-reading: 68ch;
  --gutter-mobile: 1.5rem;
  --gutter-desktop: 3rem;

  /* ─── Z-index ───────────────────────────────────────────────────── */
  --z-sticky: 50;
  --z-drawer: 150;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ─── Section rhythm ────────────────────────────────────────────── */
  --section-py-mobile:  3rem;
  --section-py-desktop: 6rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ─── v3 extras — grid background + orbs (from old design) ───────── */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-decor .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.18;
}
.bg-decor .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.bg-decor .orb1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(0,229,255,0.10), transparent 70%);
  top: -200px; right: -150px;
  animation: orbFloat 14s ease-in-out infinite;
}
.bg-decor .orb2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(124,92,255,0.08), transparent 70%);
  bottom: -150px; left: -100px;
  animation: orbFloat 18s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(30px,-40px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-decor .orb { animation: none; }
}

/* Ensure page content sits above bg decoration without clobbering elements
   that need their own positioning (drawer=fixed, modal=fixed, back-top=fixed). */
body > main,
body > header.topbar,
body > footer.footer,
body > a.skip-link {
  position: relative;
  z-index: 1;
}
/* Put bg-decor behind everything */
.bg-decor { z-index: 0; }

/* v3 portal-mark (Immersa logo) sizing helper */
.portal-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4));
}

/* v3 hero: portal sits right under the topbar, not deep inside the section.
   Override the shared .section--hero top padding when a topmark is in play. */
.hero.section--hero { padding-block-start: var(--s-4) !important; }
@media (min-width: 768px) {
  .hero.section--hero { padding-block-start: var(--s-5) !important; }
}

/* Wrapper that anchors the portal-mark right under the topbar */
.hero__topmark {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--s-3) var(--s-5);
}
@media (min-width: 768px) {
  .hero__topmark {
    padding-block: var(--s-4) var(--s-6);
  }
}

/* Large animated hero portal — centered, rotating rings, pulsing core */
.portal-mark--hero-lg {
  display: block;
  width: clamp(140px, 18vw, 220px);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  filter: drop-shadow(0 0 48px rgba(0, 229, 255, 0.3));
  animation: heroGlow 4s ease-in-out infinite;
  overflow: visible;
}
/* Rotations handled by SMIL <animateTransform> inside the SVG for
   universal mobile support (iOS Safari, Android WebView). CSS here only
   handles halo/core scale pulses + decorative filters. */
.portal-mark--hero-lg .pm-orbit circle {
  filter:
    drop-shadow(0 0 2px rgba(184, 251, 255, 0.9))
    drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
}

/* Halo + core use CSS scale animations — transform-box: view-box ensures
   the origin maps to viewBox coords (50px, 50px) consistently on iOS. */
.portal-mark--hero-lg .pm-halo,
.portal-mark--hero-lg .pm-core {
  transform-box: view-box;
  transform-origin: 50px 50px;
}
.portal-mark--hero-lg .pm-halo {
  animation: pmHalo 3s ease-in-out infinite;
}
.portal-mark--hero-lg .pm-core {
  animation: pmCore 2.4s ease-in-out infinite;
}

@keyframes heroGlow {
  0%,100% { filter: drop-shadow(0 0 48px rgba(0, 229, 255, 0.30)); }
  50%     { filter: drop-shadow(0 0 72px rgba(0, 229, 255, 0.55)); }
}
@keyframes pmHalo {
  0%,100% { opacity: 0.45; transform: scale(1); }
  50%     { opacity: 0.85; transform: scale(1.18); }
}
@keyframes pmCore {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(0.88); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-mark--hero-lg,
  .portal-mark--hero-lg .pm-halo,
  .portal-mark--hero-lg .pm-core {
    animation: none !important;
  }
  /* Pause SMIL animations for reduced-motion users */
  .portal-mark--hero-lg animateTransform {
    animation-play-state: paused;
  }
}

/* Immersa wordmark — Sora light with accent "a" (old identity) */
.brand-word {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.brand-word b {
  color: var(--c-accent);
  font-weight: 600;
}

/* v3-specific section label (monospace cyan comment) */
.sec-lbl {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
}
.sec-lbl::before { content: '// '; opacity: 0.6; }

/* v3 button primary override — cyan with glow */
.btn--primary {
  --btn-bg: var(--c-accent) !important;
  --btn-fg: #051018 !important;
  --btn-border: var(--c-accent) !important;
  --btn-hover-bg: var(--c-accent-hi) !important;
}
.btn--primary:hover {
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18), 0 8px 32px rgba(0, 229, 255, 0.3) !important;
}

/* Featured package ribbon → gold (second accent) */
.ribbon {
  background: var(--c-gold) !important;
  color: #1a1300 !important;
}
.pkg--featured {
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 1px var(--c-accent), var(--shadow-lg) !important;
  background: linear-gradient(180deg, var(--c-surface) 0%, rgba(0, 229, 255, 0.05) 100%) !important;
}

/* Hero demo glow */
.hero__demo {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), var(--shadow-lg) !important;
}

/* CTA band → cyan gradient (was gold) */
.cta-band {
  background: linear-gradient(135deg, #00b8d4 0%, #00e5ff 55%, #66f0ff 100%) !important;
  color: #051018 !important;
}
.cta-band h2 { color: #051018 !important; }
.cta-band p  { color: #0a1a22 !important; }
.btn--dark {
  --btn-bg: #051018 !important;
  --btn-fg: #e9fbff !important;
  --btn-border: #051018 !important;
  --btn-hover-bg: #000 !important;
}
.btn--outline-dark {
  --btn-bg: transparent !important;
  --btn-fg: #051018 !important;
  --btn-border: #051018 !important;
}

/* Comparison table cyan highlight */
.cmp thead th.col--us {
  background: rgba(0, 229, 255, 0.12) !important;
  color: var(--c-accent) !important;
}
.cmp td.col--us {
  background: rgba(0, 229, 255, 0.04) !important;
  color: var(--c-accent-hi) !important;
}
.cmp .check { color: var(--c-accent) !important; }

/* Pull quote → cyan */
blockquote.pull {
  color: var(--c-accent) !important;
}
blockquote.pull::before,
blockquote.pull::after {
  background: var(--c-accent) !important;
}

/* Section eyebrow + head labels → cyan */
.section__head .eyebrow,
.t-label,
.t-accent {
  color: var(--c-accent) !important;
}

/* Package price amount → cyan */
.pkg__price .amount {
  color: var(--c-accent) !important;
}

/* Step number → cyan */
.step__num {
  color: var(--c-accent) !important;
  border-bottom-color: var(--c-accent) !important;
}

/* Link underlines in FAQ body etc. → cyan */
.accordion a { color: var(--c-accent); }
.legal a     { color: var(--c-accent); }

/* Active nav link underline → cyan */
.topbar__nav a.active { color: var(--c-accent); }
.topbar__nav a.active::after { background: var(--c-accent); }

/* Lang switch — cyan "عربي" */
.lang-switch b { color: var(--c-accent); }

/* Testimonial placeholder — cyan */
.testimonial-placeholder {
  border-color: var(--c-accent) !important;
  background: var(--c-accent-soft) !important;
}
.testimonial-placeholder h3 {
  color: var(--c-accent-hi) !important;
}

/* Hero em-underline → cyan */
.hero h1 em { color: var(--c-accent) !important; }
.hero h1 em::after { background: var(--c-accent) !important; }

/* Check list bullets (in brand coloring) */
.pkg__features li::before {
  color: var(--c-accent) !important;
  background: var(--c-accent-soft) !important;
}
.plan__features li::before {
  color: var(--c-accent) !important;
}