/* ═══════════════════════════════════════════════════════════════════════════
   Masjidy — masjidy.ovh

   ARCHITECTURE: the split stage. The board — the real product, ported pixel
   for pixel — is pinned on one half of the screen for the entire visit. The
   other half is a reading rail; whatever block sits under the reading line
   decides what the board shows. The page never talks ABOUT the screen: it
   talks TO it.

   STYLE: a bright gallery wall. Near-white ground, hairline rules, editorial
   type — no cards, no glass, no decoration. One accent: the brand's own
   indigo (#5352ED, the colour of the logo), used for everything interactive
   and for the reading marker. The board hangs on the light wall like the
   dark framed screen it is.

   Arabic is the primary direction; logical properties throughout.
   No build step, no CDN, no framework — this folder is uploaded as-is.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("fonts.css");   /* Fustat · Cairo · Geist · Geist Mono · Fraunces */

/* the kiosk's shared faces (the board's own files) */
@font-face{font-family:'Lato';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/lato.woff2) format('woff2');}
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/lalezar.woff2) format('woff2');}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/comfortaa.woff2) format('woff2');}
@font-face{font-family:'KioskFustat';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/fustat.woff2) format('woff2');}

/* ── reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,table{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#FAFAFD;            /* the gallery wall */
  --bg-2:#FFFFFF;
  --line:#E4E2EE;          /* hairline */
  --line-2:#EFEDF6;

  --ink:#17141F;
  --ink-2:#544F62;
  --ink-3:#8B869C;

  /* the brand's own indigo — the logo's colour */
  --acc:#5352ED;
  --on-acc:#FFFFFF;
  --acc-dim:color-mix(in srgb,var(--acc) 10%,transparent);
  --acc-line:color-mix(in srgb,var(--acc) 40%,transparent);

  --f-disp:'Fustat','Cairo',system-ui,sans-serif;
  --f-body:'Cairo','Tajawal',system-ui,sans-serif;
  --f-num:'Geist Mono',ui-monospace,monospace;

  --bar:64px;
  --railpad:clamp(26px,4vw,72px);
}
html[lang="fr"],html[lang="en"]{ --f-disp:'Fraunces',Georgia,serif; --f-body:'Geist',system-ui,sans-serif; }

body{
  overflow-x:clip;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);line-height:1.7;
  font-size:clamp(.97rem,.94rem + .2vw,1.05rem);
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{line-height:1.9}
::selection{background:var(--acc);color:#fff}
html{scrollbar-color:#CFCBDE var(--bg)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#CFCBDE;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#B4AECB}

/* ── the ground: a bright wall, warmed where the screen hangs ───────────── */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 62% at 26% 50%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg) 40%,#F4F2FA 100%)}
.ground::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23g)' opacity='.1'/></svg>")}
html[dir="ltr"] .ground{background:
    radial-gradient(52% 62% at 74% 50%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 70%),
    linear-gradient(180deg,#FFFFFF 0%,var(--bg) 40%,#F4F2FA 100%)}
main,header,footer{position:relative;z-index:1}

.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em}

/* ── labels ─────────────────────────────────────────────────────────────── */
.lbl{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-disp);font-weight:700;font-size:.78rem;
  color:var(--ink-3);white-space:nowrap}
.lbl--lat,html[lang="fr"] .lbl,html[lang="en"] .lbl{
  font-family:var(--f-num);font-weight:500;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase}
.lbl--brass{color:var(--acc)}

.mark{display:block;width:var(--mw,96px);aspect-ratio:512/180;background:currentColor;
  -webkit-mask:url(../img/MasjidyLogoText.png) center/contain no-repeat;
          mask:url(../img/MasjidyLogoText.png) center/contain no-repeat}

/* ═══ BAR — light glass, iconed links, the full logo ══════════════════════ */
.bar{position:fixed;inset-block-start:0;inset-inline:0;z-index:80;
  border-block-end:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.bar.stuck{background:color-mix(in srgb,#FFFFFF 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-block-end-color:var(--line-2);
  box-shadow:0 10px 34px -22px rgba(83,82,237,.35)}
.bar__in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);
  height:var(--bar);padding-inline:clamp(18px,2.6vw,40px)}
.bar__brand{flex:none;display:flex;align-items:center;gap:10px;transition:transform .25s}
.bar__brand:hover{transform:translateY(-1px)}
.bar__logo{height:30px;width:auto}
.bar__word{height:22px;width:auto}
.bar__nav{display:flex;gap:clamp(2px,.5vw,6px)}
.bar__nav a{display:inline-flex;align-items:center;gap:.5em;
  font-size:.85rem;font-weight:700;color:var(--ink-2);
  padding:.5em .9em;border-radius:999px;white-space:nowrap;
  transition:color .2s,background .2s}
.bar__nav a svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--ink-3);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .2s,transform .25s}
.bar__nav a:hover{color:var(--acc);background:var(--acc-dim)}
.bar__nav a:hover svg{stroke:var(--acc);transform:translateY(-1px)}
.bar__nav a.on{color:var(--acc);background:var(--acc-dim)}
.bar__nav a.on svg{stroke:var(--acc)}
.bar__sp{margin-inline-start:auto}
.langs{display:flex;background:#FFFFFF;border:1px solid var(--line);border-radius:999px;
  padding:3px;box-shadow:0 1px 3px rgba(23,20,31,.05)}
.langs button{padding:.34em .75em;border-radius:999px;font-family:var(--f-num);font-size:.62rem;
  font-weight:500;letter-spacing:.08em;color:var(--ink-3);transition:.18s}
.langs button[aria-pressed="true"]{background:var(--acc);color:#fff;
  box-shadow:0 2px 8px -2px rgba(83,82,237,.5)}
.langs button:not([aria-pressed="true"]):hover{color:var(--ink)}
@media (max-width:1240px){ .bar__nav{display:none} }
@media (max-width:560px){ .bar__cta{display:none} }

/* ── buttons: flat, editorial, accent-inked ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.8em 1.5em;border-radius:10px;
  font-size:.9rem;font-weight:800;line-height:1.15;border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn--fill{background:var(--acc);color:var(--on-acc);
  box-shadow:0 8px 22px -10px rgba(83,82,237,.55)}
.btn--fill:hover{background:color-mix(in srgb,var(--acc) 86%,white);transform:translateY(-1px);
  box-shadow:0 12px 28px -10px rgba(83,82,237,.6)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn--wa{background:#1DA851;color:#04140A}
.btn--wa:hover{background:#22C05D;transform:translateY(-1px)}
.btn--lg{padding:.95em 1.9em;font-size:.96rem}
.btn svg{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .btn--fill{animation:btnGlow 2.8s ease-in-out infinite}
@keyframes btnGlow{0%,100%{box-shadow:0 8px 22px -10px rgba(83,82,237,.55)}
  50%{box-shadow:0 10px 34px -8px rgba(83,82,237,.85),0 0 0 7px rgba(83,82,237,.1)}}
.hero .btn--fill svg{animation:arrowBob 1.6s ease-in-out infinite}
@keyframes arrowBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
html.no-fx .hero .btn--fill,html.no-fx .hero .btn--fill svg{animation:none}
.bar .btn{padding:.55em 1.1em;font-size:.78rem;border-radius:8px;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SPLIT — stage on one side, rail on the other, for the whole page.
   ═══════════════════════════════════════════════════════════════════════════ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}

/* ── the stage ──────────────────────────────────────────────────────────── */
.stage-col{grid-column:2;grid-row:1;position:relative}
html[dir="ltr"] .stage-col{grid-column:1}
.stage-fix{position:sticky;inset-block-start:0;height:100svh;
  display:flex;align-items:flex-end;justify-content:center;
  padding:calc(var(--bar) + 12px) clamp(18px,2.6vw,44px) 54px}
.stage-box{width:min(100%,calc((100svh - var(--bar) - 230px) * 16 / 9));
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.stage-box .board{border-radius:clamp(6px,.55vw,10px);
  box-shadow:0 0 0 2px #33333F,
             0 0 0 clamp(10px,1vw,15px) #14141C,
             0 0 0 calc(clamp(10px,1vw,15px) + 1px) #3A3A48,
             0 0 0 calc(clamp(10px,1vw,15px) + 2px) rgba(0,0,0,.25),
             0 44px 80px -30px rgba(23,20,31,.55),
             0 0 130px -8px color-mix(in srgb,var(--acc) 24%,transparent)}
/* glass sheen over the panel */
.stage-box .board::after{content:"";position:absolute;inset:0;z-index:15;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 24%,transparent 38%)}
/* the maker's mark etched on the chin */
.tv::after{content:"MASJIDY";position:absolute;inset-inline-start:50%;
  inset-block-end:calc(-1 * clamp(10px,1vw,15px) + 1px);transform:translateX(-50%);
  font-family:var(--f-num);font-size:7px;letter-spacing:.42em;color:#6A6A7A;line-height:1}
html[dir="rtl"] .tv::after{transform:translateX(50%)}
.stage-cap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:46px 4px 0;flex-wrap:wrap}
.stage-cap .lbl{font-size:.74rem}
.stage-cap b{color:var(--ink);font-weight:800}
.stage-cap .dot{display:inline-block;width:6px;height:6px;border-radius:99px;background:#2EE59D;flex:none}
.stage-cap .dot.is-off{background:var(--acc)}

/* ── the television turns on ────────────────────────────────────────────────
   Standby: black screen, red LED. On scroll the android box slides in behind
   the set, the picture fades in while it shakes and its colours settle, and
   the LED goes green. Without the motion layer everything is simply on. */
.tv{position:relative}
.stage-box .board{position:relative;z-index:1}
.tv-led{position:absolute;z-index:6;inset-inline-end:26px;
  inset-block-end:calc(-1 * clamp(10px,1vw,15px) + 5px);
  width:5px;height:5px;border-radius:50%;
  background:#FF3B30;box-shadow:0 0 7px 1px rgba(255,59,48,.85);
  transition:background .3s,box-shadow .3s}
.tv-led.on{background:#2EE59D;box-shadow:0 0 7px 1px rgba(46,229,157,.8)}
html.no-fx .tv-led{background:#2EE59D;box-shadow:0 0 7px 1px rgba(46,229,157,.8)}

/* the android box: an outlined visitor that descends from above and
   disappears behind the screen — the scroll drives its journey */
.tvbox,.tvpi{position:fixed;top:0;left:0;z-index:35;width:122px;height:122px;
  color:var(--acc);pointer-events:none;will-change:transform;
  transform-origin:top left}
html.no-fx .tvbox,html.no-fx .tvpi{display:none}
@media (max-width:1023px){ .tvbox,.tvpi{display:none} }
.tvbox svg,.tvpi svg{width:122px;height:122px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
/* the name lives inside the device's body */
.tvbox span,.tvpi span{position:absolute;inset-inline:0;bottom:34px;text-align:center;
  font-family:var(--f-num);font-size:8.5px;letter-spacing:.2em;
  color:var(--acc);opacity:.75;white-space:nowrap}
.tvpi span{bottom:31px}
html.no-fx .tvpi{display:none}

html.no-fx .tvbox{display:none}

/* in the downloads chapter, the set becomes a desktop */
.tv-stand{position:absolute;z-index:-1;inset-inline-start:50%;
  inset-block-end:-46px;width:150px;height:46px;transform:translateX(-50%) scaleY(0);
  transform-origin:top;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);
  pointer-events:none}
html[dir="rtl"] .tv-stand{transform:translateX(50%) scaleY(0)}
.tv-stand::before{content:"";position:absolute;inset-inline:36%;inset-block-start:0;height:30px;
  background:linear-gradient(180deg,#14141C,#2A2A36);
  clip-path:polygon(16% 0,84% 0,100% 100%,0 100%)}
.tv-stand::after{content:"";position:absolute;inset-inline:8%;inset-block-end:6px;height:10px;
  border-radius:8px;background:linear-gradient(180deg,#33333F,#191922)}
.tv--pc .tv-stand{opacity:1;transform:translateX(-50%) scaleY(1)}
html[dir="rtl"] .tv--pc .tv-stand{transform:translateX(50%) scaleY(1)}
.tv--pc + .stage-cap .lbl:nth-child(2){opacity:0}
.tv--pc.tv::after{content:"MASJIDY · DESKTOP"}

/* the dark screen, and the picture catching.
   Kept deliberately simple: the black lifts, a breath of scanlines passes,
   the brightness flickers twice and settles. Nothing moves, nothing zooms. */
.tv-boot{position:absolute;inset:0;z-index:20;background:#060608;opacity:0;
  pointer-events:none;display:none}
html.fx .tv-boot{display:block}
html.fx.tv-off .tv-boot{opacity:1}
/* no input yet: the set waits for its device */
.tv-boot::before{content:"NO SIGNAL";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-num);font-size:clamp(13px,1.1vw,17px);letter-spacing:.4em;
  color:#B9B9C6;padding:.8em 1.5em;border:1px solid #3A3A46;border-radius:10px;
  animation:noSignal 1.6s steps(1) infinite}
@keyframes noSignal{0%,100%{opacity:1}55%{opacity:.15}}
html.fx.tv-on .tv-boot::before{display:none}
html.no-fx .tv-boot::before{display:none}
.tv-boot::after{content:"";position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.09) 0 1px,transparent 1px 3px)}
html.fx.tv-on .tv-boot{animation:tvLift .3s ease-out .1s forwards}
@keyframes tvLift{from{opacity:1}to{opacity:0}}
html.fx.tv-on .tv-boot::after{animation:tvScan .5s steps(1) .12s}
@keyframes tvScan{0%{opacity:.6}30%{opacity:.15}50%{opacity:.45}75%{opacity:.1}100%{opacity:0}}
html.fx.tv-on .stage-box .kiosk{animation:tvSettle .55s steps(1) .12s}
@keyframes tvSettle{
  0%{filter:brightness(1.9) saturate(.5)}
  25%{filter:brightness(.75) hue-rotate(14deg)}
  50%{filter:brightness(1.25) hue-rotate(-8deg)}
  75%{filter:brightness(.95)}
  100%{filter:none}}

/* ── the rail ───────────────────────────────────────────────────────────── */
.rail{grid-column:1;grid-row:1;min-width:0;
  padding:calc(var(--bar) + clamp(30px,6vh,64px)) var(--railpad) 0;
  border-inline-start:1px solid var(--line-2)}
html[dir="ltr"] .rail{grid-column:2;border-inline-start:0;border-inline-end:1px solid var(--line-2)}
.rail > *{max-width:600px;margin-inline:auto}

/* ═══ HERO — a fintech-grade opening: bold type, floating live cards ══════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  padding:calc(var(--bar) + clamp(28px,6vh,60px)) clamp(22px,4vw,64px) 28px;overflow:clip}
.hero__mesh{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 18% 22%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 70%),
    radial-gradient(38% 44% at 86% 68%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),
    radial-gradient(30% 34% at 68% 12%,rgba(255,196,70,.07),transparent 70%)}
.hero__mesh::after{content:"";position:absolute;inset:0;opacity:.5;
  -webkit-mask:radial-gradient(70% 70% at 50% 40%,#000,transparent 80%);
          mask:radial-gradient(70% 70% at 50% 40%,#000,transparent 80%);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'>\
<g fill='none' stroke='%235352ED' stroke-opacity='.10'>\
<rect x='22' y='22' width='28' height='28'/>\
<rect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/>\
</g></svg>")}
.hero__in{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,84px);align-items:center;max-width:1280px;margin:auto;width:100%;
  position:relative}
.hero__eyebrow{display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.1em;
  border-radius:999px;background:var(--acc-dim);border:1px solid var(--acc-line);
  color:var(--acc);font-size:.8rem;font-weight:800;margin-block-end:clamp(16px,2.6vh,24px)}
.hero__dot{width:7px;height:7px;border-radius:99px;background:#2EE59D;flex:none;
  box-shadow:0 0 0 0 rgba(46,229,157,.5);animation:nowPulse 2.4s ease-out infinite}
@keyframes nowPulse{0%{box-shadow:0 0 0 0 rgba(46,229,157,.45)}70%{box-shadow:0 0 0 9px rgba(46,229,157,0)}100%{box-shadow:0 0 0 0 rgba(46,229,157,0)}}
html.no-fx .hero__dot{animation:none}

.hero h1{font-family:var(--f-disp);font-weight:800;
  font-size:clamp(2.2rem,1.2rem + 3vw,4rem);line-height:1.16;letter-spacing:-.018em;
  text-wrap:balance}
html[lang="fr"] .hero h1,html[lang="en"] .hero h1{font-weight:700;letter-spacing:-.032em;line-height:1.03}
.hero h1 .lit{display:block;color:var(--acc)}
.hero h1 .lit,.hero h1 .lit .w > span{
  background:linear-gradient(120deg,#8B89FF 0%,#5352ED 55%,#4340D6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--ink-2);font-size:clamp(1rem,.96rem + .3vw,1.15rem);max-width:52ch;
  margin-block-start:clamp(14px,2.2vh,22px)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:clamp(20px,3vh,30px)}
.made{display:flex;align-items:center;gap:.55em;margin-block-start:clamp(20px,3.2vh,28px);
  font-size:.8rem;font-weight:700;color:var(--ink-3)}
.made svg{width:14px;height:14px;fill:var(--acc);flex:none;
  transform-origin:center;animation:heartbeat 2.8s ease-in-out infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}10%{transform:scale(1.2)}20%{transform:scale(1)}
  30%{transform:scale(1.12)}40%{transform:scale(1)}}
html.no-fx .made svg{animation:none}

/* ── the composition: small cards ringed around the circle, clock at heart ── */
.hero__stage{position:relative;min-height:540px;margin-block-end:168px}
.hero__arc{position:absolute;inset:2% 4% auto;width:92%;height:96%;pointer-events:none;z-index:0;
  animation:arcSpin 48s linear infinite;transform-origin:50% 50%}
@keyframes arcSpin{to{transform:rotate(360deg)}}
html.no-fx .hero__arc{animation:none}
.hero__arc path{stroke:color-mix(in srgb,var(--acc) 22%,transparent);stroke-width:1.5;
  stroke-linecap:round;stroke-dasharray:4 10}
.hero__logo{display:block;width:150px;height:auto;margin-block-end:16px;
  filter:drop-shadow(0 6px 16px rgba(83,82,237,.25))}

.hp{position:absolute;border-radius:16px;z-index:1;animation:floatChip 7s ease-in-out infinite}
@keyframes floatChip{0%,100%{translate:0 0}50%{translate:0 -6px}}
html.no-fx .hp{animation:none}

/* the glowing clock — the heart of the circle */
.hp--clock{left:calc(50% - 150px);top:31%;width:300px;z-index:2;
  padding:14px 18px 12px;text-align:center;color:#fff;overflow:hidden;rotate:-1deg;
  background:#0B0B10 url(../img/kiosk/masjid-3.jpeg) center/cover;
  box-shadow:0 0 0 3px #1B1B22,0 0 0 4px #2E2E38,0 26px 54px -22px rgba(23,20,31,.5);
  animation-delay:-.8s}
.hp--clock::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.87)}
.hp--clock > *{position:relative}
.hp__city{display:block;font-family:'KioskFustat',var(--f-disp);font-size:.8rem;
  color:rgba(255,255,255,.92)}
.hp__time{display:block;font-family:'Lato',var(--f-num);font-weight:700;font-size:2.2rem;
  letter-spacing:.12em;color:#ffe500;text-shadow:0 0 20px rgba(255,229,0,.8);
  font-variant-numeric:tabular-nums;margin-block:2px 5px}
.hp__next{display:flex;align-items:baseline;justify-content:center;gap:.5em;
  font-size:.74rem;font-weight:700;color:rgba(255,255,255,.75);
  border-block-start:1px solid rgba(255,255,255,.2);padding-block-start:7px}
.hp__next b{color:#fff;font-size:.86rem}
.hp__next i{font-style:normal;color:#ffe500;font-variant-numeric:tabular-nums}

/* the ring, clockwise */
.hp--aid{top:0;left:calc(50% - 96px);rotate:-1.6deg;
  display:flex;align-items:baseline;gap:.45em;padding:9px 14px;color:#fff;
  font-size:.72rem;font-weight:800;
  background:linear-gradient(150deg,#FFB347,#F29543);
  box-shadow:0 12px 30px -14px rgba(242,149,67,.7);animation-delay:-5.2s}
.hp--aid b{font-size:.9rem;font-variant-numeric:tabular-nums}

.hp--salat{top:9%;right:1%;width:118px;rotate:2deg;
  display:flex;flex-direction:column;gap:6px;
  padding:9px 10px;text-align:center;background:#FFFFFF;border:1px solid var(--line);
  box-shadow:0 16px 34px -22px rgba(23,20,31,.35);animation-delay:-2.4s}
.hp__plate{display:block;font-family:'Lalezar',var(--f-disp);font-size:1.25rem;line-height:1.5;
  color:#fff;background:linear-gradient(150deg,#7B79FF,#5352ED);border-radius:9px;
  text-shadow:1px 2px 8px rgba(0,0,0,.25)}
.hp__times{display:flex;justify-content:center;gap:10px}
.hp__t,.hp__i{font-family:'Lato',var(--f-num);font-weight:700;font-size:.95rem;
  letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.hp__i{color:var(--ink-3)}

.hp--fe{top:66%;right:1%;rotate:-1.8deg;
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  background:#FFFFFF;border:1px solid var(--line);font-weight:800;font-size:.76rem;
  box-shadow:0 14px 30px -20px rgba(23,20,31,.3);animation-delay:-4s}
.hp__notch{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#F2F0FA;flex:none}
.hp__notch img{width:26px}
.hp__fetime{font-style:normal;font-family:'Comfortaa',var(--f-num);font-size:.88rem;
  color:var(--ink-2)}

.hp--qr{bottom:11%;right:7%;rotate:1.4deg;
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  background:#FFFFFF;border:1px solid var(--line);
  box-shadow:0 14px 30px -20px rgba(23,20,31,.3);animation-delay:-3.2s}
.hp--qr img{width:44px;height:44px;image-rendering:pixelated}
.hp--qr span{font-size:.52rem;letter-spacing:.04em;color:var(--ink-3)}

.hp--charity{bottom:0;left:calc(50% - 112px);rotate:1.2deg;
  display:flex;align-items:center;gap:8px;padding:9px 13px;
  background:#FFFFFF;border:1px solid var(--line);
  font-size:.72rem;font-weight:800;color:var(--ink-2);
  box-shadow:0 14px 30px -20px rgba(23,20,31,.3);animation-delay:-2.8s}
.hp--charity .num{color:var(--acc);font-size:.84rem}
.hp__bar{width:48px;height:7px;border-radius:99px;background:var(--acc-dim);overflow:hidden;flex:none}
.hp__bar b{display:block;height:100%;border-radius:99px;background:var(--acc)}

.hp--weather{bottom:13%;left:3%;rotate:-2deg;
  display:flex;align-items:center;gap:7px;padding:8px 12px;
  background:#FFFFFF;border:1px solid var(--line);
  font-size:.7rem;font-weight:800;color:var(--ink-2);
  box-shadow:0 14px 30px -20px rgba(23,20,31,.3);animation-delay:-1.2s}
.hp--weather svg{width:15px;height:15px;flex:none;fill:none;stroke:#F2B234;stroke-width:1.8;
  stroke-linecap:round}
.hp--weather .num{color:var(--acc);font-size:.84rem}

.hp--ann{top:13%;left:0;max-width:236px;rotate:.9deg;
  display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:11px;
  background:#f44336;color:#fff;font-size:.66rem;font-weight:800;
  box-shadow:0 12px 32px -16px rgba(244,67,54,.55);animation-delay:-1.6s}
.hp--ann img{width:22px;transform:rotate(14deg);flex:none}
.hp--ann span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the two devices wait quietly under the rack until the screen calls them */
.hero__devices{position:absolute;inset-inline:0;bottom:-152px;
  display:flex;justify-content:center;gap:128px}
.hslot{position:relative;display:block;width:122px;height:122px}

@media (max-width:960px){
  .hero{min-height:0;padding-block-end:20px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:34px}
  .hero__stage{min-height:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
    justify-content:center;margin-block-end:0}
  .hp{position:static;rotate:none;animation:none}
  .hp--clock{width:100%;order:-1;left:auto;top:auto}
  .hp--aid,.hp--charity{left:auto}
  .hero__arc,.hslot{display:none}
}

.hero__cue{position:relative;align-self:center;display:flex;flex-direction:column;
  align-items:center;gap:6px;margin-block-start:18px;color:var(--ink-3);
  font-size:.76rem;font-weight:800;transition:color .2s}
.hero__cue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;animation:cueBob 1.8s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
html.no-fx .hero__cue svg{animation:none}
.hero__cue:hover{color:var(--acc)}

@media (max-width:960px){
  .hero{min-height:0;padding-block-end:20px}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:34px}
  .hero__stage{min-height:0;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
  .fcard{position:relative;inset:auto;width:min(330px,100%);animation:none;transform:rotate(0)}
  .fchip{position:relative;inset:auto;animation:none}
}

/* ── chapters ───────────────────────────────────────────────────────────── */
.chap{padding-block-start:clamp(60px,10vh,110px)}
.chap--last{padding-block-end:clamp(40px,8vh,80px)}
.chap__hd{position:relative;padding-block-start:clamp(20px,3vh,30px);
  border-block-start:2px solid var(--line)}
.chap__hd .no{display:block;font-size:.78rem;letter-spacing:.22em;color:var(--acc);
  margin-block-end:1em}
.chap__hd h2{font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.4vw,2.3rem);line-height:1.2;letter-spacing:-.012em;
  max-width:20ch;margin-block-end:.5em;text-wrap:balance}
html[lang="fr"] .chap__hd h2,html[lang="en"] .chap__hd h2{letter-spacing:-.028em;line-height:1.06}
.chap__hd p{color:var(--ink-2);font-size:.95rem;max-width:52ch}

/* a rail block: one idea, one screen state */
.blk,.beat{position:relative;padding-block:clamp(34px,6vh,58px);
  border-block-start:1px solid var(--line-2)}
.chap .blk:first-of-type,.beats .beat:first-child{border-block-start:0}
.blk::before,.beat::before{content:"";position:absolute;inset-block:clamp(34px,6vh,58px);
  inset-inline-start:calc(-1 * var(--railpad));width:2px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.blk.on::before,.beat.on::before{transform:scaleY(1)}
.blk h3,.beat h3{font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.35;margin-block-end:.45em;
  transition:color .3s}
.blk.on h3,.beat.on h3{color:var(--acc)}
.blk p,.beat p{color:var(--ink-2);font-size:.95rem;max-width:52ch}
.blk code{font-family:var(--f-num);font-size:.85em;background:var(--acc-dim);
  color:var(--acc);padding:.1em .45em;border-radius:6px}
.beat__n{display:block;font-family:var(--f-num);font-size:.68rem;letter-spacing:.2em;
  color:var(--acc);margin-block-end:1em;direction:ltr}
html[dir="rtl"] .beat__n{text-align:right}
.beat__n em{font-style:normal;color:var(--ink-3)}
.beats{padding-block-start:clamp(10px,2vh,18px)}

.foot-note{padding-block:clamp(20px,3.5vh,30px) 0;margin-block-start:clamp(10px,2vh,16px);
  border-block-start:1px solid var(--line-2);
  font-size:.82rem;color:var(--ink-3);line-height:1.7;max-width:60ch}

/* ── the ibrad instrument ───────────────────────────────────────────────── */
.ibrad{padding-block:clamp(34px,6vh,58px)}
.ibrad__top{display:block;margin-block-end:clamp(18px,3vh,26px)}
.ibrad__top h3{font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.35;margin-block-end:.45em}
.ibrad__top p{color:var(--ink-2);font-size:.95rem;max-width:52ch;margin-block-end:1.2em}
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.toggle button{padding:.55em 1.2em;font-size:.82rem;font-weight:800;color:var(--ink-3);transition:.2s}
.toggle button + button{border-inline-start:1px solid var(--line)}
.toggle button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.toggle button:not([aria-pressed="true"]):hover{color:var(--ink)}
.rail-day{position:relative;padding-block:52px 44px;direction:ltr}
.rail-day__line{position:absolute;inset-inline:0;inset-block-start:52px;height:1px;background:var(--line)}
.rail-day__heat{position:absolute;inset-block-start:51px;height:3px;border-radius:99px;
  background:var(--acc);inset-inline-start:var(--h0,50%);width:var(--hw,0%);
  transition:inset-inline-start .5s cubic-bezier(.2,.7,.3,1),width .5s cubic-bezier(.2,.7,.3,1)}
.pin{position:absolute;inset-block-start:52px;transform:translate(-50%,-50%);text-align:center;
  transition:left .55s cubic-bezier(.2,.7,.3,1)}
.pin__d{width:9px;height:9px;border-radius:99px;background:var(--ink);margin-inline:auto;
  box-shadow:0 0 0 4px var(--bg)}
.pin__l{position:absolute;inset-block-end:14px;inset-inline-start:50%;transform:translateX(-50%);
  font-size:.76rem;font-weight:800;white-space:nowrap;color:var(--ink-2)}
.pin__t{position:absolute;inset-block-start:14px;inset-inline-start:50%;transform:translateX(-50%);
  font-family:var(--f-num);font-size:.72rem;color:var(--ink-3);white-space:nowrap}
/* the adhan pins read below the line; the iqama owns the space above it —
   at real time-gaps (15 minutes of 3½ hours) side-by-side labels collide */
#pinDhuhr .pin__l,#pinAsr .pin__l{inset-block-end:auto;inset-block-start:14px}
#pinDhuhr .pin__t,#pinAsr .pin__t{inset-block-start:36px}
.pin--iqama .pin__l{inset-block-end:36px}
.pin--iqama .pin__t{inset-block-start:auto;inset-block-end:14px}
.pin--iqama .pin__d{background:var(--acc);width:12px;height:12px}
.pin--iqama .pin__l,.pin--iqama .pin__t{color:var(--acc);font-weight:800}
.ibrad__read{padding-block-start:16px;border-block-start:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.ibrad__read dt{font-size:.76rem;font-weight:700;color:var(--ink-3)}
.ibrad__read dd{font-weight:800;color:var(--ink);margin-inline-start:.5em;font-variant-numeric:tabular-nums}
.ibrad__note{margin-block-start:14px;font-size:.86rem;color:var(--ink-3);line-height:1.7;max-width:60ch}

/* ── offline: the wire and the year ─────────────────────────────────────── */
.plug{padding-block:clamp(28px,5vh,44px);border-block-start:1px solid var(--line-2)}
.plug__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plug__lamp{display:inline-flex;align-items:center;gap:.7em;font-size:.84rem;font-weight:800;color:var(--ink-2)}
.plug__lamp i{width:8px;height:8px;border-radius:99px;background:#2EE59D;transition:.3s}
.plug.is-cut .plug__lamp i{background:var(--acc)}
.plug.is-cut .plug__lamp{color:var(--acc)}
.plug__pull{margin-inline-start:auto;border:1px solid var(--line);border-radius:10px;
  padding:.5em 1.1em;font-size:.8rem;font-weight:800;transition:.2s}
.plug__pull:hover{border-color:var(--acc);color:var(--acc)}
.plug__wire{position:relative;height:62px;margin-block:22px 8px}
.plug__wire svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plug__wire path{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.7;
  stroke-dasharray:var(--len,400);stroke-dashoffset:0;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1),stroke .4s}
.plug.is-cut .plug__wire path{stroke-dashoffset:var(--len,400);stroke:var(--acc)}
.plug__msg{font-size:.88rem;color:var(--ink-2);line-height:1.7;min-height:4.2em}

.strip{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-2);
  margin-block-start:8px}
.strip__hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;border-block-end:1px solid var(--line-2);
  font-size:.8rem;font-weight:800;color:var(--ink-2)}
html[lang="fr"] .strip__hd,html[lang="en"] .strip__hd{font-family:var(--f-num);font-weight:500;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase}
.strip__scroll{max-height:min(40vh,340px);overflow-y:auto;overscroll-behavior:contain}
.strip table{width:100%;font-size:.78rem;direction:ltr}
.strip th{position:sticky;inset-block-start:0;background:#F4F3F9;padding:9px 13px;text-align:right;
  font-weight:800;font-size:.72rem;color:var(--ink-3);border-block-end:1px solid var(--line)}
.strip th:first-child{text-align:left}
.strip td{padding:5px 13px;text-align:right;color:var(--ink-2);border-block-end:1px solid var(--line-2);
  font-family:var(--f-num);font-variant-numeric:tabular-nums}
.strip td:first-child{text-align:left;color:var(--ink-3)}
.strip tr.is-today td{background:var(--acc-dim);color:var(--ink);font-weight:700}
.strip tr.is-today td:first-child{color:var(--acc)}

/* ── downloads: three boarding passes, stamped in the brand ink ─────────── */
.tix{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);
  margin-block-start:clamp(16px,2.6vh,24px);border-radius:16px;background:#FFFFFF;
  border:1px solid var(--line);overflow:hidden;
  box-shadow:0 2px 6px rgba(23,20,31,.04),0 16px 40px -26px rgba(83,82,237,.35);
  transition:transform .25s,box-shadow .3s}
.tix:hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(23,20,31,.05),0 26px 54px -26px rgba(83,82,237,.5)}
.chap .tix:first-of-type{margin-block-start:clamp(22px,3.6vh,32px)}
.tix__stub{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;gap:14px;padding:18px 10px;color:#fff;
  background:linear-gradient(165deg,#7B79FF 0%,#5352ED 55%,#4340D6 100%)}
.tix__stub svg{width:40px;height:40px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.tix:hover .tix__stub svg{transform:rotate(-6deg) scale(1.08)}
.tix__os{writing-mode:vertical-rl;font-family:var(--f-num);font-size:.56rem;font-weight:500;
  letter-spacing:.22em;color:rgba(255,255,255,.85);white-space:nowrap}
/* the perforation between stub and body, notched at both ends */
.tix__body{position:relative;padding:16px 20px 20px;
  border-inline-start:2px dashed color-mix(in srgb,var(--acc) 28%,transparent)}
.tix__body::before,.tix__body::after{content:"";position:absolute;
  inset-inline-start:-10px;width:18px;height:18px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line)}
.tix__body::before{inset-block-start:-10px}
.tix__body::after{inset-block-end:-10px}
.tix__head{display:flex;align-items:center;gap:12px;margin-block-end:.35em}
.tix__head h3{font-family:var(--f-disp);font-weight:700;font-size:1.12rem;line-height:1.3}
.tix__chip{font-family:var(--f-num);font-size:.6rem;letter-spacing:.1em;
  padding:.25em .7em;border:1px solid var(--acc-line);color:var(--acc);border-radius:99px}
.tix__body p{color:var(--ink-2);font-size:.88rem;max-width:44ch;margin-block-end:14px}
.tix__body .btn{font-size:.82rem;padding:.65em 1.2em}
.tix__body .btn svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* the stamp of a real ticket */
.tix__code{position:absolute;inset-block-end:18px;inset-inline-end:16px;width:54px;height:26px;
  opacity:.22;background:repeating-linear-gradient(to left,
    var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,
    var(--ink) 9px 12px,transparent 12px 14px)}
@media (max-width:560px){
  .tix{grid-template-columns:72px minmax(0,1fr)}
  .tix__stub svg{width:32px;height:32px}
  .tix__code{display:none}
}

/* ── install film + steps ───────────────────────────────────────────────── */
.film{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#0A0A0C;margin-block-start:clamp(22px,3.6vh,34px)}
.film video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0A0A0C}
.film__cover{position:absolute;inset:0;display:flex;align-items:flex-end;gap:clamp(14px,2vw,24px);
  padding:clamp(16px,2.6vw,30px);color:#fff;text-align:start;overflow:hidden;
  transition:opacity .35s,visibility .35s}
.film__cover.gone{opacity:0;visibility:hidden}
.film__bg{position:absolute;inset:0;z-index:0;background:url(../img/tutorial-poster.jpg) center/cover no-repeat;
  filter:grayscale(1) brightness(.3)}
.film__cover::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(8,8,10,.94),rgba(8,8,10,.2))}
.film__ring{position:relative;z-index:1;flex:none;width:clamp(50px,5vw,64px);aspect-ratio:1;
  border-radius:999px;display:grid;place-items:center;color:var(--on-acc);background:var(--acc);
  transition:transform .25s}
.film__ring svg{width:42%;height:42%;margin-inline-start:6%;fill:currentColor}
.film__cover:hover .film__ring{transform:scale(1.08)}
.film__txt{position:relative;z-index:1;display:grid;gap:.35em}
.film__txt b{font-family:var(--f-disp);font-weight:700;font-size:clamp(1rem,.9rem + .7vw,1.4rem);line-height:1.3}
.film__txt i{font-style:normal;font-size:.78rem;font-weight:700;opacity:.7}

.steps{display:grid;margin-block-start:clamp(8px,1.5vh,14px)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,24px);align-items:baseline;
  padding-block:clamp(20px,3vh,30px);border-block-start:1px solid var(--line-2)}
.steps .step:first-child{border-block-start:0;margin-block-start:clamp(14px,2.4vh,22px)}
.step > .lbl{width:34px;height:34px;border-radius:99px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--acc-line);color:var(--acc);
  font-family:var(--f-num);font-size:.7rem;font-weight:500;letter-spacing:0;align-self:start}
.step > div{min-width:0}
.step h3{font-size:1rem;font-weight:800;margin-block-end:.35em}
.step p{color:var(--ink-2);font-size:.9rem}

/* ── the update pipeline ────────────────────────────────────────────────── */
.flow{display:grid;margin-block-start:clamp(10px,2vh,18px)}
.flow li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,2vw,24px);padding-block:clamp(20px,3vh,30px);
  border-block-start:1px solid var(--line-2);transition:background .3s}
.flow li:first-child{border-block-start:0}
.flow li .lbl{width:34px;height:34px;border-radius:99px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--acc-line);color:var(--acc);
  font-family:var(--f-num);font-size:.7rem;font-weight:500;letter-spacing:0;align-self:start;
  background:var(--bg);position:relative;z-index:1;transition:.3s}
.flow li::before{content:"";position:absolute;inset-block:0;inset-inline-start:17px;width:1px;
  background:var(--line)}
.flow li:first-child::before{inset-block-start:50%}
.flow li:last-child::before{inset-block-end:50%}
.flow li > div{min-width:0}
.flow li.lit .lbl{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.flow li.lit h3{color:var(--acc)}
.flow h3{font-size:1rem;font-weight:800;margin-block-end:.35em;transition:color .3s}
.flow p{color:var(--ink-2);font-size:.9rem;line-height:1.7}
.flow li.is-guard h3::after{content:"·";margin-inline-start:.4em;color:var(--acc)}

/* ── phone ──────────────────────────────────────────────────────────────── */
.qr-row{display:grid;gap:clamp(22px,3.5vw,44px);align-items:center;
  grid-template-columns:auto minmax(0,1fr);padding-block-start:clamp(22px,3.6vh,34px)}
@media (max-width:640px){ .qr-row{grid-template-columns:minmax(0,1fr)} }
.qr{display:grid;gap:12px;justify-items:center;text-align:center;
  padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.qr img{width:clamp(130px,16vw,170px);height:auto;image-rendering:pixelated;
  background:#fff;border-radius:8px;padding:8px}
.qr span{font-size:.74rem;color:var(--ink-3);letter-spacing:.04em}
.qr-row .steps{margin-block-start:0}
.qr-row .step:first-child{margin-block-start:0;padding-block-start:0}

/* ── support ────────────────────────────────────────────────────────────── */
.support{padding-block:clamp(28px,5vh,44px);border-block-start:2px solid var(--line)}
.support h2{font-family:var(--f-disp);font-weight:700;
  font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);line-height:1.25;max-width:22ch;
  margin-block-end:.4em}
.support p{color:var(--ink-2);font-size:.95rem;max-width:54ch;margin-block-end:1.4em}

footer{padding:clamp(28px,4vh,44px) var(--railpad) clamp(30px,5vh,50px)}
.foot{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between;
  max-width:600px;margin-inline:auto;border-block-start:1px solid var(--line);
  padding-block-start:clamp(20px,3vh,30px)}
.foot__brand{color:var(--ink)}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.85rem;font-weight:700;color:var(--ink-2)}
.foot__links a:hover{color:var(--acc)}
.foot__made{font-size:.8rem;color:var(--ink-3)}
.foot__c{font-family:var(--f-num);font-size:.66rem;color:var(--ink-3);letter-spacing:.14em}

/* ═══ MOBILE: the board docks to the top and stays ═══════════════════════ */
@media (max-width:1023px){
  .split{display:block}
  .stage-col{position:sticky;inset-block-start:0;z-index:40}
  .stage-fix{position:static;height:auto;display:block;
    padding:calc(var(--bar) + 8px) 12px 10px;
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-block-end:1px solid var(--line-2)}
  .stage-box{width:min(100%,560px);margin-inline:auto}
  .stage-cap{display:none}
  .rail{border-inline:0;padding-block-start:clamp(24px,5vh,40px)}
  .intro{min-height:0}
  .blk::before,.beat::before{inset-inline-start:calc(-1 * var(--railpad) + 6px)}
  .bar{background:color-mix(in srgb,var(--bg) 92%,transparent)}
}

/* ═══ MOTION — additive only; gated behind html.fx ═══════════════════════ */
.progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--acc);
  transform:scaleX(var(--p,0));transform-origin:var(--to,right)}

html.fx .rv{opacity:0;transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
html.fx .rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.05s}.rv-2{transition-delay:.1s}.rv-3{transition-delay:.15s}
.rv-4{transition-delay:.2s}.rv-5{transition-delay:.25s}.rv-6{transition-delay:.3s}

/* Arabic display type carries tashkeel above and tanween below the letterform */
html[lang="ar"] .hero h1,
html[lang="ar"] .chap__hd h2,
html[lang="ar"] .blk h3,
html[lang="ar"] .beat h3,
html[lang="ar"] .ibrad__top h3,
html[lang="ar"] .support h2,
html[lang="ar"] .film__txt b{line-height:1.45}

/* per-word rise for the headline */
.split-h .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding-block:.32em .16em;margin-block:-.32em -.16em}
.split-h .w > span{display:inline-block}
html.fx .split-h .w > span{transform:translateY(105%);opacity:0;
  transition:transform .7s cubic-bezier(.16,.9,.28,1),opacity .5s ease}
html.fx .split-h.in .w > span{transform:none;opacity:1}
html.fx .split-h.in .w:nth-child(1) > span{transition-delay:.02s}
html.fx .split-h.in .w:nth-child(2) > span{transition-delay:.06s}
html.fx .split-h.in .w:nth-child(3) > span{transition-delay:.1s}
html.fx .split-h.in .w:nth-child(4) > span{transition-delay:.14s}
html.fx .split-h.in .w:nth-child(n+5) > span{transition-delay:.18s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}