/* ============================================================
   SALIK FOUNDATION — Qur'an distribution · editorial landing page
   Parchment + deep blue + gold. Framed photography (full 3:2 images).
   Built by Ummah Technologies. Vanilla CSS, no deps.
   ============================================================ */

:root{
  --blue:       #2D8CDB;
  --blue-deep:  #1C6FAC;
  --blue-dark:  #124E7A;
  --navy:       #0E2A40;
  --navy-2:     #0A2032;

  --cream:      #FAF6EE;
  --cream-2:    #F3EBDB;
  --paper:      #FFFFFF;

  --gold:       #C9A961;
  --gold-deep:  #A8884A;
  --gold-soft:  #E7D6AC;

  --ink:        #15222F;
  --ink-soft:   #586679;
  --line:       rgba(18,34,48,0.10);
  --line-gold:  rgba(168,136,74,0.28);

  /* status colours (toasts + form errors) */
  --ok:         #2E9E6B;
  --err:        #C0564F;
  --warn:       #C79A2E;

  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-accent:  'Fraunces', Georgia, serif;
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --maxw:         1180px;
  --pad:          clamp(1.15rem, 5vw, 4rem);
  --r:            16px;
  --r-lg:         22px;
  --shadow:       0 30px 60px -34px rgba(14,42,64,0.45);
  --shadow-soft:  0 18px 44px -26px rgba(14,42,64,0.38);

  /* ----------------------------------------------------------
     MODULAR TYPE SCALE — major third (1.25), 16px base.
     Headings interpolate fluidly via clamp(min … max); body
     and UI tiers stay at stable, readable sizes.
     ---------------------------------------------------------- */
  --fs-caption:  0.75rem;                                        /* 12px  — tracked uppercase labels, tags, fine print */
  --fs-small:    0.875rem;                                       /* 14px  — secondary / UI text */
  --fs-body:     1rem;                                           /* 16px  — base body (stable) */
  --fs-body-lg:  1.125rem;                                       /* 18px  — lead paragraphs (stable) */
  --fs-h4:       1.25rem;                                        /* 20px  — small headings */
  --fs-h3:       clamp(1.5rem,  1.28rem + 1.10vw, 1.953rem);     /* 24 → 31 */
  --fs-h2:       clamp(1.9rem,  1.52rem + 1.90vw, 2.441rem);     /* 30 → 39 */
  --fs-h1:       clamp(2.25rem, 1.55rem + 3.00vw, 3.052rem);     /* 36 → 49 */
  --fs-display:  clamp(2.9rem,  1.30rem + 6.40vw, 5.5rem);       /* 46 → 88 */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:6rem; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body); color:var(--ink); background:var(--cream);
  font-size:var(--fs-body); line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-family:var(--font-accent); font-style:italic; font-weight:500; }
::selection{ background:var(--gold); color:#1a1304; }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- type primitives ---------- */
.eyebrow{ font-size:var(--fs-caption); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-deep); }
.kicker{ font-size:var(--fs-caption); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); display:inline-flex; align-items:center; gap:0.65rem; margin-bottom:1.1rem; }
.kicker::before{ content:""; width:1.9rem; height:2px; background:var(--gold); border-radius:2px; }
.kicker--center{ justify-content:center; }
.section-title{ font-family:var(--font-accent); font-size:var(--fs-h2); font-weight:500; line-height:1.08; letter-spacing:-0.01em; color:var(--ink); }
.section-head{ max-width:42ch; margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-note{ color:var(--ink-soft); margin-top:1.1rem; max-width:54ch; font-size:var(--fs-body-lg); }
.section-note--center{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; font-family:var(--font-body); font-weight:700; font-size:var(--fs-body); padding:0.9rem 1.7rem; border-radius:100px; border:0; cursor:pointer; transition:transform .35s var(--ease), background-color .3s, box-shadow .3s, color .3s, border-color .3s; white-space:nowrap; }
.btn--primary{ background:linear-gradient(180deg, var(--blue), var(--blue-deep)); color:#fff; box-shadow:0 14px 28px -14px rgba(28,111,172,0.85); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(28,111,172,0.9); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--blue-deep); transform:translateY(-2px); }
.btn--white{ background:var(--cream); color:var(--blue-dark); box-shadow:0 16px 32px -16px rgba(0,0,0,0.5); }
.btn--white:hover{ transform:translateY(-2px); background:#fff; }
.btn--glass{ background:rgba(255,255,255,0.10); color:#fff; border:1.5px solid rgba(255,255,255,0.45); backdrop-filter:blur(6px); }
.btn--glass:hover{ background:rgba(255,255,255,0.18); border-color:#fff; transform:translateY(-2px); }
.btn--lg{ padding:1.05rem 2.15rem; font-size:var(--fs-body-lg); }
.btn--block{ width:100%; }

/* ---------- reveal ---------- */
.reveal,.reveal-stagger{ opacity:0; transform:translateY(24px); }
.is-in{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
@media (prefers-reduced-motion:reduce){ .reveal,.reveal-stagger{ opacity:1; transform:none; } *{ animation:none !important; } }

/* Journey — "reverse-tetris": each row's two blocks (image + copy) rise from
   below and lock into place. Hidden from first paint; GSAP drives them in.
   Reduced-motion / no-JS fallbacks reveal them (see main.js showAll). */
.stack-row > .frame,
.stack-row > .row__copy{ opacity:0; will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce){
  .stack-row > .frame,
  .stack-row > .row__copy{ opacity:1; will-change:auto; }
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- inline CTA rows ---------- */
.cta-row{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:2rem; }
.cta-row--center{ justify-content:center; margin-top:clamp(2rem,4vw,3rem); }

/* ---------- the FRAME (full 3:2 image windows) ---------- */
.frame{ position:relative; overflow:hidden; border-radius:var(--r); background:#fff;
  border:1px solid var(--line-gold); box-shadow:var(--shadow); }
.frame img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.frame--cap figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem 1rem;
  color:#fff; font-family:var(--font-accent); font-style:italic; font-size:var(--fs-body-lg); line-height:1.25;
  background:linear-gradient(180deg, transparent, rgba(6,19,31,0.85)); }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:100; background:transparent; border-bottom:1px solid transparent; transition:background-color .4s, border-color .4s, box-shadow .4s; }
.nav--scrolled{ background:rgba(250,246,238,0.85); backdrop-filter:blur(12px) saturate(140%); border-bottom:1px solid var(--line); box-shadow:0 8px 26px -20px rgba(14,42,64,0.5); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding-block:0.85rem; }
.nav__brand{ display:flex; align-items:center; gap:0.6rem; color:#fff; transition:color .4s; }
.nav--scrolled .nav__brand{ color:var(--ink); }
.nav__mark{ width:40px; height:40px; border-radius:10px; }
.nav__name{ font-weight:800; font-size:var(--fs-h4); letter-spacing:-0.01em; }
.nav__name em{ font-family:var(--font-body); font-style:normal; font-weight:500; opacity:0.85; }
.nav__links{ display:flex; gap:1.9rem; margin-left:auto; margin-right:1.6rem; }
.nav__links a{ font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,0.9); transition:color .3s; text-shadow:0 1px 10px rgba(8,22,36,0.5); }
.nav--scrolled .nav__links a{ color:var(--ink-soft); text-shadow:none; }
.nav__links a:hover{ color:#fff; }
.nav--scrolled .nav__links a:hover{ color:var(--blue-deep); }

/* ---------- HERO (cinematic full-bleed — video-ready) ---------- */
.hero{ position:relative; min-height:clamp(620px,94vh,960px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; margin-top:-72px; padding-top:72px; }
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__media img, .hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
@keyframes heroKen{ from{ transform:scale(1.07); } to{ transform:scale(1); } }
.hero__media img{ animation:heroKen 7s var(--ease) both; }
.hero__scrim{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(8,22,36,0.46) 0%, rgba(8,22,36,0.08) 26%, rgba(8,22,36,0.42) 58%, rgba(8,22,36,0.93) 100%),
  linear-gradient(90deg, rgba(8,22,36,0.80) 0%, rgba(8,22,36,0.32) 46%, transparent 78%); }
.hero__inner{ position:relative; max-width:52rem; padding-block:clamp(2.8rem,7vw,5.5rem); }
.hero .eyebrow{ color:var(--gold-soft); margin-bottom:1.2rem; text-shadow:0 1px 12px rgba(8,22,36,0.7); }
.hero__title{ font-family:var(--font-accent); font-weight:500; color:#fff; font-size:var(--fs-display); line-height:1.0; letter-spacing:-0.02em; margin-bottom:1.4rem; text-wrap:balance; text-shadow:0 2px 40px rgba(8,22,36,0.6), 0 1px 4px rgba(8,22,36,0.5); }
.hero__title em{ color:var(--gold-soft); }
.hero__sub{ font-size:var(--fs-body-lg); color:rgba(255,255,255,0.92); max-width:46ch; margin-bottom:2rem; text-shadow:0 1px 16px rgba(8,22,36,0.72); }
.hero__sub strong{ color:#fff; font-weight:700; }
.hero__cta{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-bottom:2rem; }
.trustbar{ display:flex; gap:1.6rem; flex-wrap:wrap; list-style:none; }
.trustbar li{ display:flex; align-items:center; gap:0.5rem; font-size:var(--fs-small); font-weight:600; color:rgba(255,255,255,0.92); text-shadow:0 1px 10px rgba(8,22,36,0.7); }
.trustbar span{ display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--gold); color:#1a1304; font-size:var(--fs-caption); font-weight:800; }
.hero__scroll{ position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); width:26px; height:42px; border:2px solid rgba(255,255,255,0.45); border-radius:14px; display:grid; justify-items:center; padding-top:7px; z-index:2; }
.hero__scroll span{ width:4px; height:8px; border-radius:2px; background:rgba(255,255,255,0.85); animation:scrollDot 1.9s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1; } 55%{ transform:translateY(13px); opacity:0; } 56%{ opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@media (max-width:900px){ .hero__scroll{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero__scroll span{ animation:none; } }

/* ---------- scroll progress ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:300; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft)); }

/* ---------- hero word split ---------- */
.hero__title .hw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.12em; margin-bottom:-0.12em; }
.hero__title .hw__i{ display:inline-block; }

/* ---------- INSTAGRAM (daily reminders grid — @salik.foundation) ---------- */
.ig{ padding-block:clamp(3.5rem,8vw,6rem); background:linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.ig__handle{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.15rem; font-weight:700; font-size:var(--fs-small); color:var(--ink); }
.ig__handle svg{ width:18px; height:18px; color:var(--blue-deep); }
.ig__handle a{ color:var(--blue-deep); text-decoration:none; }
.ig__handle a:hover{ text-decoration:underline; }
.ig__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.55rem,1.5vw,1.05rem); }
.ig__tile{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:var(--navy-2); box-shadow:var(--shadow-soft); text-decoration:none; }
.ig__tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ig__tile:hover img, .ig__tile:focus-visible img{ transform:scale(1.06); }
.ig__tile:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.ig__badge{ position:absolute; top:0.7rem; right:0.7rem; z-index:3; display:inline-flex; align-items:center; gap:0.34rem; font-size:var(--fs-caption); font-weight:800; letter-spacing:0.02em; color:#fff; padding:0.26rem 0.56rem; border-radius:100px; background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); box-shadow:0 6px 16px -6px rgba(150,47,191,0.55); }
.ig__badge svg{ width:13px; height:13px; }
.ig__overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:0.5rem; padding:0.95rem; color:#fff; background:linear-gradient(180deg, rgba(6,19,31,0) 40%, rgba(6,19,31,0.86)); opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.ig__tile:hover .ig__overlay, .ig__tile:focus-visible .ig__overlay{ opacity:1; transform:none; }
.ig__cap{ font-size:var(--fs-small); line-height:1.34; font-weight:600; text-shadow:0 1px 12px rgba(0,0,0,0.45); }
.ig__view{ display:inline-flex; align-items:center; gap:0.4rem; font-size:var(--fs-caption); font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-soft); }
.ig__view svg{ width:14px; height:14px; }
.ig__follow{ text-align:center; margin-top:clamp(2rem,4vw,2.9rem); }
.btn--ig{ background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5); color:#fff; box-shadow:0 16px 32px -16px rgba(150,47,191,0.65); }
.btn--ig:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(150,47,191,0.78); filter:saturate(1.06); }
.btn--ig svg{ width:19px; height:19px; }
@media (max-width:760px){ .ig__grid{ grid-template-columns:repeat(2,1fr); } }
/* Touch devices have no hover — keep tiles clean like a real IG grid (tap opens the reel) */
@media (hover:none){ .ig__overlay{ display:none; } }

/* ---------- marquee ---------- */
.marquee{ background:var(--navy); border-block:1px solid rgba(201,169,97,0.25); overflow:hidden; padding-block:1rem; }
.marquee__inner{ display:flex; width:max-content; animation:marqueeScroll 32s linear infinite; }
.marquee__inner span{ font-family:var(--font-accent); font-style:italic; font-size:var(--fs-h4); color:var(--gold-soft); white-space:nowrap; padding-right:1rem; }
@keyframes marqueeScroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__inner{ animation:none; } }


/* ---------- THE JOURNEY (alternating rows) ---------- */
.work{ padding-block:clamp(3.5rem,8vw,6.5rem); background:var(--cream-2); }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.row + .row{ margin-top:clamp(3rem,6vw,5rem); }
.row--rev .frame{ order:2; }
.row__num{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h1); line-height:1; color:var(--gold); margin-bottom:0.15rem; }
.row__kicker{ font-size:var(--fs-caption); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:0.8rem; }
.row__title{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h3); line-height:1.1; letter-spacing:-0.01em; margin-bottom:0.9rem; }
.row__text{ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:46ch; }

/* ---------- CTA band ---------- */
.ctaband{ padding-block:clamp(3rem,6vw,4.5rem); }
.ctaband__inner{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--blue-deep), var(--navy)); border-radius:var(--r-lg); padding:clamp(2.4rem,5vw,4rem); text-align:center; color:#fff; box-shadow:0 44px 90px -48px rgba(14,42,64,0.72); }
.ctaband__inner::before{ content:""; position:absolute; top:-55%; left:50%; width:55%; aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(circle, rgba(201,169,97,0.30), transparent 65%); pointer-events:none; }
.ctaband__title{ position:relative; font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-0.01em; margin:0 auto 1.6rem; max-width:22ch; }
.ctaband__title em{ color:var(--gold-soft); }
.ctaband__cta{ position:relative; display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; }

/* ---------- THE OPPORTUNITY ---------- */
.opp{ padding-block:clamp(3.8rem,8vw,6.5rem); }
.opp__grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.opp__head{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-0.01em; margin-bottom:1.3rem; }
.opp__head em{ color:var(--blue-deep); }
.opp__body{ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:50ch; }
.opp__body strong{ color:var(--ink); font-weight:700; }
.ayah-quote{ margin:1.6rem 0 0; padding:1.3rem 1.5rem; border-left:3px solid var(--gold); background:var(--cream-2); border-radius:0 12px 12px 0; }
.ayah-quote__ar{ display:block; font-size:var(--fs-h3); color:var(--gold-deep); line-height:1.5; margin-bottom:0.5rem; }
.ayah-quote__en{ display:block; font-family:var(--font-accent); font-style:italic; font-size:var(--fs-body-lg); color:var(--ink); }
.ayah-quote cite{ display:block; font-style:normal; font-size:var(--fs-small); letter-spacing:0.04em; color:var(--ink-soft); margin-top:0.4rem; }
.opp__media{ border-radius:var(--r-lg); }

/* ---------- MOMENTS (horizontal filmstrip) ---------- */
.moments{ padding-block:clamp(3.8rem,8vw,6.5rem); }
.moments__hint{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:0.9rem; font-style:italic; }
.filmstrip{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding-block:0.5rem 1.6rem; }
.filmstrip--pinned{ overflow:hidden; scroll-snap-type:none;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, #000 0%, #000 90%, transparent 100%); }
.filmstrip::-webkit-scrollbar{ height:8px; }
.filmstrip::-webkit-scrollbar-thumb{ background:var(--line-gold); border-radius:4px; }
.filmstrip--pinned::-webkit-scrollbar{ display:none; }
.filmstrip__track{ display:flex; gap:1.3rem; width:max-content; padding-inline:var(--pad); will-change:transform; }
.filmstrip__item{ flex:0 0 auto; width:min(720px, 76vw); scroll-snap-align:center; }
.filmstrip__cta{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.3rem; text-align:center; width:min(520px, 76vw); background:linear-gradient(150deg, var(--blue-deep), var(--navy)); border-radius:var(--r); color:#fff; padding:2.4rem 2rem; box-shadow:var(--shadow); }
.filmstrip__cta-kicker{ font-size:var(--fs-caption); font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-soft); }
.filmstrip__cta h3{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h3); line-height:1.1; max-width:14ch; }

/* ---------- WHERE WE REACH ---------- */
.reach{ padding-block:clamp(4rem,9vw,7rem); background:linear-gradient(180deg, var(--navy), var(--navy-2)); color:#fff; }
.reach .section-title{ color:#fff; }
.reach .kicker{ color:var(--gold-soft); }
.reach .section-note{ color:rgba(255,255,255,0.74); }
.reach__regions{ display:flex; justify-content:center; gap:clamp(1.4rem,4vw,3.6rem); flex-wrap:wrap; list-style:none; margin-bottom:clamp(2.4rem,5vw,3.4rem); text-align:center; }
.reach__regions li{ display:flex; flex-direction:column; gap:0.25rem; }
.reach__regions strong{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h3); color:var(--gold-soft); }
.reach__regions span{ font-size:var(--fs-caption); letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; border-top:1px solid rgba(255,255,255,0.12); padding-top:clamp(2rem,4vw,2.6rem); text-align:center; }
.stat{ display:flex; flex-direction:column; gap:0.45rem; }
.stat__num{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h1); line-height:1; color:#fff; letter-spacing:-0.01em; }
.stat__label{ font-size:var(--fs-small); letter-spacing:0.04em; color:rgba(255,255,255,0.66); }

/* ---------- WAYS TO GIVE ---------- */
.give{ padding-block:clamp(4rem,9vw,7rem); }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.card{ position:relative; display:flex; flex-direction:column; gap:0.4rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:1.7rem 1.5rem 1.6rem; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.card::after{ content:""; position:absolute; top:0; bottom:0; left:-80%; width:50%; background:linear-gradient(105deg, transparent, rgba(201,169,97,0.20), transparent); transform:skewX(-18deg); transition:left .65s var(--ease); pointer-events:none; }
.card:hover::after{ left:130%; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-gold); }
@keyframes cardPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,169,97,0.35); } 50%{ box-shadow:0 0 0 12px rgba(201,169,97,0); } }
.card--accent{ animation:cardPulse 3.4s ease-in-out infinite; }
.card__amount{ font-family:var(--font-accent); font-weight:600; font-size:var(--fs-h3); line-height:1; color:var(--blue-deep); margin-bottom:0.5rem; }
.card__tag{ position:absolute; top:1.1rem; right:1.1rem; font-size:var(--fs-caption); font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#1a1304; background:var(--gold); padding:0.28rem 0.55rem; border-radius:100px; }
.card h3{ font-size:var(--fs-h4); font-weight:700; }
.card p{ color:var(--ink-soft); font-size:var(--fs-small); flex:1; }
.card__cta{ font-weight:700; color:var(--gold-deep); font-size:var(--fs-small); margin-top:0.7rem; }
.card:hover .card__cta{ color:var(--blue-deep); }
.card--accent{ background:linear-gradient(160deg, var(--blue-deep), var(--blue-dark)); border-color:transparent; }
.card--accent .card__amount{ color:var(--gold-soft); }
.card--accent h3,.card--accent p,.card--accent .card__cta{ color:#fff; }
.card--accent p{ color:rgba(255,255,255,0.86); }
.card--accent .card__cta{ color:var(--gold-soft); }
.give__fine{ text-align:center; margin-top:2.2rem; font-size:var(--fs-small); color:var(--ink-soft); }

/* ---------- REQUEST A FREE QUR'AN ---------- */
.request{ padding-block:clamp(4rem,9vw,7rem); background:var(--cream-2); }
.request__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.request__media{ margin-bottom:1.8rem; border-radius:var(--r-lg); }
.request__head{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-0.01em; margin-bottom:1rem; }
.request__head em{ color:var(--blue-deep); }
.request__body{ color:var(--ink-soft); font-size:var(--fs-body-lg); max-width:50ch; }
.request__alt{ margin-top:1.1rem; font-size:var(--fs-small); color:var(--ink-soft); }
.request__alt a{ color:var(--blue-deep); font-weight:600; }
.request__panel{ background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow); }
.reqform__title{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h3); margin-bottom:1.3rem; }
.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.95rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.field label{ font-size:var(--fs-small); font-weight:600; color:var(--ink); }
.field .optional{ color:var(--ink-soft); font-weight:400; }
.field input,.field textarea{ font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink); background:var(--cream); border:1.5px solid var(--line); border-radius:12px; padding:0.75rem 0.9rem; transition:border-color .25s, box-shadow .25s, background-color .25s; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#9aa5b3; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(201,169,97,0.16); }
/* validation state (set by JS — see field__error) */
.field--invalid input,.field--invalid textarea{ border-color:var(--err); background:#fdf4f3; }
.field--invalid input:focus,.field--invalid textarea:focus{ border-color:var(--err); box-shadow:0 0 0 4px rgba(192,86,79,0.15); }
.field__error{ display:none; font-size:var(--fs-small); color:var(--err); font-weight:500; margin-top:0.1rem; }
.field--invalid .field__error{ display:block; }
.reqform__fine{ font-size:var(--fs-caption); color:var(--ink-soft); margin-top:0.9rem; text-align:center; }
.reqform .btn{ margin-top:0.4rem; }
.reqdone{ text-align:center; padding:1.5rem 0.5rem; }
.reqdone__mark{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%; background:linear-gradient(160deg, var(--gold-soft), var(--gold)); color:#1a1304; font-size:var(--fs-h2); }
.reqdone h3{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h3); margin-bottom:0.8rem; }
.reqdone p{ color:var(--ink-soft); max-width:42ch; margin:0 auto 1.5rem; }

/* ---------- FINAL CTA ---------- */
.finalcta{ padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,9vw,7rem); }
.finalcta__inner{ position:relative; overflow:hidden; background:linear-gradient(150deg, var(--blue-deep), var(--navy)); border-radius:var(--r-lg); padding:clamp(2.6rem,5vw,4.6rem); text-align:center; color:#fff; box-shadow:0 44px 90px -44px rgba(14,42,64,0.75); }
.finalcta__inner::before{ content:""; position:absolute; top:-40%; left:50%; width:60%; aspect-ratio:1; transform:translateX(-50%); background:radial-gradient(circle, rgba(201,169,97,0.28), transparent 65%); pointer-events:none; }
.finalcta h2{ position:relative; font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-0.01em; margin-bottom:0.9rem; }
.finalcta h2 em{ color:var(--gold-soft); }
.finalcta p{ position:relative; color:rgba(255,255,255,0.88); max-width:48ch; margin:0 auto 2rem; }
.finalcta .btn{ position:relative; }
.finalcta__fine{ font-size:var(--fs-small); opacity:0.78; margin-top:1.4rem; }

/* ---------- CONTACT ---------- */
.contact{ padding-block:clamp(4rem,9vw,6rem); }
.contact__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__copy{ color:var(--ink-soft); margin-top:1.2rem; max-width:44ch; }
.contact__details{ list-style:none; display:flex; flex-direction:column; }
.contact__details li{ display:flex; flex-direction:column; gap:0.25rem; padding:1.1rem 0; border-top:1px solid var(--line); }
.contact__details li:last-child{ border-bottom:1px solid var(--line); }
.contact__label{ font-size:var(--fs-caption); letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-deep); font-weight:700; }
.contact__details a,.contact__details span:not(.contact__label){ font-size:var(--fs-body-lg); color:var(--ink); }
.contact__details a:hover{ color:var(--blue-deep); }

/* ---------- FOOTER ---------- */
.footer{ background:var(--navy); color:#fff; padding-top:clamp(2.6rem,5vw,3.6rem); }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2.2rem; }
.footer__brand{ display:flex; align-items:center; gap:1rem; max-width:50ch; }
.footer__mark{ width:48px; height:48px; border-radius:12px; flex:none; }
.footer__brand p{ color:rgba(255,255,255,0.66); font-size:var(--fs-small); }
.footer__bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,0.12); font-size:var(--fs-small); color:rgba(255,255,255,0.5); }
.footer__credit a{ color:var(--gold-soft); font-weight:600; }

/* ---------- sticky mobile dock ---------- */
.dock-cta{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; display:none; text-align:center; background:linear-gradient(180deg, var(--blue), var(--blue-deep)); color:#fff; font-weight:700; padding:1rem; border-radius:100px; box-shadow:0 16px 32px -12px rgba(14,42,64,0.7); transition:transform .35s var(--ease), opacity .35s; }
.dock-cta--hidden{ transform:translateY(165%); opacity:0; pointer-events:none; }

/* ---------- TOAST NOTIFICATIONS ---------- */
.toasts{ position:fixed; top:4.75rem; right:1rem; z-index:1000; display:flex; flex-direction:column; gap:0.7rem; width:min(380px, calc(100vw - 2rem)); pointer-events:none; }
.toast{ pointer-events:auto; display:flex; gap:0.8rem; align-items:flex-start; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; padding:0.9rem 1rem; box-shadow:0 18px 44px -18px rgba(14,42,64,0.5); transform:translateX(120%); opacity:0; transition:transform .35s var(--ease), opacity .35s; }
.toast--in{ transform:translateX(0); opacity:1; }
.toast--out{ transform:translateX(120%); opacity:0; }
.toast__icon{ flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:var(--fs-small); font-weight:800; color:#fff; line-height:1; }
.toast--success{ border-left-color:var(--ok); } .toast--success .toast__icon{ background:var(--ok); }
.toast--error{ border-left-color:var(--err); }   .toast--error .toast__icon{ background:var(--err); }
.toast--warning{ border-left-color:var(--warn); } .toast--warning .toast__icon{ background:var(--warn); color:#1a1304; }
.toast--info{ border-left-color:var(--blue); }    .toast--info .toast__icon{ background:var(--blue); }
.toast__body{ flex:1; min-width:0; }
.toast__title{ font-weight:700; font-size:var(--fs-body); line-height:1.3; }
.toast__msg{ font-size:var(--fs-small); color:var(--ink-soft); margin-top:0.15rem; }
.toast__close{ flex:none; background:none; border:0; color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; padding:0.05rem 0.25rem; border-radius:6px; }
.toast__close:hover{ color:var(--ink); }
@media (max-width:560px){
  .toasts{ top:4.25rem; left:1rem; right:1rem; width:auto; }
  .toast{ transform:translateY(-150%); }
  .toast--in{ transform:translateY(0); }
  .toast--out{ transform:translateY(-150%); }
}
@media (prefers-reduced-motion:reduce){
  .toast,.toast--in,.toast--out{ transition:opacity .25s; transform:none; }
}

/* ---------- DONATE MODAL ---------- */
.dmodal{ position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:1rem; }
.dmodal[hidden]{ display:none; }
.dmodal__backdrop{ position:absolute; inset:0; background:rgba(7,21,34,0.72); backdrop-filter:blur(6px); }
.dmodal__panel{ position:relative; width:min(560px, 100%); height:min(92vh, 860px); display:flex; flex-direction:column; background:var(--cream); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 60px 120px -40px rgba(0,0,0,0.6); border-top:3px solid var(--gold); animation:dmodalIn .4s var(--ease) both; }
@keyframes dmodalIn{ from{ transform:translateY(26px); opacity:0; } to{ transform:none; opacity:1; } }
.dmodal__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.9rem 1.2rem; border-bottom:1px solid var(--line); }
.dmodal__title{ font-family:var(--font-accent); font-weight:500; font-size:var(--fs-h4); }
.dmodal__close{ background:none; border:0; cursor:pointer; font-size:1.7rem; line-height:1; color:var(--ink-soft); padding:0.1rem 0.4rem; border-radius:8px; }
.dmodal__close:hover{ color:var(--ink); }
.dmodal__body{ position:relative; flex:1; min-height:0; background:#fff; }
.dmodal__body iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.dmodal__spin{ position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--gold); animation:dspin 0.9s linear infinite; }
@keyframes dspin{ to{ transform:rotate(360deg); } }
.dmodal__fine{ padding:0.7rem 1.2rem; font-size:var(--fs-caption); color:var(--ink-soft); text-align:center; border-top:1px solid var(--line); }
@media (max-width:560px){ .dmodal{ padding:0; } .dmodal__panel{ width:100%; height:100%; max-height:none; border-radius:0; } }

/* ---------- SALIK ON SOCIAL (reels wall) ---------- */
.social{ padding-block:clamp(4rem,9vw,7rem); background:var(--cream-2); }
.reels{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; padding-block:1.4rem; -webkit-overflow-scrolling:touch; }
.reels::-webkit-scrollbar{ height:8px; }
.reels::-webkit-scrollbar-thumb{ background:var(--line-gold); border-radius:4px; }
.reels__track{ display:flex; gap:1.1rem; width:max-content; padding-inline:var(--pad); }
.reel{ position:relative; flex:0 0 auto; width:clamp(212px,62vw,264px); aspect-ratio:9/16; border:0; padding:0; border-radius:18px; overflow:hidden; cursor:pointer; background:var(--navy); box-shadow:var(--shadow); scroll-snap-align:center; transition:transform .4s var(--ease), box-shadow .4s; }
.reel:hover{ transform:translateY(-5px); box-shadow:0 40px 70px -38px rgba(14,42,64,0.6); }
.reel__thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease; }
.reel__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,19,31,0.15) 38%, rgba(6,19,31,0.88)); }
.reel__play{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,0.94); box-shadow:0 10px 26px rgba(0,0,0,0.45); transition:transform .3s var(--ease); }
.reel__play::after{ content:""; position:absolute; top:50%; left:56%; transform:translate(-50%,-50%); border-left:17px solid var(--blue-deep); border-top:11px solid transparent; border-bottom:11px solid transparent; }
.reel:hover .reel__play{ transform:translate(-50%,-50%) scale(1.09); }
.reel__badge{ position:absolute; top:0.75rem; left:0.75rem; font-size:var(--fs-caption); font-weight:800; letter-spacing:0.03em; text-transform:uppercase; color:#fff; background:#FF0000; padding:0.22rem 0.5rem; border-radius:7px; }
.reel__views{ position:absolute; top:0.75rem; right:0.75rem; display:inline-flex; align-items:center; gap:0.3rem; font-size:var(--fs-caption); font-weight:700; color:#fff; background:rgba(6,19,31,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:0.22rem 0.55rem; border-radius:100px; }
.reel__views::before{ content:"▶"; font-size:0.62em; opacity:0.9; }
.reel__title{ position:absolute; left:0.9rem; right:0.9rem; bottom:0.9rem; color:#fff; font-family:var(--font-accent); font-style:italic; font-size:var(--fs-small); line-height:1.28; text-align:left; }
.reel iframe, .reel__yt{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; }
/* Transparent tap-catcher: sits above the iframe so YouTube's own links are
   never clickable (keeps everything on-site); we drive playback via the API. */
.reel__tap{ position:absolute; inset:0; z-index:4; cursor:pointer; }
/* Loading spinner while the player boots (thumbnail poster still showing). */
.reel__tap::after{ content:""; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:3px solid rgba(255,255,255,0.32); border-top-color:#fff; opacity:0; }
.reel--playing:not(.reel--live) .reel__tap::after{ opacity:1; animation:reelSpin .8s linear infinite; }
@keyframes reelSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .reel--playing:not(.reel--live) .reel__tap::after{ animation:none; } }
/* On activate, hide the facade chrome but KEEP the thumbnail as a poster (raised
   above the loading iframe); the thumbnail cross-fades out once the video is live. */
.reel--playing .reel__scrim, .reel--playing .reel__play, .reel--playing .reel__badge, .reel--playing .reel__views, .reel--playing .reel__title{ opacity:0; pointer-events:none; }
.reel--playing .reel__thumb{ z-index:3; }
.reel--live .reel__thumb{ opacity:0; }
.reel__sound{ position:absolute; left:50%; bottom:0.9rem; transform:translateX(-50%); z-index:5; display:inline-flex; align-items:center; gap:0.4rem; white-space:nowrap; font-size:var(--fs-caption); font-weight:700; color:#fff; background:rgba(6,19,31,0.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:0.34rem 0.72rem; border-radius:100px; box-shadow:0 6px 18px rgba(0,0,0,0.32); pointer-events:none; animation:reelSoundPulse 2.2s var(--ease) infinite; }
.reel__sound svg{ display:block; flex:none; }
@keyframes reelSoundPulse{ 0%,100%{ opacity:0.94; transform:translateX(-50%) scale(1); } 50%{ opacity:0.62; transform:translateX(-50%) scale(0.97); } }
@media (prefers-reduced-motion: reduce){ .reel__sound{ animation:none; } }
.social__follow{ display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.social__cta{ display:inline-flex; align-items:center; gap:0.85rem; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:0.7rem 1.5rem 0.7rem 0.85rem; box-shadow:var(--shadow-soft); transition:transform .3s var(--ease), box-shadow .3s; }
.social__cta:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.social__yt{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#FF0000; color:#fff; font-size:1rem; flex:none; }
.social__ig{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%); color:#fff; flex:none; }
.social__ig svg{ display:block; }
.social__meta strong{ display:block; font-size:var(--fs-body); font-weight:700; color:var(--ink); }
.social__meta small{ display:block; font-size:var(--fs-small); color:var(--ink-soft); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav__links{ display:none; }
  .hero{ min-height:88vh; }
  .hero__media img, .hero__media video{ object-position:center 38%; }
  .row{ grid-template-columns:1fr; gap:1.6rem; }
  .row--rev .frame{ order:0; }
  .opp__grid{ grid-template-columns:1fr; gap:2.2rem; }
  .request__grid{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1rem; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .filmstrip__item{ width:84vw; }
  .field-row{ grid-template-columns:1fr; }
  .hero__cta .btn{ flex:1; }
  .nav__cta{ display:none; }
  .dock-cta{ display:block; }
  body{ padding-bottom:5rem; }
  body.smart-dock{ padding-bottom:0; }
  .footer__inner{ justify-content:flex-start; }
  .reach__regions{ gap:1.4rem 2rem; }
}