/* GENERATED by scripts/build-css.js — DO NOT EDIT.
 * Edit the source files in css/ and run `npm run build:css`.
 * Order: main.css → hero.css → loader.css → morph-logo.css → stats.css → grid.css → contact.css → responsive.css → showcase.css → features.css → tracker.css → offline-exam.css → about.css → devmode.css
 */

/* ══════════════════ main.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   NEXWAVE — MAIN STYLES
   Premium Dark Glassmorphism + Neon Accents
   ═══════════════════════════════════════════════════ */

/* SEO/A11y — content visible to crawlers & screen readers but not visually rendered */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:root {
  /* Base Dark Palette */
  --bg-deep: #06060e;
  --bg-dark: #0a0a18;
  --bg-surface: rgba(255, 255, 255, 0.03);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.07);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-hover: rgba(255, 255, 255, 0.15);

  /* Neon Accent — RGB channels for alpha compositing */
  --neon-primary: #e040fb;
  --neon-primary-rgb: 224, 64, 251;
  --neon-secondary: #7c4dff;
  --neon-secondary-rgb: 124, 77, 255;
  --neon-glow: rgba(var(--neon-primary-rgb), 0.4);
  --neon-glow-soft: rgba(var(--neon-primary-rgb), 0.15);
  --neon-gradient: linear-gradient(135deg, var(--neon-primary) 0%, var(--neon-secondary) 100%);

  /* Text — all three levels pass WCAG AA on --bg-deep (#06060e) */
  --text-primary: rgba(255, 255, 255, 0.95);   /* ~18:1 contrast */
  --text-secondary: rgba(255, 255, 255, 0.75); /* ~11:1 contrast */
  --text-muted: rgba(255, 255, 255, 0.7);      /* ~9.8:1 contrast (WCAG AAA) */

  /* Typography */
  --font-ar: 'Tajawal', sans-serif;

  /* Spacing */
  --section-padding: clamp(40px, 5vh, 64px);
  --container-width: 1200px;
  --container-padding: clamp(20px, 5vw, 40px);

  /* Glass */
  --glass-blur: 20px;
  --glass-blur-heavy: 40px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Dynamic theme color (morphed by JS) */
  --theme-hue: 290;
  --theme-color: hsl(var(--theme-hue), 80%, 65%);
  --theme-glow: hsla(var(--theme-hue), 80%, 65%, 0.3);

  /* Design System Color Tokens (for teacher themes) */
  --token-magenta: #e040fb;
  --token-magenta-hue: 290;
  --token-cyan: #00bcd4;
  --token-cyan-hue: 187;
  --token-orange: #ff9800;
  --token-orange-hue: 36;
  --token-green: #4caf50;
  --token-green-hue: 122;
  --token-blue: #2196f3;
  --token-blue-hue: 207;
  --token-red: #ff5722;
  --token-red-hue: 14;
  --token-purple: #9c27b0;
  --token-purple-hue: 291;
  --token-teal: #009688;
  --token-teal-hue: 174;
}

/* ═══════ RESET ═══════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-ar);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  direction: rtl;
  /* Continuous gradient background — no background-attachment:fixed for mobile scroll perf */
  background: linear-gradient(
    180deg,
    var(--bg-deep) 0%,
    #0a0a1a 15%,
    #0d0818 30%,
    #0a0a1a 50%,
    #080614 70%,
    #0a0a1a 85%,
    var(--bg-deep) 100%
  );
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ═══════ FOCUS STYLES ═══════ */
:focus-visible {
  outline: 2px solid var(--neon-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove default outline — :focus-visible handles it accessibly */
:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════ UTILITY ═══════ */
.section-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-badge {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 100px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--neon-primary);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-title {
  font-family: var(--font-ar);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.section-desc {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

/* ═══════ SKIP LINK ═══════ */
#main-content:focus {
  outline: none; /* Prevent giant focus ring around whole content area */
}

/* Visually hidden until focused — keyboard users jump past nav instantly */
.skip-link {
  position: fixed;
  top: -100%;
  right: 50%;
  transform: translateX(50%);
  z-index: 99999;
  padding: 10px 24px;
  background: var(--neon-primary);
  color: #000;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 0 0 12px 12px;
  transition: top 0.2s var(--ease-out-quart);
  white-space: nowrap;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #000;
  outline-offset: -4px;
}

/* ═══════ NAVIGATION ═══════ */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 var(--container-padding);
  transition: all 0.5s var(--ease-out-expo);
}

/* Stay transparent on scroll — no glass bar, no border */
.nav-bar.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.nav-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo-img {
  height: 36px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(var(--neon-primary-rgb), 0.2));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Adapt: 44px min touch target height for nav links */
.nav-link {
  padding: 10px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.25s var(--ease-out-quart);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
  background: var(--bg-glass);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--neon-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--neon-glow);
}

.nav-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 1001;
}

.nav-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out-expo);
}

.nav-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.nav-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(6, 6, 14, 0.97);
  backdrop-filter: blur(var(--glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-quart);
}

.mobile-menu.active {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Adapt: 44px min-height touch targets on mobile links */
.mobile-link {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 12px 40px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  transition: all 0.2s var(--ease-out-quart);
}

.mobile-link:hover,
.mobile-link:focus-visible {
  color: var(--text-primary);
  background: var(--bg-glass);
}

.mobile-link:active {
  transform: scale(0.97);
  background: rgba(var(--neon-primary-rgb), 0.06);
}

/* ═══════ SCROLLBAR ═══════ */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--neon-primary-rgb), 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--neon-primary-rgb), 0.5);
}

/* Polish: use transform for GPU-accelerated positioning (no top/left reflow) */
.cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--neon-primary-rgb), 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  top: -160px;
  left: -160px;
  will-change: transform;
  transition: opacity 0.5s var(--ease-out-expo);
  opacity: 0;
}

.cursor-glow.visible {
  opacity: 1;
}

@media (hover: none) {
  .cursor-glow { display: none; }
}

/* ═══════ SELECTION ═══════ */
::selection {
  background: rgba(var(--neon-primary-rgb), 0.3);
  color: var(--text-primary);
}

/* ═══════ FOOTER ═══════ */
.footer {
  padding: 40px var(--container-padding);
  border-top: 1px solid var(--border-glass);
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo {
  height: 28px;
  opacity: 0.4;
  filter: drop-shadow(0 0 8px rgba(var(--neon-primary-rgb), 0.15));
  transition: opacity 0.3s;
}

.footer-logo:hover {
  opacity: 0.7;
}

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

/* ═══════ PAGE LOADER ═══════ */
/* Loader styles moved to css/loader.css */

/* ═══════ ANIMATION FALLBACK ═══════ */
/* Ensure elements are visible if JS fails or for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .feature-card,
  .teacher-grid-card,
  .contact-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* No-JS fallback */
.no-js .stat-card,
.no-js .feature-card,
.no-js .teacher-grid-card,
.no-js .contact-card {
  opacity: 1;
  transform: none;
}

/* ═══════ NOISE TEXTURE OVERLAY ═══════ */
/* Subtle grain — opacity very low, content-visibility:hidden keeps it off compositing tree */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ═══════ OFFSCREEN ANIMATION GATING ═══════
   app.js بيحط .anims-off على أي قسم خارج الشاشة (+هامش) — كل الأنيميشنات
   الـinfinite جواه تتجمد بدل ما تفضل ترسم كل frame على الفاضي.
   (كان السبب في انشغال الـmain thread ~100% باستمرار على الموبايل) */
.anims-off,
.anims-off *,
.anims-off::before,
.anims-off::after,
.anims-off *::before,
.anims-off *::after {
  animation-play-state: paused !important;
}


/* ══════════════════ hero.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   HERO SECTION — Aurora Rift
   ═══════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Background container ── */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ══════════ Creative Hero Background ══════════
   Layered approach:
   1. hero-mesh  — slowly rotating conic gradient (color shift)
   2. hero-orb   — three floating blurred orbs (parallax drift)
   3. hero-grid  — subtle perspective grid pulse
   4. hero-grain — film-grain texture (static overlay for depth)
*/

/* 1. Conic mesh — chromatic liquid (rotates + breathes) */
.hero-mesh {
  position: absolute;
  inset: -40%;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(224, 64, 251, 0.32) 0deg,
      rgba(124, 77, 255, 0.28) 80deg,
      rgba(6, 6, 14, 0.0)     160deg,
      rgba(251, 4, 144, 0.30) 240deg,
      rgba(124, 77, 255, 0.26) 320deg,
      rgba(224, 64, 251, 0.32) 360deg);
  filter: blur(80px) saturate(1.6);
  animation:
    meshRotate 12s linear infinite,
    meshBreathe 5s ease-in-out infinite;
  will-change: transform, filter;
  opacity: 0.95;
}

@keyframes meshRotate {
  to { transform: rotate(360deg) scale(var(--mesh-scale, 1)); }
}

/* Bolder pulse: changes scale + saturation so the colors feel alive */
@keyframes meshBreathe {
  0%, 100% { --mesh-scale: 1;     filter: blur(80px) saturate(1.4)  brightness(1); }
  50%      { --mesh-scale: 1.25;  filter: blur(110px) saturate(2.1) brightness(1.25); }
}

/* Register the custom prop so it can animate smoothly */
@property --mesh-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* 2. Floating orbs — each drifts on a different Lissajous-ish path */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  will-change: transform;
  pointer-events: none;
}

.hero-orb-1 {
  width: 52vw; height: 52vw;
  left: 12%; top: 14%;
  background: radial-gradient(circle, rgba(251, 4, 144, 0.75), rgba(251, 4, 144, 0) 65%);
  animation: orbDrift1 10s ease-in-out infinite;
}

.hero-orb-2 {
  width: 44vw; height: 44vw;
  right: 10%; top: 22%;
  background: radial-gradient(circle, rgba(124, 77, 255, 0.70), rgba(124, 77, 255, 0) 65%);
  animation: orbDrift2 12s ease-in-out infinite;
}

.hero-orb-3 {
  width: 38vw; height: 38vw;
  left: 42%; bottom: 4%;
  background: radial-gradient(circle, rgba(224, 64, 251, 0.65), rgba(224, 64, 251, 0) 65%);
  animation: orbDrift3 14s ease-in-out infinite;
}

/* Wider drift paths so motion is clearly visible without feeling jittery */
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  20%      { transform: translate(22%, -16%)   scale(1.35); }
  40%      { transform: translate(-14%, 20%)  scale(0.75); }
  60%      { transform: translate(-20%, -10%)  scale(1.25); }
  80%      { transform: translate(10%, 18%)    scale(0.9); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  25%      { transform: translate(-18%, 16%)   scale(1.35); }
  50%      { transform: translate(16%, -14%)   scale(0.72); }
  75%      { transform: translate(-8%, -12%)  scale(1.2); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  30%      { transform: translate(-16%, -20%)  scale(1.4); }
  60%      { transform: translate(18%, 12%)   scale(0.78); }
  90%      { transform: translate(-10%, 18%)  scale(1.15); }
}

/* 3. Perspective grid — removed per design direction (was visually noisy) */
.hero-grid { display: none; }

/* 4. Film grain — procedural via SVG turbulence
   Two layers stacked: rapid jitter (grainShift) + slow shimmer wave (grainShimmer)
   gives the texture a cinema-grade "alive" feel without becoming noisy. */
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:
    grainShift 0.6s steps(5) infinite,
    grainShimmer 9s ease-in-out infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, -1%); }
  100% { transform: translate(0, 0); }
}

/* Slow wave that pulses opacity + contrast — micro-detail readers can feel */
@keyframes grainShimmer {
  0%, 100% { opacity: 0.08; filter: contrast(1)    brightness(1); }
  50%      { opacity: 0.22; filter: contrast(1.55) brightness(1.25); }
}

/* Second grain layer — finer, slower drift, opposite phase shimmer.
   Produces an interference pattern so the texture never feels static. */
.hero-grain::after {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='340'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n2)'/></svg>");
  mix-blend-mode: soft-light;
  opacity: 0.5;
  animation: grainDrift 14s linear infinite, grainShimmer 9s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-3%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ── Hero Content ── */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.hero-title,
.hero-subtitle {
  text-align: center;
  width: 100%;
}

/* Reserved space for the morphing logo */
.hero-logo-slot {
  width: clamp(300px, 46vw, 480px);
  aspect-ratio: 449 / 182;
  margin-bottom: 36px;
  pointer-events: none;
}

/* ── Title — whispered, single line ── */
.hero-title {
  font-family: var(--font-ar);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  opacity: 0.88;
  margin-bottom: 12px;
  color: var(--text-primary, #f4f4ff);
}

.hero-subtitle {
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.7;
  opacity: 0.75;
}

/* ── Scroll indicator ── */
.hero-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0.5;
  animation: scrollBounce 2s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease;
}

.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--neon-primary), transparent);
  transition: box-shadow 0.6s ease, height 0.6s cubic-bezier(.2,.7,.2,1);
}

.hero-scroll-indicator span {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(6px); opacity: 0.65; }
}

/* When user makes their first scroll, indicator briefly pulses & glows */
.hero-scroll-indicator.is-pulsing {
  animation: scrollHintPulse 1.1s cubic-bezier(.2,.7,.2,1) 1;
}
.hero-scroll-indicator.is-pulsing .hero-scroll-line {
  height: 60px;
  box-shadow: 0 0 18px var(--neon-primary), 0 0 36px rgba(224, 64, 251, 0.5);
}
.hero-scroll-indicator.is-pulsing span {
  color: #fff;
  text-shadow: 0 0 12px rgba(224, 64, 251, 0.7);
}

@keyframes scrollHintPulse {
  0%   { transform: translateY(0)   scale(1);    opacity: 0.5; }
  35%  { transform: translateY(-6px) scale(1.18); opacity: 1;   }
  100% { transform: translateY(0)   scale(1);    opacity: 0.5; }
}

/* ── Scroll hint glow — full-screen radial flash on first scroll ── */
.hero-scroll-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%,
      rgba(224, 64, 251, 0.55) 0%,
      rgba(124, 77, 255, 0.30) 35%,
      rgba(6, 6, 14, 0)        70%);
  mix-blend-mode: screen;
  filter: blur(40px);
  will-change: opacity, transform;
}

.hero-scroll-glow.is-flashing {
  animation: scrollGlowFlash 1.4s cubic-bezier(.2,.7,.2,1) 1;
}

@keyframes scrollGlowFlash {
  0%   { opacity: 0;    transform: translateY(20%) scale(0.85); }
  35%  { opacity: 1;    transform: translateY(0)   scale(1.05); }
  100% { opacity: 0;    transform: translateY(-15%) scale(1.15); }
}

/* ── Particles (kept) ── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--neon-primary);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 8s linear infinite;
}

@keyframes particleFloat {
  0%   { opacity: 0;    transform: translateY(110vh) scale(0); }
  8%   { opacity: 0.55; }
  92%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translateY(-25vh) scale(1.4); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh,
  .hero-orb,
  .hero-grid,
  .hero-grain,
  .hero-grain::after { animation: none; }
  .hero-scroll-indicator,
  .hero-scroll-indicator.is-pulsing,
  .hero-scroll-glow.is-flashing { animation: none; }
  .hero-scroll-glow { display: none; }
  .particle { animation: none; display: none; }
}

/* Mobile: freeze all hero background animations — saves battery + GPU on the
   most thermally-constrained devices, and matches user request for a static
   hero on phones. Desktop keeps the full cinematic background. */
@media (max-width: 767px) {
  .hero-mesh,
  .hero-orb,
  .hero-grid,
  .hero-grain,
  .hero-grain::after { animation: none !important; }
  .particle { animation: none !important; display: none !important; }
}


/* ══════════════════ loader.css ══════════════════ */
/* ═══════════════════ PAGE LOADER — cinematic sub-second reveal ═══════════════════
 * Timeline (~0.95s total, driven by GSAP in js/loader.js):
 *   0.00–0.20  backdrop gradient + stage lift-in (scale 0.94 → 1, blur 12 → 0)
 *   0.05–0.55  wordmark writes LTR (expo.out easing, animates --reveal)
 *   0.45–0.75  wordmark trails off with blur + x-slide (no second mask)
 *   0.55–0.95  icon hands off to hero-logo slot as a shared element
 *   0.95       loaderDone; loader fades out (handled by morph-logo)
 * ─────────────────────────────────────────────────────────── */

/* ═══════ قفل السكرول أثناء اللودر ═══════
   من غير القفل ده المستخدم يقدر يسحب لتحت في أول ثانية، والصفحة لسه
   بتتبني (قِيس على الموقع الحقيقي: أول رسم عند 1.4s لكن الطول الكامل
   للصفحة مبيوصلش غير 1.77s والكروت 2.14s). ساعتها بيخرج لمنطقة لسه
   ما اتعملهاش layout — Safari على الآيفون بيرسمها **أبيض**، واللي بيبان
   إنه "الموقع بيهنّج وبيستنى الصور". القفل بيتشال مع .loader-complete،
   وفي loader.js مهلة أمان 6 ثواني بتشيله مهما حصل أي خطأ.

   من غير `height` هنا: أول تجربة حطّت `height: 100%` على html/body أثناء
   القفل، فالمستند كان بيتقلّص لشاشة واحدة وبعدين يتمدد لطوله الكامل عند
   فك القفل = قفزة تخطيط ضخمة (CLS قفز من 0.011 لـ1.05). `overflow: hidden`
   لوحده بيمنع سحب المستخدم من غير ما يلمس طول الصفحة. */
html:not(.loader-done),
html:not(.loader-done) body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(224, 64, 251, 0.10), transparent 58%),
    radial-gradient(100% 70% at 50% 58%, rgba(124, 77, 255, 0.08), transparent 62%),
    var(--bg-deep, #06060e);
  opacity: 1;
  will-change: opacity;
}

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

/* Soft aura behind the mark — fades with the loader */
.page-loader::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(62vw, 720px);
  height: min(62vw, 720px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(251, 4, 144, 0.18), transparent 62%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Stage — LTR flex: icon on left, wordmark on right */
.page-loader-stage {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  height: clamp(88px, 15vw, 150px);
  direction: ltr;
  will-change: transform, opacity, filter;
  opacity: 0;
}

/* ── Icon (magenta NW mark) ── */
.loader-icon {
  height: 100%;
  width: auto;
  display: block;
  transform-origin: center center;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 0 28px rgba(251, 4, 144, 0.45));
}

/* ── Wordmark wrapper — revealed via animatable --reveal custom property ── */
.loader-wordmark-wrap {
  height: 100%;
  overflow: visible;
  --reveal: 0;
  -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--reveal) * 100%),
      transparent calc(var(--reveal) * 100% + 5%),
      transparent 100%);
  mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 calc(var(--reveal) * 100%),
      transparent calc(var(--reveal) * 100% + 5%),
      transparent 100%);
  will-change: opacity, filter, transform;
}

.loader-wordmark {
  height: 100%;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.18));
}

/* Register --reveal so GSAP (and CSS) can animate it smoothly */
@property --reveal {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* ── Reduced motion: snap to rendered state, skip effects ── */
@media (prefers-reduced-motion: reduce) {
  .page-loader-stage { opacity: 1; }
  .loader-wordmark-wrap {
    --reveal: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


/* ══════════════════ morph-logo.css ══════════════════ */
/* ═══════════════════ MORPHING LOGO — shared-element transition ═══════════════════
 * Fixed-position SVG logo that animates between the hero slot and the nav anchor
 * as the user scrolls. Controlled from js/morph-logo.js via GSAP ScrollTrigger.
 * ─────────────────────────────────────────────────────────── */

.morph-logo {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  pointer-events: none;
  z-index: 1100; /* above nav (1000) so it stays visible while docking */
  opacity: 0;
  will-change: transform, width;
}

.morph-logo.active {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.morph-logo img,
.morph-logo svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(224, 64, 251, 0.35));
}

/* Nav anchor — reserves the destination slot in the navbar.
   Empty, but sized so its bounding box is what the morph-logo docks to.
   Aspect matches nexwave-full.svg (449×182 ≈ 2.47:1). */
.nav-logo-anchor {
  width: 110px;
  height: 44px;
  flex-shrink: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .morph-logo { transition: opacity 0.3s ease; }
}


/* ══════════════════ stats.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   STATS SECTION
   ═══════════════════════════════════════════════════ */

.stats {
  padding: var(--section-padding) 0;
  position: relative;
}

.stats::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(var(--neon-secondary-rgb), 0.05) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}

.stat-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-quart);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-primary-rgb), 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-quart);
}

.stat-card:hover {
  border-color: rgba(var(--neon-primary-rgb), 0.12);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

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

.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(var(--neon-primary-rgb), 0.08);
  color: var(--neon-primary);
  margin-bottom: 20px;
}

.stat-number {
  font-family: var(--font-ar);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  direction: ltr;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}


/* ══════════════════ grid.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   TEACHERS SECTION — Horizontal scroll track
   Simple, stable, works everywhere.
   ═══════════════════════════════════════════════════ */

.teachers-grid-section {
  padding: var(--section-padding) 0;
  position: relative;
}

.teachers-grid-section .section-container {
  margin-bottom: 40px;
}

.teachers-grid-section .section-badge,
.teachers-grid-section .section-title {
  text-align: center;
  display: block;
}

/* ═══════ WRAPPER: positions track + nav arrows ═══════ */
.teachers-carousel {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
}


/* ═══════ SCROLL TRACK ═══════ */
.teachers-stage {
  display: flex;
  gap: 28px;
  /* الكروت بتترسم بعد fetch لـ teachers.json، فقبل ما توصل البيانات كانت
     الحاوية بارتفاع صفر وكل اللي تحتها بيقفز ~600px لما الكروت تظهر —
     على شبكة بطيئة ده كان CLS ~1.0 (اتصاد من تقرير web_vitals الحقيقي).
     نحجز الارتفاع المقاس مقدماً. القيم مقاسة فعلياً لكل مقاس. */
  min-height: 816px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 190px 20px 28px;          /* top: room for the larger floating photo + hover scale */
  /* hide scrollbar visually */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.teachers-stage::-webkit-scrollbar {
  display: none;
}

/* ═══════ TEACHER CARD ═══════ */
.teacher-grid-card {
  flex: 0 0 320px;
  scroll-snap-align: center;
  position: relative;
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    hsla(var(--card-hue, 290), 45%, 16%, 0.45) 0%,
    hsla(var(--card-hue, 290), 30%, 10%, 0.25) 50%,
    var(--bg-glass) 100%
  );
  border: 1px solid hsla(var(--card-hue, 290), 60%, 55%, 0.22);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 240px 24px 28px;          /* larger top padding — photo got bigger and sits higher */
  transition:
    transform 0.35s var(--ease-out-quart),
    border-color 0.35s var(--ease-out-quart),
    box-shadow 0.35s var(--ease-out-quart);
  overflow: visible;
  cursor: default;
}

.teacher-grid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at 50% 0%,
    hsla(var(--card-hue, 290), 80%, 60%, 0.18),
    transparent 65%
  );
  pointer-events: none;
}

.teacher-grid-card:hover {
  transform: translateY(-6px);
  border-color: hsla(var(--card-hue, 290), 70%, 60%, 0.5);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 50px hsla(var(--card-hue, 290), 80%, 55%, 0.28);
  /* Active card rises above its neighbours so the enlarged photo + screens
     never get clipped by the adjacent card on the side. */
  z-index: 5;
}

/* ═══════ FLOATING STAGE (photo + screenshots behind it) ═══════ */
.teacher-card-stage {
  position: absolute;
  top: -150px;                    /* deeper so the scaled-up photo has headroom */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 320px;
  height: 380px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* V-fanned screenshots */
.teacher-card-screens {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.teacher-card-screen {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 150px;
  height: 305px;
  border-radius: 28px;
  overflow: hidden;
  border: 1.5px solid hsla(var(--card-hue, 290), 70%, 65%, 0.3);
  background: var(--bg-dark);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.5),
    0 0 32px hsla(var(--card-hue, 290), 80%, 55%, 0.24);
  opacity: 0;
  transform-origin: 50% 90%;
  transform: rotate(0deg) scale(0.5);
  transition:
    transform 0.7s var(--ease-out-expo),
    opacity 0.5s var(--ease-out-expo);
}

.teacher-card-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card-screen-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px;
  background: linear-gradient(
    135deg,
    var(--bg-dark) 0%,
    hsla(var(--card-hue, 290), 40%, 20%, 0.3) 100%
  );
}

/* Fan out on hover — screens push further out AND scale up so the V
   reads cleanly around the larger photo */
.teacher-grid-card:hover .teacher-card-screen.screen-left {
  opacity: 1;
  transform: translate(-104px, 18px) rotate(-17deg) scale(1.18);
}
.teacher-grid-card:hover .teacher-card-screen.screen-right {
  opacity: 1;
  transform: translate(104px, 18px) rotate(17deg) scale(1.18);
}

/* ملحوظة: كانت هنا قاعدة @media (hover: none) بتخلي لقطات الشاشة ظاهرة
   (opacity: 1) على كل الكروت في أجهزة اللمس. دي كانت بقايا من قبل تصميم
   .is-active، وكانت بتلغيه: النتيجة إن التليفون بيرسم لقطات الـ69 كارت كلها
   بدل كارت واحد. التصميم المقصود موجود في responsive.css
   (.teacher-grid-card.is-active .teacher-card-screen) — الكارت اللي في النص
   بس هو اللي بيفرد المروحة. */

/* ═══════ FLOATING PHOTO — frameless, just a soft glow behind the teacher ═══════ */
.teacher-card-photo {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 240px;
  height: 340px;
  overflow: visible;
  transform-origin: 50% 0%;         /* anchor head at top — scale grows downward so head never clips */
  background: transparent;
  border: none;
  border-radius: 0;
  z-index: 3;
  transition: transform 0.4s var(--ease-out-expo), filter 0.4s var(--ease-out-expo);
  /* Themed ambient halo sitting behind the person (no hard frame, no box) */
  filter:
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 34px hsla(var(--card-hue, 290), 90%, 60%, 0.35));
}

/* Soft radial aura behind the photo — replaces the old frame */
.teacher-card-photo::before {
  content: '';
  position: absolute;
  inset: -10% -8% -4%;
  background: radial-gradient(
    ellipse at 50% 48%,
    hsla(var(--card-hue, 290), 90%, 60%, 0.35) 0%,
    hsla(var(--card-hue, 290), 80%, 45%, 0.18) 32%,
    transparent 70%
  );
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}

.teacher-grid-card:hover .teacher-card-photo {
  transform: scale(1.18);
  filter:
    drop-shadow(0 32px 60px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 50px hsla(var(--card-hue, 290), 100%, 65%, 0.6));
}

.teacher-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* show the full teacher, not a cropped frame */
  object-position: center bottom;
  border-radius: 0;
  /* Fade bottom edge so it blends into the card without a hard line */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.teacher-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6.5rem;
  font-weight: 800;
  font-family: var(--font-ar);
  color: hsla(var(--card-hue, 290), 70%, 85%, 1);
  text-shadow: 0 4px 24px hsla(var(--card-hue, 290), 80%, 45%, 0.9);
  background: radial-gradient(
    ellipse at 50% 45%,
    hsla(var(--card-hue, 290), 70%, 30%, 0.35) 0%,
    transparent 70%
  );
  border-radius: 0;
}

/* ═══════ CARD BODY ═══════ */
.teacher-card-body {
  position: relative;
  z-index: 1;
  text-align: center;
  direction: rtl;
}

/* Inner wrapper that hosts the faded app-icon background. Spans from
   the subject line down through the description — that's the band the
   user wants the icon to sit behind. */
.teacher-card-body-inner {
  position: relative;
  z-index: 0;
  padding: 4px 0 8px;
  isolation: isolate; /* contain the icon's blend/opacity to this band */
}

.teacher-card-logo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  border-radius: 18px;
}

.teacher-card-logo-bg img {
  width: 78%;
  max-width: 240px;
  max-height: 82%;
  object-fit: contain;
  object-position: center;
  opacity: 0.12;
  filter:
    saturate(1.05)
    drop-shadow(0 0 26px hsla(var(--card-hue, 290), 80%, 55%, 0.45));
  /* Fade edges into the card so it reads as a watermark */
  -webkit-mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 40%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
          mask-image: radial-gradient(
    ellipse at 50% 50%,
    #000 40%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  transition: opacity 0.35s var(--ease-out-quart);
}

.teacher-grid-card:hover .teacher-card-logo-bg img {
  opacity: 0.2;
}

.teacher-card-name {
  font-family: var(--font-ar);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 28px;                  /* breathing room between photo and name */
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta row: app icon + logo (only rendered when at least one is present) */
.teacher-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.teacher-card-app-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid hsla(var(--card-hue, 290), 70%, 60%, 0.3);
  background: linear-gradient(
    135deg,
    hsla(var(--card-hue, 290), 80%, 60%, 0.2),
    hsla(var(--card-hue, 290), 60%, 25%, 0.08)
  );
  box-shadow: 0 4px 12px hsla(var(--card-hue, 290), 80%, 40%, 0.3);
}

.teacher-card-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card-subject {
  font-size: 0.85rem;
  font-weight: 600;
  color: hsla(var(--card-hue, 290), 70%, 80%, 1);
  padding: 5px 14px;
  border-radius: 100px;
  background: hsla(var(--card-hue, 290), 70%, 50%, 0.12);
  border: 1px solid hsla(var(--card-hue, 290), 70%, 60%, 0.28);
  white-space: nowrap;
}

/* Subject shown inline under name — no frame, smaller text */
.teacher-card-subject-inline {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-ar);
  color: hsla(var(--card-hue, 290), 60%, 72%, 0.9);
  margin-top: 2px;
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.02em;
}

.teacher-card-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-glass);
  background: var(--bg-surface);
}

.teacher-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* Description */
.teacher-card-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 32px;                /* extra gap before the platform buttons */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em;
}

/* Platform links */
.teacher-card-platforms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 4;
  margin-top: 4px;
}

.teacher-card-platform {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 11px;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-ar);
  text-decoration: none;
  transition: all 0.25s var(--ease-out-quart);
  pointer-events: auto;
  min-height: 38px;
}

.teacher-card-platform:hover {
  border-color: hsla(var(--card-hue, 290), 80%, 60%, 0.55);
  color: hsla(var(--card-hue, 290), 80%, 85%, 1);
  box-shadow: 0 0 14px hsla(var(--card-hue, 290), 80%, 50%, 0.35);
  transform: translateY(-2px);
}

.teacher-card-platform svg {
  width: 13px;
  height: 13px;
}

/* ═══════ NAVIGATION ARROWS ═══════ */
.teachers-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition:
    background 0.3s var(--ease-out-quart),
    border-color 0.3s var(--ease-out-quart),
    box-shadow 0.3s var(--ease-out-quart),
    transform 0.3s var(--ease-out-quart);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.teachers-nav-btn svg {
  width: 22px;
  height: 22px;
}

.teachers-nav-btn:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  transform: translateY(-50%) scale(1.08);
}

.teachers-nav-btn:active {
  transform: translateY(-50%) scale(0.94);
}

/* RTL: prev (→) on right, next (←) on left */
.teachers-nav-prev {
  right: 0;
}
.teachers-nav-next {
  left: 0;
}

/* ═══════ DOTS INDICATOR ═══════ */
.teachers-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 4px;
}

.teachers-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    transform 0.4s var(--ease-out-expo),
    background 0.4s var(--ease-out-expo),
    border-color 0.4s var(--ease-out-expo),
    box-shadow 0.4s var(--ease-out-expo);
}

.teachers-dot:hover {
  background: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.3);
}

.teachers-dot.is-active {
  transform: scale(1.6);
  background: var(--neon-primary);
  border-color: transparent;
  box-shadow: 0 0 10px rgba(var(--neon-primary-rgb), 0.7);
}

/* ═══════ SECURE IMAGE STATES ═══════ */
.secure-img-loading { opacity: 0; transition: opacity 0.4s ease; }
.secure-img-loaded  { opacity: 1; }
.secure-img-failed  { opacity: 0.15; filter: grayscale(1); }

/* ═══════ EMPTY STATE ═══════ */
.teachers-empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.8;
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  .teacher-grid-card,
  .teacher-card-photo,
  .teacher-card-screen,
  .teachers-nav-btn,
  .teachers-dot {
    transition-duration: 0.01ms !important;
  }
  .teachers-stage {
    scroll-behavior: auto;
  }
}


/* ══════════════════ contact.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   CONTACT SECTION — Cinematic, cohesive, interactive
   ═══════════════════════════════════════════════════ */

.contact {
  padding: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}

/* Ambient animated aurora behind the whole section */
.contact::before,
.contact::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}
.contact::before {
  top: 10%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(var(--neon-primary-rgb), 0.18) 0%, transparent 70%);
  animation: contactAurora1 14s ease-in-out infinite;
}
.contact::after {
  bottom: 5%;
  left: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(var(--neon-secondary-rgb), 0.15) 0%, transparent 70%);
  animation: contactAurora2 18s ease-in-out infinite;
}

@keyframes contactAurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.1); }
}
@keyframes contactAurora2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.08); }
}

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

.contact .section-title {
  text-align: center;
  display: block;
}

.contact .section-desc {
  text-align: center;
  margin: 0 auto 56px;
}

/* ─── Cards row ─── */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 360px));
  justify-content: center;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

.contact-card {
  --card-c1: var(--neon-primary);
  --card-c2: var(--neon-secondary);
  --card-glow: rgba(var(--neon-primary-rgb), 0.35);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 28px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: transform 0.5s var(--ease-out-expo),
              border-color 0.4s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-expo);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}

/* Per-channel accent colors */
.contact-card[data-channel="whatsapp"] {
  --card-c1: #25d366;
  --card-c2: #128c7e;
  --card-glow: rgba(37, 211, 102, 0.45);
}
.contact-card[data-channel="email"] {
  --card-c1: #e040fb;
  --card-c2: #7c4dff;
  --card-glow: rgba(224, 64, 251, 0.4);
}

/* Animated gradient border on hover */
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--card-c1), var(--card-c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  z-index: 2;
  pointer-events: none;
}

/* Glow halo behind card on hover */
.contact-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), var(--card-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  z-index: 0;
  pointer-events: none;
}

.contact-card:hover {
  transform: translateY(-8px);
  border-color: transparent;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    0 0 50px var(--card-glow);
}

.contact-card:hover::before { opacity: 1; }
.contact-card:hover::after  { opacity: 0.55; }

/* Status pill at top */
.contact-card-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-c1);
  box-shadow: 0 0 0 0 var(--card-c1);
  animation: statusPulse 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 var(--card-c1); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px transparent; opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* Icon */
.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--card-c1);
  transition: transform 0.5s var(--ease-out-expo),
              background 0.4s,
              box-shadow 0.4s,
              color 0.4s;
  position: relative;
  z-index: 1;
}

.contact-card:hover .contact-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--card-c1), var(--card-c2));
  color: #fff;
  box-shadow: 0 12px 32px var(--card-glow);
  border-color: transparent;
}

/* Text block */
.contact-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.contact-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.3s;
}

.contact-value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  font-family: 'Outfit', 'Tajawal', sans-serif;
  transition: color 0.3s;
}

.contact-card:hover .contact-value { color: var(--card-c1); }

/* CTA pill (slides in on hover) */
.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--card-c1), var(--card-c2));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 6px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out-expo),
              transform 0.4s var(--ease-out-expo),
              box-shadow 0.4s;
  box-shadow: 0 8px 24px transparent;
}

.contact-cta svg {
  transition: transform 0.4s var(--ease-out-quart);
}

.contact-card:hover .contact-cta {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 8px 24px var(--card-glow);
}

.contact-card:hover .contact-cta svg {
  transform: translateX(-4px); /* RTL → arrow points left, slides further left */
}

/* ─── Divider ─── */
.contact-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 360px;
  margin: 48px auto 28px;
  position: relative;
  z-index: 1;
}

.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.divider-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Social Icons ─── */
.contact-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.social-icon {
  --social-c1: var(--neon-primary);
  --social-c2: var(--neon-secondary);
  --social-glow: rgba(var(--neon-primary-rgb), 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text-secondary);
  transition: transform 0.45s var(--ease-out-expo),
              color 0.4s,
              border-color 0.4s,
              box-shadow 0.45s var(--ease-out-expo);
  position: relative;
  overflow: visible;
}

.social-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--social-c1), var(--social-c2));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-expo);
  z-index: 0;
}

.social-icon svg {
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-out-quart);
}

.social-icon:hover {
  transform: translateY(-6px) rotate(-4deg);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4),
              0 0 32px var(--social-glow);
}

.social-icon:hover::before { opacity: 1; }
.social-icon:hover svg     { transform: scale(1.15); }

/* Tooltip */
.social-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(10, 10, 24, 0.95);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-family: 'Outfit', 'Tajawal', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-expo),
              transform 0.3s var(--ease-out-expo);
  z-index: 5;
}

.social-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(10, 10, 24, 0.95);
}

.social-icon:hover .social-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Brand colors per platform */
.social-icon[data-platform="facebook"]  { --social-c1: #1877f2; --social-c2: #0a5dc7; --social-glow: rgba(24,119,242,0.5); }
.social-icon[data-platform="instagram"] { --social-c1: #f09433; --social-c2: #dc2743; --social-glow: rgba(220,39,67,0.5); }
.social-icon[data-platform="tiktok"]    { --social-c1: #25f4ee; --social-c2: #fe2c55; --social-glow: rgba(254,44,85,0.5); }

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .contact-cards {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 18px;
  }
  .contact-card {
    padding: 28px 22px 24px;
  }
  .contact-icon {
    width: 60px;
    height: 60px;
  }
  .contact-divider {
    margin: 36px auto 22px;
  }
  .social-icon {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 380px) {
  .contact-value { font-size: 0.78rem; }
  .contact-socials { gap: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contact::before,
  .contact::after,
  .status-dot {
    animation: none;
  }
  .contact-card,
  .contact-icon,
  .social-icon,
  .contact-cta {
    transition-duration: 0.01ms;
  }
}


/* ══════════════════ responsive.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   RESPONSIVE DESIGN — Adapt + Polish + Quieter
   ═══════════════════════════════════════════════════ */

/* ═══════ PERFORMANCE: content-visibility for below-fold ═══════ */
/* Disabled: content-visibility can cause rendering issues with GSAP animations */
/* 
.about,
.showcase-fullscreen,
.teachers-grid-section,
.stats,
.features,
.contact {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
*/

/* ═══════ POLISH: :active touch feedback for interactive cards ═══════ */
.feature-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 0.1s;
}

.stat-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 0.1s;
}

.contact-card:active {
  transform: translateY(-2px) scale(0.99);
  transition-duration: 0.1s;
}

/* Adapt: platform links — ensure 44px touch target height */
.platform-link {
  min-height: 44px;
}

/* ═══════ TABLET (max-width: 1024px) ═══════ */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Tablet: 2-col features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero: logo 60% viewport width */
  .hero-logo-slot {
    width: 60vw;
    max-width: 360px;
  }

  /* Rift: reduce to 4 lines */
  .hero-rift .rift-line-5,
  .hero-rift .rift-line-6 {
    display: none;
  }
}

/* ═══════ MOBILE LARGE (max-width: 768px) ═══════ */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  /* موبايل: قسم "أعمالنا" (الـshowcase) متشال بالكامل — القسم نفسه
     ولينكاته في القوايم. showcase.js كمان مبيبنيش حاجة على الموبايل. */
  #showcase {
    display: none !important;
  }
  .mobile-link[data-section="showcase"],
  .nav-link[data-section="showcase"] {
    display: none !important;
  }

  /* ═══════ موبايل: أقسام السينما الساكنة (بدل الـpin + scrub) ═══════
     animations.js بيوقف الـScrollTrigger على الموبايل، والقواعد دي بترجّع
     الـstage لتدفق الصفحة الطبيعي بدل position:fixed.

     مهم: القواعد دي كانت متعلّقة بكلاس .mobile-static اللي JS بيضيفه —
     يعني التخطيط كان بيستنى تحميل وتنفيذ animations.js. على شبكة بطيئة ده
     كان بيحصل بعد ثانية أو اتنين من أول رسم، فالأقسام كانت بتاخد أبعاد
     مؤقتة (طول الصفحة اتقاس 844 ثم 10918 ثم 7284) = CLS ~1.05. دلوقتي
     بتتطبق من الـmedia query على طول، فالتخطيط صح من أول رسم. */
  .tracker-cinema,
  .offline-exam-cinema {
    height: auto !important;
  }

  /* display:block مهم — الـstage الأصلي flex-direction:row فكان بيحط
     الهيدر جنب المحتوى بدل ما يكون فوقه لما بقى في التدفق الطبيعي. */
  .tracker-stage,
  .offline-exam-stage {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 60px 16px 40px !important;
  }

  /* الهيدر كان absolute جوه stage بارتفاع شاشة — يرجع طبيعي في التدفق */
  .tracker-stage .tracker-header,
  .offline-exam-stage .offline-exam-header {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
  }

  .tracker-stage .tracker-phone-container,
  .offline-exam-stage .offline-exam-canvas,
  .offline-exam-stage .offline-exam-links {
    position: static !important;
    transform: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .offline-exam-stage .offline-exam-links {
    margin-top: 28px !important;
  }

  .offline-exam-stage .offline-exam-scene {
    margin: 0 auto !important;
  }

  /* الموكب بارتفاع ثابت كان بيقص الرسالة التالتة لما الرسايل الـ٣ بيبانوا
     مرة واحدة (الحالة الساكنة) — يمتد حسب المحتوى بدل ما يقص. */
  .tracker-stage .tracker-phone {
    height: auto !important;
    aspect-ratio: auto !important;
    width: min(340px, 86vw) !important;
    padding-bottom: 20px !important;
  }

  /* ═══════ موبايل: وقف الـbackdrop-filter والـblur الضخم ═══════
     backdrop-filter بيجبر المتصفح يقرا الخلفية ويعمل blur من جديد مع كل
     frame أثناء السكرول — أغلى حاجة على GPU الموبايل، وبتسبب البلاطات
     البيضا/الرسم المقطّع. كارت المعلم لوحده كان 69 نسخة كل واحدة blur(20px)
     في كاروسيل بيتحرك. الخلفيات نصف الشفافة بتفضل زي ما هي. */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Adapt: 44×44px touch target for hamburger button */
  .nav-menu-btn {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  /* Hero: logo 75% viewport width */
  .hero-logo-slot {
    width: 75vw;
    max-width: 280px;
  }

  /* Nav anchor: smaller docked logo */
  .nav-logo-anchor {
    width: 90px;
    height: 27px;
  }

  /* Aurora: reduce blur for performance */
  .hero-aurora {
    filter: blur(30px);
  }

  /* Rift: reduce to 3 lines */
  .hero-rift .rift-line-4,
  .hero-rift .rift-line-5,
  .hero-rift .rift-line-6 {
    display: none;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 380px;
  }

  /* Quieter: less padding on mobile stat cards */
  .stat-card {
    padding: 28px 20px;
  }

  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .contact-cards {
    flex-direction: column;
    align-items: center;
  }

  .contact-card {
    width: 100%;
    max-width: 340px;
    padding: 28px 32px;
  }

  /* Showcase Mobile */
  .showcase-viewport {
    min-height: 580px;
  }

  .showcase-phones {
    height: 320px;
  }

  .showcase-phone {
    width: 140px;
    height: 280px;
    border-radius: 20px;
  }

  .showcase-phone-left {
    transform: translateX(80px) translateZ(-30px) rotateY(8deg);
  }

  .showcase-phone-right {
    transform: translateX(-80px) translateZ(-30px) rotateY(-8deg);
  }

  .showcase-teacher-photo {
    width: 120px;
    height: 120px;
  }

  .showcase-teacher-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  /* Track: smaller padding on mobile */
  .teachers-stage {
    padding: 120px 8px 20px;
    gap: 16px;
  }

  /* الارتفاع المحجوز للحاوية أصغر على الموبايل (شوف التعليق في grid.css) */
  .teachers-stage {
    min-height: 587px;
  }

  .teacher-grid-card {
    flex: 0 0 290px;
    padding: 180px 20px 22px;
  }

  .teacher-card-stage {
    width: 290px;
    height: 290px;
    top: -90px;
  }

  .teacher-card-photo {
    width: 190px;
    height: 260px;
  }

  .teacher-card-screen {
    width: 128px;
    height: 258px;
  }

  /* Nav arrows: smaller, hug the section edges */
  .teachers-nav-btn {
    width: 42px;
    height: 42px;
  }
  .teachers-nav-prev { right: 8px; }
  .teachers-nav-next { left: 8px; }

  .teachers-nav-btn svg {
    width: 18px;
    height: 18px;
  }

  .about-stats-row {
    justify-content: center;
    gap: 24px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Dev Panel Mobile */
  .dev-panel {
    width: 95%;
    max-height: 90vh;
  }

  .dev-field-row {
    grid-template-columns: 1fr;
  }

  .dev-panel-footer {
    flex-wrap: wrap;
  }

  .dev-btn {
    flex: 1;
    min-width: 120px;
    text-align: center;
    min-height: 44px;
  }
}

/* ═══════ MOBILE SMALL (max-width: 480px) ═══════ */
@media (max-width: 480px) {
  :root {
    --section-padding: 40px;
  }

  /* Hero logo slot: smaller on tiny screens */
  .hero-logo-slot {
    width: 80vw;
    max-width: 240px;
    margin-bottom: 20px;
  }

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

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

  .feature-card {
    padding: 22px 18px;
  }

  .features-headline {
    font-size: clamp(1.8rem, 9vw, 2.4rem);
  }

  /* Track: small phones */
  .teachers-stage {
    padding: 100px 12px 18px;
    gap: 14px;
  }

  .teacher-grid-card {
    flex: 0 0 262px;
    padding: 160px 16px 20px;
  }

  .teacher-card-stage {
    width: 260px;
    height: 250px;
    top: -78px;
  }

  .teacher-card-photo {
    width: 168px;
    height: 226px;
  }

  .teacher-card-screen {
    width: 110px;
    height: 222px;
  }

  .teacher-card-name {
    font-size: 1.2rem;
    margin-top: 22px;
  }

  .teacher-card-desc {
    font-size: 0.82rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 3em;
  }

  .showcase-phones {
    height: 220px;
  }

  .showcase-phone {
    width: 100px;
    height: 200px;
    border-radius: 12px;
  }

  .showcase-phone-left {
    transform: translateX(45px) translateZ(-20px) rotateY(5deg);
  }

  .showcase-phone-right {
    transform: translateX(-45px) translateZ(-20px) rotateY(-5deg);
  }

  .showcase-teacher-photo {
    width: 100px;
    height: 100px;
  }

  /* Adapt: smaller platform links on tiny screens but keep touch target */
  .showcase-platforms {
    gap: 8px;
  }

  .platform-link {
    padding: 10px 14px;
    font-size: 0.8rem;
  }

  .about-glass-card {
    padding: 24px 20px;
  }

  /* Quieter: reduce section-title size on very small screens */
  .section-title {
    font-size: clamp(1.7rem, 6vw, 2.5rem);
  }
}

/* ═══════ VERY SMALL (max-width: 360px) ═══════ */
@media (max-width: 360px) {
  :root {
    --section-padding: 36px;
    --container-padding: 16px;
  }

  .mobile-link {
    font-size: 1.2rem;
    padding: 12px 28px;
  }
}

/* ═══════ TOUCH DEVICE OPTIMIZATIONS ═══════ */
@media (hover: none) {
  /* Touch: lift the centered card so its V-fan screenshots render above
     the neighbouring cards (which would otherwise overlap them). */
  .teacher-grid-card.is-active {
    z-index: 5;
  }

  /* Touch: V-screenshots always visible on active card (no hover needed) */
  .teacher-grid-card.is-active .teacher-card-screen.screen-left {
    opacity: 1;
    transform: translate(-72px, 20px) rotate(-15deg) scale(0.95);
  }
  .teacher-grid-card.is-active .teacher-card-screen.screen-right {
    opacity: 1;
    transform: translate(72px, 20px) rotate(15deg) scale(0.95);
  }

  /* Touch: kill the :hover grow on tap — fingers leave the hover state
     stuck and the photo/screens balloon past the static mobile layout. */
  .teacher-grid-card:hover {
    transform: none;
  }
  .teacher-grid-card:hover .teacher-card-photo {
    transform: none;
    filter:
      drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 34px hsla(var(--card-hue, 290), 90%, 60%, 0.35));
  }
  .teacher-grid-card:hover .teacher-card-screen.screen-left {
    transform: translate(-72px, 20px) rotate(-15deg) scale(0.95);
  }
  .teacher-grid-card:hover .teacher-card-screen.screen-right {
    transform: translate(72px, 20px) rotate(15deg) scale(0.95);
  }

  .feature-card:hover {
    transform: none;
  }

  .contact-card:hover {
    transform: none;
  }

  /* Ensure hover glows don't stick on touch */
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ═══════ HIGH DPI SCREENS ═══════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Higher quality rendering for retina */
  .nav-logo-img,
  .hero-logo-img,
  .footer-logo {
    image-rendering: -webkit-optimize-contrast;
  }
}

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

  html {
    scroll-behavior: auto;
  }

  /* Keep content-visibility but skip animation */
  .hero-glow,
  .particle {
    animation: none;
    opacity: 0.1;
  }

  /* Aurora: static */
  .hero-aurora {
    animation: none;
  }

  /* Rift lines: static, visible */
  .hero-rift .rift-line {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.35;
  }

  /* Morph logo: instant transitions */
  .morph-logo {
    transition: none;
  }
}

/* ═══════ LANDSCAPE MOBILE ═══════ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100svh;
    padding-top: 80px;
  }

  .hero-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  /* Hero logo slot: landscape adjustment */
  .hero-logo-slot {
    width: 50vw;
    max-width: 200px;
    margin-bottom: 16px;
  }
}


/* ══════════════════ showcase.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   TEACHERS SHOWCASE — Scroll-driven per-teacher reveal
   Phone stays sticky, moves left↔right, spins 360° Y
   Info panel appears on the opposite side
   ═══════════════════════════════════════════════════ */

/* ═══════ SCROLL CONTAINER — tall, drives the pin ═══════ */
.showcase-scroll-container {
  position: relative;
  /* height set dynamically by JS: n * 100vh */
}

/* ═══════ STAGE — sticky CSS fallback so the phone stays put before
   GSAP/ScrollTrigger finishes booting on slow networks. Once GSAP loads,
   ScrollTrigger.create({pin: stage}) upgrades it to position:fixed. ═══════ */
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stage uses an "early-pin" class added by JS the moment the Hero starts
   exiting (scroll > 1px). It detaches the stage from the scroll-container
   so the phone is fixed in place from the very first scroll, eliminating
   the black gap that would otherwise appear before ScrollTrigger boots. */
.showcase-stage.is-early-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ═══════ BACKGROUND LAYERS ═══════ */
.showcase-bg-morph {
  position: absolute;
  inset: -200px;
  border-radius: 50%;
  filter: blur(180px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  transition: background 1.2s ease, opacity 1s ease;
}

.showcase-subject-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

/* ═══════ SECTION HEADING — centered near top, RTL ═══════ */
.showcase-heading {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  direction: rtl;
  pointer-events: none;
}

.showcase-heading .section-badge {
  margin-bottom: 10px;
}

.showcase-heading .section-title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

/* ═══════ PHONE CENTER — positioned via transform for GPU acceleration ═══════ */
.showcase-phone-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8; /* above info-track (z-index:6) so hover events reach it */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transform-based positioning: translate(-50%,-50%) + translateX(Xvw) set by JS */
  transform: translate(-50%, -50%) translateX(-28vw);
  will-change: transform;
  transition: none; /* GSAP handles movement */
  pointer-events: none; /* container is just a positioner; let wrapper handle events */
}

/* Gradient glow behind phone */
.showcase-phone-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease, opacity 0.8s ease;
}

.showcase-phone-glow.active {
  opacity: 0.55;
}

.showcase-phone-wrapper {
  position: relative;
  width: 420px;
  height: 680px;
  z-index: 1;
  overflow: visible;
  pointer-events: auto; /* wrapper receives hover/click for screen swap */
  cursor: pointer;
}

.iphone3d-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iphone3d-container canvas {
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto;
}

.iphone3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-family: var(--font-ar);
  transition: opacity 0.5s ease;
  z-index: 5;
}

.iphone3d-loading.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.iphone3d-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-glass);
  border-top-color: var(--neon-primary);
  border-radius: 50%;
  animation: iphone3dSpin 0.8s linear infinite;
}

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

/* ═══════ INFO TRACK — full viewport, panels positioned by JS ═══════ */
.showcase-info-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 6;
  pointer-events: none;
}

/* ═══════ INFO PANEL — one per teacher ═══════ */
.showcase-info-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px;
  direction: rtl;
  pointer-events: none;
  /* Hidden by default — GSAP reveals */
  opacity: 0;
  will-change: transform, opacity;
}

.showcase-info-panel.is-active {
  pointer-events: all;
}

/* Panel on the left side (phone is on right) — RTL: left = text side */
.showcase-info-panel.side-left {
  left: 0;
  right: auto;
  text-align: right;
  padding-right: 60px;
  padding-left: 32px;
}

/* Panel on the right side (phone is on left) */
.showcase-info-panel.side-right {
  right: 0;
  left: auto;
  text-align: right;
  padding-right: 60px;
  padding-left: 32px;
}

/* Subject badge — sits beside name */
.showcase-subject-badge {
  display: inline-block;
  padding: 0;
  font-family: var(--font-ar);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
  vertical-align: middle;
}

/* Teacher name */
.showcase-teacher-name {
  font-family: var(--font-ar);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 0;
}

/* Teacher description */
.showcase-teacher-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 420px;
  line-height: 1.9;
  margin-bottom: 28px;
}

/* ═══════ TEACHER CONTENT LAYOUT — photo on top, name beneath ═══════ */
.showcase-teacher-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}

.showcase-teacher-top {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 2px;
}

/* ═══════ TEACHER PHOTO — frameless, themed shadow, bottom fade ═══════ */
.showcase-teacher-photo-wrap {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 255px;
}

.showcase-teacher-photo-glow {
  position: absolute;
  inset: -24px -18px -8px -18px;
  border-radius: 50%;
  filter: blur(44px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 1s ease, opacity 0.8s ease;
  animation: showcasePhotoGlowPulse 4s ease-in-out infinite;
}

.showcase-info-panel .showcase-teacher-photo-glow {
  opacity: 0.75;
}

@keyframes showcasePhotoGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-teacher-photo-glow { animation: none; }
}

/* Frameless media: no border, no background, top fully lit, bottom fades */
.showcase-teacher-photo-media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.6) 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.6) 80%, transparent 100%);
}

.showcase-teacher-photo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: drop-shadow(0 -4px 10px rgba(255, 255, 255, 0.08));
}

.showcase-teacher-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  font-size: 4rem;
  font-weight: 800;
  font-family: var(--font-ar);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

/* ═══════ PLATFORM LINKS ═══════ */
.showcase-platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.platform-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-ar);
  transition: all 0.25s var(--ease-out-quart);
}

.platform-link:hover {
  background: var(--bg-glass-hover);
  border-color: var(--neon-primary);
  color: var(--text-primary);
  box-shadow: 0 0 20px var(--neon-glow-soft);
  transform: translateY(-2px);
}

.platform-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   LIGHTWEIGHT CSS iPHONE 15 PRO MAX MOCKUP — Mobile only
   - Hidden on desktop (3D Three.js takes over)
   - Pure CSS: no GLB, no WebGL, no Three.js parse
   - Dynamic Island, titanium-style frame, side buttons, glare
   ═══════════════════════════════════════════════════ */
.iphone-css-mockup {
  display: none; /* hidden on desktop, shown on mobile via @media */
}

.iphone-css-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 52px;
  background:
    linear-gradient(145deg, #4a4a52 0%, #2c2c34 25%, #1a1a20 55%, #2c2c34 85%, #45454d 100%);
  padding: 11px;
  box-shadow:
    /* Inner titanium edge */
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    /* Outer drop shadow */
    0 30px 70px rgba(0, 0, 0, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

/* Side buttons — subtle titanium ridges on the frame */
.iphone-css-side-btn {
  position: absolute;
  background: linear-gradient(90deg, #2a2a30 0%, #4a4a52 50%, #2a2a30 100%);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Action button (top-left in RTL phone = top-right of frame visually,
   but iPhones have it on the LEFT side. Here we place on the right edge
   because phone is mirrored / RTL flipped via translate. Keep simple: left side. */
.iphone-css-side-btn--mute {
  left: -2px;
  top: 110px;
  width: 4px;
  height: 30px;
}

.iphone-css-side-btn--vol-up {
  left: -2px;
  top: 160px;
  width: 4px;
  height: 52px;
}

.iphone-css-side-btn--vol-down {
  left: -2px;
  top: 222px;
  width: 4px;
  height: 52px;
}

.iphone-css-side-btn--power {
  right: -2px;
  top: 165px;
  width: 4px;
  height: 78px;
}

/* The actual screen — rounded inset where the screenshot lives */
.iphone-css-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #000;
  box-shadow:
    inset 0 0 0 2px #0a0a0e,
    inset 0 0 24px rgba(0, 0, 0, 0.55);
}

/* Dynamic Island — pill-shaped notch */
.iphone-css-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 30px;
  background: #000;
  border-radius: 18px;
  z-index: 5;
  box-shadow:
    inset 0 1px 1px rgba(40, 40, 50, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Dynamic Island camera dot — small accent */
.iphone-css-island::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a3a 0%, #050508 60%, #000 100%);
  box-shadow: inset 0 0 2px rgba(80, 80, 120, 0.4);
}

/* The screenshot image — fills the screen */
.iphone-css-screenshot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.iphone-css-screenshot:not([src]),
.iphone-css-screenshot[src=""] {
  opacity: 0;
}

/* Subtle screen glare — diagonal sheen across the glass */
.iphone-css-screen-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 68%,
      rgba(255, 255, 255, 0.05) 85%,
      rgba(255, 255, 255, 0) 100%
    );
  z-index: 4;
  mix-blend-mode: screen;
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1100px) {
  .showcase-phone-wrapper {
    width: 360px;
    height: 580px;
  }

  .showcase-phone-glow {
    width: 380px;
    height: 380px;
  }

  .showcase-info-panel {
    width: 50%;
  }

  .showcase-teacher-photo-wrap {
    width: 160px;
    height: 205px;
  }

  .showcase-teacher-content {
    gap: 14px;
  }

  .showcase-teacher-top {
    gap: 18px;
  }
}

@media (max-width: 768px) {
  /* Mobile: BIG phone as the stage/backdrop, teacher photo standing in front
     of it like a hero spotlit on stage. Phone is the canvas, teacher is the star.
     Phone stays static on mobile (no spin/parallax/floating) for performance. */
  .showcase-phone-center {
    left: 50% !important;
    top: 38%;
    transform: translate(-50%, -50%) !important;
    z-index: 1; /* behind the photo */
  }

  .showcase-phone-wrapper {
    width: 280px;
    height: 600px;
    transform: rotate(-2deg);
    transform-origin: center center;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
    opacity: 0.95;
  }

  /* Mobile: 3D Three.js container OFF, lightweight CSS mockup ON */
  .iphone3d-container {
    display: none !important;
  }

  .iphone-css-mockup {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .showcase-phone-glow {
    width: 460px;
    height: 460px;
    opacity: 0.7 !important;
    filter: blur(85px);
  }

  /* Info track holds the photo + text in front of the phone */
  .showcase-info-track {
    width: 100%;
    top: 0;
    bottom: auto;
    height: 100%;
    z-index: 2;
  }

  .showcase-info-panel {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0;
    height: 100%;
    padding: 0 24px 24px;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
  }

  .showcase-teacher-content {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
  }

  .showcase-teacher-top {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-bottom: 6px;
  }

  /* Hero photo: large, in front of the phone, full body visible */
  .showcase-teacher-photo-wrap {
    position: relative;
    width: 320px;
    height: 440px;
    margin: 0 auto;
    z-index: 3; /* above the phone */
    pointer-events: none;
  }

  .showcase-teacher-photo-media {
    /* Soft fade only at the very bottom so feet blend into panel */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.6) 92%, transparent 100%);
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
  }

  .showcase-teacher-photo-glow {
    inset: -10px -30px -10px -30px;
    filter: blur(50px);
    opacity: 1;
  }

  .showcase-teacher-name-row {
    margin-top: 2px;
    margin-bottom: 8px !important;
    gap: 10px !important;
  }

  .showcase-platforms {
    margin-top: 4px;
    gap: 10px;
  }

  .showcase-teacher-photo-placeholder {
    font-size: 2.2rem;
  }

  .showcase-subject-badge {
    align-self: center;
  }

  .showcase-teacher-name {
    font-size: clamp(1.3rem, 5vw, 1.7rem);
  }

  .showcase-teacher-desc {
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .showcase-heading {
    display: none;
  }

  .platform-link {
    padding: 9px 16px;
    font-size: 0.8rem;
  }

  .showcase-platforms {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .showcase-phone-center {
    top: 36%;
  }

  .showcase-phone-wrapper {
    width: 310px;
    height: 555px;
  }

  .showcase-phone-glow {
    width: 400px;
    height: 400px;
  }

  .showcase-info-panel {
    padding: 0 18px 20px;
  }

  .showcase-teacher-photo-wrap {
    width: 280px;
    height: 380px;
  }

  .showcase-teacher-photo-placeholder {
    font-size: 1.8rem;
    padding-top: 10px;
  }

  .platform-link {
    padding: 8px 14px;
    font-size: 0.75rem;
    border-radius: 10px;
  }
}


/* ══════════════════ features.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   FEATURES — AI Cinema (Pinned Scroll-Driven, 2 Scenes)
   Scene 1: Upload dropzone
   Scene 2: PDF + Dashboard with Google-AI conic aura
   ═══════════════════════════════════════════════════ */

/* ═══════ OUTER SECTION ═══════ */
.features {
  position: relative;
  /* No vertical padding — pinned cinema sets its own height */
}

/* ═══════ PINNED CINEMA CONTAINER ═══════
   Tall container — drives the pin via ScrollTrigger (n * 100vh).
   JS sets height to 300vh on desktop, 220vh on tablet, auto on mobile. */
.features-cinema {
  position: relative;
  height: 250vh;
}

/* ═══════ STAGE — pinned by ScrollTrigger (NOT CSS sticky) ═══════ */
.features-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Custom property driven by JS — 0 → 1 over the pinned scroll */
  --p: 0;
  /* Per-scene props derived from --p via JS, also exposed for CSS */
  --upload-p: 0;   /* 0 → 1 within scene 1 */
  --results-p: 0;  /* 0 → 1 within scene 2 */
}

/* ═══════ AMBIENT BACKGROUND ═══════ */
.features-aurora {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(var(--neon-primary-rgb), 0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(var(--neon-secondary-rgb), 0.14), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(64, 196, 255, 0.06), transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.8s var(--ease-out-quart);
}

.features-grid-fx {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ═══════ HEADER — anchored top, sticky-feeling ═══════ */
.features-header {
  position: absolute;
  top: clamp(60px, 9vh, 110px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: min(720px, 92vw);
  pointer-events: none;
}

.features-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 100px;
  background: linear-gradient(135deg, rgba(var(--neon-primary-rgb), 0.14), rgba(var(--neon-secondary-rgb), 0.14));
  border: 1px solid rgba(var(--neon-primary-rgb), 0.3);
  color: var(--neon-primary);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.features-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-primary);
  box-shadow: 0 0 8px var(--neon-primary);
  animation: featuresDot 1.6s ease-in-out infinite;
}

@keyframes featuresDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.6); }
}

.features-headline {
  font-family: var(--font-ar);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.features-headline-accent {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary) 60%, #40c4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Subtle pulse to draw the eye to the number */
  filter: drop-shadow(0 0 24px rgba(var(--neon-primary-rgb), 0.35));
}

.features-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
  text-align: center;
}

.features-counter-label {
  font-size: 0.85em;
}

/* ═══════ SUB-LINE SWAP — two stacked lines, only one visible per scene ═══════ */
.features-sub-swap {
  position: relative;
  height: 2.6em;
  max-width: 560px;
  margin: 0 auto;
}

.features-sub {
  position: absolute;
  inset: 0;
  font-size: clamp(0.92rem, 1.55vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
}

.features-sub.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════ SCENE BASE — both scenes share this layout slot ═══════ */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(180px, 26vh, 240px); /* leave room for sticky header */
  padding-bottom: 60px;
  pointer-events: none;
  z-index: 5;
}

/* ═════════ SCENE 1: UPLOAD ═════════ */
.scene--upload {
  /* Visible from --p 0 → 0.5 — opacity driven by JS via custom property
     We compute --upload-p in JS as eased(--p / 0.5) clamped */
  opacity: calc(1 - max(0, (var(--p) - 0.42) / 0.13));
  transform: scale(calc(1 - max(0, (var(--p) - 0.42) / 0.13) * 0.04));
  filter: blur(calc(max(0, (var(--p) - 0.42) / 0.13) * 6px));
}

.drop-frame {
  position: relative;
  width: min(560px, 88vw);
  height: clamp(360px, 52vh, 460px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}

/* Animated dashed border — the dashes flow as upload-p increases */
.drop-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.drop-ring-rect {
  stroke: rgba(var(--neon-primary-rgb), 0.5);
  stroke-dasharray: 1.4 1;
  stroke-dashoffset: calc(var(--upload-p, 0) * -8);
  transition: stroke 0.4s, opacity 0.4s;
  filter: drop-shadow(0 0 6px rgba(var(--neon-primary-rgb), 0.4));
}

/* ── Empty state: icon + prompt — fades out as file slides in ── */
.drop-empty {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Fade out as upload-p crosses 0.55 */
  opacity: calc(1 - max(0, (var(--upload-p, 0) - 0.5) / 0.2));
  transform: translateY(calc(max(0, (var(--upload-p, 0) - 0.5)) * -20px));
  transition: none;
}

.drop-icon {
  position: relative;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(var(--neon-primary-rgb), 0.15), rgba(var(--neon-secondary-rgb), 0.15));
  border: 1px solid rgba(var(--neon-primary-rgb), 0.3);
  color: var(--neon-primary);
  box-shadow: 0 0 30px rgba(var(--neon-primary-rgb), 0.18);
  /* Bob/pulse synced with the pulse element */
  animation: dropIconBob 3s ease-in-out infinite;
}

.drop-icon svg {
  width: 38px;
  height: 38px;
}

.drop-icon-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  border: 1.5px solid rgba(var(--neon-primary-rgb), 0.4);
  animation: dropIconPulse 2.4s ease-out infinite;
}

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

@keyframes dropIconPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

.drop-label {
  font-family: var(--font-ar);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.drop-hint {
  font-family: var(--font-ar);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.drop-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.drop-badge {
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

/* ── File card — slides up from the bottom as upload-p crosses 0.5 ── */
.drop-file {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, calc((1 - max(0, min(1, (var(--upload-p, 0) - 0.4) / 0.5))) * 60px)) scale(calc(0.92 + max(0, min(1, (var(--upload-p, 0) - 0.4) / 0.5)) * 0.08));
  width: min(440px, 80%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(var(--neon-primary-rgb), 0.25);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(var(--neon-primary-rgb), 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 3;
  opacity: max(0, min(1, (var(--upload-p, 0) - 0.4) / 0.3));
  pointer-events: none;
}

.drop-file-icon {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--neon-primary-rgb), 0.4);
}

.drop-file-icon svg {
  width: 24px;
  height: 24px;
}

.drop-file-ext {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.5rem;
  font-weight: 800;
  background: #1a1520;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-family: 'Courier New', monospace;
}

.drop-file-body {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.drop-file-name {
  font-family: var(--font-ar);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: ltr;
  text-align: right;
}

.drop-file-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ar);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0 0 8px 0;
  justify-content: flex-end;
}

.drop-file-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.drop-file-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  position: relative;
}

.drop-file-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
  /* Width driven by JS via inline style (computed from upload-p) */
  width: calc(max(0%, min(100%, (var(--upload-p, 0) - 0.45) * 200%)));
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(var(--neon-primary-rgb), 0.6);
  transition: width 0.1s linear;
}

.drop-file-check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #81c784);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
  /* Appears only when bar full */
  opacity: max(0, min(1, (var(--upload-p, 0) - 0.85) / 0.1));
  transform: scale(calc(0.5 + max(0, min(1, (var(--upload-p, 0) - 0.85) / 0.1)) * 0.5));
}

.drop-file-check svg {
  width: 16px;
  height: 16px;
}

/* ═════════ SCENE 2: RESULTS ═════════ */
.scene--results {
  /* Appear from --p 0.42 onwards. opacity scales with results-p */
  opacity: calc(max(0, min(1, (var(--p) - 0.4) / 0.18)));
  transform: scale(calc(0.96 + max(0, min(1, (var(--p) - 0.4) / 0.18)) * 0.04));
  pointer-events: none;
}

.scene--results.is-active {
  pointer-events: auto;
}

.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 3.5vw, 56px);
  width: min(1100px, 92vw);
}

/* ═══════ PANELS — equal-sized, balanced ═══════ */
.panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}

.panel--pdf {
  /* RTL: PDF on the right side (visually left in flex order) */
  position: relative;
  transform:
    rotate(calc(-1.5deg + max(0, min(1, (var(--p) - 0.55) / 0.2)) * 1.5deg))
    translateX(calc(max(0, min(1, (var(--p) - 0.4) / 0.2)) * 8px));
  transition: transform 0.05s linear;
}

/* Paper stack — three offset sheets behind the main card so it feels
   like a real document rather than a single floating chip. */
.pdf-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pdf-sheet {
  position: absolute;
  inset: 0;
  background: #e8e6dc;
  border-radius: 16px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pdf-sheet--1 {
  transform: translate(8px, 8px) rotate(2.2deg);
  background: #efede4;
  opacity: 0.92;
}

.pdf-sheet--2 {
  transform: translate(16px, 16px) rotate(4.5deg);
  background: #e2e0d6;
  opacity: 0.7;
}

.pdf-sheet--3 {
  transform: translate(22px, 24px) rotate(-3deg);
  background: #d8d6cc;
  opacity: 0.45;
}

/* Page indicator pill — pinned to the side of the PDF card so the
   document reads as multi-page, not a one-sheet preview. */
.pdf-pages {
  position: absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 10px 6px;
  background: rgba(10, 10, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  font-family: var(--font-ar);
}

.pdf-page {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}

.pdf-page.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
  box-shadow: 0 0 12px rgba(var(--neon-primary-rgb), 0.5);
}

.pdf-page-dots {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 0.5;
}

.pdf-card {
  position: relative;
  z-index: 1;
}

.panel--dash {
  transform: translateX(calc((1 - max(0, min(1, (var(--p) - 0.55) / 0.25))) * -40px));
  opacity: max(0, min(1, (var(--p) - 0.55) / 0.2));
}

/* ═══════ PDF CARD ═══════ */
.pdf-card {
  position: relative;
  background: #f5f4ee;
  border-radius: 16px;
  padding: 14px 14px 16px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  min-height: 320px;
}

.pdf-corner-tag {
  position: absolute;
  top: -8px;
  right: 16px;
  background: #1a1520;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 4;
}

.pdf-upload-badge {
  position: absolute;
  top: 12px;
  left: -6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary));
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 0 8px 8px 0;
  font-family: var(--font-ar);
  box-shadow: 0 4px 14px rgba(var(--neon-primary-rgb), 0.5);
  z-index: 4;
}

.pdf-upload-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

.pdf-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.pdf-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1a1520;
  font-family: var(--font-ar);
}

.pdf-meta {
  font-size: 0.62rem;
  color: #888;
  font-family: var(--font-ar);
}

.pdf-q {
  margin-bottom: 14px;
}

.pdf-q:last-child {
  margin-bottom: 0;
}

/* Desktop: tighter spacing + hide 3rd question to feel less cramped */
@media (min-width: 821px) {
  .pdf-q {
    margin-bottom: 8px;
  }
  .pdf-q[data-q="2"] {
    display: none;
  }
}

.pdf-q-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2a2a3a;
  margin-bottom: 6px;
  font-family: var(--font-ar);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdf-q-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2a2a3a;
  color: #fff;
  font-size: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pdf-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.pdf-opt {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #c8c6be, #d8d6ce);
}

/* ═══════ DASHBOARD CARD ═══════ */
.dash-card {
  position: relative;
  z-index: 2;
  border-radius: 22px;
  background: rgba(10, 10, 24, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding: 22px 20px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5);
  min-height: 380px;
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* macOS-style window-control dots (red/amber/green) — purely decorative,
   replaces a redundant header label. Keeps the topbar visually balanced. */
.dash-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dash-brand-dot:nth-child(1) { background: #ff5f57; }
.dash-brand-dot:nth-child(2) { background: #ffbd2e; }
.dash-brand-dot:nth-child(3) { background: #28c840; }

.dash-count {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(var(--neon-primary-rgb), 0.12);
  border: 1px solid rgba(var(--neon-primary-rgb), 0.28);
  font-family: var(--font-ar);
}

.dash-count-num {
  font-size: 0.85rem;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dash-count-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.dash-q-item {
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 9px;
  /* Stagger reveal: each item appears as results-p crosses its threshold */
  --qi-threshold: 0.6;
  opacity: max(0, min(1, (var(--p) - var(--qi-threshold)) / 0.06));
  transform: translateY(calc((1 - max(0, min(1, (var(--p) - var(--qi-threshold)) / 0.06))) * 12px));
}

.dash-q-item[data-qi="0"] { --qi-threshold: 0.62; }
.dash-q-item[data-qi="1"] { --qi-threshold: 0.7; }
.dash-q-item[data-qi="2"] { --qi-threshold: 0.78; }

.dash-q-item:last-child {
  margin-bottom: 0;
}

.dash-q-text {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-bottom: 9px;
  font-family: var(--font-ar);
  direction: rtl;
  line-height: 1.5;
}

.dash-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.dash-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-family: var(--font-ar);
  direction: rtl;
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: background 0.2s;
}

.dash-opt.is-correct {
  background: transparent;
  border-color: transparent;
  color: #81c784;
}

.dash-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.dash-opt.is-correct .dash-mark {
  background: rgba(76, 175, 80, 0.3);
  color: #a5d6a7;
}

.dash-check {
  margin-right: auto;
  font-size: 0.65rem;
  font-weight: 800;
  opacity: 0.85;
}

.dash-explain {
  font-size: 0.6rem;
  color: rgba(var(--neon-primary-rgb), 0.85);
  padding: 5px 10px;
  border-radius: 7px;
  background: transparent;
  border-right: 2px solid rgba(var(--neon-primary-rgb), 0.45);
  direction: rtl;
  font-family: var(--font-ar);
  line-height: 1.5;
}

/* ═══════ AI AURA — Google-style rotating conic gradient ═══════
   Implementation: a square inner pseudo-element rotates around its own
   center, masked by the parent's rounded rectangle. Rotating a square
   ensures symmetric coverage at every angle (rotating a non-square
   rectangle creates asymmetric corner exposure). */
.ai-aura {
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  /* Reveal as results scene becomes active */
  opacity: max(0, min(1, (var(--p) - 0.58) / 0.1));
  transition: opacity 0.05s linear;
}

.ai-aura::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* Square sized to cover the parent at any rotation. 250% of the
     parent's longer dimension via vmax-based sizing keeps it big enough
     across all viewports without clipping at the corners. */
  width: max(250%, 600px);
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    #e040fb 0deg,
    #7c4dff 60deg,
    #40c4ff 130deg,
    #64ffda 200deg,
    #ff9800 270deg,
    #e040fb 360deg
  );
  filter: saturate(1.25);
  will-change: transform;
  animation: ai-aura-rotate 3.6s linear infinite;
}

.ai-aura::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 20px;
  background: var(--bg-deep);
  z-index: 1;
}

/* Square spins about its own center; translate keeps it centered in parent. */
@keyframes ai-aura-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Outer ambient glow that bleeds beyond the dashboard */
.ai-aura-soft {
  position: absolute;
  inset: -22px;
  border-radius: 38px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: max(0, min(0.65, (var(--p) - 0.6) / 0.1));
}

.ai-aura-soft::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(220%, 600px);
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    rgba(var(--neon-primary-rgb), 0.55),
    rgba(var(--neon-secondary-rgb), 0.55),
    rgba(64, 196, 255, 0.55),
    rgba(100, 255, 218, 0.55),
    rgba(255, 152, 0, 0.45),
    rgba(var(--neon-primary-rgb), 0.55)
  );
  filter: blur(26px);
  will-change: transform;
  animation: ai-aura-rotate 3.6s linear infinite;
}

/* ═══════ SCROLL HINT ═══════ */
.features-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ar);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  z-index: 10;
  pointer-events: none;
  /* Fade out after intro */
  opacity: calc(1 - max(0, min(1, var(--p) / 0.2)));
  transition: opacity 0.2s linear;
}

.features-scroll-hint-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--neon-primary), transparent);
  animation: scrollHintLine 2s ease-in-out infinite;
}

@keyframes scrollHintLine {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50% { transform: scaleY(1.3); opacity: 1; }
}

/* ═══════ SECONDARY GRID HEADER ═══════ */
.features-secondary-container {
  padding-top: clamp(40px, 5vh, 64px);
  padding-bottom: clamp(40px, 5vh, 64px);
}

.features-secondary-header {
  text-align: center;
  margin-bottom: 28px;
}

.features-secondary-title {
  font-family: var(--font-ar);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  position: relative;
  display: inline-block;
}

.features-secondary-title::before,
.features-secondary-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38px;
  height: 1px;
}

.features-secondary-title::before {
  right: calc(100% + 14px);
  background: linear-gradient(90deg, rgba(var(--neon-primary-rgb), 0.35), transparent);
}

.features-secondary-title::after {
  left: calc(100% + 14px);
  background: linear-gradient(90deg, transparent, rgba(var(--neon-primary-rgb), 0.35));
}

/* ═══════ FEATURES GRID (compact) ═══════ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.feature-card {
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-quart);
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--neon-primary-rgb), 0.14);
  background: var(--bg-glass-hover);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 0 16px rgba(var(--neon-primary-rgb), 0.05);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(var(--neon-primary-rgb), 0.08);
  border: 1px solid rgba(var(--neon-primary-rgb), 0.1);
  color: var(--neon-primary);
  margin-bottom: 14px;
  transition: all 0.3s var(--ease-out-quart);
}

.feature-card:hover .feature-icon {
  background: rgba(var(--neon-primary-rgb), 0.12);
  box-shadow: 0 0 14px rgba(var(--neon-primary-rgb), 0.15);
}

.feature-title {
  font-family: var(--font-ar);
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.feature-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .features-cinema { height: 260vh; }
  .panel { max-width: 420px; }
  .dual { gap: 28px; }
}

@media (max-width: 820px) {
  /* Tablet: stack panels vertically inside the dual layout */
  .features-cinema { height: 240vh; }

  .dual {
    grid-template-columns: 1fr;
    gap: 22px;
    width: min(560px, 92vw);
  }

  .panel--pdf,
  .panel--dash {
    max-width: 460px;
    transform: none !important;
    opacity: 1;
  }

  .scene--results {
    padding-top: clamp(190px, 24vh, 220px);
    padding-bottom: 30px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }

  .pdf-card,
  .dash-card {
    min-height: 280px;
  }

  .features-scroll-hint { display: none; }
}

/* ═══════════════════════════════════════════════════
   MOBILE (≤ 768px) — Pinned cinema, 3 SEQUENTIAL scenes:
     Scene A (upload):    p 0.00 → 0.30  (drives counter + progress)
     Scene B (PDF only):  p 0.32 → 0.60
     Scene C (Dashboard): p 0.60 → 1.00
   Panels stack via CSS Grid `grid-area: stack`. Visibility is driven
   purely by --p so the same scrub feeds all three scenes seamlessly.
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Pinned cinema container; JS sets explicit height in vh ──
     Kept short (≈240vh) so the section doesn't dominate page scroll. */
  .features-cinema {
    height: 240vh;
  }

  /* Pinned stage: same as desktop (full viewport, hidden overflow). */
  .features-stage {
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    position: relative;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
  }

  /* Lighter ambient for mobile GPU perf */
  .features-aurora {
    inset: -4%;
    filter: blur(45px);
    opacity: 0.55;
  }

  .features-grid-fx {
    opacity: 0.18;
    background-size: 40px 40px;
  }

  /* ── Header: pinned at top, compact, always visible ── */
  .features-header {
    position: absolute;
    top: clamp(20px, 5.5vh, 50px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 28px);
    max-width: 420px;
    padding: 0 6px;
    text-align: center;
    z-index: 10;
    pointer-events: none;
  }

  .features-badge {
    font-size: 0.7rem;
    padding: 5px 13px;
    margin-bottom: 10px;
  }

  .features-badge-dot {
    width: 6px;
    height: 6px;
  }

  .features-headline {
    font-size: clamp(1.55rem, 7vw, 2rem);
    gap: 0.22em;
    margin: 0 0 8px 0;
    line-height: 1.18;
    letter-spacing: -0.015em;
    flex-wrap: wrap;
  }

  .features-counter {
    min-width: 2.8ch;
  }

  /* Two stacked subs that crossfade as scrub progresses */
  .features-sub-swap {
    height: 2.6em;
    min-height: 2.6em;
  }

  .features-sub {
    position: absolute;
    inset: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    padding: 0 4px;
    /* base rule already handles opacity transition + is-active */
  }

  .features-sub[data-sub="1"] {
    /* override the previous mobile rule that hid the second sub */
    display: block;
  }

  /* ── Scenes: stacked absolute layers — only one visible at a time ── */
  .scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    /* Top padding leaves room for the header (headline + sub, no badge).
       Tighter on mobile so the taller PDF card fits comfortably. */
    padding: clamp(120px, 18vh, 160px) 22px 24px;
    margin: 0;
    width: 100%;
    max-width: none;
    pointer-events: none;
  }

  /* No vertical divider in pinned mode */
  .scene--upload::after {
    display: none;
  }

  /* ─── Scene A — UPLOAD (visible p 0 → ~0.30) ─── */
  .scene--upload {
    /* Fades out faster on mobile so PDF can take over */
    opacity: calc(1 - max(0, (var(--p) - 0.27) / 0.06));
    transform: scale(calc(1 - max(0, (var(--p) - 0.27) / 0.06) * 0.05));
    filter: blur(calc(max(0, (var(--p) - 0.27) / 0.06) * 4px));
    pointer-events: auto;
  }

  .scene--upload .drop-frame {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 0;
    padding: 24px 20px 22px;
    border-radius: 24px;
    flex-direction: column;
    gap: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  }

  .drop-empty {
    position: relative;
    inset: auto;
    /* Use scroll-driven fade like desktop, but with mobile-specific thresholds */
    opacity: calc(1 - max(0, (var(--upload-p, 0) - 0.45) / 0.2));
    transform: translateY(calc(max(0, (var(--upload-p, 0) - 0.45)) * -16px));
    gap: 10px;
    padding: 2px 0 0;
  }

  .drop-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

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

  .drop-icon-pulse {
    inset: -5px;
    border-radius: 22px;
  }

  .drop-label { font-size: 0.98rem; }
  .drop-hint { font-size: 0.76rem; }
  .drop-badges { gap: 6px; margin-top: 2px; }
  .drop-badge { font-size: 0.64rem; padding: 3px 10px; }

  /* File card slides up from the bottom of the drop-frame, scroll-driven */
  .drop-file {
    position: relative;
    inset: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    transform: translateY(calc((1 - max(0, min(1, (var(--upload-p, 0) - 0.35) / 0.45))) * 30px))
               scale(calc(0.94 + max(0, min(1, (var(--upload-p, 0) - 0.35) / 0.45)) * 0.06));
    opacity: max(0, min(1, (var(--upload-p, 0) - 0.35) / 0.25));
    padding: 11px 12px;
    gap: 11px;
    pointer-events: auto;
    border-radius: 14px;
    margin-top: 4px;
  }

  .drop-file-icon { width: 44px; height: 44px; border-radius: 11px; }
  .drop-file-icon svg { width: 20px; height: 20px; }
  .drop-file-ext { font-size: 0.45rem; bottom: 3px; right: 3px; padding: 1px 3px; }
  .drop-file-name { font-size: 0.78rem; margin-bottom: 3px; }
  .drop-file-meta { font-size: 0.66rem; gap: 6px; }
  .drop-file-bar { height: 3px; }

  /* Progress bar: scroll-driven via --upload-p (matches desktop formula) */
  .drop-file-bar-fill {
    width: calc(max(0%, min(100%, (var(--upload-p, 0) - 0.4) * 220%)));
    transition: none;
  }

  /* Check mark pops near the end of upload */
  .drop-file-check {
    width: 26px;
    height: 26px;
    opacity: max(0, min(1, (var(--upload-p, 0) - 0.85) / 0.1));
    transform: scale(calc(0.4 + max(0, min(1, (var(--upload-p, 0) - 0.85) / 0.1)) * 0.6));
  }

  .drop-file-check svg { width: 12px; height: 12px; }

  /* ─── Scene B + C — RESULTS (PDF then Dashboard, stacked) ─── */
  /* Stage's results scene is always visible after upload fades.
     Inside, the two panels share one CSS-grid cell and crossfade. */
  .scene--results {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: none;
  }

  .scene--results.is-active {
    pointer-events: auto;
  }

  .scene--results .dual {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "stack";
    place-items: center;
    width: 100%;
    max-width: 380px;
    gap: 0;
    margin: 0 auto;
  }

  .panel {
    grid-area: stack;
    width: 100%;
    max-width: 360px;
    margin: 0;
    position: relative;
  }

  /* Scene B: PDF — visible roughly p 0.30 → 0.60 */
  .panel--pdf {
    z-index: 2;
    transform: translateY(calc((1 - max(0, min(1, (var(--p) - 0.28) / 0.06))) * 24px))
               scale(calc(0.94 + max(0, min(1, (var(--p) - 0.28) / 0.06)) * 0.06));
    opacity: calc(
      max(0, min(1, (var(--p) - 0.28) / 0.05))
      * (1 - max(0, min(1, (var(--p) - 0.56) / 0.05)))
    );
  }

  /* Scene C: Dashboard — visible roughly p 0.6 → 1.0 */
  .panel--dash {
    z-index: 1;
    transform: translateY(calc((1 - max(0, min(1, (var(--p) - 0.58) / 0.06))) * 24px))
               scale(calc(0.94 + max(0, min(1, (var(--p) - 0.58) / 0.06)) * 0.06));
    opacity: max(0, min(1, (var(--p) - 0.58) / 0.06));
  }

  /* PDF card sizing (mobile) — taller so it fills the viewport
     instead of leaving an empty stripe above. */
  .pdf-card {
    padding: 22px 18px 24px;
    min-height: clamp(420px, 58vh, 520px);
    border-radius: 16px;
  }

  .pdf-title { font-size: 0.78rem; }
  .pdf-meta { font-size: 0.62rem; }
  .pdf-q-label { font-size: 0.74rem; }
  .pdf-q-num { width: 18px; height: 18px; font-size: 0.6rem; }
  .pdf-upload-badge { font-size: 0.6rem; padding: 4px 10px; }
  .pdf-corner-tag { font-size: 0.52rem; padding: 2px 8px; }

  /* Mobile-tuned paper stack — slightly tighter offsets so the
     extra sheets stay inside the viewport. */
  .pdf-sheet--1 { transform: translate(6px, 6px) rotate(2deg); }
  .pdf-sheet--2 { transform: translate(12px, 12px) rotate(4deg); }
  .pdf-sheet--3 { transform: translate(18px, 18px) rotate(-2.5deg); }

  /* Page indicator: smaller, snug to the card on mobile */
  .pdf-pages {
    left: -10px;
    padding: 8px 4px;
    gap: 5px;
  }
  .pdf-page { width: 16px; height: 16px; font-size: 0.55rem; }
  .pdf-page-dots { font-size: 0.62rem; }

  /* Keep the third PDF question visible on mobile — fills the card
     and reads as a real exam page. */
  .pdf-q[data-q="2"] {
    display: block;
  }

  /* Dashboard card sizing (mobile) — compact so it fits in the viewport
     without overflow / inner scrolling. */
  .dash-card {
    padding: 14px 14px 16px;
    min-height: 0;
    border-radius: 18px;
  }

  .dash-topbar {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }

  .dash-brand-dot { width: 8px; height: 8px; }
  .dash-count { padding: 3px 10px; }
  .dash-count-num { font-size: 0.82rem; }
  .dash-count-label { font-size: 0.6rem; }

  /* Hide the third question on mobile — keeping two keeps the card compact
     and the answers feel like a peek rather than a full transcript. */
  .dash-q-item[data-qi="2"] {
    display: none;
  }

  /* Dashboard questions — appear quickly together at the start of Scene C
     (instead of staggering across 30% of scroll) so the card never looks
     half-empty. Tight thresholds give a snappy reveal. */
  .dash-q-item {
    padding: 9px 11px;
    margin-bottom: 7px;
    opacity: max(0, min(1, (var(--p) - var(--qi-threshold)) / 0.03));
    transform: translateY(calc((1 - max(0, min(1, (var(--p) - var(--qi-threshold)) / 0.03))) * 8px));
  }

  .dash-q-item[data-qi="0"] { --qi-threshold: 0.60; }
  .dash-q-item[data-qi="1"] { --qi-threshold: 0.64; }

  .dash-q-text { font-size: 0.7rem; margin-bottom: 6px; }
  .dash-opts { gap: 4px; }
  .dash-opt { font-size: 0.66rem; padding: 4px 8px; gap: 7px; }
  .dash-mark { width: 14px; height: 14px; font-size: 0.54rem; }

  /* Compact explanation: one line, ellipsis, smaller padding */
  .dash-explain {
    font-size: 0.58rem;
    padding: 4px 8px;
    line-height: 1.45;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── AI Aura: slower spin for mobile GPUs (visual identical) ── */
  .ai-aura::before { animation-duration: 5.5s; }
  .ai-aura-soft::before {
    animation-duration: 5.5s;
    filter: blur(20px);
  }
  .ai-aura-soft { inset: -16px; border-radius: 32px; }

  /* Scroll hint stays visible near the bottom of the pinned stage */
  .features-scroll-hint {
    display: flex;
    bottom: 16px;
    font-size: 0.66rem;
  }

  .features-scroll-hint-line {
    height: 24px;
  }

  /* Secondary grid spacing */
  .features-secondary-container {
    padding-top: 40px;
    padding-bottom: 64px;
  }

  .features-secondary-title {
    font-size: 1.05rem;
  }

  .features-secondary-title::before,
  .features-secondary-title::after {
    width: 26px;
  }
}

/* ═══════════════════════════════════════════════════
   VERY SMALL (≤ 480px) — additional tightening
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Stage stays pinned; only tighten side padding on scenes */
  .scene {
    padding-left: 16px;
    padding-right: 16px;
  }

  .features-header {
    width: calc(100vw - 24px);
    padding: 0 4px;
  }

  .features-headline {
    font-size: clamp(1.5rem, 7.5vw, 1.85rem);
  }

  .features-sub {
    font-size: 0.78rem;
  }

  .scene--upload .drop-frame {
    padding: 22px 16px 18px;
    border-radius: 20px;
    gap: 14px;
    max-width: 320px;
  }

  .drop-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }

  .drop-icon svg {
    width: 26px;
    height: 26px;
  }

  .drop-label {
    font-size: 0.95rem;
  }

  .drop-hint {
    font-size: 0.74rem;
  }

  .drop-badge {
    font-size: 0.62rem;
    padding: 2px 8px;
  }

  .drop-file {
    padding: 9px 10px;
    gap: 9px;
    border-radius: 12px;
  }

  .drop-file-icon {
    width: 40px;
    height: 40px;
  }

  .drop-file-name {
    font-size: 0.74rem;
  }

  .drop-file-meta {
    font-size: 0.62rem;
  }

  .scene--results .dual {
    max-width: 340px;
  }

  .panel {
    max-width: 320px;
  }

  .pdf-card {
    padding: 18px 15px 20px;
  }

  .dash-card {
    padding: 16px 14px 18px;
  }

  .dash-q-item {
    padding: 10px 11px;
  }

  .dash-q-text {
    font-size: 0.7rem;
  }

  .dash-opt {
    font-size: 0.65rem;
    padding: 5px 8px;
    gap: 6px;
  }

  .dash-explain {
    font-size: 0.58rem;
  }
}

/* ═══════ REDUCED MOTION ═══════ */
@media (prefers-reduced-motion: reduce) {
  .features-badge-dot,
  .drop-icon,
  .drop-icon-pulse,
  .features-scroll-hint-line,
  .ai-aura::before,
  .ai-aura-soft {
    animation: none !important;
  }

  /* Disable scroll-driven properties — show results scene immediately */
  .features-stage {
    --p: 0.85;
    --upload-p: 1;
  }

  .features-cinema {
    height: auto;
  }

  .features-stage {
    height: auto;
    min-height: 100vh;
  }

  .scene {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .panel--pdf,
  .panel--dash {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══════ MOBILE: STATIC FEATURES STAGE (no pinned cinema) ═══════
   On phones we skip the scroll-pinned counter/upload reveal entirely.
   The stage shows the final dashboard state in a single static layout,
   and we kill the floating dot + AI aura rotation animations to avoid
   continuous repaints/GPU spend. Desktop unaffected. */
@media (max-width: 767px) {
  .features-cinema { height: auto !important; }
  .features-stage {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding: 60px 16px 40px !important;
    overflow: visible !important;
  }
  .features-stage .features-aurora,
  .features-stage .features-grid-fx {
    animation: none !important;
  }
  .features-stage .ai-aura,
  .features-stage .ai-aura-soft,
  .features-stage .drop-icon-pulse,
  .features-stage .drop-ring-rect,
  .features-stage .features-scroll-hint,
  .features-stage .features-counter ~ * .scroll-hint-line,
  .features-stage .scene--upload {
    animation: none !important;
  }
  /* Hide the upload scene entirely on mobile — we jump straight to the
     dashboard result state since that's what conveys the value. */
  .features-stage .scene--upload { display: none !important; }
  .features-stage .features-scroll-hint { display: none !important; }
  /* Show results scene flat (no transform/scale tied to --p) */
  .features-stage .scene--results {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* ══════════════════ tracker.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   PARENTAL TRACKER — WhatsApp Style (Pinned Scroll-Driven)
   ═══════════════════════════════════════════════════ */

/* ═══════ OUTER SECTION ═══════ */
.tracker {
  position: relative;
}

.tracker-cinema {
  position: relative;
  height: 250vh;
}

.tracker-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Opaque backdrop — the stage gets pinned (position:fixed) by ScrollTrigger;
     without a background the section behind bleeds through it during scroll. */
  background: var(--bg-deep);
  /* Custom property driven by JS — 0 → 1 over the pinned scroll */
  --p: 0;
}

/* ═══════ AMBIENT BACKGROUND ═══════ */
.tracker-aurora {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(37, 211, 102, 0.15), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(18, 140, 126, 0.15), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(7, 94, 84, 0.08), transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.tracker-grid-fx {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ═══════ HEADER ═══════ */
.tracker-header {
  position: absolute;
  top: clamp(60px, 9vh, 110px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: min(720px, 92vw);
  pointer-events: none;
}

.tracker-headline {
  font-family: var(--font-ar);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

.tracker-headline-accent {
  display: inline-flex;
  align-items: baseline;
  background: linear-gradient(135deg, #25D366, #128C7E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(37, 211, 102, 0.35));
}

.tracker-sub-swap {
  position: relative;
  height: 2.6em;
  max-width: 560px;
  margin: 0 auto;
}

.tracker-sub {
  position: absolute;
  inset: 0;
  font-size: clamp(0.92rem, 1.55vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
}

.tracker-sub.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════ PHONE MOCKUP ═══════ */
.tracker-phone-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(150px, 22vh, 200px);
  padding-bottom: 60px;
  pointer-events: none;
  z-index: 5;
}

.tracker-phone {
  position: relative;
  /* Height scales with the viewport (fits short screens without clipping);
     width follows via aspect-ratio so the mockup keeps its proportions. */
  height: clamp(440px, 58vh, 540px);
  aspect-ratio: 340 / 580;
  width: auto;
  max-width: 85vw;
  border-radius: 48px;
  background: #0b141a;
  box-shadow:
    0 0 0 4px #000,
    0 0 0 10px #2a2a30,
    0 0 0 11px rgba(255, 255, 255, 0.15),
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 2px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Dynamic Island */
.dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 105px;
  height: 32px;
  background: #000;
  border-radius: 16px;
  z-index: 20;
  box-shadow: 
    inset 0 0 2px rgba(255,255,255,0.1),
    0 0 0 1px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
}

.dynamic-island-camera {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0a0a0f;
  box-shadow: 
    inset 0 0 4px rgba(255,255,255,0.25), 
    0 0 1px rgba(0,0,0,0.8);
}

/* WA SCREEN */
.wa-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0b141a;
  /* WhatsApp chat background pattern simulation */
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.wa-header {
  display: flex;
  align-items: center;
  padding: 55px 16px 12px;
  background: #202c33;
  gap: 12px;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.wa-back {
  color: #8696a0;
  display: flex;
  align-items: center;
}

.wa-back svg {
  width: 24px;
  height: 24px;
}

.wa-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.wa-avatar img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.wa-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.wa-name {
  color: #e9edef;
  font-family: var(--font-ar);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-verified-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.wa-status {
  color: #8696a0;
  font-family: var(--font-ar);
  font-size: 0.75rem;
}

.wa-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #e9edef;
  margin-right: auto;
}

.wa-actions svg {
  width: 20px;
  height: 20px;
}

.wa-body {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  position: relative;
}

.wa-date-badge {
  align-self: center;
  background: #182229;
  color: #8696a0;
  font-family: var(--font-ar);
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Messages */
.wa-msg {
  display: flex;
  justify-content: flex-start; /* Incoming messages */
  
  /* Reveal based on --p */
  --msg-threshold: 0.2;
  opacity: max(0, min(1, (var(--p) - var(--msg-threshold)) / 0.1));
  transform: translateY(calc((1 - max(0, min(1, (var(--p) - var(--msg-threshold)) / 0.1))) * 20px));
}

.wa-msg[data-msg="0"] { --msg-threshold: 0.2; }
.wa-msg[data-msg="1"] { --msg-threshold: 0.45; }
.wa-msg[data-msg="2"] { --msg-threshold: 0.7; }

.wa-msg-bubble {
  background: #202c33;
  color: #e9edef;
  padding: 8px 12px;
  border-radius: 12px;
  border-top-right-radius: 0;
  max-width: 90%;
  position: relative;
  font-family: var(--font-ar);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border-left: 3px solid #25D366; /* Accent to make it look official */
}

/* Tail for incoming message */
.wa-msg-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  right: -8px;
  width: 0;
  height: 0;
  border-top: 12px solid #202c33;
  border-right: 12px solid transparent;
}

.wa-msg-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #25D366;
  margin-bottom: 4px;
}

.wa-msg-text {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 4px;
}

.wa-msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

.wa-msg-time {
  font-size: 0.65rem;
  color: #8696a0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .tracker-cinema {
    height: 200vh;
  }
  .tracker-phone {
    height: clamp(420px, 60vh, 500px);
  }
  .tracker-phone-container {
    padding-top: clamp(140px, 20vh, 180px);
    padding-bottom: 20px;
  }
  .wa-msg-title {
    font-size: 0.8rem;
  }
  .wa-msg-text {
    font-size: 0.85rem;
  }
}

@media (max-width: 380px) {
  .tracker-phone {
    height: clamp(380px, 55vh, 420px);
    border-radius: 36px;
  }
  .dynamic-island {
    width: 90px;
    height: 28px;
    top: 8px;
  }
  .dynamic-island-camera {
    width: 10px;
    height: 10px;
  }
  .wa-header {
    padding: 48px 12px 10px;
    gap: 8px;
  }
  .wa-actions {
    gap: 12px;
  }
  .wa-actions svg {
    width: 18px;
    height: 18px;
  }
  .tracker-headline {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }
}


/* ══════════════════ offline-exam.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   OFFLINE EXAM — Center Exam Without Internet
   Pinned Scroll-Driven Animation
   ═══════════════════════════════════════════════════ */

/* ═══════ OUTER SECTION ═══════ */
.offline-exam {
  position: relative;
}

.offline-exam-cinema {
  position: relative;
  height: 350vh;
}

.offline-exam-stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --p: 0;
}

/* ═══════ AMBIENT BACKGROUND ═══════ */
.offline-exam-aurora {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(0, 188, 212, 0.12), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(124, 77, 255, 0.1), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(0, 150, 136, 0.08), transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.offline-exam-grid-fx {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ═══════ HEADER ═══════ */
.offline-exam-header {
  position: absolute;
  top: clamp(50px, 8vh, 100px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  width: min(800px, 92vw);
  pointer-events: none;
}

.offline-exam-headline {
  font-family: var(--font-ar);
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  flex-wrap: wrap;
}

.offline-exam-headline-accent {
  display: inline-flex;
  align-items: baseline;
  background: linear-gradient(135deg, #00bcd4, #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(0, 188, 212, 0.35));
}

.offline-exam-sub {
  font-size: clamp(0.88rem, 1.5vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
  font-weight: 500;
  max-width: 560px;
  margin: 0 auto;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ═══════ VIDEO LINKS ═══════ */
.offline-exam-links {
  position: absolute;
  bottom: clamp(24px, 4vh, 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 16px;
  pointer-events: all;
  opacity: calc(var(--p) * 1.5);
  transition: opacity 0.4s ease;
}

.offline-exam-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary);
  font-family: var(--font-ar);
  font-size: 0.85rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s var(--ease-out-quart);
  text-decoration: none;
}

.offline-exam-link:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(0,188,212,0.4);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,188,212,0.15);
}

.offline-exam-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ═══════ DECORATED CTAs — shared shell for both buttons ═══════ */
.offline-exam-link.is-explain,
.offline-exam-link.is-demo {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  overflow: visible;
}

.offline-exam-link.is-explain { animation: oexCtaBob 2.6s ease-in-out infinite; }
.offline-exam-link.is-demo    { animation: oexCtaBob 3.2s ease-in-out infinite 0.4s; }

/* Rotating gradient halo (border) — colors set per variant */
.offline-exam-link-aura {
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.offline-exam-link-aura::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(260%, 320px);
  aspect-ratio: 1;
  filter: saturate(1.4);
  will-change: transform;
  animation: oexCtaRotate 3s linear infinite;
}

.offline-exam-link-aura::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 100px;
  z-index: 1;
}

/* Soft outer glow */
.offline-exam-link-glow {
  position: absolute;
  inset: -14px;
  border-radius: 100px;
  z-index: -1;
  pointer-events: none;
  filter: blur(14px);
  animation: oexCtaGlow 2.6s ease-in-out infinite;
}

/* Pulsing rings */
.offline-exam-link.is-explain::before,
.offline-exam-link.is-demo::before,
.offline-exam-link.is-explain::after,
.offline-exam-link.is-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  border: 1.5px solid;
  z-index: 0;
  pointer-events: none;
  animation: oexCtaPulse 1.8s ease-out infinite;
}

.offline-exam-link.is-explain::after,
.offline-exam-link.is-demo::after {
  animation-delay: 0.9s;
}

.offline-exam-link-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  color: #fff;
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 800;
}

.offline-exam-link-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.offline-exam-link-icon svg {
  width: 14px;
  height: 14px;
}

.offline-exam-link.is-explain svg,
.offline-exam-link.is-demo svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Shimmering label */
.offline-exam-link-label {
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: oexCtaShimmer 2.8s linear infinite;
}

.offline-exam-link.is-explain:hover,
.offline-exam-link.is-demo:hover {
  background: transparent;
  border: 0;
  transform: translateY(-3px) scale(1.04);
  box-shadow: none;
  animation-play-state: paused;
}

.offline-exam-link.is-explain:hover .offline-exam-link-glow,
.offline-exam-link.is-demo:hover .offline-exam-link-glow {
  filter: blur(18px);
}

/* ═══ VARIANT A: "شرح الميزة" — Magenta / Purple (watch / cinematic) ═══ */
.offline-exam-link.is-explain .offline-exam-link-aura::before {
  background: conic-gradient(
    from 0deg,
    #e040fb 0deg,
    #7c4dff 90deg,
    #b388ff 180deg,
    #ff4081 270deg,
    #e040fb 360deg
  );
}

.offline-exam-link.is-explain .offline-exam-link-aura::after {
  background: linear-gradient(135deg, #1a1030 0%, #100722 100%);
}

.offline-exam-link.is-explain .offline-exam-link-glow {
  background: radial-gradient(
    closest-side,
    rgba(224, 64, 251, 0.55),
    rgba(124, 77, 255, 0.35) 45%,
    transparent 75%
  );
}

.offline-exam-link.is-explain::before { border-color: rgba(224, 64, 251, 0.6); }
.offline-exam-link.is-explain::after  { border-color: rgba(124, 77, 255, 0.5); }

.offline-exam-link.is-explain .offline-exam-link-icon {
  background: linear-gradient(135deg, #e040fb, #7c4dff);
  box-shadow: 0 0 14px rgba(224, 64, 251, 0.55);
  color: #fff;
}

.offline-exam-link.is-explain .offline-exam-link-label {
  background-image: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 35%, #ffd6ff 50%, #ffffff 65%, #ffffff 100%
  );
}

/* ═══ VARIANT B: "تجربة عملية" — Cyan / Green (try / interactive) ═══ */
.offline-exam-link.is-demo .offline-exam-link-aura::before {
  background: conic-gradient(
    from 0deg,
    #00e5ff 0deg,
    #1de9b6 90deg,
    #00c853 180deg,
    #64ffda 270deg,
    #00e5ff 360deg
  );
}

.offline-exam-link.is-demo .offline-exam-link-aura::after {
  background: linear-gradient(135deg, #062028 0%, #03161a 100%);
}

.offline-exam-link.is-demo .offline-exam-link-glow {
  background: radial-gradient(
    closest-side,
    rgba(0, 229, 255, 0.5),
    rgba(0, 200, 83, 0.32) 45%,
    transparent 75%
  );
}

.offline-exam-link.is-demo::before { border-color: rgba(0, 229, 255, 0.6); }
.offline-exam-link.is-demo::after  { border-color: rgba(0, 200, 83, 0.5);  }

.offline-exam-link.is-demo .offline-exam-link-icon {
  background: linear-gradient(135deg, #00e5ff, #00c853);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
  color: #06202a;
}

.offline-exam-link.is-demo .offline-exam-link-icon svg {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

.offline-exam-link.is-demo .offline-exam-link-label {
  background-image: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 35%, #b9f6ca 50%, #ffffff 65%, #ffffff 100%
  );
}

@keyframes oexCtaRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes oexCtaPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0;   }
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .offline-exam-link.is-explain,
  .offline-exam-link.is-demo,
  .offline-exam-link.is-explain::before,
  .offline-exam-link.is-explain::after,
  .offline-exam-link.is-demo::before,
  .offline-exam-link.is-demo::after,
  .offline-exam-link-aura::before,
  .offline-exam-link-glow,
  .offline-exam-link-label {
    animation: none;
  }
}

/* ═══════ ANIMATION CANVAS — Center Area ═══════ */
.offline-exam-canvas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(80px, 10vh, 120px);
  pointer-events: none;
}

.offline-exam-scene {
  position: relative;
  width: min(700px, 90vw);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════ ADMIN DEVICE — Center Element (المعلم/الأدمن) ═══════ */
.oex-router {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  opacity: max(0, min(1, var(--p) / 0.08));
}

.oex-admin-phone {
  width: 64px;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a1f3a, #0d1024);
  border: 1.5px solid rgba(0,188,212,0.45);
  padding: 6px;
  position: relative;
  box-shadow:
    0 0 30px rgba(0,188,212,0.35),
    0 8px 24px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.oex-admin-phone::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}

.oex-admin-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(0,188,212,0.18), rgba(124,77,255,0.14));
  display: flex;
  align-items: center;
  justify-content: center;
}

.oex-admin-phone-screen svg {
  width: 30px;
  height: 30px;
  color: #00bcd4;
  filter: drop-shadow(0 0 6px rgba(0,188,212,0.6));
}

.oex-admin-label {
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,188,212,0.12);
  border: 1px solid rgba(0,188,212,0.25);
  white-space: nowrap;
}

/* WiFi pulse rings */
.oex-wifi-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(0,188,212,0.2);
  pointer-events: none;
  z-index: 9;
}

.oex-wifi-ring:nth-child(2) {
  width: 140px;
  height: 140px;
  opacity: max(0, min(1, (var(--p) - 0.03) / 0.06));
  animation: oexPulse 3s ease-out infinite;
}

.oex-wifi-ring:nth-child(3) {
  width: 210px;
  height: 210px;
  opacity: max(0, min(1, (var(--p) - 0.06) / 0.06));
  animation: oexPulse 3s ease-out infinite 0.6s;
}

.oex-wifi-ring:nth-child(4) {
  width: 290px;
  height: 290px;
  opacity: max(0, min(1, (var(--p) - 0.09) / 0.06));
  animation: oexPulse 3s ease-out infinite 1.2s;
}

@keyframes oexPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; }
}

/* ═══════ SUBMISSION LINES — Phones → Admin (data transfer, no internet) ═══════ */
.oex-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.oex-line {
  fill: none;
  stroke: rgba(0,200,83,0.55);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(0,200,83,0.4));
  /* Sync appearance with the per-phone checkmark phase (>=0.55) */
  opacity: max(0, min(1, (var(--p) - 0.55) / 0.10));
  animation: oexLineFlow 1.6s linear infinite;
}

@keyframes oexLineFlow {
  to { stroke-dashoffset: -20; }
}

/* ═══════ PHONE DEVICES — Students around router ═══════ */
.oex-phone {
  position: absolute;
  width: 52px;
  height: 90px;
  border-radius: 12px;
  background: #1a1a2e;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 11;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: transform 0.5s var(--ease-out-quart);
}

.oex-phone-screen {
  width: 42px;
  height: 68px;
  border-radius: 6px;
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Phone notch */
.oex-phone::before {
  content: '';
  position: absolute;
  top: 4px;
  width: 16px;
  height: 4px;
  border-radius: 4px;
  background: #0d1117;
}

/* Positions around the router — arranged in a circle */
.oex-phone[data-pos="0"] {
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
  --phone-threshold: 0.10;
}

.oex-phone[data-pos="1"] {
  top: 30%;
  right: 8%;
  --phone-threshold: 0.13;
}

.oex-phone[data-pos="2"] {
  bottom: 15%;
  right: 15%;
  --phone-threshold: 0.16;
}

.oex-phone[data-pos="3"] {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  --phone-threshold: 0.19;
}

.oex-phone[data-pos="4"] {
  top: 30%;
  left: 8%;
  --phone-threshold: 0.22;
}

.oex-phone[data-pos="5"] {
  bottom: 15%;
  left: 15%;
  --phone-threshold: 0.14;
}

/* Phone appear animation */
.oex-phone {
  opacity: max(0, min(1, (var(--p) - var(--phone-threshold)) / 0.06));
}

/* ═══════ DATA PACKETS — Flying between router and phones ═══════ */
.oex-packet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00bcd4;
  box-shadow: 0 0 12px rgba(0,188,212,0.6);
  z-index: 12;
  pointer-events: none;
}

/* ═══════ PHASE 2: EXAM ON SCREEN ═══════ */
.oex-phone-exam {
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  background: #0f1923;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px;
  opacity: max(0, min(1, (var(--p) - 0.30) / 0.08));
}

.oex-q-line {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}

.oex-q-opt {
  height: 6px;
  border-radius: 3px;
  background: rgba(0,188,212,0.12);
  border: 1px solid rgba(0,188,212,0.2);
}

.oex-q-opt.is-selected {
  background: rgba(0,188,212,0.3);
  border-color: rgba(0,188,212,0.5);
}

/* ═══════ PHASE 3: CHECKMARKS ═══════ */
.oex-phone-check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c853, #00bfa5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 13;
  opacity: max(0, min(1, (var(--p) - 0.55) / 0.08));
  box-shadow: 0 0 16px rgba(0,200,83,0.4);
}

.oex-phone-check svg {
  width: 16px;
  height: 16px;
  color: #fff;
  stroke-width: 3;
}

/* ═══════ PHASE 4: STATISTICS DASHBOARD ═══════ */
.oex-stats-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, 80vw);
  background: rgba(15, 20, 30, 0.9);
  border: 1px solid rgba(0,188,212,0.2);
  border-radius: 20px;
  padding: 24px;
  z-index: 20;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);

  opacity: max(0, min(1, (var(--p) - 0.68) / 0.08));
  transform: translate(-50%, calc(-50% + (1 - max(0, min(1, (var(--p) - 0.68) / 0.08))) * 30px));
}

.oex-stats-title {
  font-family: var(--font-ar);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oex-stats-title-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,188,212,0.2), rgba(124,77,255,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.oex-stats-title-icon svg {
  width: 16px;
  height: 16px;
  color: #00bcd4;
}

/* Question stat bars */
.oex-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.oex-stat-q {
  font-family: var(--font-ar);
  font-size: 0.78rem;
  color: var(--text-muted);
  min-width: 52px;
  text-align: left;
  white-space: nowrap;
}

.oex-stat-bar-track {
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  position: relative;
}

.oex-stat-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 1s var(--ease-out-quart);
  width: 0;
}

.oex-stat-bar-fill.is-high {
  background: linear-gradient(90deg, #00c853, #69f0ae);
}

.oex-stat-bar-fill.is-mid {
  background: linear-gradient(90deg, #ffc107, #ffca28);
}

.oex-stat-bar-fill.is-low {
  background: linear-gradient(90deg, #ff5252, #ff8a80);
}

.oex-stat-pct {
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 36px;
  text-align: center;
}

.oex-stat-pct.is-high { color: #69f0ae; }
.oex-stat-pct.is-mid  { color: #ffca28; }
.oex-stat-pct.is-low  { color: #ff8a80; }

/* Stats summary */
.oex-stats-summary {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.oex-stats-kpi {
  text-align: center;
}

.oex-stats-kpi-num {
  font-family: var(--font-ar);
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00bcd4, #7c4dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.oex-stats-kpi-label {
  font-family: var(--font-ar);
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}


/* ═══════ PHASE LABELS ═══════ */
.oex-phase-label {
  position: absolute;
  bottom: clamp(100px, 16vh, 150px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  font-family: var(--font-ar);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* ═══════ MOBILE ═══════ */
@media (max-width: 768px) {
  .offline-exam-cinema {
    height: 280vh;
  }

  /* موبايل: أنيميشنات الرسم المستمر (SVG dashoffset + background-position)
     بتشتغل على الـmain thread كل frame → قسم مرئي = 30fps وسخونة.
     العناصر تفضل ظاهرة ثابتة — بس من غير إعادة رسم لا نهائية. */
  .oex-line,
  .offline-exam-link-label,
  .offline-exam-link-aura,
  .offline-exam-link-glow,
  .offline-exam-link.is-explain,
  .offline-exam-link.is-demo,
  .offline-exam-link::after {
    animation: none !important;
  }

  .offline-exam-scene {
    height: 300px;
    width: min(340px, 88vw);
  }

  .oex-router {
    width: 70px;
    height: 92px;
    gap: 6px;
  }

  .oex-admin-phone {
    width: 50px;
    height: 70px;
    border-radius: 11px;
    padding: 5px;
  }

  .oex-admin-phone-screen svg {
    width: 24px;
    height: 24px;
  }

  .oex-admin-label {
    font-size: 0.62rem;
    padding: 2px 8px;
  }

  .oex-wifi-ring:nth-child(2) { width: 100px; height: 100px; }
  .oex-wifi-ring:nth-child(3) { width: 150px; height: 150px; }
  .oex-wifi-ring:nth-child(4) { width: 210px; height: 210px; }

  .oex-phone {
    width: 40px;
    height: 70px;
    border-radius: 9px;
  }

  .oex-phone-screen {
    width: 32px;
    height: 52px;
    border-radius: 4px;
  }

  .oex-stats-panel {
    width: min(320px, 88vw);
    padding: 18px;
  }

  .offline-exam-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .offline-exam-link.is-explain .offline-exam-link-content,
  .offline-exam-link.is-demo .offline-exam-link-content {
    padding: 11px 22px;
    font-size: 0.86rem;
  }

  .oex-phone-check {
    width: 22px;
    height: 22px;
  }

  .oex-phone-check svg {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 380px) {
  .offline-exam-headline {
    font-size: clamp(1.5rem, 7vw, 1.8rem);
  }

  .oex-phone {
    width: 34px;
    height: 60px;
  }

  .oex-phone-screen {
    width: 28px;
    height: 44px;
  }
}


/* ══════════════════ about.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════════════ */

.about {
  padding: clamp(32px, 4vh, 56px) 0 var(--section-padding);
  position: relative;
}

.about::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--neon-primary-rgb), 0.06) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.about-glass-card {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 56px);
  border-radius: 28px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.about-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-primary-rgb), 0.3), transparent);
}

.about-badge {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 100px;
  background: rgba(var(--neon-primary-rgb), 0.08);
  border: 1px solid rgba(var(--neon-primary-rgb), 0.15);
  color: var(--neon-primary);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.about-title {
  font-family: var(--font-ar);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 700;
  margin-bottom: 20px;
  background: var(--neon-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-text {
  font-size: clamp(1rem, 2vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.9;
  margin-bottom: 36px;
}

.about-stats-row {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.about-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-stat-num {
  font-family: var(--font-ar);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--neon-primary);
}

.about-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}


/* ══════════════════ devmode.css ══════════════════ */
/* ═══════════════════════════════════════════════════
   DEV MODE DASHBOARD
   ═══════════════════════════════════════════════════ */

.dev-trigger {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-trigger::after {
  content: '⚙';
  font-size: 18px;
}

.dev-trigger:hover {
  opacity: 1 !important;
  border-color: var(--neon-primary);
}

/* Show trigger in debug mode */
body.debug-mode .dev-trigger {
  opacity: 0.4;
}

/* Overlay */
.dev-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(6, 6, 14, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-expo);
}

.dev-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Panel */
.dev-panel {
  width: 90%;
  max-width: 900px;
  max-height: 85vh;
  border-radius: 24px;
  background: rgba(15, 15, 30, 0.95);
  border: 1px solid var(--border-glass);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.dev-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border-glass);
}

.dev-panel-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
}

.dev-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-secondary);
  transition: all 0.3s;
}

.dev-close-btn:hover {
  background: rgba(255, 50, 50, 0.1);
  border-color: rgba(255, 50, 50, 0.3);
  color: #ff5555;
}

/* Panel Body */
.dev-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.dev-teacher-block {
  margin-bottom: 32px;
  padding: 24px;
  border-radius: 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
}

.dev-teacher-block h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--neon-primary);
}

.dev-field {
  margin-bottom: 14px;
}

.dev-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 500;
}

.dev-field input,
.dev-field textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  color: var(--text-primary);
  font-family: var(--font-ar);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
  direction: rtl;
}

.dev-field input:focus,
.dev-field textarea:focus {
  border-color: var(--neon-primary);
  box-shadow: 0 0 12px var(--neon-glow-soft);
}

.dev-field textarea {
  min-height: 60px;
  resize: vertical;
}

.dev-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Panel Toolbar (top action bar — ربط الملف + إضافة معلم) */
.dev-panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.02);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Panel Footer */
.dev-panel-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 28px;
  border-top: 1px solid var(--border-glass);
  justify-content: flex-end;
}

.dev-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s var(--ease-out-quart);
}

.dev-btn-save {
  background: var(--neon-gradient);
  color: white;
}

.dev-btn-save:hover {
  box-shadow: 0 0 24px var(--neon-glow);
  transform: translateY(-2px);
}

.dev-btn-reset {
  background: rgba(255, 50, 50, 0.1);
  border: 1px solid rgba(255, 50, 50, 0.2);
  color: #ff5555;
}

.dev-btn-reset:hover {
  background: rgba(255, 50, 50, 0.2);
}

.dev-btn-export {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
}

.dev-btn-export:hover {
  border-color: var(--neon-primary);
  color: var(--text-primary);
}

.dev-btn-link {
  background: rgba(80, 140, 255, 0.12);
  border: 1px solid rgba(80, 140, 255, 0.35);
  color: #7bb8ff;
}
.dev-btn-link:hover {
  background: rgba(80, 140, 255, 0.22);
}
.dev-btn-link.linked {
  background: rgba(40, 200, 120, 0.14);
  border-color: rgba(40, 200, 120, 0.45);
  color: #6be3a4;
}

.dev-btn-add {
  background: rgba(120, 80, 255, 0.16);
  border: 1px solid rgba(120, 80, 255, 0.4);
  color: #c0a8ff;
}
.dev-btn-add:hover {
  background: rgba(120, 80, 255, 0.26);
}

/* Image row — preview thumbnail + text input side by side */
.dev-image-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dev-image-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-glass);
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
  display: none; /* hidden until src is set */
}

.dev-image-preview.secure-img-loaded,
.dev-image-preview[src] {
  display: block;
}

.dev-image-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* Toast Notification */
.dev-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 14px 24px;
  border-radius: 14px;
  background: rgba(15, 15, 30, 0.95);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 10001;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dev-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.dev-toast.success {
  border-color: rgba(80, 200, 120, 0.3);
}

.dev-toast.error {
  border-color: rgba(255, 50, 50, 0.3);
}