/* moqutah.com: the app's identity (support/docs/design/tokens.json 3.6) on the web.
   Light first (porcelain ground, white tiles, lapis and gilt), with dark night bands
   for the hero, the app screens and the dedication. */

@font-face { font-family: "Reem Kufi"; src: url("/fonts/ReemKufi-Variable.ttf") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Scheherazade New"; src: url("/fonts/ScheherazadeNew-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --lapis-night: #0A1230;
  --lapis: #22357A;
  --lapis-deep: #16235a;
  --gold-leaf: #C8A25B;
  --gold-deep: #8C6A2F;
  --gold-light: #F6E7C1;
  --champagne: #EAD9B0;
  --gilt: linear-gradient(180deg, #F6E7C1 0%, #C8A25B 55%, #8C6A2F 100%);

  --ground: #F3F4F7;
  --surface: #FFFFFF;
  --surface2: #E9EBF2;
  --ink: #0A1230;
  --muted: #5E6685;
  --line: #DCDFE8;
  --primary: #22357A;
  --accent-text: #8C6A2F;

  --display: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dhikr: "Scheherazade New", "IBM Plex Sans Arabic", serif;

  --r-md: 18px;
  --r-lg: 30px;
  --r-xl: 40px;
  --page: 1200px;
  --gutter: 20px;
  --to: to right;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --names: url("/img/names.svg?v=4");
  color-scheme: light;
}
:root[dir="rtl"] { --to: to left; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.75 var(--body);
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); }
button { font: inherit; }
.wrap { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }
:focus-visible { outline: 3px solid rgba(200, 162, 91, .7); outline-offset: 3px; border-radius: 8px; }

/* ---------- Header: the floating nav, the phone menu and the hero ----------
   The nav is a floating pill that takes the opposite tone of the band under it: site.js samples the band under
   the pill's top, middle and bottom (--n1/--n2/--n3: 0 = a dark band under it, so the pill is white; 1 = a light
   band, so the pill is deep navy). The numbers are registered, so a band edge sliding under the pill makes the
   colours flow instead of snapping. A gilt line runs around the pill's own border as the page scrolls (the
   .nav-ring svg, drawn by site.js). A gilt pill slides to the section in view. On phones the links live in a
   full-screen menu that opens as a circle from the button. The markup is made by support/tools/site/make_header_html.py. */
@property --n1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --n2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --n3 { syntax: "<number>"; inherits: true; initial-value: 0; }
.nav {
  --n1: 0; --n2: 0; --n3: 0;
  --nav-ink: color-mix(in srgb, #EFE3C2 calc(var(--n2) * 100%), #454E70);
  --nav-ink-strong: color-mix(in srgb, #fff calc(var(--n2) * 100%), var(--ink));
  --nav-hover: color-mix(in srgb, rgba(255, 255, 255, .14) calc(var(--n2) * 100%), rgba(10, 18, 48, .06));
  position: fixed; top: 14px; inset-inline: 0; margin-inline: auto; z-index: 60;
  width: min(940px, calc(100% - 24px));
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, #0B1334 calc(var(--n1) * 100%), #FFFFFF),
    color-mix(in srgb, #0F1944 calc(var(--n2) * 100%), #F8F9FD),
    color-mix(in srgb, #0B1334 calc(var(--n3) * 100%), #F0F2F9));
  border: 1px solid color-mix(in srgb, rgba(200, 162, 91, .4) calc(var(--n2) * 100%), rgba(10, 18, 48, .08));
  box-shadow: 0 14px 34px -18px rgba(10, 18, 48, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  transition: --n1 .7s var(--ease), --n2 .7s var(--ease), --n3 .7s var(--ease), box-shadow .35s var(--ease);
}
.nav-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nav-ring path { fill: none; stroke-linecap: round; stroke-width: 2.2; }
.nav-ring .rt { stroke: color-mix(in srgb, rgba(200, 162, 91, .22) calc(var(--n2) * 100%), rgba(200, 162, 91, .2)); }
.nav-ring .rp { stroke: var(--gold-leaf); stroke-dasharray: calc(var(--p, 0) * 100) 100; }
.nav-brand { display: flex; align-items: center; gap: 9px; flex: none; text-decoration: none; padding-inline-start: 2px; }
.nav-brand img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(200, 162, 91, .7); }
.nav-brand b { display: none; font: 700 19px/1 var(--display); color: color-mix(in srgb, #EAD9B0 calc(var(--n2) * 100%), var(--gold-deep)); }
:root[dir="ltr"] .nav-brand b { letter-spacing: .08em; font-size: 16px; }
.nav-links { position: relative; display: flex; gap: 2px; margin-inline: auto; }
.nav-links a { position: relative; z-index: 1; color: var(--nav-ink); text-decoration: none; font: 500 14.5px/1 var(--body); padding: 11px 13px; border-radius: 999px; white-space: nowrap; transition: color .3s; }
.nav-links a:hover { color: var(--nav-ink-strong); }
.nav-links a.cur { color: var(--lapis-night); font-weight: 600; }
.nav-ind {
  position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: var(--w, 0px); border-radius: 999px; pointer-events: none;
  transform: translateX(var(--x, 0px)); opacity: var(--o, 0);
  background: var(--gilt); box-shadow: 0 8px 20px -8px rgba(200, 162, 91, .85), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.lang {
  flex: none; color: color-mix(in srgb, var(--champagne) calc(var(--n2) * 100%), var(--primary)); text-decoration: none; font: 500 14px/1 var(--body); padding: 11px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(234, 217, 176, .4) calc(var(--n2) * 100%), var(--line));
  background: color-mix(in srgb, rgba(255, 255, 255, .08) calc(var(--n2) * 100%), #fff);
  transition: background .3s, border-color .3s;
}
.nav-brand + .lang { margin-inline-start: auto; }
.nav.simple .nav-brand b { display: block; }
.lang:hover { background: var(--nav-hover); }
.nav-toggle { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--gilt); box-shadow: 0 10px 22px -10px rgba(200, 162, 91, .9); }
.nav-toggle span { position: absolute; inset-inline: 13px; height: 2px; border-radius: 2px; background: var(--lapis-night); transition: transform .5s var(--ease), top .5s var(--ease); }
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 25px; }
body.menu-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* The phone menu: opens as a circle from the button, the links rise one after the other. */
.menu {
  --ox: 46px;
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
  padding: 104px 30px 36px; color: #fff; isolation: isolate;
  background: radial-gradient(80% 50% at 50% 0%, rgba(58, 76, 150, .55), transparent 70%), linear-gradient(180deg, #0A1230, #111d52 70%, #0A1230);
  clip-path: circle(0px at var(--ox) 40px); visibility: hidden;
  transition: clip-path .85s var(--ease), visibility 0s .85s;
}
:root[dir="ltr"] .menu { --ox: calc(100% - 46px); }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 55%); mask-image: linear-gradient(180deg, #000 0, transparent 55%); }
body.menu-open .menu { clip-path: circle(150vmax at var(--ox) 40px); visibility: visible; transition: clip-path .9s var(--ease), visibility 0s; }
.menu nav { display: grid; width: min(520px, 100%); margin-inline: auto; }
.menu nav a { display: flex; align-items: baseline; gap: 18px; padding: 13px 0; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(246, 231, 193, .16);
  opacity: 0; transform: translateY(26px); transition: opacity .4s var(--ease), transform .4s var(--ease), color .25s; }
body.menu-open .menu nav a { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .8s var(--ease), color .25s; transition-delay: calc(.3s + var(--i) * 60ms), calc(.3s + var(--i) * 60ms), 0s; }
.menu nav a:active { color: var(--gold-light); }
.mn { min-width: 30px; font: 600 14px var(--body); color: var(--gold-leaf); direction: ltr; }
.ml { font: 700 clamp(28px, 8vw, 40px)/1.2 var(--display); }
.menu-foot { width: min(520px, 100%); margin: 30px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; }
body.menu-open .menu-foot { opacity: 1; transform: none; transition: opacity .7s var(--ease) .75s, transform .8s var(--ease) .75s; }
body.menu-open { overflow: hidden; }

@media (max-width: 860px) {
  .nav { width: min(560px, calc(100% - 24px)); }
  .nav-links { display: none; }
  .nav-brand b { display: block; }
  .lang { margin-inline-start: auto; }
  .nav-toggle { display: block; }
}
@media (min-width: 861px) { .menu { display: none; } }
@media (max-width: 1020px) and (min-width: 861px) {
  .nav-links a { padding: 11px 10px; font-size: 14px; }
}

/* ---------- Hero: one calm screen, the words on one side, one phone in a thin arch on the other ---------- */
.hero {
  --glow: rgba(232, 162, 122, .3); --sx: 24%; --px: 0; --py: 0; --sy: 0;
  position: relative; overflow: hidden; color: #fff; isolation: isolate;
  min-height: 100svh; display: flex; align-items: center;
  border-radius: 0 0 clamp(30px, 5vw, 60px) clamp(30px, 5vw, 60px);
  background:
    radial-gradient(46% 62% at var(--sx) 52%, rgba(96, 116, 210, .32), transparent 72%),
    radial-gradient(70% 38% at 50% 100%, var(--glow), transparent 74%),
    linear-gradient(180deg, #070d26 0%, #0f1b4d 56%, #1c2e6e 100%);
  padding: 104px 0 60px;
}
:root[dir="ltr"] .hero { --sx: 76%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 26%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 44%, #fff 50%, transparent 51%);
  opacity: .5;
}
/* The Arabic letters (the site's identity): full strength on the phone side and along the top, softer behind the words. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .3) 100%); mask-image: linear-gradient(to right, #000 0, #000 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .3) 100%);
}
:root[dir="ltr"] .hero::after { -webkit-mask-image: linear-gradient(to left, #000 0, #000 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .3) 100%); mask-image: linear-gradient(to left, #000 0, #000 38%, rgba(0, 0, 0, .3) 62%, rgba(0, 0, 0, .3) 100%); }
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky .star { position: absolute; border-radius: 50%; background: #fff; opacity: .6; }
.hero-grid { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.hero-copy { max-width: 600px; transform: translateY(calc(var(--sy) * 60px)); opacity: calc(1 - var(--sy) * 1.1); }
.wordmark { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.wordmark .w1 {
  display: block; padding: .02em .06em .06em; font: 700 clamp(64px, 8.4vw, 112px)/1.1 var(--display);
  background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%), linear-gradient(180deg, #FFF6DC 0%, #EBCB84 38%, #C8A25B 62%, #8C6A2F 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 170% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[dir="ltr"] .wordmark .w1 { font-size: clamp(52px, 7.4vw, 96px); letter-spacing: .05em; }
.wordmark .w2 { margin-top: 2px; padding-inline: .1em; font: 600 clamp(13px, 1.5vw, 17px)/1 var(--display); color: var(--champagne); direction: ltr; }
.wordmark .w2 i { display: inline-block; margin-inline-end: .55em; font-style: normal; }
:root[dir="ltr"] .wordmark .w2 { font-size: clamp(20px, 2.4vw, 28px); direction: rtl; }
.tagline { font: 600 clamp(20px, 2.2vw, 28px)/1.55 var(--display); margin: 26px 0 10px; color: #fff; text-wrap: balance; }
.lead { max-width: 32em; margin: 0 0 30px; color: rgba(255, 255, 255, .74); font-size: 17px; line-height: 1.9; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.hero .sponsor { margin: 0; }
.note-small { font-size: 13px; color: rgba(255, 255, 255, .6); margin: 0; }

.hero-stage { position: relative; display: grid; place-items: center; }
.halo { position: absolute; width: min(120%, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(246, 231, 193, .22), transparent); }
.device { position: relative; transform: perspective(1300px) rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -4deg)); }
.device .phone {
  width: clamp(190px, calc((100svh - 240px) * .46), 290px); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(246, 231, 193, .22), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.arch { position: absolute; inset: -46px -52px -34px; width: calc(100% + 104px); height: calc(100% + 80px); overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.arch path { fill: none; stroke: rgba(234, 217, 176, .5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.arch path + path { stroke: rgba(234, 217, 176, .22); }

/* A sheen that runs over the gilt buttons. */
.btn-gilt { position: relative; overflow: hidden; isolation: isolate; }
.btn-gilt::after { content: ""; position: absolute; z-index: -1; inset-block: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }

@media (max-width: 860px) {
  .hero { min-height: 0; padding: 100px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hero-copy { text-align: center; margin-inline: auto; }
  .wordmark { align-items: center; }
  .lead { margin-inline: auto; }
  .cta, .hero-foot { justify-content: center; }
  .device .phone { width: clamp(180px, 56vw, 250px); }
  .arch { inset: -34px -34px -24px; width: calc(100% + 68px); height: calc(100% + 58px); }
}

@media (prefers-reduced-motion: no-preference) {
  .sky .star { animation: twinkle var(--t, 4s) ease-in-out var(--dl, 0s) infinite alternate; }
  .halo { animation: glow 7s ease-in-out infinite alternate; }
  .arch { animation: fade-in 2.4s ease .6s backwards; }
  .wordmark .w1 { animation: wm-in 1.4s var(--ease) .15s backwards, sheen 8s ease-in-out 2.2s infinite; }
  :root[dir="ltr"] .wordmark .w1 { animation-name: wm-in-ltr, sheen; }
  .wordmark .w2 i { animation: letter-in 1s var(--ease) backwards; animation-delay: calc(.8s + var(--k) * 70ms); }
  .wordmark .w2:not(:has(i)) { animation: hero-rise 1s var(--ease) .8s backwards; }
  .tagline { animation: hero-rise 1s var(--ease) .9s backwards; }
  .lead { animation: hero-rise 1s var(--ease) 1.05s backwards; }
  .cta { animation: hero-rise 1s var(--ease) 1.2s backwards; }
  .hero-foot { animation: hero-rise 1s var(--ease) 1.35s backwards; }
  .device { animation: phone-in 1.4s var(--ease) .5s backwards; }
  .device .phone { animation: bob 8s ease-in-out 2s infinite alternate; }
  .btn-gilt::after { animation: shine 6s ease-in-out 3s infinite; }
}
@keyframes twinkle { from { opacity: .15; transform: scale(.7); } to { opacity: .9; transform: scale(1.2); } }
@keyframes glow { from { opacity: .6; scale: .94; } to { opacity: 1; scale: 1.05; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
@keyframes wm-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(12px); clip-path: inset(-12% -4% -12% 100%); }
  to { opacity: 1; transform: none; filter: blur(0); clip-path: inset(-12% -4% -12% -4%); }
}
@keyframes wm-in-ltr {
  from { opacity: 0; transform: translateY(26px); filter: blur(12px); clip-path: inset(-12% 100% -12% -4%); }
  to { opacity: 1; transform: none; filter: blur(0); clip-path: inset(-12% -4% -12% -4%); }
}
@keyframes sheen { 0%, 62% { background-position: 170% 0, 0 0; } 100% { background-position: -70% 0, 0 0; } }
@keyframes letter-in { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } }
@keyframes phone-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes bob { from { translate: 0 -8px; } to { translate: 0 8px; } }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 24px;
  border-radius: 999px; text-decoration: none; font: 600 16px/1.2 var(--body); border: 0; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s, filter .3s, background .3s;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn small { display: block; font-weight: 400; font-size: 12px; opacity: .8; }
.btn-gilt { background: var(--gilt); color: var(--lapis-night); box-shadow: 0 14px 30px -14px rgba(200, 162, 91, .9); }
.btn-gilt:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 34px -14px rgba(200, 162, 91, .95); }
.btn-glass { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.btn-glass:hover { background: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.note-small { font-size: 13px; color: rgba(255, 255, 255, .66); margin-top: 14px; }

.phone {
  width: 240px; border-radius: 36px; padding: 8px; background: #05091a;
  box-shadow: 0 40px 70px -35px rgba(10, 18, 48, .9), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.phone img { border-radius: 29px; width: 100%; height: auto; aspect-ratio: 540 / 1170; }

/* ---------- Sections ---------- */
section { padding: 104px 0; position: relative; }
.band-white { background: var(--surface); }
.band-dark { color: #fff; background: radial-gradient(70% 60% at 50% 0%, rgba(58, 76, 150, .5), transparent 70%), linear-gradient(180deg, #0A1230, #111d52 60%, #0A1230); overflow: hidden; isolation: isolate; }
.band-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }

/* Section heads: a big fading title, its number on the opposite side */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; margin-bottom: 56px; }
.sec-text { max-width: 44em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); font: 600 15px/1 var(--body); margin: 0 0 16px; }
.eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gilt); }
.sec-head h2 {
  font: 700 clamp(36px, 5.6vw, 68px)/1.16 var(--display); margin: 0 0 18px; text-wrap: balance;
  background: linear-gradient(180deg, var(--ink) 18%, rgba(10, 18, 48, .28) 118%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-lead { color: var(--muted); font-size: 18px; margin: 0; max-width: 40em; }
.sec-num {
  font: 700 clamp(84px, 13vw, 190px)/.78 var(--display); direction: ltr; user-select: none;
  background: linear-gradient(180deg, rgba(34, 53, 122, .34), rgba(34, 53, 122, 0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(34, 53, 122, .2); padding-bottom: .05em;
}
.band-dark .eyebrow { color: var(--champagne); }
.band-dark .sec-head h2 { background-image: linear-gradient(180deg, #fff 18%, rgba(255, 255, 255, .3) 118%); }
.band-dark .section-lead { color: rgba(255, 255, 255, .78); }
.band-dark .sec-num { background-image: linear-gradient(180deg, rgba(246, 231, 193, .42), rgba(246, 231, 193, 0) 92%); -webkit-text-stroke-color: rgba(246, 231, 193, .28); }

/* Reveal: an animation (not a transition), so hover effects on the same element stay snappy */
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.98); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; animation: rise .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 85ms); }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal.in-view { opacity: 1; animation: none; } }

/* ---------- Prayer times + Hijri widget ---------- */
.prayer-widget {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px;
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px;
  box-shadow: 0 50px 90px -60px rgba(10, 18, 48, .5);
}
.pw-hijri {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); color: #fff; padding: 32px 26px;
  display: flex; flex-direction: column; justify-content: center; text-align: center; min-height: 340px;
  background: radial-gradient(90% 60% at 50% 110%, rgba(200, 162, 91, .5), transparent 65%), linear-gradient(170deg, #1c2c78, #0A1230);
}
.pw-hijri::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat; opacity: .9; }
.pw-hijri-label { font: 600 13px var(--body); color: var(--champagne); letter-spacing: .06em; margin-bottom: 8px; }
.pw-hijri-day { font: 700 108px/1 var(--display); background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; }
.pw-hijri-month { font: 600 26px/1.3 var(--display); margin-top: 6px; }
.pw-hijri-year { font: 500 15px var(--body); color: rgba(255, 255, 255, .7); direction: ltr; }
.pw-hijri-greg { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(234, 217, 176, .25); font-size: 14px; color: rgba(255, 255, 255, .78); }
.pw-hijri-note { font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, .5); margin: 12px 0 0; }
.pw-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.pw-tabs { --sign: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface2); border-radius: 999px; padding: 4px; }
:root[dir="rtl"] .pw-tabs { --sign: -1; }
.pw-ind { position: absolute; inset-block: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--surface); box-shadow: 0 6px 16px -8px rgba(10, 18, 48, .35); transition: translate .4s var(--ease); }
.pw-tabs[data-mode="mosque"] .pw-ind { translate: calc(100% * var(--sign)) 0; }
.pw-tab { position: relative; border: 0; background: transparent; color: var(--muted); font: 600 15px var(--body); padding: 12px 16px; border-radius: 999px; cursor: pointer; transition: color .3s; }
.pw-tab.active { color: var(--primary); }

.pw-controls { display: block; }
.pw-calc-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw-calc-options[hidden] { display: none; }
#pw-mosque-options { grid-template-columns: 1fr; }
.pw-field { display: block; min-width: 0; }
.pw-label { display: block; font: 600 13px var(--body); color: var(--muted); margin-bottom: 7px; padding-inline: 4px; }
.pw-sel { position: relative; display: block; }
.pw-sel select {
  -webkit-appearance: none; appearance: none; width: 100%; height: 56px; margin: 0;
  padding-block: 0; padding-inline: 18px 48px; border-radius: 18px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font: 500 15px var(--body); text-overflow: ellipsis;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.pw-sel select.is-empty { color: var(--muted); }
.pw-sel select:hover { border-color: rgba(34, 53, 122, .45); }
.pw-sel select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(34, 53, 122, .14); }
.pw-sel option { color: var(--ink); background: #fff; }
.pw-chev {
  position: absolute; inset-inline-end: 14px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface2); color: var(--primary); pointer-events: none; transition: background .25s, color .25s;
}
.pw-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pw-sel:hover .pw-chev, .pw-sel:focus-within .pw-chev { background: var(--primary); color: #fff; }

.pw-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pw-time { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 2px; transition: transform .3s var(--ease), box-shadow .3s; }
.pw-time:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -22px rgba(10, 18, 48, .5); }
.pw-time-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 600 14px var(--body); }
.pw-time-head svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--gold-deep); }
.pw-time-value { font: 700 34px/1.2 var(--display); color: var(--ink); direction: ltr; text-align: start; }
:root[dir="rtl"] .pw-time-value { text-align: right; }
.pw-time-sub { font-size: 12.5px; color: var(--accent-text); font-weight: 600; }
.pw-time.next { background: linear-gradient(160deg, #22357A, #0f1b4d); border-color: transparent; color: #fff; box-shadow: 0 22px 36px -22px rgba(34, 53, 122, .9); }
.pw-time.next .pw-time-head, .pw-time.next .pw-time-value { color: #fff; }
.pw-time.next .pw-time-head svg { color: var(--gold-light); }
.pw-time.next .pw-time-sub { color: var(--champagne); }
.pw-next-pill { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; font: 600 11px var(--body); padding: 4px 10px; border-radius: 999px; background: var(--gilt); color: var(--lapis-night); }
.pw-placeholder { grid-column: 1 / -1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 34px 20px; border: 1.5px dashed var(--line); border-radius: 22px; background: rgba(255, 255, 255, .6); }
.credit { font-size: 12px; color: var(--muted); margin: 14px 0 0; }
@media (max-width: 980px) {
  .prayer-widget { grid-template-columns: 1fr; }
  .pw-hijri { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 20px; text-align: center; padding: 22px; }
  .pw-hijri-day { font-size: 72px; }
  .pw-hijri-label, .pw-hijri-greg, .pw-hijri-note { flex-basis: 100%; }
  .pw-hijri-greg { margin-top: 6px; padding-top: 12px; }
  .pw-calc-options { grid-template-columns: 1fr 1fr; }
  .pw-calc-options .pw-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .prayer-widget { padding: 14px; border-radius: 30px; }
  .pw-calc-options { grid-template-columns: 1fr; }
  .pw-times { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pw-time { padding: 14px; }
  .pw-time-value { font-size: 28px; }
  .pw-tab { font-size: 13.5px; padding: 11px 8px; }
}

/* ---------- Features: a bento with a light that follows the pointer ---------- */
.features { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.feature {
  position: relative; grid-column: span 4; overflow: hidden; isolation: isolate; min-height: 250px;
  display: flex; flex-direction: column; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.feature.w8 { grid-column: span 8; }
.feature.w6 { grid-column: span 6; }
.feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 162, 91, .2), transparent 62%);
}
.feature:hover { transform: translateY(-6px); border-color: rgba(200, 162, 91, .65); box-shadow: 0 34px 50px -34px rgba(10, 18, 48, .45); }
.feature:hover::before { opacity: 1; }
.feature .wm { position: absolute; z-index: -1; inset-inline-end: -26px; bottom: -34px; width: 190px; height: 190px; color: var(--lapis); opacity: .05; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--ease), opacity .4s; }
.feature:hover .wm { transform: rotate(-9deg) scale(1.1); opacity: .1; }
.f-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.feature .icon {
  width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; color: var(--gold-light);
  background: linear-gradient(145deg, #2f47a8, #16235a); box-shadow: 0 14px 22px -12px rgba(34, 53, 122, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .5s var(--ease);
}
.feature:hover .icon { transform: rotate(-6deg) scale(1.08); }
.feature .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.f-idx { font: 600 13px var(--body); letter-spacing: .12em; color: var(--muted); opacity: .7; direction: ltr; }
.feature .f-text { margin-top: auto; }
.feature h3 { font: 600 22px/1.35 var(--display); margin: 0 0 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips span { font: 600 13px var(--body); padding: 7px 14px; border-radius: 999px; background: rgba(34, 53, 122, .07); color: var(--primary); border: 1px solid rgba(34, 53, 122, .14); }

.feature.dark { color: #fff; border-color: transparent; background: radial-gradient(80% 90% at 100% 0%, rgba(200, 162, 91, .32), transparent 60%), linear-gradient(160deg, #1b2b74, #0A1230); }
.feature.dark .wm { color: var(--gold-leaf); opacity: .14; }
.feature.dark p { color: rgba(255, 255, 255, .76); }
.feature.dark .f-idx { color: var(--champagne); }
.feature.dark .icon { background: var(--gilt); color: var(--lapis-night); box-shadow: 0 14px 22px -12px rgba(200, 162, 91, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.feature.dark:hover { border-color: rgba(200, 162, 91, .5); }
.feature.gold { border-color: rgba(200, 162, 91, .55); background: radial-gradient(70% 80% at 0% 100%, rgba(200, 162, 91, .28), transparent 65%), linear-gradient(160deg, #FCF6E4, #F2E3B8); }
.feature.gold .wm { color: var(--gold-deep); opacity: .1; }
.feature.gold p { color: #5d4a22; }
.feature.gold .f-idx { color: var(--gold-deep); }
.feature.gold .icon { background: linear-gradient(145deg, #1b2b74, #0A1230); color: var(--gold-light); }
@media (max-width: 980px) { .feature, .feature.w8, .feature.w6 { grid-column: span 6; } .feature:last-child { grid-column: span 12; } }
@media (max-width: 640px) { .features { gap: 12px; } .feature, .feature.w8, .feature.w6, .feature:last-child { grid-column: span 12; min-height: 0; padding: 24px; } .f-top { margin-bottom: 22px; } }

/* ---------- App screens: a laptop, an iPad and a phone show the same screen. Drag inside any of them, or use the two buttons ---------- */
.devs {
  position: relative; display: grid; align-items: center; row-gap: 22px; column-gap: clamp(8px, 2vw, 28px);
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "scene" "meta";
  margin-top: 8px; width: min(1520px, 100vw - 40px); margin-inline: calc(50% - min(760px, 50vw - 20px));
}
.devs::before { content: ""; position: absolute; z-index: -1; inset: -6% -4% 6%; background: radial-gradient(48% 52% at 50% 55%, rgba(200, 162, 91, .2), transparent 72%); pointer-events: none; }
.devs-scene { grid-area: scene; container-type: inline-size; position: relative; aspect-ratio: 100 / 40; outline: none; --pos: 0; touch-action: pan-y; }
.devs > .car-btn { grid-area: scene; align-self: center; z-index: 5; }
.devs > .car-btn.prev { justify-self: start; }
.devs > .car-btn.next { justify-self: end; }
.devs-meta { grid-area: meta; display: grid; justify-items: center; gap: 16px; }
.dev-cap { margin: 0; min-height: 1.6em; color: var(--gold-light); font: 600 17px var(--body); transition: opacity .3s; }
.dev-cap.swap { opacity: 0; }
/* a soft floor under the three */
.devs-scene::after { content: ""; position: absolute; z-index: 0; inset-inline: 6%; bottom: -2%; height: 7%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); pointer-events: none; }
.dev { position: absolute; z-index: 1; bottom: 1.4cqw; background: linear-gradient(145deg, #FBF0D0, #E3C987 40%, #B58F45); box-shadow: 0 5cqw 8cqw -4cqw rgba(0, 0, 0, .8), 0 0 7cqw -1cqw rgba(214, 178, 100, .28), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -.2cqw .4cqw rgba(110, 80, 25, .35); }
.dev-screen { position: relative; overflow: hidden; box-shadow: 0 0 0 .45cqw #16226B; cursor: grab; user-select: none; -webkit-user-select: none; background: #0A1230; touch-action: pan-y; }
.dev-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 38%); }
.devs-scene.dragging .dev-screen { cursor: grabbing; }
.reel { display: flex; transform: translateX(calc(var(--pos) * var(--sgn, -1) * 100%)); transition: transform .8s var(--ease) calc(var(--dl, 0) * 1ms); will-change: transform; }
:root[dir="rtl"] .devs-scene { --sgn: 1; }
.devs-scene.dragging .reel { transition: none; }
.reel img { flex: 0 0 100%; width: 100%; height: auto; display: block; -webkit-user-drag: none; pointer-events: none; }
/* laptop: the lid, and the base it stands on */
.dev-lap { left: 27.5%; width: 50%; z-index: 1; background: none; box-shadow: none; }
.lap-lid { padding: 1.1cqw 1.1cqw 1.3cqw; border-radius: 1.8cqw 1.8cqw .5cqw .5cqw; background: linear-gradient(145deg, #FBF0D0, #E3C987 40%, #B58F45); box-shadow: 0 5cqw 8cqw -4cqw rgba(0, 0, 0, .8), 0 0 7cqw -1cqw rgba(214, 178, 100, .28), inset 0 0 0 1px rgba(255, 255, 255, .55); }
.dev-lap .dev-screen { aspect-ratio: 16 / 10; border-radius: .7cqw; }
.lap-base { position: relative; height: 1.5cqw; margin-inline: -3.2%; border-radius: 0 0 2.2cqw 2.2cqw; background: linear-gradient(180deg, #F3E2B0, #D2B26C 55%, #A8843F); box-shadow: 0 1cqw 2cqw -.6cqw rgba(0, 0, 0, .6); }
.lap-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 52%; translate: -50% 0; border-radius: 0 0 .8cqw .8cqw; background: linear-gradient(180deg, #9C7A35, #C4A25C); }
.dev-pad { left: 4.5%; width: 20%; z-index: 2; padding: 1cqw; border-radius: 2.4cqw; }
.dev-pad .dev-screen { aspect-ratio: 3 / 4; border-radius: 1.5cqw; }
.dev-ph { left: 80.5%; width: 15%; z-index: 2; padding: .75cqw; border-radius: 3cqw; }
.dev-ph .dev-screen { aspect-ratio: 540 / 1170; border-radius: 2.35cqw; }
/* Motion: the three rise in one after another when the section appears, drift a little with the pointer at
   different depths, float gently, and a sheen crosses all three screens each time the picture changes. */
.dev { transform: translate3d(calc(var(--px, 0) * var(--depth, 1) * 1cqw), calc(var(--py, 0) * var(--depth, 1) * .6cqw), 0); transition: transform .6s var(--ease); }
.dev-lap { --depth: -.6; } .dev-pad { --depth: -1.4; } .dev-ph { --depth: -2.2; }
.dev-screen::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 245, 215, .5) 50%, transparent 65%); transform: translateX(-120%); }
.devs-scene.turn .dev-screen::before { animation: dev-sheen 1s var(--ease) calc(var(--dl, 0) * 1ms); }
@keyframes dev-sheen { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 0; transform: translateX(120%); } }
.devs::before { transition: opacity .8s; }
@media (prefers-reduced-motion: no-preference) {
  .dev-pad { animation: dev-float 9s ease-in-out -2s infinite alternate; }
  .dev-ph { animation: dev-float 8s ease-in-out -5s infinite alternate; }
  .dev-lap { animation: dev-float 11s ease-in-out infinite alternate; }
  .js .devs.reveal .dev { opacity: 0; }
  .js .devs.reveal.in-view .dev { opacity: 1; animation: dev-in 1.2s var(--ease) calc(var(--dl, 0) * 1ms + 150ms) backwards, dev-float 9s ease-in-out calc(var(--dl, 0) * 1ms + 1350ms) infinite alternate; }
  .js .devs.reveal .car-btn, .js .devs.reveal .devs-meta { opacity: 0; transition: opacity .8s ease .9s; }
  .js .devs.reveal.in-view .car-btn, .js .devs.reveal.in-view .devs-meta { opacity: 1; }
  .js .devs.reveal.in-view .car-btn:disabled { opacity: .35; }
  .devs::before { animation: dev-glow 7s ease-in-out infinite alternate; }
  .car-btn.next:not(:disabled) svg { animation: nudge 2.4s ease-in-out infinite; }
}
@keyframes dev-in { from { opacity: 0; scale: .92; translate: 0 6cqw; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes dev-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes nudge { 0%, 70%, 100% { translate: 0; } 85% { translate: var(--nx, 4px) 0; } }
:root[dir="rtl"] .car-btn.next svg { --nx: -4px; }
@keyframes dev-float { from { translate: 0 0; } to { translate: 0 -.9cqw; } }
.car-btn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(246, 231, 193, .3); transition: background .3s, transform .3s var(--ease), color .3s; }
.car-btn:hover, .car-btn:focus-visible { background: var(--gilt); color: var(--lapis-night); transform: scale(1.08); border-color: transparent; outline: none; }
.car-btn:disabled { opacity: .35; cursor: default; background: rgba(255, 255, 255, .06); color: #fff; transform: none; border-color: rgba(246, 231, 193, .3); }
.car-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"] .car-btn.prev svg, :root[dir="ltr"] .car-btn.next svg { transform: scaleX(-1); }
.car-dots { display: flex; gap: 8px; align-items: center; }
.car-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .28); cursor: pointer; transition: width .4s var(--ease), background .3s; }
.car-dots button.on { width: 30px; background: var(--gilt); }
@media (max-width: 760px) {
  .devs { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "scene scene scene" "prev meta next"; row-gap: 26px; }
  .devs > .car-btn.prev { grid-area: prev; justify-self: auto; }
  .devs > .car-btn.next { grid-area: next; justify-self: auto; }
  .devs-scene { aspect-ratio: 100 / 58; }
  .dev-pad { display: none; }
  .dev-lap { left: 0; width: 71%; bottom: 7cqw; }
  .dev-ph { left: auto; right: 0; }
  .dev-ph { width: 25%; bottom: 0; padding: 1.1cqw; border-radius: 4.4cqw; }
  .dev-ph .dev-screen { border-radius: 3.4cqw; }
  .car-btn { width: 48px; height: 48px; }
}

/* ---------- Learn to pray: full-width sheets that stack as you scroll, no cards ---------- */
.steps { counter-reset: step; margin: 0 calc(50% - 50vw) 90px; }
.step {
  counter-increment: step; position: sticky; top: 76px; background: #fff; border-radius: 64px 64px 0 0;
  box-shadow: 0 -30px 60px -38px rgba(10, 18, 48, .5);
}
.step:nth-child(even) { background: #ECEFF7; }
.step:last-child { border-radius: 64px; }
.step-inner {
  width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: 64px;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(64px, 9vw, 150px); align-items: center;
}
.step:nth-child(even) .step-media { order: 2; }

/* A tall picture (the owner's, title and number drawn into it), with a thin gold frame offset behind it that slides into place on hover */
.step-media { position: relative; width: min(100%, 400px, calc((100vh - 200px) * .5628)); min-width: 240px; aspect-ratio: 941 / 1672; justify-self: center; }
.step-media::before {
  content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(200, 162, 91, .85); border-radius: 48px;
  translate: 26px 26px; transition: translate .7s var(--ease);
}
.step:nth-child(even) .step-media::before { translate: -26px 26px; }
.step:hover .step-media::before { translate: 0 0; }
.step-pic { position: absolute; inset: 0; overflow: hidden; border-radius: 48px; background: var(--lapis-night); box-shadow: 0 50px 80px -40px rgba(10, 18, 48, .75); }
.step-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.step:hover .step-pic img { transform: scale(1.05); }

.step-body { position: relative; display: flex; flex-direction: column; gap: 18px; }
.step-body::after {
  content: counter(step, decimal-leading-zero); position: absolute; inset-block-start: calc(-1 * min(128px, var(--num-room, 128px))); inset-inline-end: 0; z-index: 0; pointer-events: none; unicode-bidi: isolate;
  font: 700 190px/1 var(--display); background: linear-gradient(180deg, rgba(200, 162, 91, .34), rgba(200, 162, 91, 0) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px rgba(200, 162, 91, .34);
}
.step-body > * { position: relative; z-index: 1; }
.step-progress { height: 5px; --k: 1; width: 220px; border-radius: 3px; background: linear-gradient(var(--to), var(--gold-leaf) calc(var(--k) / var(--of, 6) * 100%), rgba(10, 18, 48, .12) 0); -webkit-mask-image: repeating-linear-gradient(var(--to), #000 0 calc(100% / var(--of, 6) - 4px), transparent 0 calc(100% / var(--of, 6))); mask-image: repeating-linear-gradient(var(--to), #000 0 calc(100% / var(--of, 6) - 4px), transparent 0 calc(100% / var(--of, 6))); }
.step h3 { font: 700 clamp(40px, 5vw, 64px)/1.1 var(--display); margin: 4px 0 0; color: var(--ink); }
.step-desc { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.85; max-width: 24em; }

/* Movement and words as plain typography: hairlines, a small label, large dhikr */
.how { display: grid; margin: 18px 0 0; }
.how > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 20px 0; border-top: 1px solid rgba(10, 18, 48, .14); }
.how > div:last-child { border-bottom: 1px solid rgba(10, 18, 48, .14); }
.how dt { display: flex; align-items: center; gap: 8px; font: 600 13px var(--body); letter-spacing: .06em; color: var(--gold-deep); }
.how dt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how dd { margin: 0; font-size: 18px; line-height: 1.8; color: var(--ink); }
.how .say dd { font: 400 34px/1.85 var(--dhikr); color: var(--lapis); direction: rtl; text-align: start; }
.how .say dd.plain { font: 400 18px/1.8 var(--body); direction: inherit; color: var(--muted); }
.how .say .tr { display: block; margin-top: 2px; font: 400 14.5px/1.6 var(--body); color: var(--muted); direction: ltr; text-align: start; }
:root[dir="ltr"] .how .say dd { direction: ltr; text-align: left; }

/* Sheets stack on every screen size. site.js sets each sheet's `top` so a tall sheet (a phone) is
   read to its bottom before the next one slides over it. */
@media (max-width: 1020px) {
  .step-inner { grid-template-columns: 1fr; padding-block: 46px 56px; gap: 56px; }
  .step:nth-child(even) .step-media { order: 0; }
  .step, .step:last-child { border-radius: 44px 44px 0 0; }
  .step:last-child { border-radius: 44px; }
  .step-media { width: min(70%, 380px); }
  .step-media::before, .step:nth-child(even) .step-media::before { translate: 16px 16px; border-radius: 36px; }
  .step-pic { border-radius: 36px; }
  .step-body::after { font-size: 130px; inset-block-start: calc(-1 * min(96px, var(--num-room, 96px))); }
}
@media (max-width: 600px) {
  .step-inner { padding-block: 34px 44px; gap: 46px; }
  .step-media { width: 78%; min-width: 0; }
  .how > div { grid-template-columns: 1fr; gap: 4px; }
  .how .say dd { font-size: 29px; }
  .step-body::after { font-size: 96px; inset-block-start: calc(-1 * min(74px, var(--num-room, 74px))); }
  .step-progress { width: 160px; }
  }

/* The schools' differences: one large row per difference, with who says what */
.diffs { position: relative; margin: 0 0 100px; color: var(--ink); }
.diffs h3 { font: 700 clamp(38px, 5vw, 62px)/1.15 var(--display); margin: 0 0 16px; background: linear-gradient(180deg, var(--ink) 20%, rgba(10, 18, 48, .4) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diffs > p { margin: 0 0 40px; color: var(--muted); font-size: 21px; line-height: 1.85; max-width: 40em; }
/* Three large cards, one on the right and one on the left. On hover a card glides to the middle and grows.
   Golds only, so no school looks favoured. */
.diff-cards { container-type: inline-size; --sign: 1; display: grid; gap: 44px; padding-block: 10px 6px; }
:root[dir="rtl"] .diff-cards { --sign: -1; }
.diff-item { display: flex; align-items: center; gap: 28px; }
.diff-item:nth-child(even) { flex-direction: row-reverse; }
.diff-card {
  position: relative; z-index: 1; flex: 0 0 58%; display: flex; flex-direction: column; padding: 38px 40px 40px; outline: none;
  background: #FFFDF7; border: 1px solid rgba(200, 162, 91, .5); border-radius: 40px;
  box-shadow: 0 40px 64px -46px rgba(70, 50, 10, .5);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s;
}
.dc-big {
  flex: 1; text-align: center; direction: ltr; user-select: none; font: 700 clamp(110px, 17vw, 230px)/.85 var(--display);
  background: linear-gradient(180deg, rgba(200, 162, 91, .5), rgba(200, 162, 91, 0) 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px rgba(200, 162, 91, .5); transition: opacity .5s;
}
/* The hover target is the card's own resting place (a pseudo-element of the row that never moves), not the card:
   a card that glides away from a pointer resting on its far edge would lose the hover, slide back, regain it,
   and shake. Hovering the moved card also keeps it open. */
@media (hover: hover) and (min-width: 1021px) {
  .diff-item { position: relative; pointer-events: none; }
  .diff-item::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; width: 58%; inset-inline-start: 0; pointer-events: auto; }
  .diff-item:nth-child(even)::before { inset-inline-start: auto; inset-inline-end: 0; }
  .diff-card { pointer-events: auto; }
  .diff-item:nth-child(odd):hover .diff-card, .diff-item:nth-child(odd) .diff-card:focus-visible { transform: translateX(calc(var(--sign) * 21cqw)) scale(1.1); }
  .diff-item:nth-child(even):hover .diff-card, .diff-item:nth-child(even) .diff-card:focus-visible { transform: translateX(calc(var(--sign) * -21cqw)) scale(1.1); }
  .diff-item:hover .diff-card, .diff-card:focus-visible { z-index: 3; border-color: var(--gold-leaf); box-shadow: 0 70px 100px -50px rgba(70, 50, 10, .65); }
  .diff-item:hover .dc-big, .diff-item:has(.diff-card:focus-visible) .dc-big { opacity: .25; }
}
.dc-no { display: flex; align-items: center; gap: 10px; font: 600 15px var(--body); letter-spacing: .14em; color: var(--gold-deep); direction: ltr; }
.dc-no::after { content: ""; width: 38px; height: 2px; border-radius: 2px; background: var(--gilt); }
.diff-card h4 { font: 700 clamp(28px, 2.8vw, 38px)/1.3 var(--display); margin: 10px 0 24px; color: var(--ink); }
.dc-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); gap: 14px; }
.dc-t { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 20px; border-radius: 24px; }
.dc-t b { font: 600 14px/1 var(--body); letter-spacing: .04em; }
.dc-t span { font: 600 22px/1.45 var(--body); }
.dc-t.h { background: linear-gradient(150deg, #B8934A, #7C5C22); color: #fff; }
.dc-t.h b { color: #F6E7C1; }
.dc-t.m { background: linear-gradient(150deg, #F6E7C1, #E4CB8B); color: #3a2d0f; }
.dc-t.m b { color: #7a5b24; }
.dc-t.s { background: linear-gradient(150deg, #E2C77E, #C6A04C); color: #2b200a; }
.dc-t.s b { color: #5c4514; }
.dc-t.b { background: linear-gradient(150deg, #FBF5E3, #F3EAD0); color: #3a2d0f; border: 1px solid rgba(200, 162, 91, .4); }
.dc-t.b b { color: #8C6A2F; }
.dc-t.v0 { border: 1.5px dashed rgba(200, 162, 91, .55); color: #a99a73; background: transparent; }
.dc-t.v0 b { color: #a99a73; }
@media (max-width: 1020px) {
  .diff-cards { gap: 22px; }
  .diff-item, .diff-item:nth-child(even) { flex-direction: column; gap: 0; }
  .diff-card { flex: none; width: 100%; padding: 26px 22px; border-radius: 30px; }
  .dc-big { display: none; }
  .dc-t span { font-size: 19px; }
}
.diffs .foot-note { display: inline-block; margin: 38px 0 0; padding-bottom: 8px; font-weight: 600; font-size: 22px; color: var(--ink); border-bottom: 3px solid var(--gold-leaf); }


/* ---------- Support: a dark story beside a warm gilt donation half ---------- */
.support-panel {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  border-radius: 56px; color: #fff; box-shadow: 0 70px 110px -70px rgba(10, 18, 48, .9);
  background: radial-gradient(70% 90% at 0% 0%, rgba(90, 110, 200, .45), transparent 60%), linear-gradient(160deg, #1c2c78, #0A1230);
}
.support-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat; opacity: .9; }
.sp-about { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(34px, 5vw, 72px); }
.sp-logo { width: clamp(150px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 22px; margin-bottom: 30px; box-shadow: 0 0 0 7px rgba(200, 162, 91, .4), 0 0 0 16px rgba(200, 162, 91, .12), 0 30px 50px -22px rgba(0, 0, 0, .8); }
.sp-logo img { max-height: 100%; width: auto; }
.sp-name {
  margin: 0 0 24px; direction: ltr; text-align: start; font: 700 clamp(38px, 4.6vw, 62px)/1.08 var(--display); letter-spacing: .005em;
  background: linear-gradient(180deg, #ffffff 8%, #F6E7C1 52%, #C8A25B 118%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sp-name em { display: block; font-style: normal; font-size: .8em; letter-spacing: .04em; }
.sp-about p { color: rgba(255, 255, 255, .86); margin: 0 0 26px; font-size: 20px; line-height: 1.95; max-width: 30em; }
.charity-no { display: inline-flex; align-items: center; gap: 12px; color: var(--champagne); font-size: 16.5px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(200, 162, 91, .6); background: rgba(234, 217, 176, .07); }
.charity-no i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-leaf); box-shadow: 0 0 10px rgba(200, 162, 91, .9); flex: none; }
.sp-about .visit { margin-top: 26px; font-weight: 600; font-size: 18px; color: var(--gold-light); text-underline-offset: 6px; }

.sp-give {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(34px, 5vw, 64px); color: var(--ink);
  background: radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, .85), transparent 70%), linear-gradient(165deg, #FCF6E4, #F0DDA9);
}
.sp-give::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("/img/names-gold.svg?v=4"); background-size: cover; background-position: right top; background-repeat: no-repeat; }
.sp-give .eyebrow { color: var(--gold-deep); margin-bottom: 10px; font-size: 17px; }
.sp-give h3 { font: 700 clamp(34px, 3.6vw, 48px)/1.2 var(--display); margin: 0 0 26px; color: #05081a; }
.give-ring { position: relative; width: min(290px, 74%); aspect-ratio: 1; margin-bottom: 16px; }
.give-ring > svg { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: rgba(140, 106, 47, .55); stroke-width: 6; stroke-dasharray: .7 2.4; transition: stroke .6s; }
.give-ring.has-data .ring-track { stroke: rgba(10, 18, 48, .1); stroke-dasharray: none; stroke-width: 10; }
.ring-bar { fill: none; stroke: url(#ringGilt); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray 1.8s var(--ease), opacity .3s; }
.give-ring.has-data .ring-bar { opacity: 1; }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
.ring-icon { width: 92px; height: 92px; fill: none; stroke: var(--gold-deep); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ring-pct { display: none; font: 700 66px/1 var(--display); direction: ltr; background: linear-gradient(180deg, #2f47a8, #0A1230); -webkit-background-clip: text; background-clip: text; color: transparent; }
.give-ring.has-data .ring-icon { display: none; }
.give-ring.has-data .ring-pct { display: block; }
.give-amount { margin: 0 0 4px; font: 700 26px var(--display); direction: ltr; }
.give-amount[hidden], .give-note[hidden] { display: none; }
.give-note { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
.sp-give .why { color: #4d4527; font-size: 19px; line-height: 1.85; margin: 6px 0 26px; max-width: 24em; }
.sp-give .actions { width: 100%; max-width: 360px; display: grid; gap: 12px; }
.sp-give .btn { width: 100%; justify-content: center; min-height: 58px; font-size: 17px; }
.sp-give .btn-gilt { background: linear-gradient(160deg, #22357A, #0A1230); color: var(--gold-light); box-shadow: 0 18px 30px -16px rgba(10, 18, 48, .8); }
.sp-give .btn-gilt:hover { filter: brightness(1.15); }
.sp-give .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(10, 18, 48, .35); }
.sp-give .btn-outline:hover { background: rgba(10, 18, 48, .06); }
@media (max-width: 900px) { .support-panel { grid-template-columns: 1fr; border-radius: 40px; } .sp-about p { font-size: 18.5px; } }

/* ---------- Dedication: two white cards with plain black titles ---------- */
.badge-free { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(200, 162, 91, .7); background: rgba(234, 217, 176, .08); color: var(--champagne); font-weight: 600; font-size: 15px; margin-bottom: 30px; }
.badge-free::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gilt); box-shadow: 0 0 12px rgba(200, 162, 91, .9); }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.dua {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; color: var(--ink);
  background: #fff; border-radius: 46px; padding: clamp(30px, 4vw, 54px); box-shadow: 0 60px 90px -56px rgba(0, 0, 0, .8);
}
.dua::before {
  content: ""; position: absolute; z-index: -1; inset-block-start: -80px; inset-inline-end: -80px; width: 280px; height: 280px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C8A25B' stroke-opacity='.45' stroke-width='.8'%3E%3Crect x='20' y='20' width='60' height='60'/%3E%3Crect x='20' y='20' width='60' height='60' transform='rotate(45 50 50)'/%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.dua-no { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 600 14px var(--body); letter-spacing: .14em; color: var(--gold-deep); direction: ltr; }
.dua-no::after { content: ""; width: 44px; height: 2px; border-radius: 2px; background: var(--gilt); }
.dua h3 { font: 700 clamp(34px, 3.8vw, 50px)/1.15 var(--display); margin: 0; color: #05081a; }
.dua h3.sub { margin-top: 6px; }
.dua .intent { margin: 16px 0 4px; color: var(--muted); font-size: 16.5px; line-height: 1.85; }
.dua .lead-in { margin: 12px 0 0; color: var(--muted); font-size: 16.5px; }
.dua blockquote { margin: auto 0; padding-block: 18px; font: 400 32px/2.05 var(--dhikr); color: var(--ink); text-align: center; direction: rtl; }
.dua .meaning { margin: 0 0 6px; font-size: 14.5px; line-height: 1.75; color: var(--muted); font-style: italic; text-align: center; }
.dua-sep { height: 1px; margin: 8px 0 26px; background: linear-gradient(var(--to), transparent, rgba(10, 18, 48, .2), transparent); }
.dua .note { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } .dua { border-radius: 34px; } .dua blockquote { font-size: 27px; } }

/* ---------- Footer ---------- */
footer { padding: 44px 0 56px; color: var(--muted); font-size: 15px; background: var(--surface); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.foot strong { color: var(--ink); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Privacy page ---------- */
.doc { padding: 130px 0 60px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font: 600 clamp(30px, 5vw, 42px)/1.3 var(--display); margin: 0 0 8px; }
.doc h2 { font: 600 24px/1.3 var(--display); margin-top: 36px; }
.doc .meta { color: var(--muted); margin-bottom: 30px; }
.doc-hero { background: linear-gradient(180deg, #0A1230, #1A2A66); height: 88px; position: absolute; inset-inline: 0; top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  section { padding: 80px 0; }
  .sec-head { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .section-lead { font-size: 16.5px; }
  .sec-head { grid-template-columns: 1fr; gap: 6px; }
  .sec-num { order: -1; font-size: 64px; }
}

/* English pages */
:root[dir="ltr"] .sec-head h2 { line-height: 1.12; }
:root[dir="ltr"] .eyebrow { letter-spacing: .02em; }

/* ---------- "Details" button and its pop-up (prayer steps and wudu steps) ---------- */
.lesson-open { align-self: flex-start; margin-top: 8px; }
.lesson-open svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }
:root[dir="rtl"] .lesson-open svg { transform: scaleX(-1); }

dialog.lesson {
  padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
  width: min(760px, 100vw); max-width: 100vw; max-height: 100dvh; margin: auto auto 0; inset-inline: 0;
}
dialog.lesson::backdrop { background: rgba(10, 18, 48, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.lesson[open] { animation: sheet-up .5s var(--ease); }
dialog.lesson[open]::backdrop { animation: fade-in .4s var(--ease); }
@keyframes sheet-up { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.lesson-sheet {
  max-height: 94dvh; overflow-y: auto; overscroll-behavior: contain; background: #fff;
  border-radius: 44px 44px 0 0; padding: 22px clamp(20px, 5vw, 44px) 48px; box-shadow: 0 -30px 80px -30px rgba(10, 18, 48, .6);
}
.lesson-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lesson-count { font: 600 15px var(--body); color: var(--accent-text); letter-spacing: .04em; }
.lesson-close {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--ground); color: var(--ink); transition: background .3s, transform .3s var(--ease);
}
.lesson-close:hover { background: var(--surface2); transform: rotate(90deg); }
.lesson-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:root[dir="rtl"] dialog.lesson h3 { font: 700 clamp(34px, 5vw, 50px)/1.15 var(--display); margin: 0 0 8px; }
.lesson-desc { margin: 0 0 26px; color: var(--muted); font-size: 20px; line-height: 1.8; }
.lesson-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 600 14px var(--body); letter-spacing: .06em; color: var(--gold-deep); }
.lesson-h::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--gilt); }
.lesson-points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; counter-reset: pt; }
.lesson-points li { counter-increment: pt; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; font-size: 18.5px; line-height: 1.8; }
.lesson-points li::before {
  content: counter(pt); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; direction: ltr;
  font: 700 17px var(--display); color: var(--lapis-night); background: var(--gilt);
}
#lesson-say { padding-top: 22px; border-top: 1px solid var(--line); margin-bottom: 26px; }
.lesson-say { margin: 0; font: 400 34px/1.85 var(--dhikr); color: var(--lapis); }
.lesson-tr { margin: 2px 0 0; font-size: 15px; color: var(--muted); direction: ltr; text-align: start; }
.lesson-tip { padding-inline-start: 22px; border-inline-start: 4px solid var(--gold-leaf); }
.lesson-tip b { display: block; font: 600 14px var(--body); letter-spacing: .06em; color: var(--gold-deep); margin-bottom: 6px; }
.lesson-tip p { margin: 0; font-size: 18px; line-height: 1.8; }
@media (min-width: 861px) {
  dialog.lesson { margin: auto; }
  .lesson-sheet { border-radius: 44px; max-height: 92dvh; }
}
body.lesson-open-lock { overflow: hidden; }

/* ---------- Learn wudu: the steps hang on a gilt thread, beside a night panel ---------- */
.wu-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 90px); align-items: start; margin-bottom: 110px; }
.wu-aside {
  position: sticky; top: 100px; overflow: hidden; isolation: isolate; color: #fff; border-radius: 48px; padding: 44px 36px 36px;
  background: radial-gradient(70% 60% at 50% 0%, rgba(58, 76, 150, .5), transparent 70%), linear-gradient(180deg, #0A1230, #111d52 60%, #0A1230);
  box-shadow: 0 50px 80px -46px rgba(10, 18, 48, .8);
}
.wu-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat; }
.wu-drop { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--gilt); color: var(--lapis-night); box-shadow: 0 24px 40px -18px rgba(200, 162, 91, .8); }
.wu-drop svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wu-count { margin: 24px 0 0; font: 500 18px var(--body); color: var(--champagne); }
.wu-count b { display: block; font: 700 clamp(72px, 9vw, 120px)/1 var(--display); background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; text-align: start; }
.wu-aside blockquote { margin: 26px 0 0; font: 400 26px/1.9 var(--dhikr); color: var(--gold-light); }
.wu-aside cite { display: block; margin-top: 8px; font: 500 14px var(--body); color: rgba(255, 255, 255, .6); direction: ltr; text-align: start; }
:root[dir="rtl"] .wu-aside cite { direction: rtl; }
.wu-legend { list-style: none; margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(234, 217, 176, .25); display: grid; gap: 14px; font-size: 15px; color: rgba(255, 255, 255, .85); }
.wu-legend li { display: flex; align-items: center; gap: 12px; }

/* The steps of wudu: a card each, the limb on it, the whole card opens the pop-up. The four the
   Quran names have a gilt edge and a gilt tile. */
.wu-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wu-step { position: relative; }
.wu-card {
  position: relative; overflow: hidden; isolation: isolate; height: 100%; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  padding: 26px 24px 22px; border-radius: 28px; background: #fff; border: 1.5px solid var(--line);
  box-shadow: 0 30px 50px -40px rgba(10, 18, 48, .45);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .3s;
}
.wu-card:hover, .wu-card:focus-visible { transform: translateY(-6px); box-shadow: 0 40px 60px -36px rgba(10, 18, 48, .5); border-color: rgba(200, 162, 91, .7); outline: none; }
.wu-step.fard .wu-card { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--gilt) border-box; border-width: 2px; }
.wu-mark { position: absolute; z-index: -1; inset-inline-end: -34px; bottom: -34px; width: 190px; height: 190px; fill: none; stroke: var(--lapis); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: .07; }
.wu-step.fard .wu-mark { stroke: var(--gold-deep); opacity: .13; }
.wu-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wu-tile { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: #E9ECF7; color: var(--lapis); flex: none; }
.wu-tile svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wu-step.fard .wu-tile { background: var(--gilt); color: var(--lapis-night); box-shadow: 0 16px 26px -14px rgba(200, 162, 91, .9); }
.wu-no { font: 700 18px var(--display); color: var(--gold-deep); direction: ltr; }
.wu-tag { padding: 4px 14px; border-radius: 999px; background: var(--gilt); color: var(--lapis-night); font: 600 12.5px var(--body); }
.wu-card h3 { font: 700 clamp(24px, 2.4vw, 30px)/1.25 var(--display); margin: 6px 0 0; color: var(--ink); }
.wu-desc { margin: 0; color: var(--muted); font-size: 17.5px; line-height: 1.8; }
.wu-more { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--body); color: var(--gold-deep); }
.wu-more svg { width: 15px; height: 15px; fill: currentColor; stroke: none; flex: none; }
:root[dir="rtl"] .wu-more svg { transform: scaleX(-1); }
.wu-key { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(246, 231, 193, .3); }
.wu-key.fard { background: var(--gilt); border: 0; color: var(--lapis-night); box-shadow: 0 10px 18px -10px rgba(200, 162, 91, .9); }
.wu-key svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 1020px) {
  .wu-grid { grid-template-columns: 1fr; margin-bottom: 80px; }
  .wu-aside { position: relative; top: 0; border-radius: 38px; padding: 32px 26px 28px; }
  .wu-count b { font-size: 84px; }
}
@media (max-width: 700px) {
  .wu-steps { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- Contact us: a letter on the night. Writing fills the ring, sending folds the letter into a paper plane that flies off ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.letter { position: relative; --tx: 0; --ty: 0; }
.contact-form { position: relative; }
.sheet {
  position: relative; padding: clamp(28px, 4vw, 46px) clamp(24px, 4vw, 48px) clamp(22px, 3vw, 32px); border-radius: 14px; color: var(--ink);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(180deg, #FCF7EA, #F4EBD3);
  box-shadow: inset 0 0 0 9px #FBF5E6, inset 0 0 0 10px rgba(200, 162, 91, .6), 0 70px 90px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(246, 231, 193, .25);
  transform: perspective(1100px) rotateX(calc(var(--tx) * 1deg)) rotateY(calc(var(--ty) * 1deg));
  rotate: -1.2deg; transition: rotate .7s var(--ease), scale .8s var(--ease), opacity .6s var(--ease), box-shadow .5s;
}
.contact-form:focus-within .sheet { rotate: 0deg; }
.seal {
  position: absolute; inset-block-start: -22px; inset-inline-end: 34px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #F6E7C1, #C8A25B 55%, #8C6A2F); color: var(--lapis-night); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(255, 255, 255, .25);
}
.seal svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-label { display: block; margin-bottom: 8px; font: 700 22px var(--display); color: var(--lapis-night); }
.contact-form textarea {
  display: block; width: 100%; min-height: 252px; resize: none; padding: 0 2px; border: 0; background: transparent; color: var(--ink); caret-color: var(--gold-deep);
  font: 400 19px/36px var(--body); outline: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(140, 106, 47, .24) 35px 36px); background-attachment: local;
}
.contact-form textarea::placeholder { color: rgba(94, 102, 133, .7); }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.contact-meter { display: inline-flex; align-items: center; gap: 10px; font: 500 14px var(--body); color: var(--muted); direction: ltr; }
.contact-meter svg { width: 30px; height: 30px; }
.contact-meter circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.m-track { stroke: rgba(140, 106, 47, .22); }
.m-bar { stroke: var(--gold-deep); stroke-dasharray: calc(var(--r, 0) * 100) 100; transition: stroke-dasharray .35s var(--ease), stroke .3s; }
.contact-meter.warn .m-bar { stroke: #b4452f; }
.contact-form .btn-gilt { min-height: 54px; padding-inline: 34px 28px; border: 0; cursor: pointer; font: 600 17px var(--body); }
.contact-form .btn-gilt svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.contact-form .btn-gilt:hover svg { transform: translate(4px, -4px); }
.contact-form .btn-gilt[disabled] { opacity: .6; cursor: default; transform: none; filter: none; }
.contact-status { min-height: 1.6em; margin: 12px 0 0; font-size: 16px; color: #9a2f2f; }

/* Sending: the sheet folds away while the plane appears, then the plane flies off. */
.plane { position: absolute; z-index: 3; inset: 0; margin: auto; width: 96px; height: 96px; pointer-events: none; opacity: 0; scale: .3; transition: opacity .5s var(--ease) .3s, scale .7s var(--ease) .3s; }
.plane svg { position: relative; display: block; width: 100%; height: 100%; fill: none; stroke: var(--gold-light); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); }
.plane .trail {
  position: absolute; left: 50%; top: 50%; width: 260px; height: 3px; transform-origin: 0 50%; transform: rotate(135deg); opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(90deg, rgba(246, 231, 193, .9) 0 9px, transparent 9px 20px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
}
.contact-form.sending .sheet { rotate: -16deg; scale: .28; opacity: 0; pointer-events: none; }
.contact-form.sending .plane { opacity: 1; scale: 1; }
.contact-form.flown .plane { animation: fly 1.15s cubic-bezier(.5, 0, .9, .4) forwards; }
.contact-form.flown .plane .trail { opacity: 1; }
@keyframes fly {
  0% { translate: 0 0; rotate: 0deg; opacity: 1; scale: 1; }
  22% { translate: -14px 26px; rotate: -10deg; scale: 1.06; }
  100% { translate: 360px -420px; rotate: 6deg; opacity: 0; scale: .5; }
}
.contact-form.nope .sheet { animation: nope .5s var(--ease); }
@keyframes nope { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }

/* The thanks: a drawn check and a small burst, on the same paper. */
.contact-thanks {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: clamp(36px, 5vw, 60px) 28px; border-radius: 14px; color: var(--ink);
  background: linear-gradient(180deg, #FCF7EA, #F4EBD3); box-shadow: inset 0 0 0 9px #FBF5E6, inset 0 0 0 10px rgba(200, 162, 91, .6), 0 70px 90px -50px rgba(0, 0, 0, .9);
}
.contact-thanks[hidden] { display: none; }
.check { position: relative; width: 92px; height: 92px; margin-bottom: 10px; }
.check svg { width: 100%; height: 100%; fill: none; stroke: var(--gold-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.check i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--gold-leaf); opacity: 0; transform: rotate(calc(var(--a) * 36deg)) translateY(-60px); }
.contact-thanks h3 { font: 700 36px var(--display); margin: 0; color: var(--lapis-night); }
.contact-thanks p { margin: 0 0 16px; color: var(--muted); font-size: 18px; }
.btn-ghost-dark { background: transparent; color: var(--lapis); border: 1.5px solid rgba(140, 106, 47, .45); cursor: pointer; }
.btn-ghost-dark:hover { border-color: var(--lapis); background: rgba(34, 53, 122, .06); }
@media (prefers-reduced-motion: no-preference) {
  .contact-thanks:not([hidden]) { animation: sheet-up .8s var(--ease); }
  .contact-thanks:not([hidden]) .check circle { animation: draw .9s var(--ease) .15s backwards; }
  .contact-thanks:not([hidden]) .check path { animation: draw .6s var(--ease) .7s backwards; }
  .contact-thanks:not([hidden]) .check i { animation: burst 1.1s var(--ease) .9s backwards; }
}
@keyframes burst { 0% { opacity: 1; transform: rotate(calc(var(--a) * 36deg)) translateY(-30px) scale(.4); } 100% { opacity: 0; transform: rotate(calc(var(--a) * 36deg)) translateY(-66px) scale(1); } }

/* The promises: what we never ask for, crossed out, beside a dotted flight path. */
.contact-side { position: relative; padding-block: 8px; }
.route { position: absolute; z-index: 0; inset-inline: -6% -10%; top: -26%; width: 112%; height: auto; opacity: .8; pointer-events: none; }
.promises { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; }
.promises li { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(246, 231, 193, .18); font: 600 clamp(19px, 2vw, 24px)/1.4 var(--display); color: #fff; }
.promises li:first-child { border-top: 1px solid rgba(246, 231, 193, .18); }
.promises svg { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--gold-leaf); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promise-foot { position: relative; z-index: 1; margin: 18px 0 0; color: var(--champagne); font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .glider { display: none; } }
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 54px; }
  .route { top: -40%; }
}
@media (max-width: 600px) {
  .seal { inset-inline-end: 22px; width: 50px; height: 50px; }
  .contact-form textarea { font-size: 18px; min-height: 216px; }
  .contact-form .btn-gilt { padding-inline: 24px 20px; }
}

/* ---------- Reading lanes ----------
   The scattered letters belong behind the art of a card (a logo, a ring, a
   number), never behind its words: a letter under a paragraph reads as part
   of the paragraph. So in every card with text the letters gather around the
   art and dissolve before the first line, leaving a calm lane for reading.
   Each rule below only says where the letters live (a mask on the ::before/::after
   that draws them); --lx is the side the art sits on (right in Arabic, left in English). */
:root { --lx: 80%; }
:root[dir="ltr"] { --lx: 20%; }

/* Support: letters around the logo (dark half) and around the ring (gilt half), none behind the name, title or paragraphs. */
.support-panel::before { display: none; }
.sp-about { position: relative; isolation: isolate; }
.sp-about::before, .sp-give::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-size: cover; background-position: right top; background-repeat: no-repeat;
}
.sp-about::before {
  background-image: var(--names); opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 72% 34% at var(--lx) 6%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 34% at var(--lx) 6%, #000 30%, transparent 100%);
}
.sp-give::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 25% at 50% 41%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 25% at 50% 41%, #000 30%, transparent 100%);
}
.give-ring::before { content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #FCF6E4 62%, transparent); }

/* Hijri card: letters only behind the big day number and the month; the small lines above and below stay clear. */
.pw-hijri::before {
  opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 58%, transparent 74%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 58%, transparent 74%);
}

/* Wudu aside: letters only at the top, around the drop and the numeral; the verse and the legend below stay clear. */
.wu-aside::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 16%, transparent 44%);
  mask-image: linear-gradient(180deg, #000 0, #000 16%, transparent 44%);
}

/* Hero: the sponsor line under the wordmark (the association's logo on a white disc). */
.sponsor { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 4px; padding: 5px 18px 5px 5px; padding-inline: 5px 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--champagne); font: 600 15px var(--body); text-decoration: none; transition: background .4s cubic-bezier(.2, .8, .2, 1); }
.sponsor[hidden] { display: none; }
.sponsor:hover, .sponsor:focus-visible { background: rgba(255, 255, 255, .16); }
.sponsor-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(200, 162, 91, .55); }
.sponsor-logo img { height: 30px; width: auto; display: block; }

/* ---------- Watch and learn: three poster cards on a night panel, a dialog that plays one after a press ---------- */
.videos {
  position: relative; isolation: isolate; overflow: hidden; margin: 0 0 100px; color: #fff;
  padding: clamp(32px, 5vw, 72px); border-radius: var(--r-xl);
  background: radial-gradient(70% 60% at 50% 0%, rgba(58, 76, 150, .5), transparent 70%), linear-gradient(180deg, #0A1230, #111d52 60%, #0A1230);
  box-shadow: 0 50px 80px -50px rgba(10, 18, 48, .8);
}
.vid-head { max-width: 40em; margin-bottom: clamp(28px, 4vw, 48px); }
.vid-head .eyebrow { color: var(--champagne); }
.vid-head h3 { font: 700 clamp(38px, 5vw, 62px)/1.15 var(--display); margin: 0 0 14px; background: linear-gradient(180deg, #fff 18%, rgba(255, 255, 255, .3) 118%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vid-head p:last-child { margin: 0; color: rgba(255, 255, 255, .78); font-size: 19px; line-height: 1.85; }
/* The cinema: a big screen for the chosen video, a playlist beside it. Nothing is loaded from YouTube until the
   screen is pressed. Each video gets its own pattern on the screen (arches, a lattice, a crescent). */
.cine { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(26px, 3.6vw, 56px); align-items: center; }
.vid-card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.vid-card:focus-visible { outline: none; }
.cine-stage { position: relative; isolation: isolate; }
.cine-stage::after { content: ""; position: absolute; z-index: -1; inset-inline: 10%; bottom: -30px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 162, 91, .5), transparent); filter: blur(16px); transition: opacity .6s; }
.screen {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border-radius: 32px;
  background: radial-gradient(80% 90% at 50% 112%, rgba(200, 162, 91, .34), transparent 70%), linear-gradient(180deg, #0A1230, #16235a 62%, #0A1230);
  box-shadow: inset 0 0 0 1px rgba(200, 162, 91, .5), 0 50px 80px -46px rgba(0, 0, 0, .9);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.screen::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--names); background-size: cover; background-position: right top; background-repeat: no-repeat; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 40% 44% at 50% 48%, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 40% 44% at 50% 48%, transparent 40%, #000 100%);
}
.cine-stage:hover .screen, .cine-stage:focus-visible .screen { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--gold-leaf), 0 60px 90px -42px rgba(200, 162, 91, .55); }
.art { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.cine[data-sel="0"] .a0, .cine[data-sel="1"] .a1, .cine[data-sel="2"] .a2 { opacity: 1; transform: none; }
.art.a0 { background: repeating-radial-gradient(circle at 50% 150%, transparent 0 52px, rgba(200, 162, 91, .24) 52px 53.5px); }
.art.a1 {
  background:
    repeating-linear-gradient(45deg, rgba(200, 162, 91, .2) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-45deg, rgba(200, 162, 91, .2) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0, transparent 90%); mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0, transparent 90%);
}
.art.a2 {
  background:
    radial-gradient(circle at 82% 28%, #F6E7C1 0 6.6%, transparent 6.9%),
    radial-gradient(circle at 85.2% 25%, #12204f 0 6.2%, transparent 6.5%),
    radial-gradient(rgba(246, 231, 193, .5) 1.3px, transparent 1.6px) 0 0 / 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 96%); mask-image: linear-gradient(180deg, #000 30%, transparent 96%);
}
.beam {
  position: absolute; z-index: 1; left: 50%; top: -12%; width: 92%; height: 124%; margin-left: -46%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 152deg, rgba(246, 231, 193, .2) 180deg, transparent 208deg);
}
.cine-no {
  position: absolute; z-index: 1; inset-block-start: 4px; inset-inline-end: 22px; font: 700 clamp(64px, 9vw, 130px)/1 var(--display); color: transparent;
  -webkit-text-stroke: 1.5px rgba(246, 231, 193, .3);
}
.vid-tags { position: absolute; z-index: 3; inset-block-start: 16px; inset-inline-start: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.vid-tags b { padding: 4px 12px; border-radius: 999px; font: 600 13px var(--body); color: var(--champagne); background: rgba(10, 18, 48, .78); border: 1px solid rgba(200, 162, 91, .75); }
.vid-play {
  position: absolute; z-index: 2; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gilt); color: var(--lapis-night); box-shadow: 0 22px 44px -14px rgba(200, 162, 91, .85); transition: transform .5s var(--ease);
}
.vid-play::before, .vid-play::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(246, 231, 193, .55); opacity: 0; }
.vid-play svg { width: 32px; height: 32px; fill: currentColor; margin-inline-end: -4px; }
.cine-stage:hover .vid-play, .cine-stage:focus-visible .vid-play { transform: scale(1.1); }
.cine-cap { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; display: block; padding: 70px clamp(18px, 3vw, 32px) clamp(16px, 2.4vw, 26px); background: linear-gradient(180deg, transparent, rgba(7, 12, 36, .9)); }
.cine-cap strong { display: block; font: 700 clamp(20px, 2.5vw, 32px)/1.3 var(--display); color: #fff; }
.cine-cap small { display: block; margin-top: 4px; font: 400 15px/1.6 var(--body); color: var(--champagne); }

.cine-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cine-count { margin: 0; font: 700 clamp(64px, 7.5vw, 104px)/.9 var(--display); direction: ltr; text-align: start; background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cine-count span { margin-inline-start: 14px; font: 500 17px var(--body); color: var(--champagne); -webkit-text-fill-color: var(--champagne); }
:root[dir="rtl"] .cine-count { direction: rtl; }
.cine-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cine-list::before {
  content: ""; position: absolute; inset-inline: 0; top: var(--my, 0px); height: var(--mh, 0px); border-radius: 22px; padding: 1.5px; pointer-events: none;
  background: var(--gilt); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: top .55s var(--ease), height .55s var(--ease);
}
.cine-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "no tx" "no tg"; gap: 2px 16px; width: 100%; padding: 16px 16px 16px 14px; padding-inline: 24px 14px;
  border-radius: 22px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; opacity: .6;
  transition: opacity .35s, background .35s, border-color .35s;
}
.cine-item:hover { opacity: .95; background: rgba(255, 255, 255, .05); }
.cine-item:focus-visible { outline: 2px solid rgba(200, 162, 91, .7); outline-offset: 2px; }
.cine-item.on { opacity: 1; background: linear-gradient(var(--to), rgba(246, 231, 193, .12), rgba(255, 255, 255, .02)); }
.cine-item .no { grid-area: no; align-self: start; padding-top: 3px; font: 700 28px/1 var(--display); direction: ltr; color: transparent; -webkit-text-stroke: 1px var(--gold-leaf); transition: color .35s; }
.cine-item.on .no { color: var(--gold-leaf); }
.cine-item .tx { grid-area: tx; display: block; }
.cine-item strong { display: block; font: 700 clamp(18px, 1.7vw, 22px)/1.45 var(--display); color: #fff; }
.cine-item small { display: block; margin-top: 2px; font: 400 14px/1.6 var(--body); color: var(--champagne); }
.cine-item .tg { grid-area: tg; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cine-item .tg b { padding: 3px 10px; border-radius: 999px; font: 600 12px var(--body); color: var(--champagne); border: 1px solid rgba(200, 162, 91, .5); }

@media (prefers-reduced-motion: no-preference) {
  .beam { animation: flicker 6s ease-in-out infinite alternate; }
  .vid-play::before { animation: ring 2.8s ease-out infinite; }
  .vid-play::after { animation: ring 2.8s ease-out 1.4s infinite; }
  .cine.swap .cine-cap strong, .cine.swap .cine-cap small, .cine.swap .vid-tags, .cine.swap .cine-no { animation: cap-in .7s var(--ease) backwards; }
  .cine.swap .cine-cap small { animation-delay: .06s; }
  .cine.swap .screen::after { animation: sweep .9s var(--ease); }
}
.screen::after { content: ""; position: absolute; z-index: 4; inset-block: 0; left: -40%; width: 30%; pointer-events: none; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(246, 231, 193, .4), transparent); opacity: 0; }
@keyframes ring { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes flicker { from { opacity: .55; } to { opacity: 1; } }
@keyframes cap-in { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes sweep { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 1; } }

dialog.vid-dialog { padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; width: min(1000px, 100vw - 24px); max-width: 100vw; margin: auto; }
dialog.vid-dialog::backdrop { background: rgba(4, 8, 24, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog.vid-dialog[open] { animation: sheet-up .5s var(--ease); }
.vid-sheet { position: relative; padding: clamp(14px, 2.4vw, 26px); border-radius: var(--r-lg); background: linear-gradient(180deg, #111d52, #0A1230); box-shadow: inset 0 0 0 1px rgba(200, 162, 91, .4), 0 50px 100px -30px rgba(0, 0, 0, .9); }
.vid-close { position: absolute; z-index: 2; inset-block-start: -18px; inset-inline-end: -8px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--gilt); color: var(--lapis-night); transition: transform .3s var(--ease); }
.vid-close:hover { transform: rotate(90deg); }
.vid-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vid-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-title { margin: 18px 4px 0; font: 700 clamp(20px, 2.4vw, 26px)/1.4 var(--display); }
.vid-link { display: inline-flex; align-items: center; gap: 8px; margin: 12px 4px 4px; color: var(--champagne); font: 600 15px var(--body); text-decoration: none; border-bottom: 1px solid rgba(234, 217, 176, .5); padding-bottom: 3px; }
.vid-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vid-link:hover { color: #fff; border-color: #fff; }
@media (max-width: 980px) {
  .cine { grid-template-columns: minmax(0, 1fr); }
  .cine-count { display: none; }
  .cine-stage::after { display: none; }
}
@media (max-width: 640px) {
  .videos { margin-inline: calc(var(--gutter) * -1 + 8px); padding: 28px 16px 30px; border-radius: 32px; margin-bottom: 70px; }
  .screen { border-radius: 22px; }
  .vid-play { width: 66px; height: 66px; }
  .vid-play svg { width: 26px; height: 26px; }
  .vid-tags { inset-block-start: 10px; inset-inline-start: 10px; }
  .vid-tags b { padding: 3px 10px; font-size: 12px; }
  .cine-cap { padding-top: 54px; }
  .cine-item { padding: 14px 10px 14px 8px; padding-inline: 18px 8px; gap: 2px 12px; }
  .vid-close { inset-block-start: -14px; inset-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) { dialog.vid-dialog[open] { transition: none; animation: none; } }
:root[dir="rtl"] .how .say .tr { direction: rtl; }