/* Faseeh Studio marketing site. One light theme in Pocket blue (the app icon's #2D5BFF). */
:root {
  --blue: #2D5BFF;
  --blue-deep: #1E45E0;
  --blue-ink: #1534B8;
  --blue-50: #F3F6FF;
  --blue-100: #E6ECFF;
  --blue-200: #CCD8FF;
  --coral: #FF6B4A;   /* the pen */
  --gold: #FFC531;
  --mint: #12D18E;

  --bg: #FFFFFF;
  --tint: var(--blue-50);
  --text: #16193A;    /* Faseeh's eyes */
  --muted: #5A6188;
  --border: #E2E8FB;
  --shadow: 0 1px 2px rgba(22, 25, 58, .05), 0 14px 34px -14px rgba(45, 91, 255, .28);
  --shadow-lg: 0 34px 80px -28px rgba(21, 52, 184, .55);

  --r-subj-fg: #005A9C; --r-subj-tint: #E3EFFA; --r-subj-line: #0072B2;
  --r-pred-fg: #9A4F00; --r-pred-tint: #FCEBD6; --r-pred-line: #E69F00;
  --r-comp-fg: #8E3B73; --r-comp-tint: #F6E3EF; --r-comp-line: #CC79A7;
  --r-op-fg: #3F454B;   --r-op-tint: #ECEEF0;   --r-op-line: #8A9096;

  --radius: 22px;
  --f-latin: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-ar-ui: "Noto Sans Arabic", "Nunito", system-ui, sans-serif;
  --f-ar-head: "Baloo Bhaijaan 2", "Noto Sans Arabic", system-ui, sans-serif;
  --f-ar-content: "Noto Naskh Arabic", "Amiri", serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 17px/1.65 var(--f-latin); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[data-script="arabic"] body { font-family: var(--f-ar-ui); line-height: 1.85; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 900; letter-spacing: -.02em; }
[data-script="arabic"] :is(h1, h2, h3, h4, .btn, .eyebrow, .stats dt, .pill, .gold, .branches-t, .ranks li, .path h3) { font-family: var(--f-ar-head); letter-spacing: 0; font-weight: 800; }
[data-script="arabic"] :is(h1, h2, h3) { line-height: 1.35; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--blue); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 99; }
.skip:focus { inset-inline-start: 8px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 16px; border: 0; font: 800 16px/1 var(--f-latin); text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(2px); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-ink); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-play { background: #fff; color: var(--text); min-height: 62px; padding: 0 24px 0 18px; text-align: start; box-shadow: 0 5px 0 var(--blue-ink), 0 20px 40px -14px rgba(0,0,0,.35); }
[dir="rtl"] .btn-play { padding: 0 18px 0 24px; }
.btn-play:hover { transform: translateY(-2px); }
.btn-play span { display: flex; flex-direction: column; gap: 3px; }
.btn-play small { font: 700 11px/1 var(--f-latin); color: var(--muted); letter-spacing: .04em; }
[data-script="arabic"] .btn-play small { font-family: var(--f-ar-ui); font-size: 12px; letter-spacing: 0; }
.btn-play strong { font: 900 20px/1 var(--f-latin); color: var(--text); }
.play-ico { width: 28px; height: 28px; flex: none; }
.btn-outline-white { color: #fff; border: 2px solid rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.btn-outline-white:hover { background: rgba(255,255,255,.16); border-color: #fff; }
.btn-white { background: #fff; color: var(--blue-ink); box-shadow: 0 4px 0 rgba(0,0,0,.18); white-space: nowrap; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--border); }
.nav-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 10px; }
.brand-name { font: 900 18px/1 var(--f-latin); letter-spacing: -.01em; white-space: nowrap; }
.nav-links { display: flex; gap: 4px; margin-inline-start: auto; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 700; padding: 8px 12px; border-radius: 10px; font-size: 15px; }
.nav-links a:hover { color: var(--blue); background: var(--blue-50); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang { border: 2px solid var(--border); background: #fff; color: var(--text); height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: 800 14px/1 var(--f-latin); }

.lang:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- hero (Pocket blue, like the app's welcome and vision screens) ---------- */
.hero {
  position: relative; color: #fff; padding: 56px 0 120px; overflow: hidden;
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(520px 380px at 5% 90%, rgba(21,52,184,.6), transparent 70%),
    var(--blue);
}
.hero::before { /* floating diacritics motif */
  content: "ـَ   ـُ   ـِ   ـً   ـْ"; position: absolute; inset: 0; pointer-events: none;
  font: 700 120px/1 var(--f-ar-content); color: rgba(255,255,255,.07); white-space: pre; word-spacing: 120px;
  padding: 40px; transform: rotate(-8deg);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.app-chip { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
[dir="rtl"] .app-chip { padding: 6px 6px 6px 16px; }
.app-chip img { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.app-chip span { display: flex; flex-direction: column; line-height: 1.25; }
.app-chip strong { font-size: 14px; font-weight: 800; }
.app-chip small { font-size: 12px; opacity: .9; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.app-chip small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(18,209,142,.3); }
.h-display { font-size: clamp(42px, 6.4vw, 76px); margin: 22px 0 20px; }
.h-display > span { display: block; }
.h-display mark { background: none; color: var(--gold); position: relative; }
.h-display mark::after { content: ""; position: absolute; inset-inline: 0; bottom: .06em; height: .14em; border-radius: 99px; background: var(--coral); opacity: .9; z-index: -1; }
.branches { display: flex; flex-direction: column; gap: 10px; }
.branches-t { font-weight: 800; font-size: 18px; opacity: .95; }
.branches-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { background: #fff; color: var(--blue-ink); font-weight: 900; padding: 6px 18px; border-radius: 99px; font-size: 17px; }
.gold { color: var(--gold); font-weight: 900; font-size: 17px; margin-inline-start: 6px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-ticks { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; font-size: 15px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--blue); font-size: 12px; font-weight: 900; }
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 80px; }

.hero-art { position: relative; display: grid; place-items: center; min-height: 600px; }
.phone { position: relative; width: 296px; height: 596px; border-radius: 46px; padding: 11px; background: #0F1440; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2B3480; transform: rotate(-4deg); animation: floaty 7s ease-in-out infinite; }
[dir="rtl"] .phone { transform: rotate(4deg); animation-name: floaty-rtl; }
.phone-notch { position: absolute; top: 19px; left: 50%; width: 88px; height: 24px; border-radius: 20px; background: #0F1440; transform: translateX(-50%); z-index: 2; }
.screen { height: 100%; border-radius: 36px; background: #fff; color: var(--text); overflow: hidden; padding: 54px 16px 16px; display: flex; flex-direction: column; gap: 16px; position: relative; font-family: var(--f-ar-ui); direction: rtl; }
.ls-top { display: flex; align-items: center; gap: 10px; }
.ls-x { color: #9AA0B8; font-weight: 800; }
.ls-bar { flex: 1; height: 12px; border-radius: 99px; background: var(--blue-100); overflow: hidden; }
.ls-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; margin-inline-start: 0; }
.ls-xp { font: 800 12px/1 var(--f-latin); color: #9A6B00; background: #FFF4CF; padding: 5px 8px; border-radius: 99px; }
.ls-q { font: 700 17px/1.4 var(--f-ar-head); display: flex; align-items: center; gap: 8px; }
.ls-q b { color: #9A4F00; }
.ls-play { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 11px; flex: none; }
.ls-sentence, .demo-sentence { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-start; direction: rtl; }
.ls-sentence { background: var(--blue-50); border-radius: 18px; padding: 24px 8px 16px; }
.tok { position: relative; font: 700 25px/1.5 var(--f-ar-content); padding: 0 6px 4px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; }
.tok em { font: 700 11px/1 var(--f-ar-ui); font-style: normal; margin-top: 4px; padding: 3px 7px; border-radius: 99px; white-space: nowrap; }
.tok.op { color: var(--r-op-fg); outline: 1.5px solid var(--r-op-line); outline-offset: -1px; background: var(--r-op-tint); padding-block: 2px; }
.tok.subj { color: var(--r-subj-fg); background: var(--r-subj-tint); box-shadow: inset 0 -3px 0 var(--r-subj-line); }
.tok.subj em { background: var(--r-subj-line); color: #fff; }
.tok.pred { color: var(--r-pred-fg); background: var(--r-pred-tint); box-shadow: inset 0 -3px 0 var(--r-pred-line), inset 0 -7px 0 var(--r-pred-tint), inset 0 -9px 0 var(--r-pred-line); }
.tok.pred em { background: var(--r-pred-line); color: #2B1700; }
.tok.comp { color: var(--r-comp-fg); background: var(--r-comp-tint); box-shadow: inset 0 -3px 0 var(--r-comp-line); }
.tok.comp em { background: var(--r-comp-line); color: #2B0A20; }
.ls-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opt { text-align: center; font: 700 17px/1 var(--f-ar-content); padding: 14px 4px; border-radius: 14px; border: 2px solid var(--border); box-shadow: 0 3px 0 var(--border); }
.opt.ok { border-color: #2E9E5B; background: #E4F6EA; color: #1E7B34; box-shadow: 0 3px 0 #2E9E5B; }
.ls-sheet { margin: auto -16px -16px; padding: 16px 18px 18px; background: #E4F6EA; display: flex; flex-direction: column; gap: 6px; animation: sheet 6s ease-in-out infinite; }
.ls-sheet strong { font: 800 18px/1.2 var(--f-ar-head); color: #14532D; }
.ls-sheet span { font-size: 13px; color: #1E5B36; }
.ls-cont { display: block; text-align: center; background: #2E9E5B; color: #fff; border-radius: 14px; padding: 12px; font: 800 15px/1 var(--f-ar-head); box-shadow: 0 4px 0 #1E7B34; margin-top: 6px; }
.faseeh-hero { position: absolute; width: 180px; height: auto; bottom: 10px; inset-inline-start: -30px; filter: drop-shadow(0 18px 24px rgba(10, 20, 80, .35)); animation: bob 5s ease-in-out infinite; }
.float { position: absolute; top: 70px; inset-inline-end: -10px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; background: #fff; color: var(--text); border-radius: 18px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.4); font-weight: 700; font-size: 14px; white-space: nowrap; animation: bob 6s ease-in-out infinite -2s; }
[dir="rtl"] .float { padding: 10px 10px 10px 16px; }
.dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #FFEBD9; font-size: 17px; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes floaty-rtl { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sheet { 0%, 12% { transform: translateY(100%); } 22%, 88% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- stats ---------- */
.stats-sec { position: relative; margin-top: -70px; z-index: 2; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stats > div { padding: 22px 24px; border-inline-start: 1px solid var(--border); }
.stats > div:first-child { border-inline-start: 0; }
.stats dt { font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; color: var(--blue); line-height: 1.2; }
.stats dd { margin: 4px 0 0; color: var(--muted); font-weight: 600; font-size: 15px; }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section-tint { background: var(--tint); }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.sec-head-start { text-align: start; margin: 0; }
.eyebrow { display: inline-block; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--blue); background: var(--blue-100); padding: 6px 14px; border-radius: 99px; margin-bottom: 16px; }
[data-script="arabic"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: 15px; }
.eyebrow-white { background: rgba(255,255,255,.18); color: #fff; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); }
.sec-head p { margin-top: 14px; color: var(--muted); font-size: 18px; }

/* features */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); overflow: hidden; transition: transform .2s; }
.card:hover { transform: translateY(-4px); }
.card::after { content: ""; position: absolute; inset-inline-end: -46px; top: -46px; width: 140px; height: 140px; border-radius: 50%; background: var(--blue); opacity: .06; }
.card h3 { font-size: 21px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 16px; }
.ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 25px; margin-bottom: 18px; background: var(--blue-100); }
.card-xl { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-content: center; align-items: center; background: linear-gradient(160deg, var(--blue-50), #fff 70%); }
.card-xl .card-txt { grid-row: span 2; }
.card-xl h3 { font-size: 27px; }
.demo-sentence { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 30px 12px 22px; gap: 14px; }
.card-xl .tok { font-size: 34px; padding: 2px 10px 6px; }
.card-xl .tok em { font-size: 12px; }

/* study paths */
.paths-head { display: flex; align-items: center; gap: 28px; justify-content: center; margin-bottom: 40px; }
.faseeh-sm { width: 110px; height: auto; flex: none; }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.path { background: #fff; border: 2px solid var(--border); border-radius: var(--radius); padding: 28px; transition: border-color .2s, transform .2s; box-shadow: 0 4px 0 var(--border); }
.path:hover { border-color: var(--blue); box-shadow: 0 4px 0 var(--blue); transform: translateY(-3px); }
.path-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--blue-50); font-size: 28px; margin-bottom: 16px; }
.path h3 { font-size: 22px; margin-bottom: 6px; }
.path p { color: var(--muted); }

/* steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; position: relative; box-shadow: var(--shadow); }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font: 900 24px/1 var(--f-latin); background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-ink); margin-bottom: 20px; }
[data-script="arabic"] .step-n { font-family: var(--f-ar-head); }
.steps h3 { font-size: 21px; margin-bottom: 8px; }
.steps p { color: var(--muted); font-size: 16px; }

/* progress (blue band) */
.section-blue { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; overflow: hidden; }
.prog-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; }
.prog-copy h2 { font-size: clamp(30px, 4vw, 46px); }
.prog-copy p { margin-top: 14px; font-size: 18px; opacity: .92; max-width: 34em; }
.ranks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ranks li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 6px 14px; border-radius: 99px; font: 800 15px/1.4 var(--f-ar-head); position: relative; }
.ranks li:not(:last-child)::after { content: "←"; position: absolute; inset-inline-end: -14px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .6; }
.ranks li { margin-inline-end: 6px; }
.ranks li.top { background: var(--gold); color: #3A2A00; border-color: var(--gold); }
.prog-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.prog-art::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.1); }
.prog-art img { position: relative; width: 200px; height: auto; animation: bob 4s ease-in-out infinite; }
.chipx { position: absolute; background: #fff; color: var(--text); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.45); white-space: nowrap; }
.chipx b { color: var(--blue); }
.c1 { top: 20px; inset-inline-start: 0; } .c2 { bottom: 40px; inset-inline-end: 0; } .c3 { bottom: 0; inset-inline-start: 20px; }

/* pricing table */
.ptable { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.prow { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; }
.prow > span { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; }
.prow > span:first-child { font-weight: 800; }
.phead > span { border-top: 0; font-weight: 900; font-size: 18px; }
[data-script="arabic"] .phead > span { font-family: var(--f-ar-head); }
.prow > span:nth-child(2) { color: var(--muted); }
.prow .prem { background: var(--blue-50); color: var(--blue-ink); font-weight: 800; }
.phead .prem { background: var(--blue); color: #fff; }
.yes { font-size: 20px; font-weight: 900; color: var(--blue) !important; }

/* CTA band */
.band { padding: 0 0 96px; }
.band-in { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 40px 44px; border-radius: 32px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 100%); box-shadow: var(--shadow-lg); }
.band-in::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.08); inset-inline-end: -80px; top: -140px; }
.band-icon { border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 3px solid rgba(255,255,255,.5); }
.band h2 { font-size: clamp(24px, 3vw, 34px); }
.band p { opacity: .9; margin-top: 6px; }

/* apps grid */
.apps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.app { display: flex; gap: 20px; align-items: flex-start; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; transition: transform .2s; }
.app:hover { transform: translateY(-3px); }
.app.featured { grid-column: 1 / -1; border: 2px solid var(--blue); align-items: center; padding: 32px; }
.app-icon { width: 88px; height: 88px; border-radius: 22px; flex: none; box-shadow: 0 8px 20px -8px rgba(21,52,184,.45); }
.app.featured .app-icon { width: 112px; height: 112px; border-radius: 28px; }
.app-body { flex: 1; min-width: 0; }
.app-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.app-title h3 { font-size: 22px; }
.app.featured .app-title h3 { font-size: 28px; }
.app-title .alt { color: var(--muted); font-weight: 700; font-size: 15px; }
.app-line { color: var(--muted); margin-top: 4px; }
.app-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; }
.tag-green { background: #DDF7EC; color: #08734F; }
.tag-blue { background: var(--blue-100); color: var(--blue-ink); }
.tag-orange { background: #FFE7E0; color: #B23A1C; }
.tag-purple { background: #ECE6FF; color: #5A3BE0; }
.tag-gold { background: #FFF2C7; color: #7A5600; }
.app-act { margin-top: 18px; }
.app.featured .app-act { margin-top: 0; }
.pill-soon { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 12px; background: var(--blue-50); color: var(--muted); border: 1.5px dashed var(--blue-200); }
.pill-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.badge-new { position: absolute; top: 16px; inset-inline-end: 16px; font-size: 12px; font-weight: 900; color: #fff; background: var(--coral); padding: 5px 10px; border-radius: 99px; }
.btn-store { background: var(--blue); color: #fff; min-height: 46px; padding: 0 18px; font-size: 15px; border-radius: 14px; box-shadow: 0 3px 0 var(--blue-ink); }
.btn-store:hover { background: var(--blue-deep); }
.btn-store .play-ico { width: 20px; height: 20px; background: #fff; border-radius: 6px; padding: 2px; }

/* FAQ */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 4px 22px; transition: border-color .2s; }
.faq details[open] { border-color: var(--blue); }
.faq summary { cursor: pointer; list-style: none; font-weight: 800; font-size: 18px; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
[data-script="arabic"] .faq summary { font-family: var(--f-ar-head); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--blue-100); color: var(--blue); font: 900 20px/1 var(--f-latin); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 18px; }

/* footer (deep Pocket blue) */
.foot { background: var(--blue-ink); color: #D6DFFF; padding: 64px 0 28px; }
.foot-in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
.foot .brand-name { color: #fff; font-size: 22px; }
.foot-brand p { margin: 10px 0 14px; }
.foot-dev { color: #fff; font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--gold); }
.foot h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot ul a { color: #D6DFFF; text-decoration: none; font-family: var(--f-latin); }
.foot ul a:hover { color: #fff; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: #AFC0FF; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .branches { align-items: center; }
  .branches-row, .hero-cta, .hero-ticks { justify-content: center; }
  .bento { grid-template-columns: 1fr 1fr; }
  .card-xl { grid-column: 1 / -1; grid-row: auto; }
  .steps, .paths { grid-template-columns: 1fr; }
  .prog-in { grid-template-columns: 1fr; text-align: center; }
  .prog-copy p { margin-inline: auto; }
  .ranks { justify-content: center; }
  .nav-links { display: none; }
  .nav-actions { margin-inline-start: auto; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 32px 0 110px; }
  .hero::before { font-size: 80px; word-spacing: 60px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { border-inline-start: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .stats > div { padding: 18px; }
  .bento, .card-xl { grid-template-columns: 1fr; }
  .card-xl .card-txt { grid-row: auto; }
  .card-xl .tok { font-size: 28px; }
  .section { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; }
  .paths-head { flex-direction: column; text-align: center; }
  .sec-head-start { text-align: center; }
  .apps-grid { grid-template-columns: 1fr; }
  .app, .app.featured { flex-direction: column; padding: 24px; align-items: flex-start; }
  .app.featured .app-act { margin-top: 6px; }
  .band { padding-bottom: 72px; }
  .band-in { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 32px 22px; }
  .prow { grid-template-columns: 1fr 1fr; }
  .prow > span:first-child { grid-column: 1 / -1; background: var(--blue-50); padding-block: 10px; font-size: 15px; }
  .phead > span:first-child { display: none; }
  .foot-in { grid-template-columns: 1fr; }
  .phone { width: 262px; height: 530px; }
  .hero-art { min-height: 580px; }
  .faseeh-hero { width: 130px; inset-inline-start: -4px; bottom: 0; }
  .float { inset-inline-end: 0; top: 30px; }
  .nav-actions .btn-sm { display: none; }
  .brand-name { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ================= Studio home page ================= */
[dir="ltr"] .arrow { display: inline-block; transform: scaleX(-1); }
.home-hero { padding: 64px 0 130px; }
.home-hero-in { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.home-title { font-size: clamp(40px, 5.6vw, 68px); margin: 6px 0 18px; }
.home-lead { font-size: 19px; opacity: .92; max-width: 30em; }

/* the featured Pocket Nahw card: the whole card links to its page */
.feature {
  position: relative; display: flex; flex-direction: column; gap: 22px; text-decoration: none; color: var(--text);
  background: #fff; border-radius: 30px; padding: 30px 30px 26px; box-shadow: 0 40px 80px -30px rgba(10, 20, 90, .55);
  transition: transform .2s, box-shadow .2s;
}
.feature:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 50px 90px -30px rgba(10, 20, 90, .6); }
.feature:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
.feature-badge { align-self: flex-start; background: var(--coral); color: #fff; font-weight: 900; font-size: 13px; padding: 6px 12px; border-radius: 99px; }
[data-script="arabic"] .feature-badge { font-family: var(--f-ar-head); font-size: 14px; }
.feature-main { display: flex; align-items: center; gap: 22px; }
.feature-icon { width: 104px; height: 104px; border-radius: 26px; flex: none; box-shadow: 0 12px 26px -10px rgba(21,52,184,.6); }
.feature-text { flex: 1; min-width: 0; }
.feature h2 { font-size: clamp(26px, 2.8vw, 34px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.feature h2 small { font-size: 15px; color: var(--muted); font-weight: 700; font-family: var(--f-latin); }
[data-script="latin"] .feature h2 small { font-family: var(--f-ar-ui); }
.feature-line { color: var(--muted); font-size: 18px; margin-top: 6px; }
.feature-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.feature .pill { background: var(--blue-100); color: var(--blue-ink); font-size: 15px; padding: 4px 14px; }
.feature-faseeh { width: 120px; height: auto; flex: none; margin-block: -40px -10px; animation: bob 5s ease-in-out infinite; }
.feature-go { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: #fff; border-radius: 16px; min-height: 54px; font-weight: 900; font-size: 17px; box-shadow: 0 4px 0 var(--blue-ink); }
[data-script="arabic"] .feature-go { font-family: var(--f-ar-head); font-weight: 800; }
.feature:hover .feature-go { background: var(--blue-deep); }

/* big boxes, one per app */
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.box { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); transition: transform .2s; }
.box:hover { transform: translateY(-5px); }
.box-top {
  position: relative; display: grid; place-items: center; min-height: 220px;
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%),
    linear-gradient(160deg, var(--blue-50), var(--blue-100));
}
.box-top::before { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.box-icon { position: relative; width: 120px; height: 120px; border-radius: 30px; box-shadow: 0 18px 36px -14px rgba(21,52,184,.55); }
.box.soon .box-icon { filter: saturate(.9); }
.box-status { position: absolute; top: 16px; inset-inline-start: 16px; font-size: 12px; font-weight: 800; padding: 6px 11px; border-radius: 99px; background: #fff; color: var(--text); display: flex; align-items: center; gap: 7px; }
.box-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.is-live::before { background: var(--mint); }
.is-soon::before { background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.box-body { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px 26px; flex: 1; }
.box-body .app-title h3 { font-size: 24px; }
.box-body .app-tags { margin-top: 6px; }
.box-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; }
.btn-page { background: #fff; color: var(--blue); border: 2px solid var(--blue); min-height: 46px; padding: 0 18px; font-size: 15px; border-radius: 14px; }
.btn-page:hover { background: var(--blue-50); }

/* promise */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promise article { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.promise h3 { font-size: 21px; margin-bottom: 8px; }
.promise p { color: var(--muted); }

@media (max-width: 1020px) {
  .home-hero-in { grid-template-columns: 1fr; text-align: center; }
  .home-lead { margin-inline: auto; }
  .feature { text-align: start; }
  .boxes { grid-template-columns: 1fr 1fr; }
  .promise { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .home-hero { padding: 36px 0 110px; }
  .feature { padding: 22px 20px 20px; }
  .feature-main { flex-wrap: wrap; }
  .feature-icon { width: 80px; height: 80px; border-radius: 20px; }
  .feature-faseeh { display: none; }
  .boxes { grid-template-columns: 1fr; }
}

/* ================= App pages (Quran Kids, Pocket Arabic, Pocket Tajweed) ================= */
[data-page="qk"] { --accent: #1E9E57; }
[data-page="afl"] { --accent: #FFC531; }
[data-page="tajweed"] { --accent: #12D18E; }
.btn-soon { background: rgba(255,255,255,.14); color: #fff; border: 2px dashed rgba(255,255,255,.6); min-height: 62px; cursor: default; gap: 12px; }
.btn-soon::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); animation: pulse 1.6s ease-in-out infinite; }
.btn-soon:active { transform: none; }
.soon-chip small::before { background: var(--gold) !important; box-shadow: 0 0 0 3px rgba(255,197,49,.3) !important; }

/* hero art: a mascot in a soft circle with a demo card */
.app-art { position: relative; display: grid; place-items: center; min-height: 500px; }
.app-art::before { content: ""; position: absolute; width: 420px; height: 420px; max-width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,.04) 70%); }
.app-art .mascot { position: relative; width: 230px; height: auto; filter: drop-shadow(0 22px 30px rgba(10, 20, 80, .35)); animation: bob 5s ease-in-out infinite; }
.app-art .mascot.qk { width: 300px; animation-duration: 6s; }
.demo { position: absolute; background: #fff; color: var(--text); border-radius: 22px; padding: 16px 18px; box-shadow: 0 26px 50px -20px rgba(0,0,0,.45); }
.demo-a { bottom: 18px; inset-inline-end: 0; width: 270px; }
.demo-b { top: 40px; inset-inline-start: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px; font-weight: 800; font-size: 14px; white-space: nowrap; animation: bob 6s ease-in-out infinite -2s; }
[dir="rtl"] .demo-b { padding: 10px 10px 10px 16px; }
.demo-b .dot { background: var(--blue-50); }
.demo-label { font-size: 12px; font-weight: 800; color: var(--muted); display: block; margin-bottom: 8px; }
/* Quran Kids: repeat circles */
.rep-ayah { font: 700 22px/1.9 var(--f-ar-content); direction: rtl; text-align: center; color: var(--text); }
.rep-dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0 6px; direction: rtl; }
.rep-dots i { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #CDEFD9; }
.rep-dots i.on { background: #1E9E57; border-color: #1E9E57; }
.rep-dots i.half { border-color: #1E9E57; border-inline-start-color: #CDEFD9; }
.rep-count { text-align: center; font: 800 13px/1 var(--f-ar-ui); color: #1E7B34; }
/* Pocket Arabic: a word card */
.word-ar { font: 700 40px/1.4 var(--f-ar-content); text-align: center; direction: rtl; }
.word-tr { text-align: center; font: 800 16px/1.2 var(--f-latin); color: var(--blue); letter-spacing: .02em; }
.word-en { text-align: center; font: 600 14px/1.3 var(--f-latin); color: var(--muted); margin-top: 2px; }
.word-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.mini { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--f-latin); padding: 8px 12px; border-radius: 99px; background: var(--blue-50); color: var(--blue-ink); }
.mini.on { background: var(--blue); color: #fff; }
/* Pocket Tajweed: an ayah card */
.ayah { font: 400 30px/2 "Amiri Quran", "Amiri", var(--f-ar-content); direction: rtl; text-align: center; color: var(--text); }
.ayah .now { background: #DDF7EC; color: #08734F; border-radius: 8px; padding: 0 4px; box-shadow: inset 0 -3px 0 #12D18E; }
.ayah-ref { text-align: center; font: 700 12px/1 var(--f-ar-ui); color: var(--muted); margin-top: 2px; }
.split { display: flex; justify-content: center; margin-top: 12px; direction: rtl; }
.split span { font: 800 12px/1 var(--f-ar-ui); padding: 9px 12px; background: var(--blue-50); color: var(--blue-ink); }
.split span:first-child { border-radius: 0 99px 99px 0; border-inline-end: 2px solid #fff; }
.split span:last-child { border-radius: 99px 0 0 99px; background: #12B886; color: #fff; }

/* level ladders */
.ladders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.ladder { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.ladder h3 { font-size: 22px; margin-bottom: 4px; }
.ladder > p { color: var(--muted); margin-bottom: 16px; }
.ladder ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; position: relative; }
.ladder li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--blue-50); font-weight: 700; font-size: 15px; }
.ladder li b { flex: none; min-width: 52px; text-align: center; font: 900 13px/1 var(--f-latin); padding: 7px 8px; border-radius: 10px; background: var(--blue); color: #fff; }
.ladder li.q { background: color-mix(in srgb, var(--accent) 16%, #fff); }
.ladder li.q b { background: var(--accent); color: #3A2A00; }
[data-page="tajweed"] .ladder li b { background: #12B886; color: #fff; }

/* reciters and credits */
.reciters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.reciter { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; font-weight: 700; }
.reciter::before { content: "▶"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #12B886; color: #fff; font-size: 12px; }
.reciter small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; }
.credits { margin-top: 26px; color: var(--muted); font-size: 15px; display: grid; gap: 4px; text-align: center; }

/* a quiet statement band (e.g. Quran Kids: a waqf for Allah) */
.statement { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 30px; padding: 34px 40px; box-shadow: var(--shadow); }
.statement img { width: 150px; height: auto; }
.statement h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.statement p { color: var(--muted); font-size: 18px; }

@media (max-width: 1020px) {
  .reciters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .app-art { min-height: 460px; }
  .app-art .mascot { width: 180px; }
  .app-art .mascot.qk { width: 220px; }
  .demo-a { width: 250px; inset-inline-end: 50%; transform: translateX(50%); bottom: 0; }
  [dir="rtl"] .demo-a { transform: translateX(-50%); }
  .demo-b { top: 10px; }
  .reciters { grid-template-columns: 1fr; }
  .statement { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 26px 20px; }
  .statement img { width: 120px; }
}

/* fixes: home boxes as a 2×2 grid of big boxes; the mascot sits above the demo card */
.boxes { grid-template-columns: repeat(2, 1fr); }
.box-top { min-height: 250px; }
.box-icon { width: 132px; height: 132px; border-radius: 32px; }
.app-art { min-height: 540px; align-content: start; padding-top: 30px; }
.app-art::before { top: 20px; }
.app-art .demo-a { bottom: 10px; }
@media (max-width: 720px) {
  .boxes { grid-template-columns: 1fr; }
  .app-art { min-height: 470px; padding-top: 40px; }
}
.ayah-ref { margin-top: 10px; }
@media (max-width: 720px) {
  .app-art { padding-top: 84px; }
  .demo-b { top: 0; }
}

/* "more apps" cards: buttons wrap, and one card per row on tablets (English at 768 px overflowed) */
.app-act { display: flex; flex-wrap: wrap; gap: 10px; }
.app-body { min-width: 0; }
@media (max-width: 1020px) {
  .apps-grid { grid-template-columns: 1fr; }
}

/* the language button is a link to the other language's page */
a.lang { display: inline-flex; align-items: center; text-decoration: none; }

/* ===== Other scripts (Quran Kids is in 18 languages) ===== */
/* Urdu, Persian and Pashto: Noto Sans Arabic for headings too (it covers their letters) */
:is([lang="ur"], [lang="fa"], [lang="ps"]) :is(h1, h2, h3, h4, .btn, .eyebrow, .stats dt, .pill, .gold, .branches-t, .step-n, .faq summary) { font-family: var(--f-ar-ui); font-weight: 700; }
:is([lang="ur"], [lang="fa"], [lang="ps"]) .h-display { line-height: 1.5; }
[data-script="bengali"] body, [data-script="bengali"] :is(h1, h2, h3, h4, .btn, .faq summary) { font-family: "Noto Sans Bengali", var(--f-latin); }
[data-script="devanagari"] body, [data-script="devanagari"] :is(h1, h2, h3, h4, .btn, .faq summary) { font-family: "Noto Sans Devanagari", var(--f-latin); }
:is([data-script="bengali"], [data-script="devanagari"]) :is(h1, h2, h3) { line-height: 1.4; letter-spacing: 0; }

/* the language menu (pages in more than two languages) */
.langs { position: relative; }
.langs > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary::after { content: "▾"; font-size: 11px; opacity: .7; }
.langs ul {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; margin: 0; padding: 6px; list-style: none;
  width: 220px; max-height: min(70vh, 460px); overflow-y: auto; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(21, 52, 184, .45); display: grid; gap: 2px;
}
.langs li a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; font: 700 15px/1.3 var(--f-latin); color: var(--text); }
.langs li a:lang(ar), .langs li a:lang(ur), .langs li a:lang(fa), .langs li a:lang(ps) { font-family: var(--f-ar-ui); }
.langs li a:lang(bn) { font-family: "Noto Sans Bengali", var(--f-latin); }
.langs li a:lang(hi) { font-family: "Noto Sans Devanagari", var(--f-latin); }
.langs li a:hover { background: var(--blue-50); color: var(--blue); }
.langs li a[aria-current="true"] { background: var(--blue); color: #fff; }

/* "More of our apps" cards: icon and text on top, the buttons in their own row underneath, so the text never gets
   squeezed beside the buttons (landscape tablets and laptops did). Three cards in one row on wide screens. */
.apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.app, .app.featured {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 18px;
  align-items: start; padding: 24px;
}
.app .app-icon, .app.featured .app-icon { width: 72px; height: 72px; border-radius: 18px; grid-row: 1; }
.app .app-body { grid-column: 2; min-width: 0; }
.app .app-title h3 { font-size: 20px; }
.app .app-act, .app.featured .app-act { grid-column: 1 / -1; align-self: end; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1020px) {
  .apps-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .app, .app.featured { padding: 20px; }
  .app .app-icon { width: 60px; height: 60px; border-radius: 16px; }
}