/* Rawdat Nur Al-Ilm — "Nur" (light) interaction language.
   Every interactive effect is built around light: a warm light follows the
   pointer, borders catch it, the day turns like a sun dial, the mission lights
   up word by word. Layers run in order, later wins; motion is last. */

@layer tokens, base, components, layout, page, motion;

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* Ground and ink: warm ivory from the artwork, ink tinted toward the logo violet */
    --bg: #FBF8F3;
    --bg-deep: #F5EEE4;
    --ink: #2B2238;
    --ink-2: #675D73;
    --night: #1F1830;          /* the menu and dark moments */
    --white: #FFFFFF;

    /* Brand: the logo banner violet and its sun */
    --violet: #7B3FBE;
    --violet-strong: #6230A0;
    --violet-deeper: #4B2080;
    --violet-soft: #F3ECFB;
    --violet-border: #DDCBF2;
    --sun: #F5B301;
    --sun-light: #FFD86B;
    --sun-soft: #FFF6DB;
    --sun-border: #F9DD8C;

    /* Puzzle accents, used in small doses only */
    --p-orange: #F39A2B; --p-coral: #F2745F; --p-pink: #E5609E;
    --p-sky: #3E9FE6; --p-leaf: #5DB85A; --p-violet: #8B5CD6;

    --line: rgb(43 34 56 / 0.08);
    --line-strong: rgb(43 34 56 / 0.14);

    /* Type */
    --font-display: "El Messiri", "El Messiri Fallback Win", "El Messiri Fallback Android", serif;
    --font-body: "Readex Pro", "Readex Pro Fallback Win", "Readex Pro Fallback Android", system-ui, sans-serif;
    --fs-display: clamp(2.55rem, 1.45rem + 4.4vw, 5.1rem);
    --fs-h2: clamp(1.95rem, 1.4rem + 2.1vw, 3.15rem);
    --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
    --fs-lead: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-caption: 0.8125rem;
    --lh-body: 1.9;

    /* Space */
    --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem;
    --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;
    --section-y: clamp(5rem, 3rem + 7vw, 9.5rem);
    --container: 1200px;
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
    --header-h: 72px;

    /* Shape: softer, rounder than a system of equal radii */
    --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;

    /* Shadows, tinted toward the brand violet */
    --shadow-sm: 0 1px 2px rgb(43 34 56 / 0.05), 0 6px 16px -8px rgb(84 48 120 / 0.16);
    --shadow-md: 0 2px 6px rgb(43 34 56 / 0.04), 0 22px 44px -24px rgb(84 48 120 / 0.3);
    --shadow-lg: 0 4px 10px rgb(43 34 56 / 0.05), 0 40px 90px -40px rgb(84 48 120 / 0.42);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.9);

    /* Motion: an expressive ease-out, a back-out for playful UI, and a spring for physics-like hovers */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

/* -------------------------------------------------------------------- base */
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "El Messiri";
  src: url("../fonts/el-messiri.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face { font-family: "Readex Pro Fallback Win"; src: local("Segoe UI"), local("SegoeUI");
  size-adjust: 106.01%; ascent-override: 94.33%; descent-override: 23.58%; line-gap-override: 0%; }
@font-face { font-family: "Readex Pro Fallback Android"; src: local("Noto Sans Arabic"), local("NotoSansArabic-Regular");
  size-adjust: 109.23%; ascent-override: 91.55%; descent-override: 22.89%; line-gap-override: 0%; }
@font-face { font-family: "El Messiri Fallback Win"; src: local("Segoe UI Bold"), local("SegoeUI-Bold");
  size-adjust: 102.88%; ascent-override: 99.05%; descent-override: 52.88%; line-gap-override: 0%; }
@font-face { font-family: "El Messiri Fallback Android"; src: local("Noto Sans Arabic Bold"), local("NotoSansArabic-Bold");
  size-adjust: 98.37%; ascent-override: 103.58%; descent-override: 55.3%; line-gap-override: 0%; }

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-6)); interpolate-size: allow-keywords; }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
    overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  }
  /* Arabic letters join; letter-spacing would break them apart, so it is never used on Arabic. */
  h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.3; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  dl, dd, figure, blockquote { margin: 0; }
  a { color: inherit; text-decoration: none; }
  img, picture, svg, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  strong { font-weight: 600; }
  ::selection { background: var(--sun-border); color: var(--ink); }
  :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 10px; }

  .container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  .ltr { direction: ltr; unicode-bidi: isolate; }
  .num { font-variant-numeric: tabular-nums; }
  .ltr.num { display: inline-block; white-space: nowrap; }

  .skip-link {
    position: fixed; inset-inline-start: var(--s-4); top: var(--s-4); z-index: 100;
    padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
    background: var(--ink); color: var(--white); font-weight: 500;
    translate: 0 -160%; transition: translate 0.4s var(--ease-out);
  }
  .skip-link:focus-visible { translate: 0 0; }
}

/* -------------------------------------------------------------- components */
@layer components {
  /* Kicker: a small numbered capsule above every section title */
  .kicker {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0.95rem 0.3rem 0.35rem;
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.7); border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); line-height: 1.6;
  }
  .kicker__num {
    display: grid; place-items: center;
    min-width: 2rem; height: 1.55rem; padding-inline: 0.45rem;
    border-radius: var(--r-pill);
    background: var(--night); color: var(--sun-light);
    font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  }
  .kicker__sun {
    width: 0.6rem; height: 0.6rem; margin-inline: 0.35rem 0.1rem; border-radius: 50%;
    background: var(--sun); box-shadow: 0 0 0 4px rgb(245 179 1 / 0.22), 0 0 14px rgb(245 179 1 / 0.9);
  }

  .section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-8); margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .section-head__text { max-width: 40rem; display: grid; gap: var(--s-4); justify-items: start; }
  .section-head__title { font-size: var(--fs-h2); line-height: 1.22; }
  .section-head__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }

  /* The key phrase of a title carries the brand colour, nothing drawn under it */
  .mark { color: var(--violet); }
  .mission .mark { color: var(--sun-light); }

  /* Buttons: the fill blooms from where the pointer entered, the arrow swaps out and back in */
  .btn {
    --btn-bg: var(--violet-strong); --btn-fg: var(--white); --btn-fill: var(--violet-deeper); --btn-border: transparent;
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 3.3rem; padding-inline: 1.6rem;
    border-radius: var(--r-pill); border: 1px solid var(--btn-border);
    background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 500; font-size: var(--fs-body); line-height: 1; white-space: nowrap;
    transition: translate 0.55s var(--ease-back), scale 0.2s var(--ease-out), box-shadow 0.5s var(--ease-out), color 0.3s linear;
  }
  .btn::before {
    content: ""; position: absolute; z-index: -1;
    left: var(--bx, 50%); top: var(--by, 50%);
    width: 0; height: 0; border-radius: 50%;
    background: var(--btn-fill);
    translate: -50% -50%;
    transition: width 0.7s var(--ease-out), height 0.7s var(--ease-out);
  }
  .btn:hover::before, .btn:focus-visible::before { width: 44rem; height: 44rem; }
  .btn:active { scale: 0.97; }
  .btn.is-magnet { transition: translate 0.18s linear, scale 0.2s var(--ease-out), box-shadow 0.5s var(--ease-out), color 0.3s linear; }
  .btn--primary { box-shadow: 0 14px 28px -14px rgb(98 48 160 / 0.7); }
  .btn--primary:hover { box-shadow: 0 18px 34px -14px rgb(75 32 128 / 0.75); }
  .btn--ghost {
    --btn-bg: rgb(255 255 255 / 0.62); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-border: var(--line-strong);
    backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  }
  .btn--sun { --btn-bg: var(--sun-light); --btn-fg: var(--night); --btn-fill: var(--sun); box-shadow: 0 14px 28px -14px rgb(245 179 1 / 0.8); }
  .btn--sm { min-height: 2.65rem; padding-inline: 1.15rem; font-size: var(--fs-small); }
  .btn__icon { width: 1.15em; height: 1.15em; flex: none; }
  .btn__arrow { position: relative; display: inline-block; width: 1.1em; height: 1.1em; overflow: hidden; flex: none; }
  .btn__arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: translate 0.5s var(--ease-out); }
  .btn__arrow svg + svg { translate: 115% 0; }
  :is(.btn, .text-link, .panel):hover .btn__arrow svg:first-child { translate: -115% 0; }
  :is(.btn, .text-link, .panel):hover .btn__arrow svg + svg { translate: 0 0; }

  .text-link { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--violet-strong); font-weight: 600; white-space: nowrap; }
  .text-link .roll { padding-bottom: 0.15em; }

  /* Text roll: the label slides up and an identical copy rises from below */
  .roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.12em; margin-block: -0.12em; }
  .roll__a { display: inline-block; transition: translate 0.55s var(--ease-out); }
  .roll__b { position: absolute; inset-inline: 0; top: 0.12em; translate: 0 110%; transition: translate 0.55s var(--ease-out); }
  a:hover > .roll .roll__a, a:focus-visible > .roll .roll__a, .text-link:hover .roll__a { translate: 0 -110%; }
  a:hover > .roll .roll__b, a:focus-visible > .roll .roll__b, .text-link:hover .roll__b { translate: 0 0; }

  .chip {
    --tone: var(--violet);
    display: inline-flex; align-items: center; gap: var(--s-1);
    min-height: 1.75rem; padding: 0 var(--s-3); border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--tone) 13%, var(--white));
    color: color-mix(in srgb, var(--tone) 55%, var(--ink));
    font-size: var(--fs-caption); font-weight: 500; line-height: 1; white-space: nowrap;
  }
  .chip--quiet { background: rgb(255 255 255 / 0.7); color: var(--ink-2); }
  .chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }

  .icon-tile {
    --tone: var(--violet);
    display: grid; place-items: center; flex: none;
    width: 3rem; height: 3rem; border-radius: 16px;
    background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.95), transparent 60%), color-mix(in srgb, var(--tone) 15%, var(--white));
    color: color-mix(in srgb, var(--tone) 78%, var(--ink));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--tone) 70%, transparent);
  }
  .icon-tile svg { width: 1.35rem; height: 1.35rem; }

  .glass {
    background: linear-gradient(150deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.52));
    border: 1px solid rgb(255 255 255 / 0.8);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  }

  /* Lux: surfaces that lean toward the pointer, catch its light on their rim,
     and carry a moving specular reflection. The script writes --rx/--ry/--px/--py. */
  .lux {
    position: relative;
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.9s var(--ease-out), box-shadow 0.6s var(--ease-out);
  }
  .lux.is-tracking { transition: transform 0.16s ease-out, box-shadow 0.6s var(--ease-out); }
  .lux::before {
    content: ""; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: radial-gradient(17rem circle at var(--px, 50%) var(--py, 50%), rgb(255 205 70), rgb(160 110 220 / 0.55) 40%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity 0.5s var(--ease-out);
  }
  .lux::after {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.42) 50%, transparent 62%) no-repeat;
    background-size: 280% 100%;
    background-position: var(--sx, 100%) 0;
    opacity: 0; transition: opacity 0.5s var(--ease-out);
  }
  .lux.is-lit::before, .lux.is-lit::after { opacity: 1; }
  .lux.is-lit { box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .lux [data-depth] { transform: translateZ(calc(var(--depth, 0) * 1px)); }

  /* Pointer parallax for layered scenes: children drift by their depth */
  [data-parallax] [data-depth-x] {
    translate: calc(var(--mx, 0) * var(--depth-x) * 1px) calc(var(--my, 0) * var(--depth-x) * 1px);
    transition: translate 1s var(--ease-out);
  }

  @keyframes float-y { 50% { translate: 0 -10px; } }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .section { position: relative; padding-block: var(--section-y); }
  .section--deep { background: var(--bg-deep); isolation: isolate; }

  /* --- Top bar: open at the top, docks into a glass capsule once you scroll,
         steps aside while you read down and returns when you scroll back up */
  .topbar {
    position: fixed; inset: 0 0 auto; z-index: 50;
    padding-top: var(--s-3);
    pointer-events: none;
    transition: translate 0.6s var(--ease-out);
  }
  .topbar.is-hidden { translate: 0 calc(-100% - 12px); }
  .topbar__inner {
    pointer-events: auto; position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
    width: min(100% - (var(--gutter) * 2), var(--container)); max-width: var(--container); margin-inline: auto;
    height: var(--header-h); padding-inline: var(--s-2);
    border-radius: var(--r-pill); border: 1px solid transparent;
    transition: max-width 0.9s var(--ease-out), height 0.9s var(--ease-out), padding 0.9s var(--ease-out),
                background-color 0.5s linear, border-color 0.5s linear, box-shadow 0.5s linear;
  }
  .topbar.is-docked .topbar__inner {
    max-width: 1000px; height: 60px; padding-inline: var(--s-2) var(--s-2);
    background-color: rgb(255 255 255 / 0.72); border-color: rgb(255 255 255 / 0.85);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  }
  .topbar__actions { display: flex; align-items: center; gap: var(--s-2); }

  .brand { display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap; color: var(--ink); transition: color 0.4s linear; }
  .brand__mark { position: relative; flex: none; width: 2.75rem; height: 2.75rem; transition: width 0.9s var(--ease-out), height 0.9s var(--ease-out); }
  .brand__logo { width: 100%; height: 100%; border-radius: 28%; box-shadow: 0 8px 18px -10px rgb(98 48 160 / 0.6); }
  /* Reading progress: a sun ring that closes around the mark as you scroll */
  .brand__ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); rotate: -90deg; overflow: visible; opacity: 0; transition: opacity 0.5s linear; }
  .brand__ring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
  .brand__ring .track { stroke: rgb(245 179 1 / 0.2); }
  .brand__ring .bar { stroke: var(--sun); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress, 0)); }
  .topbar.is-docked .brand__ring { opacity: 1; }
  .topbar.is-docked .brand__mark { width: 2.3rem; height: 2.3rem; }
  .brand__text { display: grid; line-height: 1.15; }
  .brand__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
  .brand__sub { display: grid; grid-template-rows: 1fr; font-size: 0.72rem; font-weight: 500; color: var(--ink-2); transition: grid-template-rows 0.8s var(--ease-out), opacity 0.4s linear; }
  .brand__sub > span { min-height: 0; overflow: hidden; }
  .topbar.is-docked .brand__sub { grid-template-rows: 0fr; opacity: 0; }

  /* Nav: a glowing sun dot glides (with spring physics) under the current link */
  .nav { position: relative; display: flex; align-items: center; gap: var(--s-1); }
  .nav a { position: relative; padding: var(--s-2) var(--s-3); color: var(--ink-2); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; transition: color 0.3s linear; }
  .nav a:hover, .nav a[aria-current] { color: var(--ink); }
  .nav__dot {
    position: absolute; left: 0; bottom: 0; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: var(--sun);
    box-shadow: 0 0 0 3px rgb(245 179 1 / 0.2), 0 0 14px rgb(245 179 1 / 0.9);
    translate: var(--dot-x, 0px) 0; scale: var(--dot-sx, 1) 1;
    opacity: var(--dot-o, 0); transition: opacity 0.3s linear;
    pointer-events: none;
  }

  /* Menu button: two strokes that fold into a cross */
  .menu-btn {
    display: none; position: relative; flex: none;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--night); color: var(--white);
    box-shadow: 0 10px 22px -12px rgb(31 24 48 / 0.8);
    transition: background-color 0.4s linear, color 0.4s linear;
  }
  .menu-btn__bar { position: absolute; left: 32%; right: 32%; height: 1.8px; border-radius: 2px; background: currentColor; transition: translate 0.55s var(--ease-back), rotate 0.55s var(--ease-back), inset 0.55s var(--ease-back); }
  .menu-btn__bar:nth-child(1) { top: calc(50% - 4px); }
  .menu-btn__bar:nth-child(2) { top: calc(50% + 3px); left: 42%; }
  .menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { translate: 0 3.5px; rotate: 45deg; }
  .menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { translate: 0 -3.5px; rotate: -45deg; left: 32%; }

  /* Menu: a night sky that opens as a circle from the button */
  .menu {
    position: fixed; inset: 0; z-index: 45;
    display: grid; align-content: center; gap: var(--s-10);
    padding: calc(var(--header-h) + var(--s-10)) var(--gutter) var(--s-10);
    background:
      radial-gradient(60rem 30rem at 80% 110%, rgb(245 179 1 / 0.22), transparent 60%),
      radial-gradient(40rem 30rem at 10% -10%, rgb(123 63 190 / 0.45), transparent 60%),
      var(--night);
    color: var(--white);
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: circle(0 at var(--ox, 90%) var(--oy, 40px));
    visibility: hidden;
    transition: clip-path 0.85s var(--ease-in-out), visibility 0s linear 0.85s;
  }
  .menu.is-open { clip-path: circle(150% at var(--ox, 90%) var(--oy, 40px)); visibility: visible; transition-delay: 0s; }
  html.menu-open { overflow: hidden; }
  html.menu-open .topbar { translate: 0 0; }
  html.menu-open .topbar__inner { background-color: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.menu-open .brand { color: var(--white); }
  html.menu-open .brand__sub { color: rgb(255 255 255 / 0.7); }
  html.menu-open .menu-btn { background: var(--white); color: var(--night); }
  html.menu-open .topbar__actions .btn { opacity: 0; pointer-events: none; }
  .menu__links { display: grid; gap: var(--s-1); }
  .menu__links a { display: flex; align-items: baseline; gap: var(--s-4); padding-block: var(--s-1); font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 3vw, 3rem); font-weight: 600; line-height: 1.4; }
  .menu__idx { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--sun-light); font-variant-numeric: tabular-nums; }
  .menu__ln { display: block; overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
  .menu__ln > span { display: block; translate: 0 110%; transition: translate 0.9s var(--ease-out); transition-delay: calc(0.18s + var(--i, 0) * 60ms); }
  .menu.is-open .menu__ln > span { translate: 0 0; }
  .menu__foot { display: grid; gap: var(--s-4); opacity: 0; translate: 0 16px; transition: opacity 0.6s linear 0.5s, translate 0.8s var(--ease-out) 0.5s; }
  .menu.is-open .menu__foot { opacity: 1; translate: 0 0; }
  .menu__contact { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: rgb(255 255 255 / 0.72); font-size: var(--fs-small); }

  /* The warm light that follows the pointer across the whole page */
  .cursor-light {
    position: fixed; left: 0; top: 0; z-index: 44;
    width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 212 96 / 0.75), rgb(255 212 96 / 0.26) 42%, transparent 72%);
    mix-blend-mode: soft-light;
    opacity: 0; transition: opacity 0.6s linear;
    will-change: translate;
  }
  .cursor-light.is-on { opacity: 1; }

  /* Footer */
  .site-footer { position: relative; padding-block: var(--s-16) var(--s-8); background: var(--bg-deep); border-top: 1px solid var(--line); overflow: hidden; }
  .site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: var(--s-12); }
  .site-footer__about { display: grid; gap: var(--s-4); align-content: start; max-width: 26rem; }
  .site-footer__about p { color: var(--ink-2); }
  .site-footer__title { font-size: 1.1rem; margin-bottom: var(--s-4); }
  .site-footer__list { display: grid; }
  .site-footer__list a { display: inline-block; padding-block: var(--s-2); color: var(--ink-2); transition: color 0.3s linear; }
  .site-footer__list a:hover { color: var(--violet-strong); }
  .site-footer__contact { display: grid; gap: var(--s-3); color: var(--ink-2); }
  .site-footer__contact li { display: flex; align-items: flex-start; gap: var(--s-3); }
  .site-footer__contact svg { width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.4rem; color: var(--violet); }
  .site-footer__contact a:hover { color: var(--violet-strong); }
  .site-footer__contact .ltr { text-align: right; }
  .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-small); }
  .social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--white); color: var(--ink-2); border: 1px solid var(--line); transition: color 0.3s linear, background-color 0.3s linear, translate 0.5s var(--ease-back); }
  .social a:hover { color: var(--white); background: var(--violet-strong); translate: 0 -3px; }
  .social svg { width: 1.2rem; height: 1.2rem; }

  @media (max-width: 1280px) { .nav a { padding-inline: var(--s-2); } }
  @media (max-width: 1080px) {
    .nav { display: none; }
    .menu-btn { display: block; }
  }
  @media (max-width: 1367px) { .site-footer__bottom { padding-inline-end: calc(3.5rem + var(--s-5)); } }
  @media (max-width: 900px) {
    :root { --header-h: 62px; }
    .topbar.is-docked .topbar__inner { height: 56px; }
    .section-head { flex-direction: column; align-items: start; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
    .site-footer__about { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
  @media (max-width: 460px) {
    .topbar__actions .btn { display: none; }
    .brand__name { font-size: 1.25rem; }
  }
  @media (max-height: 700px) {
    .menu { align-content: start; gap: var(--s-6); }
    .menu__links a { font-size: 1.7rem; }
  }
}

/* -------------------------------------------------------------------- page */
@layer page {
  /* ---------- Hero */
  .hero {
    position: relative; isolation: isolate; overflow: clip;
    display: grid; align-items: center;
    min-height: clamp(40rem, 58vw, 100svh);
    padding-top: calc(var(--header-h) + var(--s-10));
    padding-bottom: 9rem;
  }
  .hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%;
    transform: translate3d(var(--hx, 0px), calc(var(--hy, 0px) + var(--hs, 0px)), 0) scale(1.08);
    will-change: transform;
  }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(closest-side at 77% 46%, rgb(251 248 243 / 0.7), transparent),
      linear-gradient(to bottom, transparent 68%, var(--bg));
  }
  /* Motes of light drifting up from the sunrise */
  .hero__motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .hero__motes span {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--sz); height: var(--sz); border-radius: 50%;
    background: #FFF1C2; box-shadow: 0 0 10px 2px rgb(255 205 80 / 0.75);
    opacity: 0;
    animation: mote var(--t) linear var(--delay) infinite;
  }
  @keyframes mote {
    0% { opacity: 0; translate: 0 0; }
    18% { opacity: 0.95; }
    80% { opacity: 0.55; }
    100% { opacity: 0; translate: var(--dx) -140px; }
  }
  .hero__inner { padding-inline: clamp(var(--gutter), 11vw, 15rem) clamp(var(--gutter), 5vw, 8rem); }
  .hero__copy { width: clamp(22rem, 39vw, 42rem); display: grid; gap: var(--s-6); justify-items: start; }
  .hero__title { font-size: min(5rem, 5.3vw); line-height: 1.12; }
  .line { display: block; overflow: hidden; padding-block: 0.16em 0.06em; margin-block: -0.16em -0.06em; }
  .line--accent { color: var(--violet); padding-bottom: 0.34em; margin-bottom: -0.34em; }
  .line__in { display: inline-block; white-space: nowrap; }
  .hero__lead { max-width: 36rem; color: var(--ink-2); font-size: clamp(var(--fs-lead), 0.55rem + 0.9vw, 1.4rem); line-height: 1.85; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
  .hero__actions .btn { min-height: clamp(3.3rem, 2.3rem + 1vw, 3.8rem); padding-inline: clamp(1.5rem, 0.8rem + 1vw, 2.25rem); font-size: clamp(var(--fs-body), 0.6rem + 0.55vw, 1.2rem); }

  /* The rolling word: a slot reel of three endings, with a hand-drawn stroke under it */
  .slot { position: relative; display: inline-block; vertical-align: top; }
  /* The window is exactly one item tall, so the neighbouring words never peek in.
     Each item carries its own room above for diacritics. */
  .slot__window {
    display: block; overflow: hidden;
    width: var(--slot-w, auto); height: 1.36em;
    margin-block: -0.16em -0.08em;
    transition: width 0.8s var(--ease-out);
  }
  .slot__track { display: flex; flex-direction: column; translate: 0 calc(var(--slot-i, 0) * -1.36em); transition: translate 0.95s var(--ease-back); }
  .slot__track.is-snapping { transition: none; }
  .slot__track > span { display: block; width: max-content; height: 1.36em; padding-top: 0.16em; line-height: 1.12; white-space: nowrap; }

  /* ---------- Stats: four glass tiles with rolling odometer digits */
  .stats { position: relative; z-index: 2; margin-top: -7rem; }
  .stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); perspective: 1200px; }
  .stat {
    --tone: var(--violet);
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: center;
    padding: var(--s-5) var(--s-5);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, rgb(255 255 255 / 0.86), rgb(255 255 255 / 0.6));
    border: 1px solid rgb(255 255 255 / 0.85);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  }
  .stat .icon-tile { grid-row: span 2; --tone: inherit; }
  .stat__value { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.1; direction: ltr; text-align: right; }
  .stat__star { display: inline-block; margin-inline-start: 0.12em; font-size: 0.62em; vertical-align: 0.32em; color: var(--sun); }
  .stat__label { color: var(--ink-2); font-size: var(--fs-small); }
  .odo { display: inline-flex; direction: ltr; }
  .odo__col { display: inline-block; height: 1.1em; overflow: hidden; }
  .odo__strip { display: flex; flex-direction: column; translate: 0 calc(var(--to, 0) * -1.1em); }
  .odo__strip > span { display: block; height: 1.1em; line-height: 1.1; text-align: center; }
  .odo.is-rolling .odo__strip { transition: translate 2.8s cubic-bezier(0.14, 0.82, 0.2, 1); transition-delay: calc(var(--c, 0) * 120ms); }

  /* ---------- About */
  .about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
  .about__media { position: relative; padding: var(--s-10) var(--s-6); }
  .about__ring { position: absolute; width: 58%; top: -3%; inset-inline-start: -8%; color: var(--sun); opacity: 0.75; z-index: -1; }
  .about__frame { position: relative; overflow: hidden; padding: var(--s-3); border-radius: var(--r-xl); background: rgb(255 255 255 / 0.78); border: 1px solid var(--white); box-shadow: var(--shadow-inset), var(--shadow-lg); }
  .about__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-xl) - var(--s-3)); scale: 1.04; }
  .about__badge {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    border-radius: var(--r-pill); white-space: nowrap;
  }
  .about__badge .icon-tile { width: 2.6rem; height: 2.6rem; border-radius: 50%; }
  .about__badge-text { display: grid; }
  .about__badge-text strong { font-size: var(--fs-small); line-height: 1.4; }
  .about__badge-text small { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.4; }
  .about__badge--lang { top: var(--s-2); inset-inline-end: -2%; }
  .about__badge--safe { bottom: var(--s-2); inset-inline-start: 0; }
  .about__copy { display: grid; gap: var(--s-5); justify-items: start; }
  .values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); width: 100%; perspective: 1200px; }
  .value-card {
    height: 100%; display: grid; gap: var(--s-2); align-content: start;
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.76); border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
  }
  .value-card .icon-tile { margin-bottom: var(--s-2); --depth: 36; }
  .value-card h3 { font-size: 1.2rem; --depth: 18; }
  .value-card p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; --depth: 8; }

  /* ---------- Programs: light panels that open under the pointer */
  .panels { display: flex; gap: var(--s-3); height: clamp(28rem, 64svh, 36rem); }
  .panel {
    --tone: var(--violet);
    position: relative; isolation: isolate; overflow: hidden;
    flex: 1 1 0; min-width: 0;
    border-radius: var(--r-lg);
    background: var(--violet-soft);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: flex-grow 0.85s var(--ease-in-out), box-shadow 0.6s var(--ease-out);
  }
  .panel.is-open { flex-grow: 4.4; box-shadow: var(--shadow-lg); cursor: default; }
  .panel__img { position: absolute; inset: 0; z-index: -1; }
  .panel__img img {
    width: 100%; height: 100%; object-fit: cover;
    scale: 1.18; translate: var(--ix, 0px) var(--iy, 0px);
    filter: saturate(0.7) brightness(1.04);
    transition: scale 1.2s var(--ease-out), filter 0.8s linear, translate 0.9s var(--ease-out);
  }
  .panel.is-open .panel__img img { scale: 1.06; filter: none; }
  .panel::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--tone) 30%, transparent), transparent 45%);
    opacity: 0.9; transition: opacity 0.8s linear;
  }
  .panel.is-open::after { opacity: 0.35; }
  .panel__num {
    position: absolute; top: var(--s-4); inset-inline-start: var(--s-4);
    display: grid; place-items: center; min-width: 2.6rem; height: 2rem; padding-inline: var(--s-2);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.82); color: var(--ink);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm);
  }
  .panel__num::before { content: ""; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--tone); display: inline-block; }
  .panel__num { display: inline-flex; align-items: center; }
  /* Closed panels carry a round "+" that says: open me */
  .panel__open {
    position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; z-index: 2;
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: rgb(255 255 255 / 0.86); color: var(--ink);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md), 0 0 0 6px rgb(255 255 255 / 0.28);
    transition: opacity 0.35s linear, scale 0.5s var(--ease-back), background-color 0.3s linear, color 0.3s linear;
  }
  .panel__open::before, .panel__open::after {
    content: ""; position: absolute; width: 14px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .panel__open::after { rotate: 90deg; }
  .panel:hover .panel__open, .panel__open:focus-visible { scale: 1.12; background: var(--night); color: var(--sun-light); }
  .panel.is-open .panel__open { opacity: 0; scale: 0.6; pointer-events: none; }

  /* Named tabs above the panels: the obvious way in, synced with hover */
  .prog-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
  .prog-tab {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 2.75rem; padding: 0 var(--s-4) 0 var(--s-2);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.75); border: 1px solid var(--line);
    color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: color 0.35s linear, border-color 0.35s linear, translate 0.5s var(--ease-back);
  }
  .prog-tab::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: var(--night); clip-path: inset(0 0 0 100%);
    transition: clip-path 0.55s var(--ease-out);
  }
  .prog-tab:hover { color: var(--ink); translate: 0 -2px; }
  .prog-tab[aria-current="true"] { color: var(--white); border-color: var(--night); }
  .prog-tab[aria-current="true"]::before { clip-path: inset(0 0 0 0); }
  .prog-tab__num {
    display: grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--violet-soft); color: var(--violet-strong); font-size: 0.72rem;
    transition: background-color 0.35s linear, color 0.35s linear;
  }
  .prog-tab[aria-current="true"] .prog-tab__num { background: var(--sun-light); color: var(--night); }
  /* A thin timer under the active tab while the panels advance on their own */
  .prog-tab::after {
    content: ""; position: absolute; inset: auto 1rem 5px; height: 2px; border-radius: 2px;
    background: var(--sun); transform-origin: right; scale: 0 1; opacity: 0;
  }
  .is-touring .prog-tab[aria-current="true"]::after { opacity: 1; animation: tab-timer var(--tour-ms, 4500ms) linear forwards; }
  @keyframes tab-timer { to { scale: 1 1; } }
  .prog-tabs__hint { margin-inline-start: auto; color: var(--ink-2); font-size: var(--fs-caption); }

  .panel__sheet {
    position: absolute; inset-inline: var(--s-3); bottom: var(--s-3);
    display: grid; gap: var(--s-3);
    padding: var(--s-5) var(--s-6);
    border-radius: calc(var(--r-lg) - var(--s-2));
    background: linear-gradient(150deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.74));
    border: 1px solid rgb(255 255 255 / 0.9);
    backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    opacity: 0; translate: 0 24px; visibility: hidden;
    transition: opacity 0.25s linear, translate 0.4s var(--ease-out), visibility 0s linear 0.25s;
  }
  .panel.is-open .panel__sheet {
    opacity: 1; translate: 0 0; visibility: visible;
    transition: opacity 0.5s linear 0.42s, translate 0.8s var(--ease-out) 0.42s, visibility 0s;
  }
  .panel__title { font-size: var(--fs-h3); }
  .panel__title a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
  .panel__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .panel__desc { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.85; }
  .panel__cta { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--violet-strong); font-weight: 600; font-size: var(--fs-small); }
  .panels-progress { display: none; }

  /* ---------- A day at Nur Al-Ilm: a sun dial that turns with the scroll */
  .day .ambient {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(closest-side at 22% 60%, rgb(245 179 1 / 0.16), transparent),
      radial-gradient(closest-side at 85% 20%, rgb(123 63 190 / 0.08), transparent);
  }
  .day__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
  .day__text { display: grid; gap: var(--s-8); align-content: center; }
  .day__steps { display: grid; gap: var(--s-3); }
  .step {
    position: relative;
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); align-items: start;
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.7); border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
  }
  .step__index {
    font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px var(--violet);
    font-variant-numeric: tabular-nums;
  }
  .step__title { font-size: var(--fs-h3); }
  .step__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.85; margin-top: var(--s-1); }
  .step__icon { display: none; }
  .day__segs { display: none; }
  .dial { display: none; }

  /* ---------- Platform teaser */
  .platform__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; }
  .platform__copy { display: grid; gap: var(--s-4); justify-items: start; }
  .platform__soon {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    border-radius: var(--r-pill);
    background: var(--sun-soft); color: #8A5A00;
    box-shadow: inset 0 0 0 1px var(--sun-border);
    font-size: var(--fs-caption); font-weight: 600;
  }
  .platform__soon::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgb(245 179 1 / 0.25); animation: pulse-dot 2.4s ease-in-out infinite; }
  @keyframes pulse-dot { 50% { box-shadow: 0 0 0 8px rgb(245 179 1 / 0); } }
  .platform__list { display: grid; gap: var(--s-3); width: 100%; margin-block: var(--s-2) var(--s-4); perspective: 1200px; }
  .platform-item {
    display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.62); border: 1px solid rgb(255 255 255 / 0.9);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
  }
  .platform-item h3 { font-size: 1.12rem; }
  .platform-item p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.8; }
  .platform__visual { position: relative; padding: var(--s-8) var(--s-4); }
  .platform__arch {
    position: relative;
    width: min(100%, 25rem); margin-inline: auto;
    padding: var(--s-3);
    border-radius: 50% 50% var(--r-xl) var(--r-xl) / 40% 40% var(--r-xl) var(--r-xl);
    background: rgb(255 255 255 / 0.78); border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-lg);
    overflow: hidden;
  }
  .platform__arch img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 50% 50% calc(var(--r-xl) - var(--s-3)) calc(var(--r-xl) - var(--s-3)) / 40% 40% calc(var(--r-xl) - var(--s-3)) calc(var(--r-xl) - var(--s-3));
  }
  .notify { position: absolute; z-index: 2; display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); min-width: 13.5rem; }
  .notify__head { display: flex; align-items: center; gap: var(--s-3); }
  .notify .icon-tile { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .notify .icon-tile svg { width: 1.15rem; height: 1.15rem; }
  .notify strong { display: block; font-size: var(--fs-small); line-height: 1.4; }
  .notify__meta { display: block; font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.5; }
  .notify--presence { top: 12%; inset-inline-start: -4%; }
  .notify--report { top: 44%; inset-inline-end: -6%; }
  .notify--photos { bottom: 6%; inset-inline-start: 3%; }
  .meter { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: var(--s-2); font-size: var(--fs-caption); color: var(--ink-2); }
  .meter .ltr { text-align: right; }
  .meter i { position: relative; height: 0.4rem; border-radius: var(--r-pill); background: var(--violet-soft); overflow: hidden; }
  .meter i::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
    width: calc(var(--v, 0.5) * 100%); border-radius: inherit;
    background: linear-gradient(to left, var(--tone, var(--violet)), color-mix(in srgb, var(--tone, var(--violet)) 65%, var(--white)));
    transition: width 1.4s var(--ease-out) 0.5s;
  }
  .js [data-anim]:not(.in) .meter i::before { width: 0; }

  /* ---------- Mission: words light up as you read */
  .mission { background: var(--night); color: var(--white); overflow: hidden; isolation: isolate; }
  .mission::before {
    content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; z-index: -1;
    background: radial-gradient(closest-side, rgb(245 179 1 / 0.5), rgb(245 179 1 / 0.12) 55%, transparent);
    scale: calc(0.55 + var(--mp, 0) * 0.6) calc(0.35 + var(--mp, 0) * 0.75);
    transform-origin: 50% 100%;
    pointer-events: none;
  }
  .mission::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40rem 26rem at 90% -10%, rgb(123 63 190 / 0.5), transparent 60%);
  }
  .mission__inner { max-width: 60rem; margin-inline: auto; display: grid; justify-items: center; gap: var(--s-8); text-align: center; }
  .mission .kicker { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.8); box-shadow: none; }
  .mission__title { font-size: var(--fs-h2); line-height: 1.22; color: var(--white); }
  .mission__text { font-family: var(--font-display); font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.75rem); line-height: 1.75; font-weight: 600; }
  .w { opacity: calc(0.16 + var(--lit, 0) * 0.84); transition: opacity 0.2s linear, color 0.6s linear, text-shadow 0.6s linear; }
  .w--accent.is-lit { color: var(--sun-light); text-shadow: 0 0 22px rgb(245 179 1 / 0.65); }
  .mission__by { display: flex; align-items: center; gap: var(--s-4); text-align: start; }
  .mission__seal {
    display: grid; place-items: center; flex: none;
    width: 4.25rem; height: 4.25rem; border-radius: 50%;
    background: rgb(255 255 255 / 0.08);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 0 0 8px rgb(255 255 255 / 0.04), 0 0 40px rgb(245 179 1 / 0.3);
  }
  .mission__seal svg { width: 2.75rem; height: 2.75rem; border-radius: 28%; }
  .mission__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
  .mission__role { color: rgb(255 255 255 / 0.7); font-size: var(--fs-small); }
  .mission__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
  .mission .btn--ghost { --btn-bg: rgb(255 255 255 / 0.08); --btn-fg: var(--white); --btn-fill: rgb(255 255 255 / 0.18); --btn-border: rgb(255 255 255 / 0.2); }

  /* ---------- FAQ */
  .faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + var(--s-10)); display: grid; gap: var(--s-6); justify-items: start; }
  .faq__glyph {
    font-family: var(--font-display); font-size: clamp(8rem, 5rem + 10vw, 14rem); font-weight: 700; line-height: 0.9;
    color: transparent; -webkit-text-stroke: 2px var(--violet-border);
    user-select: none; pointer-events: none;
  }
  .faq__list { display: grid; gap: var(--s-3); }
  .faq-item { border-radius: var(--r-md); background: rgb(255 255 255 / 0.78); border: 1px solid var(--white); box-shadow: var(--shadow-inset), var(--shadow-sm); transition: box-shadow 0.5s var(--ease-out), background-color 0.5s linear; }
  .faq-item[open] { background: var(--white); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; list-style: none; cursor: pointer; border-radius: var(--r-md); }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item__icon { position: relative; width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--violet-soft); transition: background-color 0.4s linear, rotate 0.6s var(--ease-back); }
  .faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 11px; height: 1.6px; border-radius: 2px; background: var(--violet-strong); translate: -50% -50%; transition: background-color 0.4s linear; }
  .faq-item__icon::after { rotate: 90deg; }
  .faq-item[open] .faq-item__icon { background: var(--night); rotate: 135deg; }
  .faq-item[open] .faq-item__icon::before, .faq-item[open] .faq-item__icon::after { background: var(--sun-light); }
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.7s var(--ease-out), content-visibility 0.7s allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
  .faq-item__answer { padding: 0 var(--s-6) var(--s-6); color: var(--ink-2); }
  .faq-item__answer a { color: var(--violet-strong); font-weight: 500; }
  .faq-address { display: block; text-align: right; }

  /* ---------- Contact */
  .contact__scene {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-items: center; justify-items: start;
    min-height: clamp(30rem, 20rem + 22vw, 40rem);
    padding: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
  }
  .contact__bg { position: absolute; inset: -3%; z-index: -1; }
  .contact__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
  .contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgb(251 248 243 / 0.62), rgb(251 248 243 / 0.1) 55%, transparent); }
  .contact__panel { width: min(100%, 35rem); display: grid; gap: var(--s-5); justify-items: start; padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); border-radius: var(--r-lg); }
  .contact__panel .section-head__title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); }
  .contact__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
  .contact__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6); margin-top: var(--s-6); }
  .contact__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); perspective: 1200px; }
  .contact-card {
    height: 100%; display: flex; align-items: center; gap: var(--s-4);
    padding: var(--s-5);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.78); border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
  }
  .contact-card .icon-tile { --depth: 30; }
  .contact-card__text { display: grid; min-width: 0; --depth: 14; }
  .contact-card__label { font-size: var(--fs-caption); color: var(--ink-2); }
  .contact-card__value { font-size: var(--fs-small); font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
  .contact-card__value.ltr { text-align: right; }
  .contact__map {
    position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-3);
    min-height: 22rem; padding: var(--s-3);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.78); border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
  }
  .contact__map-window { position: relative; overflow: hidden; min-height: 17rem; border-radius: calc(var(--r-lg) - var(--s-3)); background: var(--bg-deep); }
  .contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(0.85) sepia(0.06); }
  .contact__map-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
  .contact__map-card strong { display: block; font-size: var(--fs-small); }
  .contact__map-card span { display: block; font-size: var(--fs-caption); color: var(--ink-2); }
  .contact__map-card .ltr { text-align: right; }

  /* ---------- Floating WhatsApp: a squircle that stretches into a labelled pill on hover */
  .fab {
    position: fixed; z-index: 40; bottom: var(--s-5); inset-inline-end: var(--s-5);
    display: flex; align-items: center; gap: var(--s-3);
    height: 3.5rem; max-width: 3.5rem; padding-inline: 0.95rem;
    border-radius: 1.25rem; overflow: hidden; white-space: nowrap;
    background: #1E9A52; color: var(--white);
    box-shadow: 0 16px 32px -14px rgb(30 154 82 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.3);
    opacity: 0; translate: 0 20px; visibility: hidden;
    transition: max-width 0.6s var(--ease-out), opacity 0.4s linear, translate 0.7s var(--ease-out), visibility 0s linear 0.4s;
  }
  .fab.is-visible { opacity: 1; translate: 0 0; visibility: visible; transition-delay: 0s; }
  .fab:hover, .fab:focus-visible { max-width: 17rem; }
  .fab svg { width: 1.6rem; height: 1.6rem; flex: none; }
  .fab__label { font-size: var(--fs-small); font-weight: 600; }

  /* ---------- Responsive */
  @media (max-width: 1199px) {
    .hero { min-height: 0; padding-bottom: 6rem; align-items: start; }
    .hero__media { position: relative; grid-row: 2; aspect-ratio: 16 / 9; margin-top: calc(var(--s-8) * -1); }
    .hero__media::after { background: linear-gradient(to bottom, var(--bg), transparent 18%, transparent 72%, var(--bg)); }
    .hero__inner { grid-row: 1; padding-inline: var(--gutter); }
    .hero__copy { width: min(100%, 44rem); margin-inline: auto; justify-items: center; text-align: center; }
    .hero__title { font-size: var(--fs-display); }
    .hero__actions { justify-content: center; }
    .stats { margin-top: -4rem; }
  }
  @media (max-width: 1100px) {
    .stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Tall desktop screens: the day becomes a pinned sun dial */
  @media (min-width: 1000px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
    .day { padding-block: 0; scroll-margin-top: calc(-1 * (var(--header-h) + var(--s-6))); }
    .day__pin { height: calc(100svh + var(--steps, 6) * 55svh); }
    .day__frame { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding-top: var(--header-h); overflow: clip; }
    .day__steps { display: grid; min-height: 11rem; }
    .step {
      grid-area: 1 / 1; padding: 0; background: none; border: 0; box-shadow: none;
      opacity: 0; translate: 0 26px; visibility: hidden;
      transition: opacity 0.35s linear, translate 0.6s var(--ease-out), visibility 0s linear 0.35s;
    }
    .step.is-active { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.5s linear 0.15s, translate 0.8s var(--ease-out) 0.15s, visibility 0s; }
    .step__index { font-size: 3.6rem; }
    .step__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
    .step__text { font-size: var(--fs-lead); }
    .day__segs { display: flex; gap: var(--s-2); }
    .day__seg { position: relative; width: 2.6rem; height: 2.75rem; border-radius: var(--r-pill); }
    .day__seg::before { content: ""; position: absolute; inset: 50% 0.3rem auto; height: 4px; translate: 0 -50%; border-radius: var(--r-pill); background: #9B72D0; opacity: 0.45; transition: opacity 0.4s linear, background-color 0.4s linear, inset 0.5s var(--ease-back); }
    .day__seg:hover::before { opacity: 1; }
    .day__seg[aria-current="true"]::before { inset-inline: 0; opacity: 1; background: linear-gradient(to left, var(--sun), var(--violet-strong)); }

    .dial { --angle: 0deg; display: block; position: relative; width: min(31rem, 64svh, 100%); aspect-ratio: 1; margin-inline: auto; }
    .dial__face {
      position: absolute; inset: 11%; border-radius: 50%;
      background: radial-gradient(circle at 50% 38%, var(--white), var(--sun-soft) 58%, rgb(249 221 140 / 0.55));
      box-shadow: var(--shadow-inset), var(--shadow-lg), 0 0 80px rgb(245 179 1 / 0.25);
    }
    .dial__rays { position: absolute; inset: 3%; color: var(--sun); opacity: 0.55; rotate: calc(var(--angle) * -0.5); }
    .dial__progress { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
    .dial__progress circle { fill: none; stroke-width: 1.2; }
    .dial__progress .track { stroke: rgb(123 63 190 / 0.14); }
    .dial__progress .bar { stroke: var(--violet); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dp, 0)); }
    .dial__wheel { position: absolute; inset: 0; rotate: var(--angle); }
    .dial__node {
      --a: calc(var(--k) * 60deg);
      position: absolute; left: 41.5%; top: 41.5%; width: 17%; aspect-ratio: 1;
      transform: rotate(var(--a)) translateY(-258%) rotate(calc(-1 * var(--a) - var(--angle)));
      display: grid; place-items: center;
      border-radius: 50%; background: var(--white);
      box-shadow: var(--shadow-inset), var(--shadow-md);
      cursor: pointer;
    }
    .dial__node > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; transition: scale 0.6s var(--ease-back), box-shadow 0.6s var(--ease-out); }
    .dial__node:hover > span { scale: 1.12; }
    .dial__node.is-active > span { scale: 1.28; box-shadow: 0 0 0 4px rgb(245 179 1 / 0.3), 0 12px 30px -8px rgb(245 179 1 / 0.8); background: var(--white); }
    .dial__node img { width: 86%; -webkit-mask: radial-gradient(closest-side, #000 78%, transparent); mask: radial-gradient(closest-side, #000 78%, transparent); }
    .dial__core { position: absolute; inset: 24%; display: grid; place-items: center; }
    .dial__art {
      grid-area: 1 / 1; width: 100%;
      -webkit-mask: radial-gradient(closest-side, #000 80%, transparent); mask: radial-gradient(closest-side, #000 80%, transparent);
      mix-blend-mode: multiply;
      opacity: 0; scale: 0.7; rotate: -14deg;
      transition: opacity 0.4s linear, scale 0.8s var(--ease-back), rotate 0.8s var(--ease-back);
    }
    .dial__art.is-active { opacity: 1; scale: 1; rotate: 0deg; }
    @media (max-height: 760px) {
      .day__text { gap: var(--s-5); }
      .day__text .section-head__lead { font-size: var(--fs-body); }
      .step__index { font-size: 2.8rem; }
    }
  }
  @media (max-width: 999px), (max-height: 639px), (prefers-reduced-motion: reduce) {
    .day__grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 900px) {
    .about__grid, .platform__grid, .faq__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .about__media { max-width: 36rem; margin-inline: auto; width: 100%; }
    .platform__visual { order: 2; max-width: 30rem; margin-inline: auto; width: 100%; }
    .faq__intro { position: static; }
    .faq__glyph { display: none; }
    /* Programs become a swipeable strip of open cards */
    .panels {
      height: auto; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scrollbar-width: none;
      margin-inline: calc(var(--gutter) * -1); padding: var(--s-2) var(--gutter) var(--s-4);
      scroll-padding-inline: var(--gutter);
    }
    .panels::-webkit-scrollbar { display: none; }
    .panel { flex: 0 0 min(82%, 24rem); height: 31rem; scroll-snap-align: start; cursor: default; }
    .panel.is-open { flex-grow: 0; }
    .panel .panel__img img { scale: 1.04; filter: none; }
    .panel__open, .prog-tabs { display: none; }
    .panel__sheet, .panel.is-open .panel__sheet { opacity: 1; translate: 0 0; visibility: visible; transition: none; padding: var(--s-4) var(--s-5); }
    .panels-progress { display: block; height: 4px; margin-top: var(--s-2); border-radius: var(--r-pill); background: var(--violet-soft); overflow: hidden; }
    .panels-progress span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(to left, var(--sun), var(--violet-strong)); transform-origin: right; scale: var(--sp, 0.16) 1; transition: scale 0.2s linear; }
  }
  @media (max-width: 640px) {
    .hero__media { aspect-ratio: 5 / 4; }
    .hero__media img { object-position: 24% 50%; }
    .hero__actions .btn { flex: 1 1 100%; }
    .hero { padding-bottom: 2.5rem; }
    .stats { margin-top: -2rem; }
    .stat { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); justify-items: start; padding: var(--s-4); }
    .stat .icon-tile { grid-row: auto; width: 2.5rem; height: 2.5rem; }
    .platform__arch { width: 82%; }
    .notify { min-width: 0; padding: var(--s-2) var(--s-3); background: rgb(255 255 255 / 0.9); }
    .notify--presence { top: 4%; inset-inline-start: 0; }
    .notify--report { top: auto; bottom: -4%; inset-inline-end: 0; width: 14.5rem; }
    .notify--photos { display: none; }
    .contact__scene { display: block; min-height: 0; padding: 0; background: var(--white); }
    .contact__bg { position: relative; inset: 0; aspect-ratio: 4 / 3; }
    .contact__bg::after { background: linear-gradient(to bottom, transparent 55%, var(--white)); }
    .contact__panel { position: relative; width: auto; margin: -3.5rem 0 0; padding: var(--s-6) var(--s-5); border: 0; box-shadow: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .contact__actions .btn { flex: 1 1 100%; }
    .mission__by { flex-direction: column; text-align: center; }
  }
  @media (max-width: 560px) {
    .values, .contact__cards { grid-template-columns: minmax(0, 1fr); }
    .about__badge--lang { inset-inline-end: 0; }
    .contact__map-card { flex-direction: column; align-items: stretch; }
    .step { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); padding-inline-end: calc(var(--s-5) + 64px); }
    .step__icon { position: absolute; top: var(--s-3); inset-inline-end: var(--s-3); width: 60px; }
  }
  @media (max-width: 999px), (max-height: 639px), (prefers-reduced-motion: reduce) {
    .step__icon { display: block; width: 72px; mix-blend-mode: multiply; -webkit-mask: radial-gradient(closest-side, #000 80%, transparent); mask: radial-gradient(closest-side, #000 80%, transparent); }
    .step { grid-template-columns: auto minmax(0, 1fr) auto; }
  }
  @media (max-width: 560px) {
    .step { grid-template-columns: minmax(0, 1fr); }
    .step__icon { width: 60px; }
  }
}

/* ------------------------------------------------------------------ motion */
@layer motion {
  /* Hero: each title line rises from behind its own mask, then the rest follows */
  .js .line__in { translate: 0 118%; animation: line-up 1.15s var(--ease-out) forwards; animation-delay: calc(0.2s + var(--l, 0) * 0.14s); }
  @keyframes line-up { to { translate: 0 0; } }
  .js [data-intro] { opacity: 0; animation: intro-in 1s var(--ease-out) forwards; animation-delay: calc(0.55s + var(--l, 0) * 0.12s); }
  @keyframes intro-in {
    from { opacity: 0; translate: 0 18px; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; translate: 0 0; clip-path: inset(-60% -60% -60% -60%); }
  }

  /* Scroll entrances, each with its own character */
  .js [data-anim] { transition-property: opacity, translate, rotate, scale, clip-path; transition-duration: 1.05s; transition-timing-function: var(--ease-out); transition-delay: calc(var(--d, 0) * 85ms); }
  .js [data-anim="rise"]:not(.in) { opacity: 0; translate: 0 44px; }
  /* Never start fully clipped: Chrome measures visibility after clip-path, so a
     zero-height start would never be reported as on screen. */
  .js [data-anim="curtain"]:not(.in) { opacity: 0; clip-path: inset(0 0 62% 0 round 24px); translate: 0 30px; }
  .js [data-anim="curtain"].in { clip-path: inset(-10% -10% -10% -10% round 24px); }
  .js [data-anim="flip"] { transform-origin: 50% 0; }
  .js [data-anim="flip"]:not(.in) { opacity: 0; rotate: x -24deg; translate: 0 36px; }
  .js [data-anim="window"]:not(.in) { clip-path: inset(14% 14% 14% 14% round 48px); }
  .js [data-anim="window"].in { clip-path: inset(0 0 0 0 round 0); transition-duration: 1.4s; }
  .js [data-anim="window"] img { transition: scale 1.8s var(--ease-out); }
  .js [data-anim="window"]:not(.in) img { scale: 1.3; }
  .js [data-anim="fade"]:not(.in) { opacity: 0; }

  /* Headings: words rise one by one from behind a mask */
  .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.16em 0.3em; margin-block: -0.16em -0.3em; }
  .js [data-split] .wd__in { display: inline-block; translate: 0 112%; transition: translate 1s var(--ease-out); transition-delay: calc(var(--w, 0) * 55ms + 0.05s); }
  .js [data-split].in .wd__in { translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .line__in, .js [data-intro] { animation: none; translate: none; opacity: 1; clip-path: none; }
    .js [data-anim], .js [data-anim] img { opacity: 1 !important; translate: none !important; rotate: none !important; scale: none !important; clip-path: none !important; transition: none !important; }
    .js [data-split] .wd__in { translate: none; transition: none; }
    .hero__motes, .cursor-light { display: none; }
    .platform__soon::before { animation: none; }
    .is-touring .prog-tab::after { animation: none; opacity: 0; }
    .lux, .btn, .panel, .prog-tab, .prog-tab::before, .panel__open, .panel__img img, .panel__sheet, .menu, .menu__ln > span, .topbar, .topbar__inner, .fab, .roll__a, .roll__b,
    .brand__mark, .brand__sub, .faq-item__icon, .meter i::before, .slot__window, .slot__track { transition-duration: 0.01ms !important; }
    .faq-item::details-content { transition: none; }
  }
}