/* ═══════════════════════════════════════════════════════════════════════════
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 tour (the day and
the rules). 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. When the tour ends the split closes and the
rest of the page (.wide) opens to its full measure.
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:72px; /* the notch's height plus its float */
--railpad:clamp(26px,4vw,72px);
--wide:1240px; /* the floor's measure once the split closes */
}
html[lang="fr"],html[lang="en"]{ --f-disp:'Josefin Sans','Ubuntu',system-ui,sans-serif; --f-body:'Ubuntu',system-ui,sans-serif; }
/* Josefin Sans sits high on its line and runs narrow: heavy weight, tight tracking, a little extra size */
html[lang="fr"] .hero h1,html[lang="en"] .hero h1,
html[lang="fr"] .chap__hd h2,html[lang="en"] .chap__hd h2,
html[lang="fr"] .band h2,html[lang="en"] .band h2,
html[lang="fr"] .support h2,html[lang="en"] .support h2,
html[lang="fr"] .blk h3,html[lang="en"] .blk h3,
html[lang="fr"] .beat h3,html[lang="en"] .beat h3,
html[lang="fr"] .ibrad__top h3,html[lang="en"] .ibrad__top h3,
html[lang="fr"] .tix__head h3,html[lang="en"] .tix__head h3,
html[lang="fr"] .film__txt b,html[lang="en"] .film__txt b,
html[lang="fr"] .notch__t,html[lang="en"] .notch__t{font-weight:700!important;letter-spacing:-.01em!important;line-height:1.15!important}
html[lang="fr"] .hero h1,html[lang="en"] .hero h1{font-size:clamp(2.6rem,1.4rem + 3.6vw,4.8rem)}
html[lang="fr"] .chap__hd h2,html[lang="en"] .chap__hd h2{font-size:clamp(1.9rem,1.3rem + 1.8vw,3rem)}
html[lang="fr"] .blk h3,html[lang="en"] .blk h3,html[lang="fr"] .beat h3,html[lang="en"] .beat h3,
html[lang="fr"] .ibrad__top h3,html[lang="en"] .ibrad__top h3{font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem)}
html[lang="fr"] .notch__t,html[lang="en"] .notch__t{font-size:.95rem}
html[lang="fr"] .lbl,html[lang="en"] .lbl{font-family:'Ubuntu',system-ui,sans-serif;font-weight:500}
body{
overflow-x:clip;background:var(--bg);color:var(--ink);
font-family:var(--f-body);line-height:1.7;
font-size:clamp(1rem,.96rem + .3vw,1.12rem);
-webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{line-height:1.9}
::selection{background:var(--acc);color:#fff}
/* ── the scrollbar: a slim rule, not furniture ──────────────────────────
The track disappears, and the thumb is drawn inside a transparent border so
it floats as a narrow pill with air on both sides instead of filling the
gutter. It rests as a pale wash of the brand indigo and deepens to the full
accent under the pointer. */
html{scrollbar-width:thin;scrollbar-color:#A6A4F5 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;
background:color-mix(in srgb,var(--acc) 55%,#FFFFFF);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* ── 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,\
")}
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}
/* ═══ THE NOTCH — a pill at rest, a notch once you scroll ══════════════════
At scroll 0 it floats as a light pill carrying the whole map. The moment
you scroll it rises to the top edge, goes retina-black, grows two concave
ears, and contracts around the chapter under the reading line (number ·
title · a live dot). The map returns on hover or tap. The reading progress
runs along its lower lip. Every step of that is one continuous morph. */
.notch{position:fixed;inset-block-start:14px;inset-inline:0;z-index:80;
display:flex;justify-content:center;padding-inline:14px;pointer-events:none;
--notch:rgba(255,255,255,.84);--nfg:var(--ink);--nfg2:var(--ink-2);--nfg3:var(--ink-3);
--nchip:#F3F2FA;--nline:var(--line);--nhover:var(--acc-dim);
transition:inset-block-start .6s cubic-bezier(.2,.8,.2,1),padding .6s cubic-bezier(.2,.8,.2,1)}
.notch.stuck{inset-block-start:0;padding-inline:0;
--notch:rgba(9,8,14,.94);--nfg:#fff;--nfg2:rgba(255,255,255,.78);--nfg3:rgba(255,255,255,.5);
--nchip:rgba(255,255,255,.08);--nline:rgba(255,255,255,.12);--nhover:rgba(255,255,255,.1)}
.notch__in{pointer-events:auto;position:relative;display:flex;align-items:center;gap:4px;
height:60px;max-width:100%;padding:6px 8px 6px 18px;border-radius:999px;
color:var(--nfg);background-color:var(--notch);
backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
border:1px solid var(--nline);
box-shadow:0 20px 44px -24px rgba(83,82,237,.4),inset 0 1px 0 rgba(255,255,255,.7);
transition:background-color .6s cubic-bezier(.2,.8,.2,1),border-radius .6s cubic-bezier(.2,.8,.2,1),
border-color .6s,color .4s,box-shadow .6s,padding .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .notch__in{padding:6px 18px 6px 8px}
.notch.stuck .notch__in{border-radius:0 0 28px 28px;border-block-start-color:transparent;height:62px;
padding-block-end:8px;
box-shadow:0 26px 54px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
/* the ears: two concave corners that tie the notch to the edge */
.notch__in::before,.notch__in::after{content:"";position:absolute;inset-block-start:-1px;width:28px;height:28px;
pointer-events:none;background-color:var(--notch);opacity:0;transform:translateY(-8px);
transition:opacity .45s .1s,transform .6s cubic-bezier(.2,.8,.2,1),background-color .6s}
.notch.stuck .notch__in::before,.notch.stuck .notch__in::after{opacity:1;transform:none}
.notch__in::before{inset-inline-start:-28px;
-webkit-mask:radial-gradient(circle at 0 100%,transparent 27.5px,#000 28px);
mask:radial-gradient(circle at 0 100%,transparent 27.5px,#000 28px)}
.notch__in::after{inset-inline-end:-28px;
-webkit-mask:radial-gradient(circle at 100% 100%,transparent 27.5px,#000 28px);
mask:radial-gradient(circle at 100% 100%,transparent 27.5px,#000 28px)}
html[dir="rtl"] .notch__in::before{-webkit-mask:radial-gradient(circle at 100% 100%,transparent 27.5px,#000 28px);
mask:radial-gradient(circle at 100% 100%,transparent 27.5px,#000 28px)}
html[dir="rtl"] .notch__in::after{-webkit-mask:radial-gradient(circle at 0 100%,transparent 27.5px,#000 28px);
mask:radial-gradient(circle at 0 100%,transparent 27.5px,#000 28px)}
/* a chapter arrives: it breathes once */
.notch.pop .notch__in{animation:notchPop .7s cubic-bezier(.2,.9,.25,1.2);transform-origin:top center}
@keyframes notchPop{0%{transform:scale(1)}35%{transform:scale(1.03)}70%{transform:scale(.992)}100%{transform:scale(1)}}
.notch__brand{display:inline-flex;align-items:center;flex:none;padding-inline-end:10px}
.notch__word{height:30px;width:auto;display:block;transition:filter .5s}
.notch.stuck .notch__word{filter:brightness(0) invert(1)} /* the indigo mark goes white on black */
/* the "now reading" chip: folded away at rest, unfolds on scroll */
.notch__now{display:inline-flex;align-items:center;gap:8px;flex:none;
max-width:0;padding:0;opacity:0;overflow:hidden;white-space:nowrap;
height:40px;border-radius:999px;color:var(--nfg);
background:var(--nchip);border:1px solid transparent;
transition:max-width .6s cubic-bezier(.2,.8,.2,1),opacity .35s,padding .5s cubic-bezier(.2,.8,.2,1),
margin .5s cubic-bezier(.2,.8,.2,1),background .25s,border-color .4s}
.notch.stuck .notch__now{max-width:380px;padding:0 12px 0 10px;opacity:1;margin-inline-end:6px;
border-color:var(--nline)}
html[dir="rtl"] .notch.stuck .notch__now{padding:0 10px 0 12px}
.notch__now:hover{background:var(--nhover)}
.notch__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}
html.no-fx .notch__dot{animation:none}
.notch__k{font-size:.62rem;letter-spacing:.18em;color:#9C9AFF;flex:none}
.notch__t{font-family:var(--f-disp);font-weight:700;font-size:.86rem;max-width:220px;
overflow:hidden;text-overflow:ellipsis}
.notch__t.swap{animation:tSwap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tSwap{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.notch__chev{width:14px;height:14px;fill:none;stroke:var(--nfg3);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;flex:none}
.notch.open .notch__chev{transform:rotate(180deg)}
/* the map: open at rest, folded once scrolled, back on hover / open */
.notch__nav{display:flex;gap:2px;max-width:900px;opacity:1;overflow:hidden;white-space:nowrap;
transition:max-width .6s cubic-bezier(.2,.8,.2,1),opacity .35s,margin .5s}
.notch.stuck .notch__nav{max-width:0;opacity:0}
.notch.stuck .notch__in:hover .notch__nav,.notch.stuck .notch__in:focus-within .notch__nav,
.notch.open .notch__nav{max-width:900px;opacity:1}
.notch__nav a{display:inline-flex;align-items:center;gap:.45em;height:40px;padding:0 .9em;
border-radius:999px;font-size:.86rem;font-weight:700;color:var(--nfg2);
transition:color .25s,background .25s}
.notch__nav a svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--nfg3);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s,transform .25s}
.notch__nav a:hover{color:var(--nfg);background:var(--nhover)}
.notch__nav a:hover svg{stroke:var(--nfg);transform:translateY(-1px)}
.notch__nav a.on{color:#fff;background:var(--acc)}
.notch__nav a.on svg{stroke:#fff}
/* language: one quiet button, and a proper menu underneath */
.langs{position:relative;flex:none}
.langs__btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 14px;border-radius:999px;
color:var(--nfg2,var(--ink-2));border:1px solid var(--nline,var(--line));
transition:border-color .4s,color .4s,background .25s}
html[dir="rtl"] .langs__btn{padding:0 14px 0 12px}
.langs__btn:hover,.langs.open .langs__btn{background:var(--nhover,var(--acc-dim))}
.langs__ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.8}
.langs__cur{font-size:.76rem;letter-spacing:.12em}
.langs__chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
opacity:.7;transition:transform .3s}
.langs.open .langs__chev{transform:rotate(180deg)}
.langs__menu{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;z-index:5;min-width:200px;
padding:6px;border-radius:18px;background:#fff;color:var(--ink);border:1px solid var(--line);
box-shadow:0 26px 60px -26px rgba(23,20,31,.45);transform-origin:top;animation:tocIn .3s cubic-bezier(.2,.9,.25,1.1)}
.langs__menu[hidden]{display:none}
.langs__menu li{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:12px;cursor:pointer;
font-weight:700;font-size:.95rem;transition:background .2s}
.langs__menu li b{font-size:.68rem;letter-spacing:.14em;color:var(--acc);width:2.4em}
.langs__menu li:hover{background:var(--acc-dim)}
.langs__menu li[aria-selected="true"]{background:var(--acc);color:#fff}
.langs__menu li[aria-selected="true"] b{color:#fff}
.notch__end{display:flex;align-items:center;gap:6px;flex:none;margin-inline-start:4px}
.notch .notch__cta{height:48px;padding:0 1.3em;font-size:.84rem;border-radius:24px;white-space:nowrap;gap:.55em;
background:linear-gradient(120deg,#7B79FF,#5352ED 60%,#4340D6);border:0;
box-shadow:0 8px 22px -10px rgba(83,82,237,.7);animation:ctaGlow 2.6s ease-in-out infinite}
@keyframes ctaGlow{0%,100%{box-shadow:0 8px 22px -10px rgba(83,82,237,.7)}
50%{box-shadow:0 10px 30px -8px rgba(83,82,237,.95),0 0 0 6px rgba(83,82,237,.14)}}
html.no-fx .notch__cta{animation:none}
.notch .notch__cta:hover{transform:translateY(-1px);background:linear-gradient(120deg,#8B89FF,#5F5EFF 60%,#4A47E6)}
.notch .notch__cta svg{width:1.15em;height:1.15em}
.notch__cta-s{display:none}
.notch__wa{display:none;width:40px;height:40px;border-radius:999px;place-items:center;
background:#1DA851;color:#fff}
.notch__wa svg{width:20px;height:20px}
.notch__menu{display:none;position:relative;width:40px;height:40px;border-radius:999px;
background:var(--nchip);transition:background .4s}
.notch__menu i{position:absolute;inset-inline-start:12px;width:16px;height:2px;border-radius:2px;
background:var(--nfg);transition:transform .3s,top .3s,background .4s}
.notch__menu i:first-child{top:15px}.notch__menu i:last-child{top:23px}
.notch.open .notch__menu i:first-child{top:19px;transform:rotate(45deg)}
.notch.open .notch__menu i:last-child{top:19px;transform:rotate(-45deg)}
/* the reading progress along the lower lip */
.notch__bar{position:absolute;inset-inline:28px;inset-block-end:-1px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#8B89FF,var(--acc));
transform:scaleX(var(--p,0));transform-origin:var(--to,right);opacity:0;transition:opacity .4s}
.notch.stuck .notch__bar{opacity:1}
/* the chapter panel: a table of contents dropping from the notch */
.notch__toc{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;width:min(420px,calc(100vw - 28px));
padding:8px;border-radius:22px;color:var(--ink);background:rgba(255,255,255,.96);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--line);box-shadow:0 30px 70px -30px rgba(23,20,31,.45);
transform-origin:top;animation:tocIn .35s cubic-bezier(.2,.9,.25,1.1)}
.notch__toc[hidden]{display:none}
@keyframes tocIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.notch__toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;align-items:center;
padding:10px 14px;border-radius:14px;transition:background .2s}
.notch__toc a:hover{background:var(--acc-dim)}
.notch__toc a.on{background:var(--acc);color:#fff}
.notch__toc b{grid-row:1 / 3;font-family:var(--f-num);font-weight:500;font-size:.62rem;letter-spacing:.18em;
color:var(--acc);padding:.35em .6em;border:1px solid var(--acc-line);border-radius:999px;white-space:nowrap}
.notch__toc a.on b{color:#fff;border-color:rgba(255,255,255,.5)}
.notch__toc span{font-weight:800;font-size:.92rem;line-height:1.3}
.notch__toc i{font-style:normal;font-size:.8rem;color:var(--ink-3);line-height:1.4;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notch__toc a.on i{color:rgba(255,255,255,.8)}
@media (max-width:1180px){
.notch__nav a{padding:0 .62em;font-size:.8rem;gap:.35em}
.notch__brand{padding-inline-end:4px}
.notch__cta{padding:0 .9em;font-size:.76rem}
}
@media (max-width:1024px){ .notch__nav a span{display:none} .notch__nav a{padding:0 .7em} .notch__nav a svg{width:17px;height:17px} }
@media (max-width:860px){
.notch{inset-block-start:10px;padding-inline:10px}
.notch__in{width:100%;height:auto;min-height:56px;flex-wrap:wrap;row-gap:0;padding:6px 8px 6px 14px;border-radius:28px}
html[dir="rtl"] .notch__in{padding:6px 14px 6px 8px}
.notch.stuck .notch__in{height:auto;border-radius:0 0 24px 24px;border-inline-color:transparent;padding-block-end:6px}
.notch__in::before,.notch__in::after{display:none}
.notch__brand{flex:1 1 auto}
.notch__word{height:26px}
.notch__toc{display:none!important}
.notch__now{order:5;width:100%;max-width:none;opacity:0;height:0;padding:0;margin:0;
transition:height .35s,opacity .25s,margin .35s}
.notch.stuck .notch__now{max-width:none;padding:0;margin:0;height:0;opacity:0;border-color:transparent}
.notch__nav{order:6;width:100%;max-width:none;flex-direction:column;gap:2px;
height:0;opacity:0;transition:height .4s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .3s}
.notch.stuck .notch__nav{max-width:none}
.notch.stuck .notch__in:hover .notch__nav{max-width:none}
.notch__nav a{height:46px;padding:0 14px;font-size:1rem}
.notch__nav a span{display:inline}
.notch__end{order:2;flex:none;margin:0}
.notch .langs{order:7;width:100%;height:0;opacity:0;overflow:hidden;transition:height .35s,opacity .25s,margin .3s}
/* the prayer-times button stays in the top row on phones: a compact pill, icon-only when narrow */
.notch .notch__cta{height:40px;padding:0 .95em 0 .8em;font-size:.74rem;gap:.45em;border-radius:20px}
html[dir="rtl"] .notch .notch__cta{padding:0 .8em 0 .95em}
.notch .notch__cta svg{width:1.3em;height:1.3em}
.notch__cta-l{display:none}.notch__cta-s{display:inline}
.notch__wa{display:grid}
.notch__menu{display:block}
.notch.open .notch__now{height:42px;opacity:1;margin-block-start:8px;padding:0 12px;border-color:var(--nline)}
.notch.open .notch__nav{height:auto;opacity:1;margin-block:8px 4px;padding-block-start:8px;
border-block-start:1px solid var(--nline)}
.notch.open .langs{height:auto;opacity:1;margin-block-end:6px;overflow:visible}
.notch.open .langs__btn{width:100%;height:48px;justify-content:center;font-size:1rem}
.notch.open .langs__cur{font-size:.9rem}
.notch.open .langs__menu{position:static;margin-block-start:8px;min-width:0;width:100%}
.notch__bar{inset-inline:20px}
}
@media (max-width:359px){
.notch .notch__cta{width:40px;padding:0;justify-content:center}
.notch .notch__cta span{display:none}
.notch .notch__cta svg{width:19px;height:19px}
.notch__end{gap:5px}
}
/* ═══ BAR — the guide's header (guide/index.html shares this sheet) ══════ */
.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}
.bar .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)}
.bar .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}
.bar .langs button[aria-pressed="true"]{background:var(--acc);color:#fff;
box-shadow:0 2px 8px -2px rgba(83,82,237,.5)}
.bar .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--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}
/* ═══════════════════════════════════════════════════════════════════════════
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:.8rem}
.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;
visibility:hidden} /* unseen until the script has placed them */
.tvbox.is-set,.tvpi.is-set{visibility:visible}
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}
/* 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 channel changes: chapter 02 arrives on the set itself ──────────
The rules chapter is a new channel. The picture flips (a beat of static
through the boot layer), an OSD names the channel in the corner the way a
real set does, and the wall's light warms behind it. */
.tv-osd{position:absolute;z-index:22;inset-block-start:5%;inset-inline-start:4%;
display:flex;align-items:center;gap:.7em;max-width:70%;
padding:.45em .85em;border-radius:8px;pointer-events:none;
background:rgba(8,8,12,.72);border:1px solid rgba(255,255,255,.14);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
color:#fff;font-size:clamp(.62rem,.5rem + .45vw,.9rem);font-weight:700;line-height:1.3;
opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.tv-osd b{font-family:var(--f-num);font-weight:500;letter-spacing:.18em;color:#2EE59D;white-space:nowrap}
.tv-osd span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-osd.show{opacity:1;transform:none}
html.fx.tv-flip .tv-boot{display:block;animation:tvFlip 1.3s steps(8) forwards}
@keyframes tvFlip{0%{opacity:.95}15%{opacity:.55}30%{opacity:.9}45%{opacity:.35}60%{opacity:.7}75%{opacity:.25}90%{opacity:.1}100%{opacity:0}}
html.fx.tv-flip .tv-boot::before{display:none}
/* static and scanlines: the old set losing the signal, hard, for a good second */
html.fx.tv-flip .tv-boot::after{animation:tvNoise 1.3s steps(14);
background:
repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),
url("data:image/svg+xml;utf8,\
")}
@keyframes tvNoise{
0%{opacity:1;background-position:0 0,0 0}
20%{opacity:.85;background-position:0 -14px,60px 40px}
40%{opacity:1;background-position:0 -5px,120px 90px}
60%{opacity:.7;background-position:0 -22px,30px 150px}
80%{opacity:.5;background-position:0 -9px,170px 20px}
100%{opacity:0;background-position:0 -30px,90px 60px}}
/* the colours overshoot and settle; the picture itself does not move */
html.fx.tv-flip .stage-box .kiosk{animation:tvSettleLong 1.3s steps(1)}
@keyframes tvSettleLong{
0%{filter:brightness(1.9) contrast(1.6) saturate(.15)}
10%{filter:brightness(.65) contrast(1.3) hue-rotate(30deg)}
20%{filter:brightness(1.5) saturate(.25)}
30%{filter:brightness(.8) hue-rotate(-20deg) saturate(1.4)}
40%{filter:brightness(1.25) contrast(1.2)}
50%{filter:brightness(.92) hue-rotate(10deg)}
60%{filter:brightness(1.12) saturate(.7)}
72%{filter:brightness(.96)}
85%{filter:brightness(1.04)}
100%{filter:none}}
/* the wall warms for the rules, and the reading marker follows the chapter */
.ground{transition:filter .9s ease}
html[data-chap="fiqh"] .ground{filter:hue-rotate(-28deg) saturate(1.15)}
.stage-cap .lbl--chap{color:var(--acc);font-family:var(--f-num);font-weight:500;font-size:.64rem;
letter-spacing:.16em}
/* ── the rail ───────────────────────────────────────────────────────────── */
.rail{grid-column:1;grid-row:1;min-width:0;
padding:calc(var(--bar) + clamp(30px,6vh,64px)) var(--railpad) clamp(80px,28vh,300px);
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,\
")}
.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(1.02rem,.98rem + .35vw,1.2rem);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 flag rides at text size; the year hangs off it behind a separator dot */
.made__flag{font-style:normal;font-size:1.15em;line-height:1;flex:none}
.made__since::before{content:"·";margin-inline-end:.45em;opacity:.55}
/* ── 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:relative;inset:auto;rotate:none;animation:none}
.hp--clock{width:100%;order:-1}
.hp--ann{max-width:100%}
.hero__devices{display:none}
.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)}
/* ── 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:clamp(1rem,.95rem + .3vw,1.12rem);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:clamp(1rem,.95rem + .3vw,1.12rem);max-width:52ch}
.blk code{font-family:var(--f-num);font-size:.9em;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:.9rem;color:var(--ink-3);line-height:1.75;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:clamp(1rem,.95rem + .3vw,1.12rem);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:.92rem;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:.96rem;color:var(--ink-2);line-height:1.75;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:.84rem;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 ─────────── */
/* White paper, and no rule around it — what lifts the ticket off the wall is a
soft shadow rather than a hairline. */
.tix{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);
margin-block-start:clamp(16px,2.6vh,24px);border-radius:16px;background:transparent;
overflow:hidden;transition:transform .25s,box-shadow .3s;
box-shadow:0 1px 2px rgba(23,20,31,.04),0 12px 28px -20px rgba(83,82,237,.3);
--tix-paper:#FFFFFF}
.tix:hover{transform:translateY(-3px);
box-shadow:0 2px 4px rgba(23,20,31,.05),0 20px 42px -22px rgba(83,82,237,.42)}
.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. The paper is
the body, so the two notches are punched out of it with a mask rather than
painted over it — the ground gradient really does show through. */
.tix__body{position:relative;padding:16px 20px 20px;background:var(--tix-paper)}
/* A drawn perforation, not a dashed border: the dash length is ours to set, so
it reads as a tear line instead of a hairline. It is a child of the body, so
the notch mask cuts it at both ends exactly like the paper. */
.tix__body::before{content:"";position:absolute;z-index:1;inset-block:0;inset-inline-start:0;width:2px;
background:repeating-linear-gradient(to bottom,
color-mix(in srgb,var(--acc) 62%,transparent) 0 5px,transparent 5px 11px)}
/* Both faces of the perforation are punched — the stub is its own element, so
masking the body alone left the indigo half of every notch still filled in. */
.tix__stub,.tix__body{
-webkit-mask:radial-gradient(circle 9px at var(--hole1),transparent 9px,#000 9.5px),
radial-gradient(circle 9px at var(--hole2),transparent 9px,#000 9.5px);
mask:radial-gradient(circle 9px at var(--hole1),transparent 9px,#000 9.5px),
radial-gradient(circle 9px at var(--hole2),transparent 9px,#000 9.5px);
-webkit-mask-composite:source-in;mask-composite:intersect}
/* side by side: the tear runs down the line between the two columns */
.tix__body{--hole1:100% 0;--hole2:100% 100%}
.tix__stub{--hole1:0 0;--hole2:0 100%}
html[dir="ltr"] .tix__body{--hole1:0 0;--hole2:0 100%}
html[dir="ltr"] .tix__stub{--hole1:100% 0;--hole2:100% 100%}
.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:.95rem;max-width:44ch;margin-block-end:14px}
/* The archive is a third way in, not a third choice: it sits above the pair as
a quiet dashed link, leaving the two installers as the ticket's last word.
Those two are a matched pair, so they split it evenly and stack full-width
rather than sitting ragged. */
.tix__dl{display:flex;flex-wrap:wrap;gap:8px}
.tix__dl .btn{flex:1 1 140px;white-space:nowrap}
.tix__alt{display:inline-flex;align-items:center;gap:.45em;margin-block-end:14px;
font-size:.78rem;font-weight:600;color:var(--ink-3);
border-block-end:1px dashed var(--line);padding-block-end:3px;
transition:color .25s,border-color .25s}
.tix__alt:hover{color:var(--acc);border-block-end-color:var(--acc)}
.tix__alt svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.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:1.08rem;font-weight:800;margin-block-end:.35em}
.step p{color:var(--ink-2);font-size:.96rem}
/* ── 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:1.08rem;font-weight:800;margin-block-end:.35em;transition:color .3s}
.flow p{color:var(--ink-2);font-size:.96rem;line-height:1.75}
.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: the person behind the product, one message away ─────────── */
.wide .support{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,44px);
align-items:center;padding:clamp(24px,3.6vw,48px);border:1px solid var(--line);border-radius:26px;
position:relative;overflow:hidden;background:var(--bg-2);border-block-start-width:1px;box-shadow:none}
.wide .support > *{position:relative}
.support__who{position:relative;width:76px;height:76px;justify-self:start}
.support__ico{display:grid;place-items:center;width:76px;height:76px;border-radius:24px;color:#fff;
background:linear-gradient(150deg,#2BD96A,#1DA851)}
.support__ico svg{width:38px;height:38px}
.support__on{position:absolute;inset-inline-end:-3px;inset-block-end:-3px;width:18px;height:18px;
border-radius:50%;background:#2EE59D;border:3px solid var(--bg-2)}
.support__txt .lbl{margin-block-end:.9em}
.wide .support h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.4rem);max-width:none;margin-block-end:.4em;
line-height:1.25;text-wrap:balance}
.wide .support p{margin-block-end:0;max-width:60ch;font-size:1rem}
.support__chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:18px}
.support__chips li{display:inline-flex;align-items:center;gap:.5em;padding:.45em .95em;
border-radius:999px;border:1px solid var(--line);background:var(--bg);
font-size:.86rem;font-weight:700;color:var(--ink-2)}
.support__chips svg{width:14px;height:14px;fill:none;stroke:#1DA851;stroke-width:2.6;
stroke-linecap:round;stroke-linejoin:round;flex:none}
.support__act{display:grid;gap:12px;justify-items:start}
.support .btn--wa,.support .btn--wa:hover{box-shadow:none}
.btn--wa{background:linear-gradient(135deg,#2BD96A,#1DA851);color:#fff;
box-shadow:0 12px 28px -10px rgba(29,168,81,.65)}
.btn--wa:hover{background:linear-gradient(135deg,#34E273,#22B95B);transform:translateY(-2px);
box-shadow:0 18px 36px -12px rgba(29,168,81,.75)}
.btn--xl{padding:1.05em 2.1em;font-size:1.02rem;border-radius:14px;gap:.7em}
.btn--xl svg{width:1.35em;height:1.35em}
.support__num{font-size:.9rem;color:var(--ink-3);letter-spacing:.06em;padding-inline:.3em;
transition:color .2s}
.support__num:hover{color:var(--ink)}
/* the name under the number: whoever picks up, and what he actually does */
.support__line{display:flex;align-items:center;flex-wrap:wrap;gap:.55em}
.support__by{font-size:.76rem;font-weight:700;color:var(--ink-3);padding-inline:.3em}
.support__by::after{content:"·";margin-inline-start:.55em;opacity:.5}
/* ── the floating line to WhatsApp: rides the scroll, grows on hover ───── */
.wa-fab{position:fixed;z-index:75;inset-block-end:clamp(16px,3vh,28px);inset-inline-end:clamp(16px,2.4vw,28px);
display:inline-flex;align-items:center;gap:0;height:56px;padding:0;border-radius:999px;
color:#fff;background:linear-gradient(135deg,#2BD96A,#1DA851);
box-shadow:0 14px 34px -10px rgba(29,168,81,.75),0 2px 6px rgba(0,0,0,.12);
opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;
transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .25s,gap .3s,padding .3s}
.wa-fab.show{opacity:1;transform:none;pointer-events:auto}
.wa-fab svg{width:30px;height:30px;flex:none;margin:13px}
.wa-fab span{max-width:0;overflow:hidden;white-space:nowrap;font-size:.9rem;font-weight:800;
transition:max-width .35s cubic-bezier(.2,.8,.2,1),padding .35s;padding-inline-end:0}
.wa-fab:hover span,.wa-fab:focus-visible span{max-width:200px;padding-inline-end:22px}
.wa-fab:hover{box-shadow:0 20px 44px -12px rgba(29,168,81,.85),0 2px 6px rgba(0,0,0,.12)}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:inherit;
box-shadow:0 0 0 0 rgba(43,217,106,.55);animation:fabRing 2.6s ease-out infinite}
@keyframes fabRing{0%{box-shadow:0 0 0 0 rgba(43,217,106,.5)}70%{box-shadow:0 0 0 14px rgba(43,217,106,0)}100%{box-shadow:0 0 0 0 rgba(43,217,106,0)}}
html.no-fx .wa-fab::before{animation:none}
html.no-fx .wa-fab{opacity:1;transform:none;pointer-events:auto} /* no motion layer: simply there */
/* the moment the real button is on screen, the floating one steps aside */
.wa-fab.rest{opacity:0;transform:translateY(18px) scale(.9);pointer-events:none}
@media (max-width:560px){ .wa-fab{height:52px} .wa-fab svg{width:28px;height:28px;margin:12px} }
/* ═══ FOOTER — the brand, the map of the site, and the maker's mark ═══════ */
.foot{position:relative;overflow:hidden;margin-block-start:clamp(20px,4vh,40px);
padding:0 var(--railpad) clamp(24px,4vh,36px);
background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 5%,transparent))}
.foot::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
background:linear-gradient(90deg,transparent,var(--acc-line) 30%,var(--acc-line) 70%,transparent)}
.foot__mark{position:absolute;inset-block-end:-6%;inset-inline-start:-2%;width:min(46vw,520px);
aspect-ratio:512/180;pointer-events:none;opacity:.07;color:var(--acc);background:currentColor;
-webkit-mask:url(../img/MasjidyLogoText.png) center/contain no-repeat;
mask:url(../img/MasjidyLogoText.png) center/contain no-repeat}
.foot__in{position:relative;max-width:var(--wide);margin-inline:auto}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);
padding-block:clamp(40px,6vh,64px) clamp(28px,4vh,44px)}
.foot__brand{display:grid;gap:16px;justify-items:start;align-content:start}
.foot__brand img{height:28px;width:auto}
.foot__tag{color:var(--ink-2);font-size:.98rem;max-width:34ch;line-height:1.8}
.foot__pills{display:flex;flex-wrap:wrap;gap:8px}
.foot__pill{display:inline-flex;align-items:center;gap:.5em;padding:.4em .9em;border-radius:999px;
border:1px solid var(--line);background:var(--bg-2);font-size:.78rem;font-weight:700;color:var(--ink-2)}
.foot__pill i{width:7px;height:7px;border-radius:99px;background:#2EE59D;flex:none}
.foot__pill b{color:var(--acc);font-weight:500}
.foot__pill.num{letter-spacing:.1em;color:var(--ink-3);font-size:.7rem}
.foot__col{display:grid;gap:10px;align-content:start;justify-items:start}
.foot__col h4{font-family:var(--f-disp);font-weight:800;font-size:.82rem;color:var(--ink);
margin-block-end:6px;letter-spacing:.02em}
html[lang="fr"] .foot__col h4,html[lang="en"] .foot__col h4{font-family:var(--f-num);font-weight:500;
font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.foot__col a{position:relative;font-size:.95rem;font-weight:600;color:var(--ink-2);
transition:color .2s,transform .2s}
.foot__col a:hover{color:var(--acc);transform:translateX(calc(-3px * var(--dir,1)))}
html[dir="ltr"] .foot__col a:hover{transform:translateX(3px)}
.foot__wa{display:inline-flex!important;align-items:center;gap:.5em;margin-block-start:6px;
padding:.5em 1em;border-radius:10px;background:#E7F9EE;color:#0F8A44!important;font-weight:800}
.foot__wa svg{width:16px;height:16px;flex:none}
.foot__wa:hover{background:#D5F5E2;transform:none!important}
.foot .langs__menu{inset-block-start:auto;inset-block-end:calc(100% + 10px);transform-origin:bottom}
.foot__bottom{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;
padding-block-start:clamp(18px,3vh,26px);border-block-start:1px solid var(--line)}
.foot__made{display:inline-flex;align-items:center;gap:.5em;font-size:.84rem;font-weight:700;color:var(--ink-3)}
.foot__made svg{width:14px;height:14px;fill:var(--acc);flex:none;animation:heartbeat 2.8s ease-in-out infinite}
html.no-fx .foot__made svg{animation:none}
.foot__c{font-family:var(--f-num);font-size:.68rem;color:var(--ink-3);letter-spacing:.14em}
@media (max-width:719px){
.foot__top{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
.foot__brand{grid-column:1 / -1}
.foot__col a{font-size:.9rem}
}
@media (min-width:720px){
.foot__top{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
.foot__top{grid-template-columns:minmax(0,1.8fr) repeat(3,minmax(0,1fr))}
}
/* ═══════════════════════════════════════════════════════════════════════════
THE WIDE FLOOR — after the tour the split closes and the page opens up.
Same wall, same ink, same hairlines; only the measure widens and the
blocks stand side by side. Written mobile-first: one column by default,
the grids arrive at 720px and 1024px.
═══════════════════════════════════════════════════════════════════════════ */
.wide{position:relative;width:100%;max-width:calc(var(--wide) + 2 * var(--railpad));
margin-inline:auto;padding:0 var(--railpad) clamp(30px,6vh,60px);
border-block-start:1px solid var(--line-2)}
.wide .chap{padding-block-start:clamp(56px,10vh,120px)}
.wide > .chap:first-child{padding-block-start:clamp(28px,5vh,56px)}
.wide .chap--last{padding-block-end:clamp(20px,4vh,40px)}
/* the chapter head: number on a rule, title and standfirst side by side */
.wide .chap__hd{display:grid;grid-template-columns:minmax(0,1fr);gap:14px clamp(28px,5vw,88px);
align-items:end;border-block-start:0;padding-block-start:0}
.wide .chap__hd .no{grid-column:1 / -1;display:flex;align-items:center;gap:16px;margin-block-end:.4em}
.wide .chap__hd .no::after{content:"";flex:1;height:1px;background:var(--line)}
.wide .chap__hd h2{max-width:16ch;margin-block-end:0;
font-size:clamp(1.7rem,1.2rem + 2.1vw,3rem);line-height:1.15}
.wide .chap__hd p{max-width:48ch;font-size:clamp(.95rem,.9rem + .25vw,1.06rem);padding-block-end:.25em}
/* one card recipe, reused by every block on the floor */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
box-shadow:0 2px 6px rgba(23,20,31,.04),0 18px 44px -28px rgba(83,82,237,.35)}
/* ── 03 · offline: the wire, three numbers, and the year in a table ─────── */
.off{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;
margin-block-start:clamp(24px,4vh,44px)}
.off__main{display:grid;gap:14px}
.wide .plug{border:1px solid var(--line);border-radius:18px;background:var(--bg-2);
padding:clamp(18px,2.6vw,28px);
box-shadow:0 2px 6px rgba(23,20,31,.04),0 18px 44px -28px rgba(83,82,237,.35);
transition:border-color .3s,box-shadow .3s}
.wide .plug.is-cut{border-color:var(--acc-line);
box-shadow:0 2px 6px rgba(23,20,31,.04),0 22px 50px -26px rgba(83,82,237,.55)}
.wide .plug__msg{min-height:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stats li{position:relative;padding:clamp(14px,2vw,20px) clamp(12px,1.6vw,20px) clamp(12px,1.6vw,16px);
border:1px solid var(--line);border-radius:16px;background:var(--bg-2);overflow:hidden}
.stats li::before{content:"";position:absolute;inset-inline-start:0;inset-block:14px;width:3px;
border-radius:99px;background:var(--acc)}
.stats b{display:block;font-family:var(--f-num);font-weight:500;letter-spacing:-.04em;line-height:1;
font-size:clamp(1.55rem,1.1rem + 1.6vw,2.5rem);color:var(--acc);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-block-start:8px;font-size:clamp(.66rem,.6rem + .3vw,.8rem);
font-weight:700;color:var(--ink-3);line-height:1.4}
.wide .foot-note{border-block-start:0;padding-block:6px 0;margin-block-start:0}
.wide .strip{margin-block-start:0;border-radius:18px;
box-shadow:0 2px 6px rgba(23,20,31,.04),0 18px 44px -28px rgba(83,82,237,.35)}
.wide .strip__scroll{max-height:min(56vh,520px);overflow-x:auto}
.wide .strip table{min-width:440px}
.wide .strip td{padding-block:7px}
/* ── 04 · platforms: the boarding passes stand in a row ────────────────── */
.tix-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px);
margin-block-start:clamp(24px,4vh,44px)}
.wide .tix,.wide .chap .tix:first-of-type{margin-block-start:0;
grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);border-radius:18px}
.wide .tix__stub{flex-direction:row;justify-content:space-between;align-items:center;
padding:16px 20px;gap:12px}
.wide .tix__stub svg{width:38px;height:38px}
.wide .tix__os{writing-mode:horizontal-tb;font-size:.6rem;letter-spacing:.24em}
.wide .tix__body{display:flex;flex-direction:column;padding:20px 20px 22px}
.wide .tix__body::before{inset-block:0 auto;inset-inline:0;width:auto;height:2px;
background:repeating-linear-gradient(to right,
color-mix(in srgb,var(--acc) 62%,transparent) 0 5px,transparent 5px 11px)}
.wide .tix__body,html[dir="ltr"] .wide .tix__body{--hole1:0 0;--hole2:100% 0}
.wide .tix__stub,html[dir="ltr"] .wide .tix__stub{--hole1:0 100%;--hole2:100% 100%}
.wide .tix__body p{flex:1;max-width:none;margin-block-end:18px}
.wide .tix__body > .btn,.wide .tix__body > .tix__alt{align-self:flex-start}
.wide .tix__code{display:block;inset-block-end:26px;inset-inline-end:20px;inset-block-start:auto}
/* ── 05 · install: the film beside its four steps ──────────────────────── */
.inst{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start;
margin-block-start:clamp(24px,4vh,44px)}
.wide .film{margin-block-start:0;border-radius:18px;
box-shadow:0 30px 60px -34px rgba(23,20,31,.55)}
.wide .steps{margin-block-start:0}
.wide .steps .step:first-child{margin-block-start:0;padding-block-start:0}
.wide .step{padding-block:clamp(16px,2.4vh,24px)}
/* ── 06 · updates: the pipeline laid across the floor ──────────────────── */
.wide .flow{margin-block-start:clamp(24px,4vh,44px)}
.wide .flow li{grid-template-columns:auto minmax(0,1fr)}
.safe{display:flex;gap:16px;align-items:flex-start;margin-block-start:clamp(22px,4vh,40px);
padding:clamp(16px,2.2vw,24px) clamp(18px,2.6vw,28px);border-radius:18px;
border:1px solid var(--acc-line);
background:linear-gradient(120deg,var(--acc-dim),color-mix(in srgb,var(--acc) 3%,transparent) 60%,transparent)}
.safe svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--acc);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;margin-block-start:2px}
.safe p{font-size:.96rem;color:var(--ink-2);line-height:1.75;max-width:72ch}
/* ── 07 · the phone: one bold band in the brand's own ink ──────────────── */
.band{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(24px,4vw,72px);align-items:center;
padding:clamp(26px,4.5vw,64px);border-radius:24px;color:#fff;
background:linear-gradient(135deg,#7B79FF 0%,#5352ED 52%,#3C39C9 100%);
box-shadow:0 34px 80px -34px rgba(83,82,237,.7)}
.band::before{content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;
-webkit-mask:radial-gradient(70% 90% at 80% 50%,#000,transparent 80%);
mask:radial-gradient(70% 90% at 80% 50%,#000,transparent 80%);
background-image:url("data:image/svg+xml;utf8,\
")}
.band::after{content:"";position:absolute;inset:auto -10% -40% auto;width:60%;aspect-ratio:1;
border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent)}
.band > *{position:relative;z-index:1}
.band .no{display:block;font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.72);margin-block-end:1em}
.band h2{font-family:var(--f-disp);font-weight:700;max-width:18ch;margin-block-end:.4em;
font-size:clamp(1.6rem,1.15rem + 1.9vw,2.8rem);line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
html[lang="fr"] .band h2,html[lang="en"] .band h2{letter-spacing:-.028em;line-height:1.06}
html[lang="ar"] .band h2{line-height:1.45}
.band__lede{color:rgba(255,255,255,.84);font-size:clamp(.95rem,.9rem + .25vw,1.06rem);max-width:46ch}
.band .steps{margin-block-start:6px}
.band .step{border-block-start-color:rgba(255,255,255,.18)}
.band .steps .step:first-child{margin-block-start:10px}
.band .step > .lbl{border-color:rgba(255,255,255,.5);color:#fff}
.band .step h3{color:#fff}
.band .step p{color:rgba(255,255,255,.8)}
.band .btn{margin-block-start:18px}
.btn--white{background:#fff;color:var(--acc);box-shadow:0 12px 28px -12px rgba(0,0,0,.5)}
.btn--white:hover{background:#F3F2FF;transform:translateY(-1px)}
html[dir="rtl"] .btn--white svg{transform:scaleX(-1)}
.band__qr{display:grid;place-items:center}
.band .qr{border:0;padding:clamp(16px,2vw,24px);border-radius:22px;background:#fff;
box-shadow:0 34px 60px -26px rgba(0,0,0,.5);rotate:-2deg;transition:rotate .35s}
.band:hover .qr{rotate:0deg}
.band .qr img{width:clamp(150px,22vw,230px);padding:0}
.band .qr span{color:var(--ink-2);font-weight:500}
/* ── the grids arrive ───────────────────────────────────────────────────── */
@media (min-width:720px){
.wide .chap__hd{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.tix-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.band{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.wide .support{grid-template-columns:auto minmax(0,1fr)}
.support__act{grid-column:2}
}
@media (min-width:1024px){
.off{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.inst{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wide .support{grid-template-columns:auto minmax(0,1fr) auto}
.support__act{grid-column:auto}
/* the update pipeline reads left to right (or right to left), one line
threaded through the four badges */
.wide .flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.wide .flow li{display:block;padding:0 clamp(14px,2vw,30px) 0 0;border-block-start:0}
html[dir="rtl"] .wide .flow li{padding:0 0 0 clamp(14px,2vw,30px)}
.wide .flow li::before{inset-block:auto;inset-block-start:17px;inset-inline:0;height:1px;width:auto}
.wide .flow li:first-child::before{inset-inline-start:17px}
.wide .flow li:last-child::before{inset-inline-end:auto;width:17px}
.wide .flow li > div{padding-block-start:18px}
.wide .flow li.lit .lbl{box-shadow:0 0 0 6px var(--acc-dim)}
}
@media (max-width:719px){
.wide .flow li{grid-template-columns:auto minmax(0,1fr)}
.stats li{padding:14px 12px 12px}
}
@media (max-width:420px){
.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats span{font-size:.62rem}
}
/* ═══ 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:clamp(24px,5vh,40px) clamp(40px,8vh,80px)}
.rail > *{max-width:640px}
.intro{min-height:0}
.blk::before,.beat::before{inset-inline-start:calc(-1 * var(--railpad) + 6px)}
}
/* ═══ MOTION — additive only; gated behind html.fx ═══════════════════════ */
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}
}