:root { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #061712; color: #f8f0e2; font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site {
  --night: #061712;
  --night-soft: #0a2119;
  --night-raised: #0e2b21;
  --paper: #f6efe3;
  --paper-deep: #e9ddca;
  --ink: #10241d;
  --text: #f8f0e2;
  --muted: #9cafa5;
  --line: rgba(199, 150, 61, 0.22);
  --green: #0d6a55;
  --mint: #7be2bd;
  --gold: #c7963d;
  --gold-soft: #ead09a;
  --coral: #d8896c;
  --violet: #a987c0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--text);
}

.site[data-theme="dawn"] { --night: #f4ecdf; --night-soft: #ece0ce; --night-raised: #fffaf1; --text: #10241d; --muted: #63746b; --line: rgba(13, 106, 85, 0.2); color-scheme: light; }
.site[data-theme="dawn"] .hero,
.site[data-theme="dawn"] .purpose-section,
.site[data-theme="dawn"] .closing-section,
.site[data-theme="dawn"] .site-footer { --text: #f8f0e2; --muted: #a9bbb2; --line: rgba(199,150,61,.24); color: #f8f0e2; }

.skip-link { position: fixed; left: 14px; top: 14px; z-index: 200; padding: 12px 16px; transform: translateY(-150%); border-radius: 10px; background: var(--gold); color: #071712; font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.page-loader { position: fixed; inset: 0; z-index: 180; display: grid; align-content: center; justify-items: center; gap: 22px; background: #061712; opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s ease; }
.page-preparing .page-loader { opacity: 1; visibility: visible; }
.page-loaded .page-loader { opacity: 0; visibility: hidden; }
.page-loader p { margin: 0; color: #a5b7ae; font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.loader-mark { position: relative; width: 76px; height: 76px; }
.loader-mark span { position: absolute; inset: 0; border: 1px solid rgba(199,150,61,.54); border-radius: 50%; animation: loader-orbit 1.8s linear infinite; }
.loader-mark span:nth-child(2) { inset: 12px; border-color: rgba(123,226,189,.5); animation-direction: reverse; }
.loader-mark span:nth-child(3) { inset: 27px; background: var(--gold); border: 0; box-shadow: 0 0 28px rgba(199,150,61,.6); }

.scroll-progress { position: fixed; inset: 0 0 auto; z-index: 160; height: 2px; background: rgba(255,255,255,.03); pointer-events: none; }
.scroll-progress span { display: block; width: var(--scroll-progress, 0%); height: 100%; background: linear-gradient(90deg,var(--green),var(--mint),var(--gold)); box-shadow: 0 0 18px rgba(123,226,189,.55); }
.cursor-aura { position: fixed; z-index: 0; left: var(--cursor-x); top: var(--cursor-y); width: 520px; height: 520px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle, rgba(123,226,189,.07), transparent 66%); pointer-events: none; }

.site-header { position: fixed; z-index: 100; top: 14px; left: 50%; width: min(calc(100% - 28px), 1380px); height: 74px; padding: 0 18px 0 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 30px; border: 1px solid rgba(223,194,132,.2); border-radius: 22px; background: rgba(6,23,18,.72); box-shadow: 0 20px 70px rgba(0,0,0,.18); backdrop-filter: blur(24px) saturate(140%); transition: height .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { height: 64px; background: rgba(6,23,18,.91); box-shadow: 0 18px 70px rgba(0,0,0,.28); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 194px; }
.brand-logo { width: 42px; height: 46px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.2)); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font: 650 23px/1 "Fraunces", Georgia, serif; }
.brand-copy small { color: #91a59b; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.main-nav a { min-height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 12px; color: #b8c6bf; font-size: 11px; font-weight: 700; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.main-nav a span { color: #7f9289; font-size: 8px; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.is-current { color: #fff8e9; border-color: rgba(199,150,61,.24); background: rgba(255,255,255,.045); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.network-status { display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; color: #9eb0a6; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.network-status i, .live-indicator i, .status-pill i, .footer-system i, .roadmap-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(123,226,189,.1), 0 0 18px rgba(123,226,189,.6); animation: live-pulse 2.4s ease-in-out infinite; }
.icon-button, .menu-button { width: 42px; height: 42px; border: 1px solid rgba(199,150,61,.23); border-radius: 13px; background: rgba(255,255,255,.04); cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.icon-button:hover, .menu-button:hover { transform: translateY(-2px); border-color: rgba(199,150,61,.62); background: rgba(255,255,255,.08); }
.theme-toggle span { font-size: 17px; }
.menu-button { display: none; padding: 0 11px; }
.menu-button span { display: block; width: 18px; height: 1px; margin: 5px auto; background: currentColor; transition: transform .2s ease; }
.menu-button.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero { position: relative; isolation: isolate; min-height: 890px; padding: 118px 0 138px; overflow: hidden; background: radial-gradient(circle at 75% 38%,rgba(13,106,85,.24),transparent 25rem), radial-gradient(circle at 18% 58%,rgba(199,150,61,.09),transparent 26rem), linear-gradient(145deg,#04120e,#071c15 55%,#061712); }
.hero::before { content:""; position: absolute; inset: 0; z-index: -3; opacity: .26; background-image: linear-gradient(rgba(123,226,189,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(123,226,189,.06) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,#000,transparent 92%); }
.hero::after { content:""; position: absolute; inset: 0; z-index: -2; opacity: .13; background-image: radial-gradient(circle at 25% 25%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 75% 60%,#fff 0 1px,transparent 1.5px); background-size: 83px 83px,127px 127px; }
.hero-grid { position: absolute; inset: -18% 34% 0 -18%; z-index: -1; border-radius: 50%; border: 1px solid rgba(199,150,61,.1); animation: grid-drift 18s ease-in-out infinite; }
.signal-line { position: absolute; z-index: 0; height: 1px; width: 42vw; background: linear-gradient(90deg,transparent,rgba(123,226,189,.42),transparent); opacity: .45; }
.signal-line::after { content:""; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); animation:signal-travel 7s linear infinite; }
.signal-line-one { top: 28%; right: -8%; transform: rotate(-18deg); }
.signal-line-two { bottom: 24%; left: -10%; transform: rotate(14deg); }
.signal-line-two::after { animation-delay:-3.5s; }
.hero-inner { position: relative; z-index: 2; width: min(100%,1380px); margin: 0 auto; padding: 34px clamp(28px,5.2vw,76px); display: grid; grid-template-columns: minmax(0,1fr) minmax(460px,.92fr); gap: clamp(54px,7vw,112px); align-items: center; }
.hero-copy { max-width: 680px; }
.system-label { margin: 0 0 24px; display: flex; align-items: center; gap: 12px; color: #91a59b; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.system-label span { color: var(--gold-soft); }
.system-label i { width: 44px; height: 1px; background: linear-gradient(90deg,var(--gold),transparent); }
.system-label b { font-weight: 700; }
.hero-arabic { margin: 0 0 8px; color: var(--gold-soft); font: 400 24px/1.3 "Amiri",serif; opacity: .9; }
.hero h1, .section-heading h2, .purpose-heading h2, .roadmap-intro h2, .closing-copy h2 { margin: 0; font-family:"Fraunces",Georgia,serif; font-weight:650; letter-spacing:-.045em; }
.hero h1 { max-width: 680px; font-size: clamp(62px,6vw,90px); line-height: .94; text-wrap: balance; }
.hero h1 em, .section-heading h2 em, .purpose-heading h2 em, .roadmap-intro h2 em, .closing-copy h2 em { color: var(--gold-soft); font-weight:500; }
.hero-intro { max-width: 610px; margin: 27px 0 0; color:#a9bbb2; font-size:15px; line-height:1.8; }
.hero-actions { margin-top: 30px; display:flex; align-items:center; flex-wrap:wrap; gap:23px; }
.button { min-height: 52px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:28px; border:1px solid transparent; border-radius:14px; font-size:12px; font-weight:800; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button-primary { background:linear-gradient(135deg,#0d765e,#0b5b49); color:#fff; box-shadow:0 18px 54px rgba(13,106,85,.28),inset 0 1px 0 rgba(255,255,255,.15); }
.button:hover { transform:translateY(-3px); box-shadow:0 22px 60px rgba(0,0,0,.28); }
.button b { font-size:17px; }
.text-action { min-height:46px; display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid rgba(199,150,61,.45); color:#dbe4de; font-size:11px; font-weight:700; transition:color .2s ease,border-color .2s ease; }
.text-action:hover { color:var(--gold-soft); border-color:var(--gold); }
.hero-principles { margin-top:34px; padding-top:20px; display:flex; flex-wrap:wrap; gap:20px; border-top:1px solid rgba(199,150,61,.15); color:#90a39a; font-size:10px; font-weight:600; }
.hero-principles span { display:flex; align-items:center; gap:7px; }
.hero-principles i { color:var(--gold); font-style:normal; font-size:8px; }

.sanctuary-engine { --engine-x:0deg; --engine-y:0deg; position:relative; width:min(100%,540px); height:540px; justify-self:center; perspective:1200px; transform:rotateX(var(--engine-x)) rotateY(var(--engine-y)); transform-style:preserve-3d; transition:transform .8s cubic-bezier(.22,1,.36,1); }
.engine-aura { position:absolute; inset:5%; border-radius:50%; background:radial-gradient(circle,rgba(13,106,85,.34),rgba(199,150,61,.08) 44%,transparent 70%); filter:blur(3px); animation:aura-breathe 7s ease-in-out infinite; }
.engine-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(199,150,61,.28); border-radius:50%; transform-style:preserve-3d; }
.engine-ring::before,.engine-ring::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px rgba(199,150,61,.7); }
.engine-ring::before { left:14%; top:12%; }.engine-ring::after { right:10%; bottom:18%; }
.ring-one { width:500px;height:500px;margin:-250px 0 0 -250px;animation:engine-orbit 24s linear infinite; }
.ring-two { width:390px;height:390px;margin:-195px 0 0 -195px;border-style:dashed;border-color:rgba(123,226,189,.22);animation:engine-orbit 18s linear infinite reverse; }
.ring-three { width:280px;height:280px;margin:-140px 0 0 -140px;border-color:rgba(199,150,61,.35);animation:engine-orbit 14s linear infinite; }
.engine-arch { position:absolute; left:50%; bottom:74px; transform:translateX(-50%); border-radius:220px 220px 26px 26px; }
.arch-outer { width:290px;height:372px;border:1px solid rgba(199,150,61,.46);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(13,106,85,.12));box-shadow:0 30px 100px rgba(0,0,0,.25),inset 0 0 50px rgba(123,226,189,.04);backdrop-filter:blur(10px); }
.arch-middle { width:228px;height:318px;bottom:25px;border:1px solid rgba(123,226,189,.26);background:rgba(6,23,18,.45); }
.arch-inner { width:164px;height:252px;bottom:24px;border:1px solid rgba(199,150,61,.45);background:radial-gradient(circle at 50% 22%,rgba(199,150,61,.18),transparent 38%),linear-gradient(180deg,#0d6a55,#073c31);box-shadow:inset 0 0 44px rgba(255,255,255,.04); }
.engine-core { position:absolute; z-index:5; left:50%; top:52%; width:138px; transform:translate(-50%,-50%) translateZ(60px); display:grid; place-items:center; gap:5px; text-align:center; }
.core-pulse { position:absolute; width:96px;height:96px;border:1px solid rgba(199,150,61,.25);border-radius:50%;animation:core-pulse 2.8s ease-out infinite; }
.core-arabic { color:#fff3d3;font:700 45px/1 "Amiri",serif;text-shadow:0 0 25px rgba(199,150,61,.35); }
.engine-core small { color:#b8cac1;font-size:7px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; }
.engine-node { position:absolute; z-index:8; min-width:105px; padding:9px 12px; display:flex; align-items:center; gap:8px; border:1px solid rgba(199,150,61,.25); border-radius:13px; background:rgba(8,30,23,.78); box-shadow:0 16px 46px rgba(0,0,0,.25); backdrop-filter:blur(16px); transition:transform .22s ease,border-color .22s ease,background .22s ease; animation:node-float 5s ease-in-out infinite; }
.engine-node:hover { transform:translateY(-5px) scale(1.04);border-color:rgba(199,150,61,.7);background:rgba(13,60,47,.9); }
.engine-node i { width:31px;height:33px;display:grid;place-items:center;border-radius:14px 14px 5px 5px;background:rgba(123,226,189,.13);color:var(--gold-soft);font:650 15px/1 "Fraunces",serif;font-style:normal; }
.engine-node span { color:#d9e4de;font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }
.node-quran { left:0;top:96px; }.node-classes { right:-8px;top:154px;animation-delay:-1.2s; }.node-students { left:-10px;bottom:124px;animation-delay:-2.4s; }.node-plan { right:4px;bottom:90px;animation-delay:-3.6s; }
.engine-readout { position:absolute; right:5px; top:18px; display:grid; justify-items:end; gap:2px; }
.engine-readout span,.engine-readout small { color:#7f9389;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; }.engine-readout b { color:var(--mint);font-size:13px;letter-spacing:.05em; }

.launch-dock { position:absolute; z-index:10; left:50%; bottom:20px; width:min(calc(100% - 36px),1344px); min-height:96px; padding:10px; transform:translateX(-50%); display:grid; grid-template-columns:170px repeat(4,1fr); border:1px solid rgba(199,150,61,.22); border-radius:20px; background:rgba(5,20,15,.78); box-shadow:0 24px 80px rgba(0,0,0,.26); backdrop-filter:blur(24px) saturate(140%); }
.dock-label { padding:14px 17px; display:grid; align-content:center; gap:5px; border-right:1px solid rgba(199,150,61,.16); }
.dock-label span { color:var(--gold-soft);font:600 18px/1.1 "Fraunces",serif; }.dock-label small { color:#82978d;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; }
.launch-dock>a { position:relative; padding:13px 15px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border-radius:12px; transition:background .2s ease,transform .2s ease; }
.launch-dock>a:not(:last-child)::after { content:"";position:absolute;right:0;top:16px;bottom:16px;width:1px;background:rgba(199,150,61,.12); }
.launch-dock>a:hover { background:rgba(255,255,255,.055);transform:translateY(-2px); }
.launch-dock>a>i { color:var(--gold);font-size:8px;font-style:normal; }.launch-dock>a>span { display:grid;gap:4px; }.launch-dock>a b { font-size:10px; }.launch-dock>a small { color:#84988e;font-size:8px; }.launch-dock>a em { color:var(--mint);font-style:normal; }

.section { width:min(100%,1440px); margin:0 auto; padding:112px clamp(24px,6vw,88px); }
.kicker { margin:0 0 16px; color:#9b6b22; font-size:9px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.section-heading { margin-bottom:44px; display:grid; grid-template-columns:1.1fr .7fr; gap:70px; align-items:end; }
.section-heading h2,.purpose-heading h2,.roadmap-intro h2 { color:var(--ink);font-size:clamp(48px,5vw,70px);line-height:.98; }
.section-heading h2 em,.roadmap-intro h2 em { color:var(--green); }
.section-aside { max-width:430px; justify-self:end; }
.section-aside p,.ecosystem-heading>p { margin:15px 0 0;color:#65766d;font-size:13px;line-height:1.8; }
.status-pill { display:inline-flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid rgba(13,106,85,.16);border-radius:99px;background:rgba(13,106,85,.05);color:var(--green);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; }
.portal-section { background:var(--paper);color:var(--ink); }
.portal-bento { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:160px;gap:15px;perspective:1400px; }
.portal-card { --tilt-x:0deg;--tilt-y:0deg;position:relative;isolation:isolate;padding:21px;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(16,36,29,.12);border-radius:22px;background:rgba(255,252,246,.78);box-shadow:0 18px 50px rgba(33,45,39,.07);transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transform-style:preserve-3d;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease; }
a.portal-card:hover { z-index:3;transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px);border-color:rgba(13,106,85,.28);background:#fffdf8;box-shadow:0 32px 80px rgba(16,36,29,.15); }
.portal-card::before { content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--pointer-x,70%) var(--pointer-y,20%),rgba(123,226,189,.18),transparent 35%);opacity:0;transition:opacity .25s ease; }
a.portal-card:hover::before { opacity:1; }
.card-scan { position:absolute;z-index:0;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 16px rgba(13,106,85,.4);animation:card-scan 5s ease-in-out infinite; }
.portal-quran { grid-column:span 2;grid-row:span 3;background:linear-gradient(145deg,#0b5b49,#072a21 72%);color:#f8f1e4;border-color:rgba(199,150,61,.26);box-shadow:0 30px 90px rgba(7,52,41,.2); }
.portal-quran::before { background:radial-gradient(circle at var(--pointer-x,70%) var(--pointer-y,20%),rgba(199,150,61,.28),transparent 36%); }
.portal-classes,.portal-students { grid-row:span 2; }.portal-plan { grid-column:span 2; }
.portal-top,.portal-footer { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between; }
.portal-index { color:#8b6a2e;font-size:8px;font-weight:800;letter-spacing:.14em; }.portal-quran .portal-index { color:#dfc17d; }
.live-indicator,.planned-indicator { display:inline-flex;align-items:center;gap:7px;color:#587268;font-size:8px;font-weight:800;letter-spacing:.11em;text-transform:uppercase; }.portal-quran .live-indicator { color:#c6d8cf; }.planned-indicator { color:#9b6b22; }
.portal-copy { position:relative;z-index:2;margin-top:auto;display:flex;align-items:flex-start;gap:14px;transform:translateZ(18px); }
.portal-symbol { flex:0 0 auto;width:46px;height:51px;display:grid;place-items:center;border-radius:22px 22px 7px 7px;background:#dfeae4;color:var(--green);font:650 22px/1 "Fraunces",serif; }.portal-quran .portal-symbol { background:rgba(246,239,227,.1);color:#efd695;border:1px solid rgba(199,150,61,.22); }
.portal-copy h3 { margin:0;font:650 27px/1.08 "Fraunces",serif;letter-spacing:-.025em; }.portal-copy p { margin:8px 0 0;color:#66786e;font-size:11px;line-height:1.6; }.portal-quran .portal-copy h3 { font-size:38px; }.portal-quran .portal-copy p { max-width:440px;color:#c0d0c8;font-size:12px; }
.portal-footer { margin-top:15px;padding-top:12px;border-top:1px solid rgba(16,36,29,.1);color:#687a71;font-size:8px;font-weight:700;letter-spacing:.05em; }.portal-quran .portal-footer { border-color:rgba(199,150,61,.18);color:#aebfb6; }.portal-footer b { color:var(--green);font-size:18px; }.portal-quran .portal-footer b { color:var(--gold-soft); }
.quran-interface { position:absolute;inset:52px 22px 116px;overflow:hidden;border:1px solid rgba(199,150,61,.16);border-radius:18px;background:linear-gradient(rgba(255,255,255,.025),rgba(255,255,255,.005)); }
.quran-interface::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(123,226,189,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(123,226,189,.05) 1px,transparent 1px);background-size:32px 32px; }
.verse-line { position:absolute;left:24px;height:4px;border-radius:10px;background:rgba(246,239,227,.15); }.verse-one{top:30px;width:32%}.verse-two{top:48px;width:24%}.verse-three{top:66px;width:38%}
.mini-arch { position:absolute;right:9%;bottom:-28px;width:155px;height:190px;border:1px solid rgba(199,150,61,.28);border-radius:90px 90px 16px 16px;background:radial-gradient(circle at 50% 30%,rgba(199,150,61,.15),transparent 45%),rgba(4,22,17,.44);display:grid;place-items:center; }.mini-arch b { color:#f4dfab;font:700 34px/1 "Amiri",serif; }
.student-orbits { position:absolute;right:18px;top:48px;width:120px;height:120px;border:1px solid rgba(13,106,85,.1);border-radius:50%; }.student-orbits span { position:absolute;inset:27px;border:1px dashed rgba(13,106,85,.17);border-radius:50%; }.student-orbits i { position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(13,106,85,.35); }.student-orbits i:nth-child(1){left:6px;top:53px}.student-orbits i:nth-child(2){right:21px;top:12px}.student-orbits i:nth-child(3){right:8px;bottom:30px}
.plan-track { position:absolute;right:22px;top:55px;display:flex;gap:8px; }.plan-track i { width:31px;height:4px;border-radius:8px;background:#e4dbca; }.plan-track i.done { background:var(--green);box-shadow:0 0 12px rgba(13,106,85,.25); }
.portal-small { padding:17px; }.portal-small .portal-symbol { width:37px;height:41px;font-size:18px; }.portal-small .portal-copy { gap:10px; }.portal-small .portal-copy h3 { font-size:21px; }.portal-small .portal-copy p { margin-top:4px;font-size:9.5px; }.portal-small .portal-footer { margin-top:9px;padding-top:8px; }.portal-finance{background:linear-gradient(145deg,#fbf7ef,#e8efeb)}.portal-games{background:linear-gradient(145deg,#fff8f2,#f5e4dc)}.portal-kids{background:linear-gradient(145deg,#fbf7ff,#ece4f2)}.portal-ai{background:linear-gradient(145deg,#eee6d8,#e3d7c4);opacity:.82}

.section-dark { position:relative;isolation:isolate;padding:120px max(24px,calc((100vw - 1264px)/2));overflow:hidden;background:linear-gradient(145deg,#061712,#08261d 62%,#061712);color:#f8f0e2; }
.purpose-grid-bg { position:absolute;inset:0;z-index:-2;opacity:.36;background-image:linear-gradient(rgba(123,226,189,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(123,226,189,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%); }
.purpose-section::after { content:"";position:absolute;z-index:-1;left:50%;top:40%;width:800px;height:800px;transform:translate(-50%,-50%);border:1px solid rgba(199,150,61,.1);border-radius:50%;box-shadow:0 0 0 100px rgba(199,150,61,.025),0 0 0 220px rgba(123,226,189,.018); }
.purpose-heading { max-width:950px;margin:0 auto;text-align:center; }.purpose-heading .kicker { color:var(--gold-soft); }.purpose-heading h2 { color:#f8f0e2;font-size:clamp(48px,5.3vw,74px); }.purpose-heading p:last-child { max-width:670px;margin:24px auto 0;color:#a8bbb1;font-size:14px;line-height:1.8; }
.purpose-path { position:relative;max-width:1240px;margin:78px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px; }
.path-line { position:absolute;top:25px;left:12%;right:12%;height:1px;background:rgba(199,150,61,.22); }.path-line span { display:block;width:35%;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold));box-shadow:0 0 16px rgba(123,226,189,.45);animation:path-signal 6s ease-in-out infinite; }
.purpose-path article { position:relative;padding:0 22px 26px;text-align:center; }.path-node { position:relative;z-index:2;width:50px;height:50px;margin:0 auto 24px;display:grid;place-items:center;border:1px solid rgba(199,150,61,.32);border-radius:50%;background:#092219;color:var(--gold-soft);font-size:9px;font-weight:800;box-shadow:0 0 0 8px rgba(6,23,18,.9); }
.path-arabic { margin:0;color:var(--gold-soft);font:400 20px/1.2 "Amiri",serif; }.purpose-path h3 { margin:8px 0 0;font:650 30px/1 "Fraunces",serif; }.purpose-path article>p:last-child { margin:12px auto 0;max-width:240px;color:#9eb1a7;font-size:11px;line-height:1.7; }

.ecosystem-section { background:var(--paper);color:var(--ink); }.ecosystem-heading>p { align-self:end;max-width:470px;justify-self:end; }.ecosystem-board { min-height:570px;padding:54px;display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center;border:1px solid rgba(16,36,29,.12);border-radius:30px;background:linear-gradient(145deg,#0a2e23,#061a14);box-shadow:0 35px 100px rgba(16,36,29,.16);color:#f8f0e2;overflow:hidden; }
.board-copy { max-width:500px; }.board-tag { color:var(--mint);font-size:8px;font-weight:800;letter-spacing:.18em; }.board-copy h3 { margin:22px 0 0;font:600 clamp(38px,4vw,56px)/1.02 "Fraunces",serif;letter-spacing:-.035em; }.board-copy>p { margin:22px 0 0;color:#a5b8ae;font-size:13px;line-height:1.8; }.board-stats { margin-top:36px;padding-top:23px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid rgba(199,150,61,.18); }.board-stats span { display:grid;gap:4px; }.board-stats b { color:var(--gold-soft);font:650 28px/1 "Fraunces",serif; }.board-stats small { color:#82988d;font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; }
.network-map { position:relative;width:min(100%,540px);height:470px;justify-self:center; }.map-ring { position:absolute;left:50%;top:50%;border:1px solid rgba(199,150,61,.2);border-radius:50%; }.map-ring-one{width:430px;height:430px;margin:-215px 0 0 -215px;animation:engine-orbit 30s linear infinite}.map-ring-two{width:290px;height:290px;margin:-145px 0 0 -145px;border-style:dashed;border-color:rgba(123,226,189,.18);animation:engine-orbit 20s linear infinite reverse}
.map-core { position:absolute;left:50%;top:50%;width:128px;height:150px;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:8px;border:1px solid rgba(199,150,61,.32);border-radius:66px 66px 16px 16px;background:rgba(6,23,18,.76);box-shadow:0 24px 70px rgba(0,0,0,.3),0 0 50px rgba(13,106,85,.16); }.map-core img{width:52px;height:58px}.map-core span{font:600 16px/1 "Fraunces",serif}
.map-node { position:absolute;padding:9px 12px;border:1px solid rgba(199,150,61,.2);border-radius:99px;background:rgba(9,37,28,.82);color:#b8c9c0;font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 12px 35px rgba(0,0,0,.2);animation:node-float 6s ease-in-out infinite; }.map-quran{left:3%;top:17%}.map-classes{right:6%;top:12%;animation-delay:-1s}.map-students{left:-1%;top:54%;animation-delay:-2s}.map-plan{right:0;top:57%;animation-delay:-3s}.map-family{left:18%;bottom:4%;animation-delay:-4s}.map-tools{right:19%;bottom:2%;animation-delay:-5s}

.roadmap-section { display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;background:#efe5d5;color:var(--ink); }.roadmap-intro { position:sticky;top:110px;align-self:start; }.roadmap-intro h2 { font-size:clamp(48px,4.6vw,66px); }.roadmap-intro>p:last-child { max-width:430px;margin:22px 0 0;color:#64756c;font-size:13px;line-height:1.8; }.roadmap-list { border-top:1px solid rgba(16,36,29,.14); }
.roadmap-item { min-height:150px;padding:24px 0;display:grid;grid-template-columns:68px 82px 1fr auto;gap:20px;align-items:center;border-bottom:1px solid rgba(16,36,29,.14);transition:padding .25s ease,background .25s ease; }.roadmap-item:hover { padding-left:14px;padding-right:14px;background:rgba(255,255,255,.3); }.roadmap-state { color:#8d7d67;font-size:7px;font-weight:800;letter-spacing:.13em;writing-mode:vertical-rl; }.roadmap-number { color:#a87b30;font:600 42px/1 "Fraunces",serif; }.roadmap-item h3 { margin:0;font:650 28px/1 "Fraunces",serif; }.roadmap-item p { margin:8px 0 0;color:#66766e;font-size:11px;line-height:1.6; }.roadmap-status { min-width:78px;display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#7f8d85;font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; }.roadmap-item.is-active .roadmap-status { color:var(--green); }

.closing-section { position:relative;isolation:isolate;min-height:620px;padding:110px 24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#04120e,#0a3528);text-align:center; }.closing-grid { position:absolute;inset:0;z-index:-2;opacity:.25;background-image:linear-gradient(rgba(123,226,189,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(123,226,189,.05) 1px,transparent 1px);background-size:58px 58px;mask-image:radial-gradient(circle,#000,transparent 72%); }.closing-arch { position:absolute;z-index:-1;left:50%;bottom:-260px;width:720px;height:760px;transform:translateX(-50%);border:1px solid rgba(199,150,61,.2);border-radius:380px 380px 30px 30px;box-shadow:0 0 0 90px rgba(199,150,61,.025),0 0 0 190px rgba(123,226,189,.018); }.closing-arch span { position:absolute;inset:90px;border:1px solid rgba(123,226,189,.14);border-radius:300px 300px 20px 20px; }
.closing-copy { position:relative;z-index:2; }.closing-arabic { margin:0 0 18px;color:var(--gold-soft);font:400 24px/1.4 "Amiri",serif; }.closing-copy h2 { font-size:clamp(50px,6vw,82px);line-height:.96; }.closing-copy>p:not(.closing-arabic) { margin:25px 0 0;color:#a9bab1;font-size:12px; }.closing-copy>p span { color:var(--gold-soft); }.button-light { margin-top:30px;background:#f6efe3;color:#10241d;box-shadow:0 20px 65px rgba(0,0,0,.25); }

.site-footer { position:relative;padding:72px max(24px,calc((100vw - 1264px)/2)) 26px;display:grid;grid-template-columns:1fr .8fr 1fr;gap:50px;background:#04110d;border-top:1px solid rgba(199,150,61,.15); }.footer-brand { display:flex;align-items:center;gap:14px; }.footer-brand img{width:56px;height:62px}.footer-brand div{display:grid;gap:5px}.footer-brand strong{font:650 25px/1 "Fraunces",serif}.footer-brand span{color:#7f9489;font-size:9px}.footer-system { align-self:center;display:grid;gap:9px; }.footer-system span{display:flex;align-items:center;gap:9px;color:#b3c4bb;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.footer-system small{color:#6f8479;font-size:8px}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.footer-links div{display:grid;align-content:start;gap:11px}.footer-links strong{margin-bottom:4px;color:var(--gold-soft);font-size:8px;letter-spacing:.16em;text-transform:uppercase}.footer-links a{color:#91a69b;font-size:10px;transition:color .2s ease}.footer-links a:hover{color:#fff}.copyright{grid-column:1/-1;margin:18px 0 0;padding-top:18px;display:flex;justify-content:space-between;border-top:1px solid rgba(199,150,61,.12);color:#667b70;font-size:8px;letter-spacing:.07em;text-transform:uppercase}

.reveal { opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms); }.reveal.is-visible { opacity:1;transform:translateY(0); }
:focus-visible { outline:2px solid var(--gold);outline-offset:4px; }

@keyframes loader-orbit{to{transform:rotate(360deg)}}
@keyframes live-pulse{0%,100%{opacity:.65;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}
@keyframes grid-drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(4%,-3%) rotate(5deg)}}
@keyframes signal-travel{from{left:0}to{left:100%}}
@keyframes aura-breathe{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.08);opacity:1}}
@keyframes engine-orbit{to{transform:rotate(360deg)}}
@keyframes core-pulse{0%{transform:scale(.65);opacity:0}40%{opacity:.7}100%{transform:scale(1.5);opacity:0}}
@keyframes node-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes card-scan{0%,16%{top:0;opacity:0}25%{opacity:1}58%{top:100%;opacity:.6}72%,100%{top:100%;opacity:0}}
@keyframes path-signal{0%{transform:translateX(-60%)}50%{transform:translateX(220%)}100%{transform:translateX(-60%)}}

@media (max-width:1120px){
  .hero-inner{grid-template-columns:minmax(0,1fr) 420px;gap:38px;padding-left:40px;padding-right:40px}.hero h1{font-size:clamp(58px,6vw,74px)}.sanctuary-engine{transform:scale(.86)}
  .network-status{display:none}.main-nav a{padding:0 9px}
  .launch-dock{grid-template-columns:145px repeat(4,1fr)}.launch-dock>a{padding:10px}.launch-dock>a small{display:none}
  .portal-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}.portal-quran{grid-column:span 2}.portal-classes,.portal-students{grid-row:span 2}.portal-plan{grid-column:span 2}.portal-small{grid-row:span 1}
  .roadmap-section{grid-template-columns:1fr;gap:48px}.roadmap-intro{position:static;max-width:720px}.ecosystem-board{grid-template-columns:1fr;}.board-copy{max-width:760px}.network-map{height:440px}
}

@media (max-width:820px){
  .site-header{height:68px;padding:0 12px 0 15px}.brand{min-width:0}.brand-logo{width:38px;height:42px}.brand-copy strong{font-size:21px}.brand-copy small{display:none}
  .main-nav{position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;padding:10px;display:grid;gap:4px;border:1px solid rgba(199,150,61,.23);border-radius:18px;background:rgba(6,23,18,.97);box-shadow:0 24px 70px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease}.main-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}.main-nav a{justify-content:flex-start;min-height:48px;padding:0 14px}.menu-button{display:block}
  .hero{min-height:0;padding:105px 0 28px}.hero-inner{padding:28px 20px 44px;grid-template-columns:1fr;gap:36px}.hero-copy{text-align:center;margin:0 auto}.system-label,.hero-actions,.hero-principles{justify-content:center}.hero h1{font-size:clamp(52px,10.5vw,70px)}.hero-intro{margin-left:auto;margin-right:auto}.sanctuary-engine{width:min(100%,520px);transform:none}
  .launch-dock{position:relative;left:auto;bottom:auto;width:calc(100% - 28px);margin:10px auto 0;transform:none;grid-template-columns:repeat(2,1fr)}.dock-label{grid-column:1/-1;border-right:0;border-bottom:1px solid rgba(199,150,61,.16)}.launch-dock>a:nth-last-child(2)::after{display:none}
  .section{padding:86px 24px}.section-heading{grid-template-columns:1fr;gap:25px}.section-aside,.ecosystem-heading>p{justify-self:start}.purpose-section{padding:95px 24px}.purpose-path{grid-template-columns:repeat(2,1fr);gap:50px 18px}.path-line{display:none}.purpose-path article{padding-left:14px;padding-right:14px}
  .ecosystem-board{padding:36px 26px}.site-footer{grid-template-columns:1fr 1fr}.footer-links{grid-column:1/-1}.copyright{grid-column:1/-1}
}

@media (max-width:620px){
  .header-actions{gap:5px}.icon-button,.menu-button{width:40px;height:40px}.hero{padding-top:94px}.hero-inner{padding-top:24px}.system-label{gap:8px;font-size:8px}.system-label i{width:24px}.hero-arabic{font-size:20px}.hero h1{font-size:clamp(45px,12.6vw,56px);line-height:.97}.hero-intro{font-size:13px;line-height:1.72}.hero-actions{display:grid;gap:8px}.button{width:100%;min-height:52px}.text-action{justify-content:center;border-bottom:0}.hero-principles{gap:10px 14px;font-size:8.5px}
  .sanctuary-engine{height:420px}.ring-one{width:390px;height:390px;margin:-195px 0 0 -195px}.ring-two{width:300px;height:300px;margin:-150px 0 0 -150px}.ring-three{width:220px;height:220px;margin:-110px 0 0 -110px}.arch-outer{width:230px;height:315px;bottom:46px}.arch-middle{width:184px;height:268px}.arch-inner{width:132px;height:214px}.core-arabic{font-size:36px}.engine-node{min-width:86px;padding:7px 8px}.engine-node i{width:26px;height:29px}.engine-node span{font-size:6.5px}.node-quran{top:64px}.node-classes{right:0;top:120px}.node-students{left:0;bottom:92px}.node-plan{right:0;bottom:60px}.engine-readout{display:none}
  .launch-dock{grid-template-columns:repeat(2,1fr);padding:8px}.launch-dock>a{min-height:76px;padding:10px 9px}.launch-dock>a::after{display:none!important}.launch-dock>a:nth-of-type(1),.launch-dock>a:nth-of-type(2){border-bottom:1px solid rgba(199,150,61,.12)}.launch-dock>a:nth-of-type(1),.launch-dock>a:nth-of-type(3){border-right:1px solid rgba(199,150,61,.12)}.launch-dock>a small{display:block;font-size:7px}.launch-dock>a b{font-size:9px}
  .section{padding:70px 20px}.kicker{margin-bottom:12px}.section-heading h2,.purpose-heading h2,.roadmap-intro h2{font-size:clamp(40px,11.5vw,50px)}.section-heading{margin-bottom:30px}.section-aside p,.ecosystem-heading>p{font-size:12px}
  .portal-bento{grid-template-columns:1fr;grid-auto-rows:auto}.portal-card,.portal-quran,.portal-classes,.portal-students,.portal-plan,.portal-small{grid-column:auto;grid-row:auto;min-height:250px}.portal-quran{min-height:470px}.portal-classes,.portal-students{min-height:300px}.portal-plan{min-height:270px}.portal-small{min-height:210px}.portal-quran .portal-copy h3{font-size:32px}.quran-interface{bottom:135px}.student-orbits{opacity:.5}
  .purpose-section{padding:78px 20px}.purpose-heading p:last-child{font-size:12px}.purpose-path{margin-top:56px;grid-template-columns:1fr;gap:34px}.purpose-path article{padding-bottom:6px}.purpose-path article>p:last-child{max-width:300px}
  .ecosystem-board{min-height:0;padding:30px 20px;border-radius:22px}.board-copy h3{font-size:38px}.board-stats{gap:6px}.board-stats b{font-size:23px}.network-map{height:340px;transform:scale(.86);margin:-22px 0}.map-ring-one{width:340px;height:340px;margin:-170px 0 0 -170px}.map-ring-two{width:230px;height:230px;margin:-115px 0 0 -115px}.map-core{width:105px;height:125px}.map-core img{width:43px;height:48px}
  .roadmap-section{gap:35px}.roadmap-item{min-height:140px;grid-template-columns:44px 1fr auto;gap:12px}.roadmap-state{display:none}.roadmap-number{font-size:32px}.roadmap-item h3{font-size:24px}.roadmap-status{min-width:55px;font-size:6.5px}.roadmap-item p{font-size:10px}
  .closing-section{min-height:560px;padding:84px 20px}.closing-copy h2{font-size:clamp(44px,12vw,56px)}.closing-arch{width:500px;height:600px;bottom:-250px}.closing-arabic{font-size:21px}
  .site-footer{padding:54px 20px 24px;grid-template-columns:1fr;gap:30px}.footer-system,.footer-links{grid-column:auto}.footer-links{gap:20px}.copyright{grid-column:auto;display:grid;gap:7px}.footer-links a{min-height:38px;display:flex;align-items:center}
}

@media (pointer:coarse){.cursor-aura{display:none}.portal-card{transform:none!important}.magnetic{transform:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.cursor-aura{display:none}.reveal{opacity:1;transform:none}.sanctuary-engine,.portal-card{transform:none!important}}