:root {
  --emerald-950: #022c22;
  --emerald-900: #064e3b;
  --emerald-800: #065f46;
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-200: #a7f3d0;
  --emerald-100: #d1fae5;
  --emerald-50: #ecfdf5;
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #fff;
  --amber: #f59e0b;
  --radius: 24px;
  --shadow: 0 24px 70px rgba(2, 44, 34, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--slate-50); color: var(--slate-900); font-family: Inter, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
[lang="ar"] { font-family: "Traditional Arabic", "Segoe UI", serif; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--white); background: rgba(2, 44, 34, .88); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(18px); }
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; white-space: nowrap; }
.brand-mark { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 13px; color: var(--white); background: var(--emerald-500); font-size: 26px; line-height: 1; box-shadow: 0 8px 18px rgba(2,44,34,.24); }
.nav-links { display: flex; align-items: center; gap: 34px; margin-left: auto; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.72); }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--white); }
.nav-cta { padding: 11px 17px; border-radius: 12px; background: var(--white); color: var(--emerald-800); font-size: 13px; font-weight: 800; }
.menu-button { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: transparent; cursor: pointer; }
.menu-button span { display: block; height: 2px; margin: 4px 0; background: white; transition: .2s; }

.hero { position: relative; overflow: hidden; min-height: 850px; padding: 148px 0 90px; color: var(--white); background: linear-gradient(135deg, var(--emerald-950), var(--emerald-700) 60%, var(--emerald-500)); }
.hero-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000 20%, transparent 90%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.hero-glow-left { width: 360px; height: 360px; left: -180px; top: 280px; background: rgba(52, 211, 153, .17); }
.hero-glow-right { width: 300px; height: 300px; right: -70px; top: 100px; background: rgba(252, 211, 77, .14); }
.hero-layout { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; }
.hero-copy { max-width: 640px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.09); font-size: 13px; font-weight: 700; color: rgba(255,255,255,.88); }
.eyebrow span { display: inline-flex; width: 21px; height: 21px; align-items: center; justify-content: center; border-radius: 50%; background: #fbbf24; color: #78350f; font-size: 10px; }
.hero h1 { margin: 28px 0 24px; font-size: clamp(50px, 5.4vw, 78px); line-height: 1.06; letter-spacing: -.055em; font-weight: 800; }
.hero h1 em { color: var(--emerald-200); font-style: normal; }
.hero-copy > p { max-width: 610px; margin-bottom: 0; color: rgba(236,253,245,.78); font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 22px; border-radius: 15px; font-size: 14px; font-weight: 800; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--white); color: var(--emerald-800); box-shadow: 0 12px 28px rgba(2,44,34,.18); }
.button-light span { font-size: 24px; }
.button-ghost { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.09); color: var(--white); }
.hero-checks { display: flex; flex-wrap: wrap; gap: 18px 24px; margin: 34px 0 0; padding: 0; list-style: none; color: rgba(236,253,245,.74); font-size: 13px; font-weight: 600; }
.hero-checks li { display: flex; align-items: center; gap: 8px; }
.hero-checks span { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(52,211,153,.15); color: var(--emerald-200); }
.scroll-cue { position:absolute; z-index:8; left:50%; top:calc(100vh - 66px); display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(2,44,34,.28); color:rgba(255,255,255,.72); font-size:10px; font-weight:700; letter-spacing:.04em; transform:translateX(-50%); backdrop-filter:blur(10px); transition:opacity .2s; }.scroll-cue b{font-size:15px;animation:scrollNudge 1.5s ease-in-out infinite}
@keyframes scrollNudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

.app-preview { position: relative; width: 100%; max-width: 480px; min-height: 580px; margin-left: auto; display: flex; align-items: center; justify-content: center; }
.phone { position: relative; width: 310px; padding: 8px; border: 9px solid var(--slate-900); border-radius: 47px; background: var(--slate-50); box-shadow: 0 38px 90px rgba(2,44,34,.38), 0 10px 28px rgba(2,44,34,.2); }
.phone-notch { position: absolute; z-index: 2; top: 9px; left: 50%; width: 94px; height: 21px; transform: translateX(-50%); border-radius: 30px; background: var(--slate-900); }
.phone-screen { overflow: hidden; border-radius: 34px; background: var(--slate-50); color: var(--slate-900); }
.phone-head { display: flex; justify-content: space-between; align-items: center; padding: 48px 20px 27px; color: white; background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500)); }
.phone-head small, .phone-head strong { display: block; }
.phone-head small { color: var(--emerald-100); font-size: 10px; }
.phone-head strong { margin-top: 4px; font-size: 16px; }
.avatar { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 13px; font-weight: 800; }
.phone-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: -12px 11px 0; position: relative; }
.phone-stats div { padding: 8px 3px; border-radius: 12px; background: white; text-align: center; box-shadow: 0 4px 12px rgba(15,23,42,.08); font-size: 13px; }
.phone-stats small { display: block; margin-top: 2px; color: var(--slate-700); font-size: 8px; font-weight: 800; }
.phone-body { padding: 18px 13px 20px; }
.phone-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 11px; }
.phone-title span { color: var(--emerald-600); font-size: 8px; font-weight: 700; }
.lesson-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lesson-card { padding: 10px; border: 1px solid var(--slate-100); border-radius: 16px; background: white; box-shadow: 0 3px 10px rgba(15,23,42,.05); }
.lesson-card.active { border-color: var(--emerald-100); }
.letter-tile { height: 65px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--emerald-50); color: var(--emerald-800); font-size: 28px; font-weight: 700; }
.letter-tile.amber { background: #fffbeb; color: #b45309; font-size: 36px; }
.lesson-card > strong { display: block; margin-top: 7px; font-size: 9px; }
.lesson-card > small { display: block; margin-top: 9px; color: var(--slate-400); font-size: 6px; }
.progress { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 20px; background: var(--emerald-100); }
.progress i { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--emerald-500); }
.continue-card { display: flex; gap: 10px; align-items: center; margin-top: 13px; padding: 11px; border-radius: 15px; color: white; background: var(--emerald-600); }
.continue-card > span { display: flex; width: 33px; height: 33px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.15); font-size: 10px; }
.continue-card small, .continue-card strong { display: block; }
.continue-card small { color: var(--emerald-100); font-size: 7px; }.continue-card strong { margin-top: 2px; font-size: 9px; }
.floating-card { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 16px; background: white; color: var(--slate-800); box-shadow: 0 16px 38px rgba(2,44,34,.18); animation: float 5s ease-in-out infinite; }
.floating-card > span { display: flex; width: 39px; height: 39px; align-items: center; justify-content: center; border-radius: 11px; background: #fef3c7; }
.floating-card small, .floating-card strong { display: block; }.floating-card small { color: var(--slate-500); font-size: 9px; }.floating-card strong { margin-top: 2px; font-size: 12px; }
.streak-card { top: 105px; left: -16px; }.reward-card { right: -14px; bottom: 95px; animation-delay: 1s; }.reward-card > span { background: var(--emerald-100); color: var(--emerald-600); }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

.journey-scene { perspective: 1100px; isolation: isolate; }
.journey-stage { --scene-rx:0deg; --scene-ry:0deg; --scroll-y:0px; --scroll-scale:1; --scroll-rz:0deg; position:relative; width:500px; height:560px; transform:translateY(var(--scroll-y)) scale(var(--scroll-scale)) rotateZ(var(--scroll-rz)) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)); transform-style:preserve-3d; transition:transform .16s ease-out; will-change:transform; }
.journey-stage::before { content:""; position:absolute; left:44px; right:20px; bottom:44px; height:110px; border-radius:50%; background:rgba(2,44,34,.34); filter:blur(25px); transform:translateZ(-90px) rotateX(72deg); }
.journey-track { position:absolute; left:60px; top:54px; width:386px; height:422px; border:38px solid #6ee7b7; border-radius:48% 52% 50% 46%; box-shadow:inset 0 0 0 8px rgba(255,255,255,.38), 0 20px 0 #047857, 0 34px 34px rgba(2,44,34,.28); translate:0 var(--track-y,0px); transform:rotateZ(calc(-20deg + var(--track-rz,0deg))) rotateX(58deg) translateZ(-44px); transform-style:preserve-3d; will-change:translate,transform; }
.journey-track::before { content:""; position:absolute; inset:-25px; border:3px dashed rgba(255,255,255,.72); border-radius:inherit; }
.journey-track::after { content:""; position:absolute; width:90px; height:52px; right:-54px; bottom:30px; border-radius:45%; background:#fde68a; box-shadow:0 12px 0 #d97706; }
.journey-track i { position:absolute; width:13px; height:13px; border-radius:50%; background:white; box-shadow:0 4px 0 rgba(5,150,105,.45); }
.journey-track i:nth-child(1){left:30px;top:-28px}.journey-track i:nth-child(2){right:-19px;top:90px}.journey-track i:nth-child(3){left:-16px;bottom:66px}
.letter-float { position:absolute; z-index:4; translate:var(--drift-x,0px) var(--drift-y,0px); animation:sceneFloat 4.3s ease-in-out infinite; transform-style:preserve-3d; will-change:translate,transform; }
.letter-one { left:42px; top:92px; }.letter-two { right:38px; top:82px; animation-delay:-1.1s; }.letter-three { right:16px; top:244px; animation-delay:-2.3s; }.letter-four { left:94px; top:300px; animation-delay:-3.2s; }
.letter-cube { display:flex; width:72px; height:72px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.65); border-radius:20px; color:white; font-size:46px; font-weight:700; text-shadow:0 2px 0 rgba(0,0,0,.12); transform:rotateX(-8deg) rotateY(-15deg) translateZ(58px); box-shadow:inset -10px -12px 18px rgba(0,0,0,.15), inset 7px 7px 12px rgba(255,255,255,.22), 0 10px 0 #047857, 0 22px 28px rgba(2,44,34,.3); }
.letter-cube.mint { background:linear-gradient(145deg,#6ee7b7,#10b981); }.letter-cube.navy { background:linear-gradient(145deg,#334155,#0f172a); box-shadow:inset -10px -12px 18px rgba(0,0,0,.2),inset 7px 7px 12px rgba(255,255,255,.16),0 10px 0 #020617,0 22px 28px rgba(2,44,34,.3); }.letter-cube.lime { background:linear-gradient(145deg,#86efac,#16a34a); }.letter-cube.gold { background:linear-gradient(145deg,#fcd34d,#f59e0b); box-shadow:inset -10px -12px 18px rgba(180,83,9,.2),inset 7px 7px 12px rgba(255,255,255,.25),0 10px 0 #b45309,0 22px 28px rgba(2,44,34,.28); }
.brand-block { position:absolute; z-index:5; left:188px; top:184px; display:flex; width:126px; height:126px; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.52); border-radius:34px; background:linear-gradient(145deg,#10b981,#047857); color:white; font-size:76px; font-weight:700; box-shadow:inset -16px -18px 30px rgba(2,44,34,.25),inset 12px 12px 20px rgba(255,255,255,.18),0 16px 0 #064e3b,0 38px 44px rgba(2,44,34,.38); translate:0 var(--brand-scroll-y,0px); transform:translateZ(100px) rotateX(-8deg) rotateY(10deg); animation:brandPulse 5s ease-in-out infinite; will-change:translate,transform; }
.brand-block span { transform:translateY(-4px); }
.scene-star { position:absolute; z-index:7; color:#fbbf24; filter:drop-shadow(0 6px 5px rgba(146,64,14,.25)); animation:starPop 3s ease-in-out infinite; }.star-one{left:122px;top:50px;font-size:30px}.star-two{right:74px;top:192px;font-size:23px;animation-delay:-1s}.star-three{left:184px;bottom:56px;font-size:37px;animation-delay:-2s}
.reward-token { position:absolute; z-index:6; display:flex; width:42px; height:42px; align-items:center; justify-content:center; border:4px solid #fde68a; border-radius:50%; background:linear-gradient(145deg,#fbbf24,#d97706); color:#fff7ed; font-weight:900; box-shadow:0 7px 0 #92400e,0 14px 18px rgba(2,44,34,.28); animation:tokenSpin 6s linear infinite; }.token-one{right:82px;bottom:82px}.token-two{left:40px;top:250px;animation-delay:-2s}
.scene-cloud { position:absolute; width:72px; height:28px; border-radius:30px; background:rgba(255,255,255,.88); filter:drop-shadow(0 9px 10px rgba(2,44,34,.13)); transform:translateZ(-10px); }.scene-cloud::before,.scene-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}.scene-cloud::before{width:32px;height:32px;left:12px;top:-16px}.scene-cloud::after{width:42px;height:42px;right:7px;top:-22px}.cloud-one{right:22px;top:24px;opacity:.82}.cloud-two{left:8px;bottom:120px;opacity:.62;transform:scale(.75) translateZ(-10px)}
.mini-phone { position:absolute; z-index:8; left:8px; bottom:14px; width:140px; height:222px; padding:26px 12px 12px; border:6px solid var(--slate-900); border-radius:25px; background:white; color:var(--slate-900); box-shadow:0 24px 34px rgba(2,44,34,.3); translate:var(--phone-scroll-x,0px) var(--phone-scroll-y,0px); transform:translateZ(86px) rotateZ(calc(-10deg + var(--phone-scroll-rz,0deg))) rotateY(10deg); will-change:translate,transform; }
.mini-phone-notch { position:absolute; top:6px; left:50%; width:48px; height:8px; border-radius:10px; background:var(--slate-900); transform:translateX(-50%); }.mini-phone small,.mini-phone strong{display:block}.mini-phone small{color:var(--emerald-600);font-size:7px;font-weight:800}.mini-phone strong{margin-top:5px;font-size:9px;line-height:1.35}.mini-letters{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px}.mini-letters span{display:flex;aspect-ratio:1;align-items:center;justify-content:center;border:1px solid var(--emerald-100);border-radius:8px;background:var(--emerald-50);color:var(--emerald-800);font-size:20px}.mini-letters span:nth-child(2){background:var(--emerald-600);color:white}.mini-progress{height:6px;margin-top:18px;border-radius:10px;background:var(--emerald-100);overflow:hidden}.mini-progress i{display:block;width:68%;height:100%;background:var(--emerald-500)}
.journey-progress-card { position:absolute; z-index:9; right:-16px; bottom:25px; display:flex; align-items:center; gap:12px; width:205px; padding:13px; border:1px solid rgba(255,255,255,.7); border-radius:18px; background:rgba(255,255,255,.94); color:var(--slate-900); box-shadow:0 20px 35px rgba(2,44,34,.24); translate:var(--card-scroll-x,0px) var(--card-scroll-y,0px); transform:translateZ(120px) rotateZ(calc(3deg + var(--card-scroll-rz,0deg))); backdrop-filter:blur(12px); will-change:translate,transform; }
.journey-medal { display:flex; width:42px; height:42px; flex:0 0 42px; align-items:center; justify-content:center; border-radius:13px; background:#fef3c7; color:#f59e0b; font-size:23px; }.journey-progress-card small,.journey-progress-card strong{display:block}.journey-progress-card small{color:var(--slate-500);font-size:8px}.journey-progress-card strong{margin-top:2px;font-size:10px}.journey-progress{width:115px;height:5px;margin-top:7px;border-radius:10px;background:var(--emerald-100);overflow:hidden}.journey-progress i{display:block;width:76%;height:100%;border-radius:inherit;background:var(--emerald-500)}
.journey-scene.is-paused * { animation-play-state:paused!important; }
@keyframes sceneFloat { 0%,100%{transform:translateY(0) rotateZ(-2deg)}50%{transform:translateY(-15px) rotateZ(3deg)} }
@keyframes brandPulse { 0%,100%{transform:translateZ(100px) rotateX(-8deg) rotateY(10deg) translateY(0)}50%{transform:translateZ(112px) rotateX(-4deg) rotateY(4deg) translateY(-9px)} }
@keyframes starPop { 0%,100%{transform:scale(.88) rotate(-8deg)}50%{transform:scale(1.18) rotate(9deg)} }
@keyframes tokenSpin { to{transform:rotateY(360deg) translateY(-6px)} }

@media (min-width:981px) and (min-height:700px) {
  .hero { min-height:1280px; height:180vh; padding:0; overflow:clip; }
  .hero-layout { position:sticky; top:72px; min-height:700px; height:calc(100vh - 72px); padding:54px 0; }
}

.facts { border-bottom: 1px solid var(--slate-200); background: white; }
.fact-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.fact-grid > div { padding: 26px; text-align: center; }.fact-grid > div + div { border-left: 1px solid var(--slate-200); }
.fact-grid strong, .fact-grid span { display: block; }.fact-grid strong { color: var(--emerald-600); font-size: 25px; }.fact-grid span { margin-top: 4px; color: var(--slate-500); font-size: 13px; font-weight: 600; }

.section { padding: 104px 0; }
.section-heading { max-width: 680px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading > span, .split-heading > div > span { color: var(--emerald-600); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.section-heading h2 { margin: 12px 0 18px; font-size: clamp(34px, 4vw, 50px); line-height: 1.15; letter-spacing: -.04em; }
.section-heading p { color: var(--slate-600); font-size: 16px; line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }
.feature-card { padding: 27px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: white; box-shadow: 0 2px 8px rgba(15,23,42,.03); transition: transform .2s, border-color .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-4px); border-color: var(--emerald-200); box-shadow: 0 18px 38px rgba(2,44,34,.07); }
.feature-icon { display: flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 15px; font-size: 22px; font-weight: 800; }
.feature-icon.green { color:#059669;background:#ecfdf5}.feature-icon.blue{color:#2563eb;background:#eff6ff}.feature-icon.amber{color:#d97706;background:#fffbeb}.feature-icon.violet{color:#7c3aed;background:#f5f3ff}.feature-icon.cyan{color:#0891b2;background:#ecfeff}.feature-icon.rose{color:#e11d48;background:#fff1f2}
.feature-card h3 { margin: 19px 0 8px; font-size: 17px; }.feature-card p { margin: 0; color: var(--slate-600); font-size: 14px; line-height: 1.75; }

.dark-section { overflow: hidden; background: var(--slate-900); color: white; }
.journey-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 82px; }
.section-heading.light > span { color: #34d399; }.section-heading.light p { color: var(--slate-400); }
.steps { display: grid; gap: 25px; margin: 38px 0 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 18px; }.steps b { display: flex; flex: 0 0 43px; height: 43px; align-items: center; justify-content: center; border-radius: 14px; background: var(--emerald-500); color: var(--emerald-950); font-size: 13px; }
.steps h3 { margin-bottom: 5px; font-size: 16px; }.steps p { margin: 0; color: var(--slate-400); font-size: 14px; line-height: 1.7; }
.lesson-preview { position: relative; padding: 29px; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: rgba(30,41,59,.76); box-shadow: 0 32px 60px rgba(0,0,0,.22); }
.lesson-preview::before { content: ""; position: absolute; z-index: -1; inset: 15%; border-radius: 50%; background: rgba(16,185,129,.25); filter: blur(60px); }
.preview-head { display: flex; justify-content: space-between; align-items: center; }.preview-head small { color: #34d399; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.preview-head h3 { margin: 4px 0 0; font-size: 19px; }.preview-head > span { padding: 6px 10px; border-radius: 20px; background: rgba(16,185,129,.13); color: #6ee7b7; font-size: 10px; font-weight: 700; }
.arabic-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 24px; }.arabic-grid div { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.04); color: var(--slate-400); font-size: 34px; }.arabic-grid .done { border-color: rgba(52,211,153,.28); background: rgba(16,185,129,.09); color: var(--emerald-200); }.arabic-grid .done::after { content:""; position:absolute; width:7px; height:7px; right:8px; top:8px; border-radius:50%; background:#34d399; }
.preview-progress { margin-top: 23px; }.preview-progress > div:first-child { display: flex; justify-content: space-between; color: var(--slate-400); font-size: 9px; }.preview-progress b { color: #34d399; }.bar { height: 8px; margin-top: 9px; overflow: hidden; border-radius: 20px; background: var(--slate-700); }.bar i { display:block;width:62%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--emerald-500),#34d399); }

.curriculum { background: white; }
.split-heading { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 50px; }.split-heading > div { max-width: 650px; }.split-heading > p { max-width: 470px; margin-bottom: 7px; }.split-heading h2 { margin-bottom: 0; }
.level-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 46px; }
.level-card { position: relative; overflow: hidden; padding: 23px; border: 1px solid var(--slate-200); border-radius: var(--radius); background: var(--slate-50); transition: background .2s,border-color .2s; }.level-card:hover { border-color: var(--emerald-200); background: rgba(236,253,245,.65); }.level-card > small { position: absolute; top: 21px; right: 21px; color: var(--slate-400); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.level-card > div { width: 78px; height: 78px; display:flex;align-items:center;justify-content:center;border-radius:16px;background:white;color:var(--emerald-800);font-size:29px;font-weight:700;box-shadow:0 4px 13px rgba(15,23,42,.06); }.level-card h3 { margin: 18px 0 7px; font-size: 18px; }.level-card p { margin: 0; color: var(--slate-600); font-size: 13px; line-height: 1.7; }

.access-section { padding: 0 0 100px; background: white; }
.access-panel { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 58px; padding: 48px; border: 1px solid var(--slate-200); border-radius: 32px; background: var(--slate-50); }
.access-copy > span { color: var(--emerald-600); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.access-copy h2 { margin: 11px 0 14px; font-size: clamp(30px, 3.2vw, 43px); line-height: 1.15; letter-spacing: -.04em; }
.access-copy p { margin: 0; color: var(--slate-600); font-size: 15px; line-height: 1.75; }
.access-options { display: grid; gap: 13px; }
.access-card { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; min-height: 102px; padding: 17px 20px; overflow: hidden; border-radius: 21px; color: white; transition: transform .2s, box-shadow .2s; }
.access-card:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(15,23,42,.15); }
.android-card { background: linear-gradient(135deg, var(--emerald-800), var(--emerald-600)); }
.web-card { background: linear-gradient(135deg, var(--slate-900), var(--slate-700)); }
.access-icon { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255,255,255,.13); }
.access-icon svg { width: 29px; height: 29px; }
.access-card-copy small, .access-card-copy strong, .access-card-copy em { display: block; }
.access-card-copy small { color: rgba(255,255,255,.68); font-size: 10px; font-weight: 600; }
.access-card-copy strong { margin-top: 1px; font-size: 20px; }
.access-card-copy em { margin-top: 4px; color: rgba(255,255,255,.76); font-size: 10px; font-style: normal; }
.access-arrow { color: rgba(255,255,255,.72); font-size: 20px; }

.support-section { padding: 100px 0; background:linear-gradient(180deg,#fff,#fffbeb); }
.support-layout { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:72px; }
.support-kicker { color:#d97706; font-size:12px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.support-copy h2 { margin:12px 0 18px; font-size:clamp(34px,4vw,50px); line-height:1.14; letter-spacing:-.045em; }
.support-copy > p { color:var(--slate-600); font-size:16px; line-height:1.8; }
.support-copy ul { display:grid; gap:12px; margin:28px 0 0; padding:0; list-style:none; color:var(--slate-700); font-size:14px; font-weight:650; }
.support-copy li { display:flex; align-items:center; gap:10px; }.support-copy li span { display:flex; width:24px; height:24px; align-items:center; justify-content:center; border-radius:50%; background:var(--emerald-100); color:var(--emerald-700); font-size:11px; }
.support-card { padding:24px; border:1px solid #fde68a; border-radius:28px; background:rgba(255,255,255,.92); box-shadow:0 25px 60px rgba(146,64,14,.1); }
.support-card-head { display:flex; align-items:center; gap:14px; padding:2px 2px 20px; }.support-card-head > span { display:flex; width:50px; height:50px; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(145deg,#fbbf24,#d97706); color:white; font-size:22px; box-shadow:0 9px 16px rgba(217,119,6,.24); }.support-card-head small,.support-card-head strong{display:block}.support-card-head small{color:#b45309;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.support-card-head strong{margin-top:3px;font-size:17px}
.support-method { border:1px solid var(--slate-200); border-radius:18px; background:var(--slate-50); }
.bank-method { padding:18px; }.support-method-title { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid var(--slate-200); }.support-method-title span { padding:5px 9px; border-radius:9px; background:var(--emerald-100); color:var(--emerald-800); font-size:9px; font-weight:800; text-transform:uppercase; }.support-method-title strong{font-size:14px}
.bank-method dl { display:grid; gap:10px; margin:15px 0; }.bank-method dl div { display:flex; justify-content:space-between; gap:18px; }.bank-method dt { color:var(--slate-500); font-size:10px; }.bank-method dd { margin:0; color:var(--slate-800); font-family:Consolas,"Courier New",monospace; font-size:11px; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.copy-button { width:100%; padding:10px 13px; border:0; border-radius:11px; background:var(--emerald-600); color:white; font:inherit; font-size:11px; font-weight:800; cursor:pointer; transition:background .2s,transform .2s; }.copy-button:hover{background:var(--emerald-700);transform:translateY(-1px)}.copy-button.copied{background:var(--slate-700)}
.wallet-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }.wallet-method { padding:14px; }.wallet-method > span,.wallet-method > strong{display:block}.wallet-method > span{color:var(--slate-500);font-size:9px;font-weight:700}.wallet-method > strong{margin:3px 0 10px;font-size:13px}.copy-button.compact{padding:8px}
.copy-status { min-height:16px; margin:8px 0 -6px; color:var(--emerald-700); font-size:10px; font-weight:700; text-align:center; }
.support-empty { margin:0; padding:24px 18px; border:1px dashed var(--slate-300); border-radius:18px; background:var(--slate-50); color:var(--slate-500); font-size:12px; line-height:1.6; text-align:center; }

.cta-wrap { padding:0 0 100px;background:white; }.cta { position:relative;overflow:hidden;padding:70px 65px;border-radius:40px;background:radial-gradient(circle at 78% 24%,rgba(253,230,138,.22),transparent 25%),linear-gradient(130deg,#064e3b 0%,#047857 48%,#10b981 100%);color:white;box-shadow:0 35px 80px rgba(6,78,59,.24); }.cta::before { content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 78%); }.cta > * { position:relative; }.about-shape { position:absolute;border-radius:999px;pointer-events:none;filter:blur(1px); }.about-shape-one { width:280px;height:280px;right:-90px;top:-110px;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 72px rgba(255,255,255,.025); }.about-shape-two { width:130px;height:130px;left:-54px;bottom:-42px;background:rgba(251,191,36,.12);box-shadow:0 0 60px rgba(251,191,36,.18); }.about-showcase { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:center;gap:70px; }.about-copy-panel { position:relative;z-index:3; }.about-eyebrow { display:flex;align-items:center;gap:12px;color:#a7f3d0;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase; }.cta-mark { width:48px;height:48px;margin:0;background:white;color:var(--emerald-700);font-size:29px;box-shadow:0 12px 28px rgba(2,44,34,.25); }.cta h2 { max-width:660px;margin:24px 0 17px;font-size:clamp(36px,4.3vw,58px);line-height:1.03;letter-spacing:-.05em; }.cta p { max-width:620px;margin:0;color:rgba(236,253,245,.8);font-size:15px;line-height:1.8; }.about-actions { display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:30px; }.about-contact-pill { display:flex;align-items:center;gap:11px;min-width:0;padding:10px 15px 10px 10px;border:1px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(255,255,255,.1);color:white;backdrop-filter:blur(10px);transition:transform .25s ease,background .25s ease,border-color .25s ease; }.about-contact-pill:hover { transform:translateY(-3px);border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.16); }.about-contact-icon { display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:12px;background:#fef3c7;color:#92400e;font-size:17px;font-weight:900; }.about-contact-pill small,.about-contact-pill strong { display:block; }.about-contact-pill small { margin-bottom:2px;color:#a7f3d0;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }.about-contact-pill strong { overflow-wrap:anywhere;font-size:12px; }.about-top-link { min-height:60px;padding-inline:22px;box-shadow:0 14px 30px rgba(2,44,34,.2); }
.academy-stage { position:relative;min-height:430px;display:grid;place-items:center;perspective:1000px;transform-style:preserve-3d; }.academy-card { position:relative;z-index:3;width:min(100%,390px);padding:30px;border:1px solid rgba(255,255,255,.62);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,253,245,.9));color:var(--slate-900);box-shadow:0 35px 65px rgba(2,44,34,.3),inset 0 1px white;transform:rotateY(-8deg) rotateX(5deg);transform-style:preserve-3d;animation:academyFloat 5.5s ease-in-out infinite;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease; }.academy-card:hover { transform:rotateY(0) rotateX(0) translateY(-8px) scale(1.02);box-shadow:0 42px 80px rgba(2,44,34,.36),inset 0 1px white; }.academy-card-top { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:32px;transform:translateZ(22px); }.academy-monogram { display:grid;width:58px;height:58px;place-items:center;border-radius:19px;background:linear-gradient(145deg,#059669,#10b981);color:white;font-family:serif;font-size:34px;box-shadow:0 13px 25px rgba(5,150,105,.24); }.academy-live-dot { display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #d1fae5;border-radius:999px;background:#ecfdf5;color:#047857;font-size:9px;font-weight:800;text-transform:uppercase; }.academy-live-dot i { width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.13);animation:academyPulse 1.8s ease-out infinite; }.academy-card > small { display:block;color:#d97706;font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;transform:translateZ(16px); }.academy-card > strong { display:block;margin-top:9px;font-size:clamp(23px,2.5vw,31px);line-height:1.12;letter-spacing:-.035em;transform:translateZ(25px); }.academy-rule { display:block;width:52px;height:4px;margin:22px 0 16px;border-radius:99px;background:linear-gradient(90deg,#10b981,#fbbf24); }.academy-note { display:block;color:var(--slate-500);font-size:12px;line-height:1.6; }.organization-links { display:flex;flex-wrap:wrap;gap:8px;margin-top:22px; }.organization-links a { padding:9px 12px;border:1px solid var(--slate-200);border-radius:11px;background:white;color:var(--emerald-700);font-size:10px;font-weight:800;box-shadow:0 7px 15px rgba(15,23,42,.06);transition:transform .2s ease,border-color .2s ease; }.organization-links a:hover { transform:translateY(-2px);border-color:#6ee7b7;color:var(--emerald-900); }.academy-orbit { position:absolute;z-index:1;border:1px solid rgba(255,255,255,.23);border-radius:50%;pointer-events:none; }.orbit-one { width:430px;height:430px;animation:orbitSpin 18s linear infinite; }.orbit-one::after { content:"";position:absolute;width:13px;height:13px;left:48px;top:45px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 8px rgba(251,191,36,.13),0 0 26px #fbbf24; }.orbit-two { width:350px;height:350px;border-style:dashed;animation:orbitSpin 24s linear infinite reverse; }.orbit-two::after { content:"";position:absolute;width:9px;height:9px;right:20px;bottom:93px;border-radius:50%;background:#a7f3d0;box-shadow:0 0 18px #a7f3d0; }.academy-spark { position:absolute;z-index:4;color:#fde68a;text-shadow:0 0 18px rgba(253,230,138,.8);animation:sparkPop 3s ease-in-out infinite; }.spark-one { right:3%;top:12%;font-size:26px; }.spark-two { left:2%;bottom:16%;font-size:22px;animation-delay:-1s; }.spark-three { right:10%;bottom:4%;font-size:45px;animation-delay:-2s; }.academy-float-chip { position:absolute;z-index:5;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.92);color:var(--emerald-800);box-shadow:0 14px 30px rgba(2,44,34,.22);backdrop-filter:blur(8px);animation:chipFloat 4s ease-in-out infinite; }.chip-book { left:-2px;top:23%;min-width:84px;height:46px;padding:0 13px;border-radius:15px;font-family:serif;font-size:19px; }.chip-sound { right:-4px;bottom:20%;width:48px;height:48px;border-radius:16px;color:#b45309;font-size:18px;animation-delay:-2s; }
@keyframes academyFloat { 0%,100%{transform:rotateY(-8deg) rotateX(5deg) translateY(0)}50%{transform:rotateY(-5deg) rotateX(3deg) translateY(-10px)} } @keyframes academyFloatMobile { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} } @keyframes orbitSpin { to{transform:rotate(360deg)} } @keyframes academyPulse { 70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} } @keyframes sparkPop { 0%,100%{transform:scale(.75) rotate(-8deg);opacity:.45}50%{transform:scale(1.18) rotate(8deg);opacity:1} } @keyframes chipFloat { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)} }
footer { border-top:1px solid var(--slate-200);background:white; }.footer-inner { min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--slate-500);font-size:12px; }.footer-brand { color:var(--slate-900);font-size:15px; }.footer-brand .brand-mark { width:35px;height:35px;border-radius:11px;font-size:21px; }.footer-inner p { margin:0; }.footer-legal-links{display:flex;align-items:center;gap:14px}.footer-legal-links a{font-weight:700;transition:color .2s ease}.footer-legal-links a:hover{color:var(--emerald-600)}

/* Site-wide scroll depth system */
.site-depth-section { perspective:1400px; perspective-origin:50% 45%; }
.depth-ready .site-depth-panel { opacity:var(--section-opacity,1); transform:perspective(1400px) translate3d(0,var(--section-y,0px),var(--section-z,0px)) rotateX(var(--section-rx,0deg)) rotateY(var(--section-ry,0deg)) scale(var(--section-scale,1)); transform-origin:50% 18%; will-change:transform,opacity; }
.depth-ready .depth-item { opacity:var(--item-opacity,1); transform:perspective(900px) translate3d(var(--item-x,0px),var(--item-y,0px),var(--item-z,0px)) rotateX(var(--item-rx,0deg)) rotateY(var(--item-ry,0deg)) rotateZ(var(--item-rz,0deg)); transform-origin:50% 50%; will-change:transform,opacity; }
.depth-ready .feature-card.depth-item:hover,.depth-ready .level-card.depth-item:hover,.depth-ready .access-card.depth-item:hover { transform:perspective(900px) translate3d(var(--item-x,0px),calc(var(--item-y,0px) - 4px),calc(var(--item-z,0px) + 18px)) rotateX(var(--item-rx,0deg)) rotateY(var(--item-ry,0deg)) rotateZ(var(--item-rz,0deg)); }

@media (max-width: 980px) {
  .hero { padding-top: 130px; }.hero-layout { grid-template-columns: 1fr; }.hero-copy { max-width: 720px; }.app-preview { margin: 0 auto; }.feature-grid { grid-template-columns: repeat(2,1fr); }.journey-layout { grid-template-columns: 1fr; }.lesson-preview { max-width: 600px; }.level-grid { grid-template-columns: repeat(2,1fr); }.split-heading { display:block; }.split-heading > p { margin-top:18px; }.nav-links { gap:16px; }.access-panel { grid-template-columns:1fr; }.support-layout { grid-template-columns:1fr; }.support-copy{max-width:680px}.cta{padding:60px 42px}.about-showcase{gap:35px;grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}.academy-stage{min-height:390px}.orbit-one{width:390px;height:390px}.orbit-two{width:320px;height:320px}
}

@media (max-width: 860px) and (min-width: 721px) { .nav-cta{display:none}.nav-links{gap:14px;font-size:12px} }

@media (max-width: 720px) {
  .container { width: min(100% - 32px, 1180px); }.nav { height:68px; }.nav-links { position:absolute;top:68px;left:0;right:0;display:none;margin:0;padding:12px 16px 20px;flex-direction:column;align-items:stretch;gap:3px;background:rgba(2,44,34,.98);border-top:1px solid rgba(255,255,255,.1); }.nav-links.open { display:flex; }.nav-links a { padding:12px;border-radius:9px; }.nav-links a:hover { background:rgba(255,255,255,.08); }.nav-cta { display:none; }.menu-button { display:block; }.menu-button[aria-expanded="true"] span:first-child { transform:translateY(6px) rotate(45deg); }.menu-button[aria-expanded="true"] span:nth-child(2) { opacity:0; }.menu-button[aria-expanded="true"] span:last-child { transform:translateY(-6px) rotate(-45deg); }
  .hero { min-height:auto;padding:116px 0 74px; }.hero h1 { font-size:48px; }.hero-copy > p { font-size:16px; }.hero-actions { flex-direction:column; }.hero-checks { display:grid;gap:10px; }.app-preview { min-height:430px;margin-top:20px; }.journey-stage { position:absolute;left:50%;top:-58px;transform:translateX(-50%) translateY(var(--scroll-y)) scale(.72) scale(var(--scroll-scale)) rotateZ(var(--scroll-rz)) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)); }.phone { width:285px; }.floating-card { transform:scale(.88); }.streak-card { left:-20px; }.reward-card { right:-15px; }
  .fact-grid { grid-template-columns:1fr; }.fact-grid > div { padding:20px; }.fact-grid > div + div { border-left:0;border-top:1px solid var(--slate-200); }.section { padding:76px 0; }.feature-grid,.level-grid { grid-template-columns:1fr; }.feature-grid { margin-top:36px; }.journey-layout { gap:50px; }.lesson-preview { padding:20px; }.arabic-grid { gap:7px; }.arabic-grid div { border-radius:12px;font-size:27px; }.access-section { padding-bottom:70px; }.access-panel { padding:28px 20px;gap:30px; }.access-card { grid-template-columns:48px 1fr auto;padding:15px; }.access-icon { width:48px;height:48px; }.support-section{padding:72px 0}.support-layout{gap:38px}.support-card{padding:18px}.wallet-grid{grid-template-columns:1fr}.cta-wrap { padding-bottom:70px; }.cta { padding:44px 20px 36px;border-radius:28px; }.about-showcase{grid-template-columns:1fr;gap:24px}.about-eyebrow{justify-content:center}.about-copy-panel{text-align:center}.cta h2{margin:20px auto 15px;font-size:38px}.cta p{margin-inline:auto;font-size:13px}.about-actions{justify-content:center}.about-contact-pill{width:100%;max-width:310px;text-align:left}.academy-stage{min-height:390px;margin-inline:-8px}.academy-card{width:min(100%,330px);padding:23px;border-radius:25px;transform:none;animation-name:academyFloatMobile}.academy-card-top{margin-bottom:23px}.academy-monogram{width:50px;height:50px;border-radius:16px}.academy-card > strong{font-size:24px}.orbit-one{width:340px;height:340px}.orbit-two{width:285px;height:285px}.chip-book{left:0;top:20%}.chip-sound{right:0;bottom:15%}.footer-inner { padding:26px 0;flex-direction:column;text-align:center; }
}

@media (max-width: 400px) {
  .brand { font-size:16px; }.hero h1 { font-size:42px; }.app-preview { transform:scale(.92);margin-inline:-18px; }.app-preview.journey-scene{transform:none;margin-inline:0}.journey-stage{transform:translateX(-50%) translateY(var(--scroll-y)) scale(.67) scale(var(--scroll-scale)) rotateZ(var(--scroll-rz)) rotateX(var(--scene-rx)) rotateY(var(--scene-ry))}.floating-card { display:none; }.bank-method dl div{display:block}.bank-method dd{margin-top:3px;text-align:left}.cta h2{font-size:34px}.academy-stage{min-height:370px}.academy-card{width:100%;padding:21px}.academy-live-dot{font-size:8px}.academy-float-chip{display:none}.orbit-one{width:305px;height:305px}.orbit-two{width:260px;height:260px}.organization-links{display:grid}.organization-links a{text-align:center}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
  .depth-ready .site-depth-panel,.depth-ready .depth-item { opacity:1!important; transform:none!important; }
  .academy-card,.academy-float-chip,.academy-spark,.academy-orbit { animation:none!important;transform:none!important; }
}

/* Cinematic phone scroll story */
.cinematic-ready .site-header { opacity:0; pointer-events:none; transform:translateY(-110%); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1); }
.cinematic-ready.nav-revealed .site-header { opacity:1; pointer-events:auto; transform:translateY(0); }
.cinematic-hero { position:relative; height:430vh; min-height:3000px; color:white; background:var(--emerald-950); }
.cinematic-stage { --phone-scale:.86; --phone-y:0px; --phone-rx:-7deg; --phone-ry:9deg; --phone-opacity:1; --intro-opacity:1; --cue-opacity:1; --screen-ui-opacity:1; --handoff-opacity:0; --handoff-inset-x:50%; --handoff-inset-y:50%; --handoff-radius:80px; --portal-bg-opacity:0; --portal-opacity:0; position:sticky; top:0; height:100vh; min-height:640px; overflow:clip; background:radial-gradient(circle at 50% 46%,#0f9f74 0,#047857 30%,#064e3b 62%,#022c22 100%); perspective:1600px; isolation:isolate; }
.cinematic-grid { position:absolute; inset:0; opacity:calc(.26 - var(--portal-bg-opacity) * .18); background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(circle at center,#000,transparent 82%); }
.cinematic-orb { position:absolute; border-radius:50%; filter:blur(85px); opacity:calc(.35 - var(--portal-bg-opacity) * .2); }.orb-left{width:360px;height:360px;left:-150px;top:25%;background:#34d399}.orb-right{width:300px;height:300px;right:-100px;bottom:10%;background:#fbbf24}
.phone-intro { position:absolute; z-index:4; left:50%; top:50%; display:grid; justify-items:center; gap:4px; width:320px; opacity:var(--intro-opacity); transform:translate(-50%,355px); text-align:center; will-change:opacity,transform; }.intro-mark{display:none}.phone-intro strong{font-size:17px;letter-spacing:.01em}.phone-intro small{color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.cinematic-phone { position:absolute; z-index:5; left:50%; top:50%; width:318px; height:638px; opacity:var(--phone-opacity); transform:translate(-50%,-50%) translateY(var(--phone-y)) scale(var(--phone-scale)) rotateX(var(--phone-rx)) rotateY(var(--phone-ry)); transform-style:preserve-3d; will-change:transform,opacity; }
.cinematic-phone-frame { position:relative; width:100%; height:100%; padding:9px; border:2px solid #334155; border-radius:49px; background:linear-gradient(145deg,#334155,#020617 42%,#0f172a); box-shadow:inset 0 0 0 2px rgba(255,255,255,.09),0 45px 95px rgba(0,0,0,.48),0 14px 25px rgba(0,0,0,.34); }
.cinematic-speaker { position:absolute; z-index:5; top:17px; left:50%; width:88px; height:23px; border-radius:30px; background:#020617; transform:translateX(-50%); box-shadow:inset 0 -1px 0 rgba(255,255,255,.08); }
.cinematic-screen { position:relative; height:100%; overflow:hidden; border-radius:39px; background:var(--slate-50); color:var(--slate-900); }
.cinematic-screen::after { content:""; position:absolute; z-index:8; inset:0; background:linear-gradient(145deg,#f8fafc,#ecfdf5 72%); opacity:var(--portal-bg-opacity); }
.screen-appbar,.screen-content { opacity:var(--screen-ui-opacity); transition:opacity .12s linear; }
.screen-appbar { display:grid; grid-template-columns:40px 1fr 38px; align-items:center; gap:10px; padding:54px 18px 28px; color:white; background:linear-gradient(145deg,#047857,#10b981); }.screen-logo,.screen-avatar{display:flex;align-items:center;justify-content:center;border-radius:13px;background:rgba(255,255,255,.17)}.screen-logo{width:40px;height:40px;font-size:25px}.screen-avatar{width:38px;height:38px;border-radius:50%;font-size:12px;font-weight:800}.screen-appbar small,.screen-appbar strong{display:block}.screen-appbar small{color:#d1fae5;font-size:9px}.screen-appbar strong{margin-top:3px;font-size:15px}
.screen-content { padding:0 15px 18px; }.screen-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:-13px}.screen-stats span{padding:9px 4px;border-radius:13px;background:white;text-align:center;box-shadow:0 5px 13px rgba(15,23,42,.08);font-size:13px}.screen-stats b{display:block;margin-top:2px;color:#334155;font-size:7px}.screen-section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 1px 11px;font-size:11px}.screen-section-title small{color:#059669;font-size:8px;font-weight:800}.screen-levels{display:grid;grid-template-columns:1fr 1fr;gap:10px}.screen-levels article{padding:10px;border:1px solid #e2e8f0;border-radius:17px;background:white;box-shadow:0 4px 12px rgba(15,23,42,.05)}.screen-levels article>div{display:flex;height:82px;align-items:center;justify-content:center;border-radius:12px;background:#ecfdf5;color:#065f46;font-size:28px;font-weight:700}.screen-levels article>div.screen-fathah{background:#fffbeb;color:#b45309;font-size:38px}.screen-levels strong{display:block;margin-top:8px;font-size:9px}.screen-levels small{display:block;margin-top:12px;color:#94a3b8;font-size:6px}.screen-levels i{display:block;height:5px;margin-top:10px;overflow:hidden;border-radius:10px;background:#d1fae5}.screen-levels i b{display:block;width:68%;height:100%;background:#10b981}.screen-continue{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px;border-radius:16px;background:#059669;color:white}.screen-continue>span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.15);font-size:10px}.screen-continue small,.screen-continue strong{display:block}.screen-continue small{color:#d1fae5;font-size:7px}.screen-continue strong{margin-top:2px;font-size:10px}.phone-side-button{position:absolute;right:-5px;top:142px;width:5px;height:76px;border-radius:0 5px 5px 0;background:#475569}
.cinematic-screen-handoff { position:absolute; z-index:10; inset:0; opacity:var(--handoff-opacity); clip-path:inset(var(--handoff-inset-y) var(--handoff-inset-x) round var(--handoff-radius)); background:linear-gradient(145deg,#f8fafc 0%,#ecfdf5 72%,#f0fdf4 100%); box-shadow:inset 0 0 90px rgba(16,185,129,.08); pointer-events:none; will-change:clip-path,opacity; }
.cinematic-screen-handoff::after { content:""; position:absolute; inset:0; opacity:.45; background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.95),transparent 48%); }
.phone-portal { position:absolute; z-index:12; inset:72px 0 0; opacity:var(--portal-opacity); pointer-events:none; color:var(--slate-900); }
.portal-chapter { --chapter-opacity:0; --chapter-y:70px; position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(900px,calc(100% - 48px)); margin:auto; opacity:var(--chapter-opacity); transform:translate3d(0,var(--chapter-y),0) scale(calc(.96 + var(--chapter-opacity) * .04)); text-align:center; will-change:opacity,transform; }
.portal-kicker { color:var(--emerald-600); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }.portal-chapter h1,.portal-chapter h2{margin:16px 0 18px;font-size:clamp(45px,6vw,82px);line-height:1.02;letter-spacing:-.06em}.portal-chapter h1 em{color:var(--emerald-600);font-style:normal}.portal-chapter p{max-width:680px;margin:0;color:var(--slate-600);font-size:17px;line-height:1.75}.portal-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}.portal-pills span{padding:12px 16px;border:1px solid var(--emerald-100);border-radius:14px;background:white;color:var(--emerald-800);font-size:12px;font-weight:800;box-shadow:0 12px 28px rgba(5,150,105,.1)}
.portal-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:min(780px,100%);margin-top:28px}.portal-levels span{display:grid;justify-items:center;gap:8px;padding:20px 12px;border:1px solid var(--slate-200);border-radius:22px;background:white;box-shadow:0 18px 35px rgba(15,23,42,.08)}.portal-levels b{color:var(--emerald-600);font-size:9px;letter-spacing:.1em}.portal-levels em{display:flex;width:74px;height:74px;align-items:center;justify-content:center;border-radius:18px;background:var(--emerald-50);color:var(--emerald-800);font-size:32px;font-style:normal;font-weight:700}.portal-levels small{color:var(--slate-500);font-weight:700}.portal-actions{display:flex;gap:12px;margin-top:30px}.portal-actions a{padding:14px 20px;border-radius:14px;background:var(--emerald-600);color:white;font-size:13px;font-weight:800;pointer-events:auto}.portal-actions a+ a{background:var(--slate-900)}
.cinematic-scroll-cue { position:absolute; z-index:15; left:50%; bottom:24px; display:grid; justify-items:center; gap:8px; opacity:var(--cue-opacity); transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase }.cinematic-scroll-cue i{display:block;width:22px;height:35px;border:1px solid rgba(255,255,255,.35);border-radius:14px}.cinematic-scroll-cue i::after{content:"";display:block;width:4px;height:7px;margin:7px auto;border-radius:4px;background:white;animation:phoneScrollCue 1.6s ease-in-out infinite}@keyframes phoneScrollCue{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(11px);opacity:1}}
.cinematic-progress { position:absolute; z-index:16; right:22px; top:50%; display:grid; gap:16px; opacity:var(--portal-opacity); transform:translateY(-50%); color:var(--slate-400); font-size:9px; font-weight:800 }.cinematic-progress i{position:absolute;right:20px;top:-12px;width:2px;height:calc(100% + 24px);background:var(--slate-200)}.cinematic-progress i::after{content:"";display:block;width:100%;height:var(--story-progress,0%);background:var(--emerald-500)}.cinematic-progress span{position:relative;padding-right:30px}

@media (max-width:720px){
  .cinematic-hero{height:360vh;min-height:2450px}.cinematic-stage{min-height:600px}.cinematic-phone{width:282px;height:566px}.cinematic-phone-frame{border-radius:44px}.cinematic-screen{border-radius:35px}.phone-intro{transform:translate(-50%,318px)}.cinematic-scroll-cue span{display:none}.cinematic-progress{right:6px}.cinematic-progress span{padding-right:20px}.portal-chapter{inset:30px 0 0;width:calc(100% - 34px)}.portal-kicker{font-size:9px}.portal-chapter h1,.portal-chapter h2{font-size:42px}.portal-chapter p{font-size:14px;line-height:1.65}.portal-pills{display:grid;width:100%;max-width:300px}.portal-pills span{padding:10px}.portal-levels{grid-template-columns:repeat(2,1fr);gap:9px;max-width:320px}.portal-levels span{padding:12px 8px;border-radius:16px}.portal-levels em{width:50px;height:50px;border-radius:13px;font-size:25px}.portal-actions{display:grid;width:100%;max-width:280px}.portal-actions a{padding:12px}.screen-appbar{padding-top:48px}.phone-intro strong{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .cinematic-ready .site-header{opacity:1;pointer-events:auto;transform:none}.cinematic-hero{height:auto;min-height:760px}.cinematic-stage{position:relative;height:760px}.cinematic-phone{--phone-scale:.78!important;--phone-rx:0deg!important;--phone-ry:0deg!important}.phone-intro{opacity:1!important}.phone-portal,.cinematic-progress{display:none}.cinematic-scroll-cue{display:none}
}