/* ════════════════════════════════════════════════════════════
   للذكرى — "أرشيف الليل" · نسخة موجّهة للتحويل
   Same museum identity, re-sequenced + sharpened to sell.
   ════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink-950:#05060a; --ink-900:#0a0c14; --ink-850:#0f1220;
  --ink-800:#13172a; --ink-700:#1c2138; --ink-600:#272d49;
  --line:#232a44;
  --gold:#d4af66; --gold-hi:#eccd8c; --rose:#c97f7f; --sky:#7faecc;
  --text:#f1f0ea; --muted:#aab2d6; --faint:#79829f;
  --glass:linear-gradient(180deg, rgba(20,24,42,.82), rgba(10,12,20,.86));

  --shell:min(100% - 2.4rem, 73rem);
  --space:clamp(3.5rem, 7vw, 6.4rem); /* section vertical rhythm (was 4.5/9vw/8rem — ~20% tighter) */
  --r:1.1rem; --r-lg:1.6rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Plex Arabic", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; -webkit-text-size-adjust:100%; max-width:100%; overflow-x:clip; }
body {
  margin:0; min-width:20rem; max-width:100%; overflow-x:clip;
  color:var(--text); background:var(--ink-950); font-family:var(--font);
  font-size:1rem; line-height:1.8; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(56% 40% at 82% -4%, rgba(212,175,102,.17), transparent 60%),
    radial-gradient(50% 36% at 8% 4%, rgba(201,127,127,.11), transparent 60%),
    radial-gradient(80% 60% at 50% 118%, rgba(127,174,204,.09), transparent 60%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
svg { display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
h1,h2,h3 { margin:0; font-weight:600; line-height:1.28; letter-spacing:-.01em; }
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
::selection { color:var(--ink-950); background:var(--gold); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.shell { width:var(--shell); margin-inline:auto; }
.section { padding-block:var(--space); }

.skip-link {
  position:fixed; inset:1rem auto auto 1rem; z-index:1000;
  padding:.7rem 1rem; color:var(--ink-950); background:var(--gold);
  border-radius:.7rem; font-weight:600;
  transform:translateY(-200%); transition:transform .18s var(--ease);
}
.skip-link:focus { transform:translateY(0); }

/* ── editorial bits ── */
.kicker {
  margin:0 0 1rem; display:inline-flex; align-items:center; gap:.55em;
  color:var(--gold); font-size:.8rem; font-weight:600; letter-spacing:.04em;
}
.kicker::before { content:""; width:1.6em; height:1px; background:var(--gold); opacity:.6; }
.lead { max-width:42rem; color:var(--muted); font-size:clamp(1.02rem,1.5vw,1.18rem); }
h2 span, h1 span { color:var(--gold); }

/* ── buttons ── */
.button {
  min-height:3.25rem; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:0 1.45rem; border-radius:.85rem; font-family:inherit; font-size:1.02rem; font-weight:600;
  cursor:pointer; border:1px solid transparent; transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.button svg { width:1.15rem; height:1.15rem; }
.button-primary { color:var(--ink-950); background:linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow:0 10px 30px -12px rgba(212,175,102,.6); }
.button-primary:hover { transform:translateY(-2px); }
.button-primary svg { transform:scaleX(-1); }
.button-quiet { color:var(--text); background:rgba(255,255,255,.03); border-color:var(--line); }
.button-quiet:hover { background:rgba(255,255,255,.06); border-color:var(--ink-600); transform:translateY(-2px); }

/* ── header ── */
.site-header { position:sticky; top:0; z-index:100; transition:background .25s var(--ease), border-color .25s var(--ease); border-bottom:1px solid transparent; }
.site-header.is-scrolled { background:rgba(8,10,16,.82); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav-shell { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand { display:inline-flex; align-items:center; gap:.6rem; }
.brand-pulse { width:.85rem; height:.85rem; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,102,.18); animation:pulse 3.4s var(--ease) infinite; }
.brand-mark { flex-shrink:0; width:2rem; height:2rem; border-radius:.4rem; object-fit:cover; } /* pixel-world icon; dark bg blends into the nav */
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(212,175,102,.22);} 50%{box-shadow:0 0 0 8px rgba(212,175,102,0);} }
.brand-wordmark { display:flex; flex-direction:column; line-height:1.1; }
.brand-wordmark strong { font-size:1.15rem; letter-spacing:.02em; }
.brand-wordmark small { color:var(--faint); font-size:.66rem; letter-spacing:.18em; }
.site-nav { display:flex; align-items:center; gap:.4rem; }
.site-nav > a { display:inline-flex; align-items:center; min-height:2.5rem; padding:.5rem .7rem; color:var(--muted); font-size:.92rem; border-radius:.55rem; transition:color .15s, background .15s; }
.site-nav > a:hover { color:var(--text); background:rgba(255,255,255,.04); }
.nav-cta { color:var(--ink-950)!important; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); font-weight:600; }
.nav-cta:hover { background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important; }
.menu-toggle { display:none; }

/* ════════ HERO ════════ */
.hero { position:relative; isolation:isolate; min-height:clamp(32rem,86vh,44rem); display:flex; align-items:center; padding-block:clamp(3rem,8vh,5rem); overflow:hidden; }
/* living pixel world: subtle 2-tier grid + a warm glow on the mosaic (left) side */
.hero-world { position:absolute; inset:0; z-index:-2; background-color:#070912;
  background-image:
    radial-gradient(115% 120% at 16% 44%, rgba(212,175,102,.16), rgba(7,9,18,0) 56%),
    linear-gradient(rgba(212,175,102,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,102,.09) 1px, transparent 1px),
    linear-gradient(rgba(86,98,150,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,98,150,.10) 1px, transparent 1px);
  background-size:100% 100%, 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
/* intentional memory mosaic — real tiles snapped to a square grid, fading toward the text */
.hero-mosaic { position:absolute; z-index:-1; top:50%; left:max(0px, calc((100% - var(--shell)) / 2 + 2vw)); transform:translateY(-50%); direction:ltr;
  display:grid; grid-template-columns:repeat(4, var(--c)); grid-auto-rows:var(--c); gap:.55rem;
  --c:clamp(3.6rem,6.4vw,6.2rem); padding:clamp(1.4rem,4vw,3rem); opacity:.95;
  -webkit-mask-image:linear-gradient(to right, #000 52%, transparent 96%);
  mask-image:linear-gradient(to right, #000 52%, transparent 96%); }
.hero-tile { overflow:hidden; border-radius:.5rem; border:1px solid rgba(212,175,102,.16);
  background:#0c0e16; box-shadow:0 10px 26px -16px rgba(0,0,0,.85); opacity:.6; }
.hero-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-tile.is-selected { opacity:1; border-color:var(--gold-hi);
  box-shadow:0 0 0 1px var(--gold), 0 0 30px -2px rgba(212,175,102,.5); }
/* the hand-drawn heart — the emotional anchor: large (2×2), fully visible, whole drawing shown */
.hero-tile--draw { opacity:.97; border-color:rgba(212,175,102,.34);
  box-shadow:0 0 0 1px rgba(212,175,102,.16), 0 16px 38px -18px rgba(0,0,0,.9); }
.hero-tile--draw img { object-fit:contain; }
/* readability: darken the text (right) side, let the mosaic (left) breathe */
.hero-veil { position:absolute; inset:0; z-index:-1; pointer-events:none; background:
    linear-gradient(180deg, rgba(5,6,10,.5) 0%, rgba(5,6,10,.12) 32%, rgba(5,6,10,.86) 100%),
    linear-gradient(270deg, rgba(5,6,10,.92) 0%, rgba(5,6,10,.45) 46%, transparent 72%); }
.hero-inner { /* full content shell (73rem) — matches the sections below */ }
.hero-copy { max-width:44rem; } /* start-aligned (RTL) inside the shell, like .section-head → hero lines up with the next sections */
.eyebrow {
  display:inline-flex; align-items:center; gap:.55em; margin:0 0 1.3rem; padding:.42rem .85rem;
  background:rgba(212,175,102,.1); border:1px solid rgba(212,175,102,.28); border-radius:2rem;
  color:var(--gold-hi); font-size:.82rem; font-weight:600;
}
.eyebrow-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.hero h1 { font-size:clamp(2.6rem,7vw,5rem); line-height:1.06; letter-spacing:-.01em; text-shadow:0 2px 30px rgba(5,6,10,.6); }
.hero-lead { max-width:34rem; margin-top:1.3rem; color:var(--text); opacity:.92; font-size:clamp(1.06rem,1.8vw,1.28rem); line-height:1.7; }

/* finality device — the signature 90-day status */
.lifespan { display:flex; align-items:center; gap:1.1rem; margin-top:1.8rem; padding:1rem 1.25rem; max-width:32rem;
  background:linear-gradient(120deg, rgba(212,175,102,.08), rgba(10,12,20,.55)); border:1px solid rgba(212,175,102,.22);
  border-radius:var(--r); backdrop-filter:blur(6px); }
.lifespan-num { display:flex; flex-direction:column; align-items:center; line-height:1; flex-shrink:0; }
.lifespan-num b { font-size:2.7rem; color:var(--gold); }
.lifespan-num small { color:var(--faint); font-size:.7rem; letter-spacing:.08em; margin-top:.3rem; }
.lifespan-track { flex:1; }
.lifespan-bar { position:relative; height:4px; border-radius:2px; background:linear-gradient(270deg, var(--ink-700), var(--gold)); overflow:visible; }
.lifespan-bar::after { content:""; position:absolute; inset-inline-start:0; top:50%; width:11px; height:11px; transform:translateY(-50%); border-radius:50%; background:var(--ink-950); border:2px solid var(--gold); box-shadow:0 0 10px rgba(212,175,102,.7); }
.lifespan-ends { display:flex; justify-content:space-between; margin-top:.55rem; color:var(--faint); font-size:.74rem; }
.lifespan-ends .froze { color:var(--gold-hi); }

.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.hero-note { margin-top:1.1rem; color:var(--muted); font-size:.92rem; display:inline-flex; align-items:center; gap:.5rem; }
.hero-note b { color:var(--gold-hi); font-weight:600; }

/* ════════ EMOTION → why we built it ════════ */
.reason-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr)); gap:.8rem; }
.reason-card { padding:1.3rem 1.35rem; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--r); border-inline-start:2px solid rgba(201,127,127,.45);
  transition:transform .18s var(--ease), border-color .18s var(--ease); }
.reason-card:hover { transform:translateY(-3px); border-inline-start-color:var(--rose); }
.reason-title { display:block; margin-bottom:.5rem; font-size:1.1rem; font-weight:700; color:var(--text); }
.reason-card p { color:var(--muted); font-size:.94rem; line-height:1.65; }
.reason-closer { margin-top:clamp(2rem,4.5vw,3rem); text-align:center; }
.litany { display:flex; flex-wrap:wrap; justify-content:center; gap:.4em 1em; max-width:42rem; margin:0 auto;
  font-size:clamp(1.15rem,2.6vw,1.7rem); font-weight:600; line-height:1.4; }
.litany span { color:var(--text); }
.litany span:nth-child(odd) { color:var(--rose); }
.seal { margin-top:1.2rem; color:var(--gold-hi); font-size:clamp(1.1rem,2.2vw,1.5rem); font-weight:600; }

/* ════════ shared section head ════════ */
.section-head { max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head h2 { font-size:clamp(2rem,4.4vw,3.4rem); }
.section-head .lead { margin-top:1.1rem; }

/* ════════ world grows + freeze ════════ */
.journey-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.milestones { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.milestones li { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:1.6rem; font-size:.88rem; color:var(--muted); }
.milestones b { font-size:1.05rem; }
/* «العالم عبر الزمن» timelapse player — built in CSS (static, front-end only, no data) */
.player-frame { --p:.6629; /* timeline progress 0..1 (day 60 default); JS updates it live */ direction:ltr; padding:clamp(.8rem,1.6vw,1.15rem);
  background:linear-gradient(180deg, rgba(18,22,38,.92), rgba(9,11,19,.94));
  border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(0,0,0,.8); }
.player { display:flex; flex-direction:column; gap:.7rem; }
.player-top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.player-title { display:inline-flex; align-items:center; gap:.5rem; color:var(--text); font-size:.92rem; font-weight:600; }
.player-live { width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); }
.player-day { padding:.25rem .7rem; font-size:.8rem; font-weight:600; color:var(--gold-hi);
  background:rgba(212,175,102,.12); border:1px solid rgba(212,175,102,.3); border-radius:1.4rem; white-space:nowrap; }

.player-stage { position:relative; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; container-type:inline-size;
  cursor:ew-resize; touch-action:pan-y; -webkit-user-select:none; user-select:none; /* drag the playhead; vertical page scroll still passes through */
  background-color:#0a0d18;
  background-image:
    radial-gradient(120% 130% at 32% 52%, rgba(212,175,102,.09), rgba(10,13,24,0) 60%),
    linear-gradient(rgba(212,175,102,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,102,.16) 1px, transparent 1px),
    linear-gradient(rgba(86,98,150,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,98,150,.13) 1px, transparent 1px);
  background-size:100% 100%, 14.285% 25%, 14.285% 25%, 3.571% 6.25%, 3.571% 6.25%;
  box-shadow:inset 0 0 50px -16px rgba(0,0,0,.85); }
/* future zone — everything right of the playhead: cooler, empty, "not lived yet" */
.pw-future { position:absolute; top:0; bottom:0; left:calc(var(--p) * 100%); right:0;
  background:linear-gradient(90deg, rgba(10,14,28,0), rgba(127,174,204,.05) 35%, rgba(165,195,225,.12));
  transition:left .12s linear; }
.pw-cells { position:absolute; inset:0; }
.pw-cell { position:absolute; left:var(--x); top:var(--y); width:var(--w,3.4cqw); height:var(--h,3.4cqw);
  transform:translate(-50%,-50%); border-radius:1.5px; background:var(--cc,#d4af66);
  box-shadow:0 0 0 1px rgba(5,6,10,.5), 0 0 7px -1px var(--cc,#d4af66);
  transition:opacity .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.pw-cell.g{--cc:#d4af66} .pw-cell.gh{--cc:#eccd8c} .pw-cell.r{--cc:#c97f7f}
.pw-cell.s{--cc:#7faecc} .pw-cell.n{--cc:#8fbf8f} .pw-cell.c{--cc:#f0e6cf}
/* a cell whose day hasn't arrived yet is hidden; it fades/scales in as the playhead passes it */
.pw-cell.is-future { opacity:0; transform:translate(-50%,-50%) scale(.25); pointer-events:none; }
.pw-cell.is-fresh { box-shadow:0 0 0 1px rgba(5,6,10,.5), 0 0 12px 1px var(--cc); }
/* playhead — moves with --p; draggable (wide invisible hit area) */
.pw-head { position:absolute; top:0; bottom:0; left:calc(var(--p) * 100%); width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(236,205,140,.08), rgba(236,205,140,.85) 30%, rgba(236,205,140,.85) 70%, rgba(236,205,140,.08));
  cursor:ew-resize; transition:left .12s linear; }
.pw-head::before { content:""; position:absolute; top:0; bottom:0; left:-16px; right:-16px; } /* comfortable grab target around the thin line */
.pw-head-flag { position:absolute; top:.35rem; left:clamp(2.4rem, calc(var(--p) * 100%), calc(100% - 2.4rem));
  transform:translateX(-50%); white-space:nowrap; transition:left .12s linear;
  padding:.1rem .5rem; font-size:.64rem; font-weight:600; color:var(--ink-950); background:var(--gold-hi); border-radius:1rem; }
.pw-freeze { position:absolute; top:.5rem; right:.55rem; display:inline-flex; color:rgba(190,212,238,.7);
  transition:color .4s var(--ease), transform .4s var(--ease), filter .4s var(--ease); }
.pw-freeze svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
/* frost overlay — ramps up toward the end (opacity clamped 0..1 by the browser), full at the freeze */
.pw-frost { position:absolute; inset:0; pointer-events:none; opacity:calc((var(--p) - .82) * 5.2);
  background:radial-gradient(120% 120% at 50% 50%, rgba(180,205,236,.10), rgba(150,185,220,.03) 70%);
  box-shadow:inset 0 0 55px -8px rgba(160,196,234,.4); }
.player-frame.is-frozen .pw-freeze { color:#e2eefb; transform:scale(1.25); filter:drop-shadow(0 0 6px rgba(190,215,245,.7)); }
.player-frame.is-frozen .player-day { color:#e2eefb; background:rgba(170,200,235,.14); border-color:rgba(190,212,238,.45); }

.player-timeline { display:flex; flex-direction:column; gap:.55rem; padding:0 .1rem; }
.player-track { display:flex; align-items:center; gap:.7rem; }
.player-play { flex-shrink:0; width:2rem; height:2rem; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:50%; color:var(--ink-950);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 4px 14px -4px rgba(212,175,102,.6); }
.player-play svg { width:1rem; height:1rem; fill:currentColor; }
.player-play .ic-play { margin-inline-start:1px; }
.player-play .ic-pause { display:none; }
.player-play.is-playing .ic-play { display:none; }
.player-play.is-playing .ic-pause { display:inline; }
.player-scrub { position:relative; flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1); }
.player-scrub-fill { position:absolute; inset-block:0; left:0; width:calc(var(--p) * 100%); border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi)); transition:width .12s linear; }
.player-scrub-knob { position:absolute; left:calc(var(--p) * 100%); top:50%; width:13px; height:13px; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--gold-hi); box-shadow:0 0 0 4px rgba(212,175,102,.2), 0 2px 6px rgba(0,0,0,.5);
  pointer-events:none; transition:left .12s linear, box-shadow .15s var(--ease); }
.player-scrub:has(.player-range:focus-visible) .player-scrub-knob { box-shadow:0 0 0 4px rgba(212,175,102,.35), 0 0 0 6px rgba(236,205,140,.5); }
/* the real, accessible control — transparent, overlaid on the custom track (keyboard + touch + SR) */
.player-range { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:22px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; }
.player-range:focus { outline:none; }
.player-range::-webkit-slider-runnable-track { background:transparent; border:0; }
.player-range::-moz-range-track { background:transparent; border:0; }
.player-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border:0; background:transparent; cursor:pointer; }
.player-range::-moz-range-thumb { width:22px; height:22px; border:0; background:transparent; cursor:pointer; }
.player-ticks { display:flex; justify-content:space-between; gap:.3rem; color:var(--faint); font-size:clamp(.6rem,1.5vw,.72rem); }
.player-ticks span:last-child { color:rgba(190,212,238,.85); }
@media (prefers-reduced-motion: no-preference) {
  .player-live { animation:pulse 3.4s var(--ease) infinite; }
  .pw-cell.is-fresh { animation:freshGlow 2.6s var(--ease) infinite; }
  @keyframes freshGlow { 0%,100%{opacity:.82} 50%{opacity:1} }
}
/* while actively dragging the playhead, follow the pointer 1:1 (no trailing transition) */
.player-frame.is-scrubbing .pw-future,
.player-frame.is-scrubbing .pw-head,
.player-frame.is-scrubbing .pw-head-flag,
.player-frame.is-scrubbing .player-scrub-fill,
.player-frame.is-scrubbing .player-scrub-knob { transition:none; }
@media (prefers-reduced-motion: reduce) {
  .pw-future, .pw-head, .pw-head-flag, .pw-cell, .player-scrub-fill, .player-scrub-knob { transition:none; }
}

.freeze-banner { margin-top:clamp(2.5rem,5vw,3.5rem); padding:clamp(1.6rem,4vw,2.6rem); border-radius:var(--r-lg);
  background:linear-gradient(120deg, rgba(212,175,102,.1), rgba(20,24,42,.6)); border:1px solid rgba(212,175,102,.28);
  display:flex; align-items:center; gap:clamp(1.4rem,4vw,2.6rem); flex-wrap:wrap; }
.freeze-mark { display:flex; flex-direction:column; align-items:center; line-height:1; flex-shrink:0; }
.freeze-mark b { font-size:clamp(3rem,8vw,4.6rem); color:var(--gold); }
.freeze-mark small { color:var(--faint); letter-spacing:.12em; margin-top:.3rem; }
.freeze-text { flex:1; min-width:16rem; }
.freeze-text h2 { font-size:clamp(1.6rem,3.4vw,2.4rem); margin-bottom:.7rem; }
.freeze-text p { color:var(--muted); }

/* ════════ who it's for — interactive example gallery wired to the demo world ════════ */
.uc-img { width:100%; height:100%; object-fit:cover; display:block; }
.uc-img.is-qr { object-fit:contain; background:#0c0e16; }
.uc-layout { display:grid; gap:1.2rem; align-items:start; }
@media (min-width:860px) { .uc-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:1.6rem; } }

/* featured preview */
.uc-featured { display:flex; flex-direction:column; background:var(--glass); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 60px -40px rgba(0,0,0,.85); }
.uc-featured-media { aspect-ratio:16/10; background:var(--ink-850); }
.uc-featured-body { padding:1.15rem 1.3rem 1.4rem; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
.uc-tag { padding:.2rem .7rem; font-size:.72rem; font-weight:600; color:var(--gold-hi);
  background:rgba(212,175,102,.12); border:1px solid rgba(212,175,102,.28); border-radius:1.4rem; }
.uc-featured-title { font-size:clamp(1.25rem,2.4vw,1.65rem); line-height:1.25; }
.uc-featured-desc { color:var(--muted); font-size:1rem; line-height:1.7; }
.uc-featured-cta { margin-top:.45rem; }

/* card grid */
.uc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
@media (max-width:400px) { .uc-grid { grid-template-columns:1fr; } }
.uc-card { display:flex; align-items:center; gap:.8rem; width:100%; height:100%; padding:.7rem .8rem; text-align:start;
  cursor:pointer; font-family:inherit; color:var(--text); background:var(--glass); border:1px solid var(--line);
  border-radius:var(--r); transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease); }
.uc-card:hover { transform:translateY(-2px); border-color:rgba(212,175,102,.4); background:rgba(212,175,102,.05); }
.uc-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.uc-card.is-active { border-color:var(--gold); background:rgba(212,175,102,.07);
  box-shadow:inset 0 0 0 1px var(--gold), 0 16px 32px -24px rgba(212,175,102,.7); }
.uc-thumb { flex-shrink:0; width:3.6rem; height:3.6rem; border-radius:.7rem; overflow:hidden;
  border:1px solid var(--line); background:var(--ink-850); box-shadow:inset 0 0 0 1px rgba(5,6,10,.5); }
.uc-card-text { display:flex; flex-direction:column; gap:.18rem; min-width:0; }
.uc-card-text b { font-size:.96rem; line-height:1.3; }
.uc-card-text > span { color:var(--muted); font-size:.8rem; line-height:1.5; }

/* ════════ demo CTA row (honest — booking opens at launch) ════════ */
.demo-cta-note { color:var(--muted); font-size:.92rem; margin-bottom:.9rem; }
.demo-cta-row { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }

/* ════════ final CTA ════════ */
.cta-card { max-width:46rem; margin-inline:auto; text-align:center; padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,5vw,3.5rem);
  background:linear-gradient(160deg, rgba(20,24,42,.7), rgba(10,12,20,.85)); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85); }
.cta-card .kicker { justify-content:center; }
.cta-card h2 { font-size:clamp(2rem,4.6vw,3.2rem); }
.cta-card .lead { margin:1.1rem auto 0; }
.waitlist { margin-top:2rem; }
.waitlist-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.waitlist-row { display:flex; gap:.6rem; max-width:30rem; margin-inline:auto; }
.waitlist input { flex:1; min-width:0; min-height:3.25rem; padding:0 1.1rem; color:var(--text); background:rgba(5,6,10,.6);
  border:1px solid var(--line); border-radius:.85rem; font-family:inherit; font-size:1rem; direction:ltr; text-align:left; }
.waitlist input::placeholder { color:var(--faint); }
.waitlist input:focus-visible { border-color:var(--gold); outline:none; }
.waitlist .button { flex-shrink:0; }
/* honeypot — clipped to 1px at its anchor (NOT pushed off-screen, which inflated body width / caused side overflow). Still a real field for bots, invisible to people. */
.waitlist-hp { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap; opacity:0; pointer-events:none; }
.waitlist .button[disabled] { opacity:.6; cursor:progress; }
.waitlist-status { margin-top:1rem; padding:.9rem 1.1rem; color:var(--gold-hi); background:rgba(212,175,102,.1);
  border:1px solid rgba(212,175,102,.3); border-radius:.8rem; font-size:.92rem; line-height:1.7; }
.waitlist-status.is-loading { color:var(--muted); background:rgba(170,178,214,.08); border-color:var(--line); }
.waitlist-status.is-error { color:#e7b3b3; background:rgba(201,127,127,.12); border-color:rgba(201,127,127,.4); }
.cta-secondary { margin-top:1.6rem; color:var(--muted); font-size:.9rem; }
.cta-secondary a { color:var(--gold-hi); border-bottom:1px solid rgba(212,175,102,.4); }

/* ════════ FAQ ════════ */
.faq-head { max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem); }
.faq-head h2 { font-size:clamp(2rem,4.4vw,3.2rem); }
.faq-list { display:grid; gap:.7rem; max-width:52rem; }
details { background:var(--glass); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; cursor:pointer; list-style:none; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary i { flex-shrink:0; width:1.2rem; height:1.2rem; position:relative; transition:transform .2s var(--ease); }
summary i::before, summary i::after { content:""; position:absolute; inset:50% 0 auto; height:2px; background:var(--gold); border-radius:2px; }
summary i::after { transform:rotate(90deg); transition:opacity .2s; }
details[open] summary i { transform:rotate(180deg); }
details[open] summary i::after { opacity:0; }
.faq-answer { padding:0 1.4rem 1.3rem; color:var(--muted); font-size:.96rem; }

/* ════════ footer ════════ */
.site-footer { border-top:1px solid var(--line); padding-block:2.5rem; }
.footer-layout { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.footer-layout nav { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; }
.footer-layout nav a { display:inline-flex; align-items:center; min-height:2.5rem; color:var(--muted); font-size:.9rem; }
.footer-layout nav a:hover { color:var(--text); }
.footer-layout > p { color:var(--faint); font-size:.84rem; }

/* ════════ INTERACTIVE DEMO ════════ */
.demo-disclaimer { margin-top:.9rem; display:inline-flex; align-items:flex-start; gap:.5rem; max-width:42rem;
  padding:.55rem .85rem; color:var(--muted); font-size:.85rem; line-height:1.55;
  background:rgba(212,175,102,.08); border:1px solid rgba(212,175,102,.24); border-radius:var(--r); }
.demo-disclaimer svg { flex-shrink:0; width:1.1rem; height:1.1rem; margin-top:.12rem; color:var(--gold); }

.demo-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:1rem; align-items:start; }
.demo-world-col { display:grid; gap:.7rem; min-width:0; }

/* guided creator (wizard) */
.demo-wizard { display:grid; gap:.55rem; align-content:start; }
.demo-steps { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.2rem; }
.demo-step-label { color:var(--gold-hi); font-size:.86rem; font-weight:600; letter-spacing:.01em; }
.demo-step-dots { display:inline-flex; gap:.35rem; flex-shrink:0; }
.demo-step-dots i { width:.5rem; height:.5rem; border-radius:50%; background:var(--line); transition:background .2s var(--ease), transform .2s var(--ease); }
.demo-step-dots i.is-active { background:var(--gold); transform:scale(1.15); }
.demo-stepnav { display:flex; gap:.6rem; margin-top:.4rem; }
.demo-stepnav .button { flex:1; justify-content:center; }
.demo-step-done { color:var(--gold-hi); font-weight:600; font-size:.96rem; line-height:1.6; }

/* size presets (examples, not fixed packages) */
.demo-presets { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.15rem; }
.demo-preset { padding:.42rem .7rem; font-family:inherit; font-size:.85rem; color:var(--text);
  background:var(--glass); border:1px solid var(--line); border-radius:.6rem; cursor:pointer; white-space:nowrap;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.demo-preset:hover { border-color:var(--ink-600); }
.demo-preset.is-active { border-color:var(--gold); background:rgba(212,175,102,.12); color:var(--gold-hi); }
.demo-presets-note { color:var(--faint); font-size:.78rem; line-height:1.55; }

/* map tool toggle (move / drag-select) */
.demo-tools { display:inline-flex; gap:.3rem; width:max-content; max-width:100%; padding:.25rem; margin-top:.3rem;
  background:rgba(5,6,10,.5); border:1px solid var(--line); border-radius:.7rem; }
.demo-tool { padding:.42rem .9rem; font-family:inherit; font-weight:600; font-size:.88rem; color:var(--muted);
  background:transparent; border:0; border-radius:.5rem; cursor:pointer; transition:background .15s, color .15s; }
.demo-tool.is-active { color:var(--ink-950); background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }
.demo-tool-hint { color:var(--faint); font-size:.78rem; line-height:1.55; }
.demo-draw-hint { color:var(--gold-hi); font-size:.82rem; line-height:1.55; }

/* world stage */
.demo-stage { position:relative; }
.demo-viewport { position:relative; height:clamp(18rem,44vh,26rem); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-950); cursor:grab; touch-action:none; direction:ltr;
  contain:layout paint; /* isolate the inner transforms so reset/zoom can never shift the page */
  box-shadow:inset 0 0 55px -28px rgba(0,0,0,.75); }
.demo-viewport.is-panning { cursor:grabbing; }
.demo-viewport.is-selecting, .demo-viewport.is-selecting-drag { cursor:crosshair; }
.demo-viewport:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* 500×500 demo world (24px/cell ⇒ 12000px plane). Real world stays 1000×1000.
   No permanent will-change → the layer re-rasterises crisply at the current zoom (no cached-bitmap blur);
   it is promoted only while actively panning/gliding (below) for smoothness. */
.demo-plane { position:absolute; top:0; left:0; width:12000px; height:12000px; transform-origin:0 0;
  backface-visibility:hidden; contain:paint;
  background-color:#0c1020; /* lifted vs the near-black viewport so the world reads as a defined canvas at full-zoom */
  background-image:
    radial-gradient(125% 115% at 50% 45%, rgba(212,175,102,.13), rgba(12,16,32,0) 60%),
    linear-gradient(rgba(212,175,102,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,102,.30) 1px, transparent 1px),
    linear-gradient(rgba(86,98,150,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(86,98,150,.22) 1px, transparent 1px);
  background-size:100% 100%, 240px 240px, 240px 240px, 24px 24px, 24px 24px; }
.demo-plane.is-gliding { transition:transform .5s var(--ease); will-change:transform; }
.demo-viewport.is-panning .demo-plane { will-change:transform; }

.demo-selection { position:absolute; top:0; left:0; width:24px; height:24px; box-sizing:border-box; z-index:4;
  border:2px solid var(--gold-hi); border-radius:3px; background:rgba(212,175,102,.14);
  box-shadow:0 0 0 9999px rgba(5,6,10,.22), 0 0 10px rgba(212,175,102,.45);
  transition:transform .12s var(--ease), width .12s var(--ease), height .12s var(--ease); pointer-events:none; }
.demo-selection.is-live { transition:none; } /* crisp live rectangle while drag-selecting */

/* placed memory tiles */
.demo-tile { position:absolute; box-sizing:border-box; padding:0; border:1px solid rgba(212,175,102,.55); border-radius:2px;
  background-size:cover; background-position:center; cursor:pointer; overflow:hidden;
  box-shadow:0 0 0 1px rgba(5,6,10,.6), 0 6px 18px -6px rgba(0,0,0,.7); }
.demo-tile:hover { border-color:var(--gold-hi); box-shadow:0 0 0 1px rgba(5,6,10,.6), 0 0 14px rgba(212,175,102,.55); z-index:7; }
.demo-tile:focus-visible { outline:2px solid var(--gold); outline-offset:2px; z-index:7; }
.demo-tile-draw { display:grid; width:100%; height:100%; }
.demo-tile-draw i { display:block; image-rendering:pixelated; } /* keep generated pixel art crisp, never softened */

/* pre-filled reserved demo tiles — present, intentional, slightly recessed under the live selection */
.demo-tile--reserved { z-index:2; border-color:rgba(170,178,214,.32);
  box-shadow:0 0 0 1px rgba(5,6,10,.55), 0 4px 14px -6px rgba(0,0,0,.75); }
.demo-tile--reserved::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(212,175,102,.14); border-radius:2px; }
.demo-tile--brand { display:flex; align-items:center; justify-content:center; }
.demo-tile--brand::before { content:attr(data-mono); color:rgba(245,240,234,.9); font-weight:600;
  font-size:clamp(.7rem,2.2vw,1.4rem); line-height:1; text-shadow:0 1px 4px rgba(0,0,0,.5); }
/* user-created tiles — brighter, lifted above reserved ones */
.demo-tile--mine { z-index:6; border-color:var(--gold-hi);
  box-shadow:0 0 0 2px rgba(212,175,102,.65), 0 0 18px rgba(212,175,102,.5), 0 8px 22px -8px rgba(0,0,0,.8); }

/* controls */
.demo-controls { position:absolute; inset-block-start:.7rem; inset-inline-end:.7rem; display:flex; flex-direction:column; gap:.4rem; z-index:3; }
.demo-ctl { width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center;
  color:var(--text); background:rgba(8,10,16,.82); border:1px solid var(--line); border-radius:.7rem; cursor:pointer;
  backdrop-filter:blur(8px); transition:background .15s, border-color .15s; }
.demo-ctl:hover { background:rgba(20,24,42,.92); border-color:var(--gold); }
.demo-ctl svg { width:1.25rem; height:1.25rem; }

/* minimap */
.demo-minimap { position:absolute; inset-block-end:.7rem; inset-inline-start:.7rem; width:5rem; height:5rem; z-index:3;
  border:1px solid var(--line); border-radius:.5rem; background:rgba(8,10,16,.78);
  background-image:linear-gradient(rgba(40,48,80,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(40,48,80,.6) 1px, transparent 1px);
  background-size:1rem 1rem; backdrop-filter:blur(6px); overflow:hidden; }
.demo-minimap-view { position:absolute; top:0; left:0; border:1.5px solid var(--gold-hi); background:rgba(212,175,102,.18); border-radius:2px; }

.demo-coords { margin-top:.5rem; color:var(--gold-hi); font-size:.84rem; letter-spacing:.01em; min-height:1.2em; }
.demo-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:.35rem; color:var(--faint); font-size:.8rem; }
.demo-legend li { display:inline-flex; align-items:center; gap:.45rem; }
.demo-legend-dot { width:.85rem; height:.85rem; border-radius:3px; }
.demo-legend-dot.is-reserved { background:rgba(170,178,214,.35); box-shadow:inset 0 0 0 1px rgba(212,175,102,.3); }
.demo-legend-dot.is-mine { background:rgba(212,175,102,.18); box-shadow:0 0 0 2px var(--gold-hi); }

/* create panel */
.demo-create { display:grid; gap:.5rem; align-content:start;
  padding:1.1rem 1.1rem 1.2rem; background:var(--glass); border:1px solid var(--line); border-radius:var(--r-lg); }
.demo-field-label { display:block; margin-top:.4rem; color:var(--muted); font-size:.86rem; font-weight:600; }
.demo-create input[type="text"], .demo-create textarea {
  width:100%; min-height:2.9rem; padding:.6rem .85rem; color:var(--text); background:rgba(5,6,10,.55);
  border:1px solid var(--line); border-radius:.7rem; font-family:inherit; font-size:.96rem; resize:vertical; }
.demo-create input[type="text"]:focus-visible, .demo-create textarea:focus-visible { border-color:var(--gold); outline:none; }
.demo-create input[type="file"] { width:100%; color:var(--muted); font-family:inherit; font-size:.85rem; }
.demo-create input[type="file"]::file-selector-button { margin-inline-end:.7rem; padding:.5rem .9rem; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:.6rem; font-family:inherit; cursor:pointer; }

.demo-mode { display:flex; gap:.4rem; padding:.3rem; background:rgba(5,6,10,.5); border:1px solid var(--line); border-radius:.8rem; }
.demo-mode button { flex:1; min-height:2.6rem; color:var(--muted); background:transparent; border:0; border-radius:.6rem;
  font-family:inherit; font-size:.95rem; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.demo-mode button.is-active { color:var(--ink-950); background:linear-gradient(180deg,var(--gold-hi),var(--gold)); }

.demo-image-preview { margin-top:.6rem; height:7rem; border-radius:.7rem; border:1px solid var(--line);
  background-size:cover; background-position:center; background-color:rgba(5,6,10,.5); }

.demo-palette { display:flex; gap:.45rem; margin:.5rem 0 .6rem; }
.demo-swatch { width:2rem; height:2rem; border-radius:.5rem; border:2px solid transparent; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.3); }
.demo-swatch.is-active { border-color:var(--text); }
.demo-swatch[data-color="erase"] { background:repeating-conic-gradient(#2a3150 0 25%, #1a1f33 0 50%) 0 0/1rem 1rem; }
/* drawing pad — JS sizes it to sel.w×sel.h (width/height/grid set inline). direction:ltr so the
   pad's painting order matches the LTR-rendered tile/thumbnail (the page is dir=rtl) → no mirror. */
.demo-pad { direction:ltr; display:grid; gap:2px; width:100%; max-width:15rem; margin-top:.2rem;
  padding:3px; background:rgba(5,6,10,.6); border:1px solid var(--line); border-radius:.6rem; touch-action:none; }
.demo-pad button { padding:0; min-width:0; min-height:0; background:#10131f; border:0; border-radius:2px; cursor:pointer; }
.demo-pad button:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }

.demo-place { width:100%; margin-top:.6rem; }
.demo-status { min-height:1.2em; color:var(--gold-hi); font-size:.9rem; line-height:1.6; }
.demo-status:empty { display:none; }

/* placed-memory card */
.demo-card { margin-top:1.2rem; display:flex; gap:1rem; align-items:center; max-width:34rem;
  padding:1rem 1.2rem; background:var(--glass); border:1px solid rgba(212,175,102,.3); border-radius:var(--r); }
.demo-card-thumb { flex-shrink:0; width:4.2rem; height:4.2rem; border-radius:.6rem; border:1px solid var(--line);
  background-size:cover; background-position:center; background-color:rgba(5,6,10,.5); overflow:hidden; }
.demo-card-thumb .demo-tile-draw { width:100%; height:100%; }
.demo-card-body { min-width:0; }
.demo-card-tag { display:inline-block; margin-bottom:.35rem; padding:.18rem .65rem; font-size:.74rem; font-weight:600; border-radius:1.2rem; }
.demo-card-tag:empty { display:none; }
.demo-card-tag.is-reserved { color:#cdd4f0; background:rgba(170,178,214,.14); border:1px solid rgba(170,178,214,.34); }
.demo-card-tag.is-mine { color:var(--gold-hi); background:rgba(212,175,102,.14); border:1px solid rgba(212,175,102,.36); }
.demo-card-name { color:var(--gold-hi); font-weight:600; }
.demo-card-name:empty { display:none; }
.demo-card-msg { color:var(--text); font-size:.96rem; line-height:1.6; word-break:break-word; }
.demo-card-meta { margin-top:.3rem; color:var(--faint); font-size:.82rem; }

/* ════════ INSPIRED BY — real references, inspiration-only ════════ */
.inspired-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.8rem; }
.insp-card { display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:1.15rem 1.2rem;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--r);
  transition:transform .18s var(--ease), border-color .18s var(--ease); }
.insp-card:hover { transform:translateY(-3px); border-color:rgba(212,175,102,.4); }
.insp-tag { padding:.2rem .65rem; font-size:.72rem; font-weight:600; color:var(--gold-hi);
  background:rgba(212,175,102,.12); border:1px solid rgba(212,175,102,.28); border-radius:1.4rem; }
.insp-name { font-size:1rem; color:var(--text); line-height:1.3; word-break:break-word; }
.insp-card p { color:var(--muted); font-size:.9rem; line-height:1.6; }
/* the "soul" beat — a hand-drawn pixel memory, premium and small */
.inspired-soul { margin-top:1.4rem; display:flex; align-items:center; gap:1.3rem; padding:1.1rem 1.2rem;
  background:linear-gradient(120deg, rgba(212,175,102,.08), rgba(20,24,42,.5)); border:1px solid rgba(212,175,102,.24); border-radius:var(--r-lg); }
.inspired-soul-art { flex-shrink:0; width:13rem; max-width:42%; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--ink-850); box-shadow:0 18px 44px -26px rgba(0,0,0,.8); }
.inspired-soul-art img { width:100%; height:auto; display:block; }
.inspired-soul-art figcaption { padding:.4rem .6rem; text-align:center; color:var(--gold-hi); font-size:.74rem; font-weight:600; border-top:1px solid var(--line); }
.inspired-soul-text { color:var(--text); font-size:1.02rem; line-height:1.7; }
.inspired-note { margin-top:1.4rem; padding:.85rem 1.1rem; color:var(--faint); font-size:.86rem;
  border-inline-start:2px solid rgba(212,175,102,.5); background:rgba(212,175,102,.05); border-radius:0 .6rem .6rem 0; }

/* ── utilities ── */
[hidden] { display:none !important; } /* author display rules (.button, .demo-card) otherwise override the bare [hidden] */

/* ── reveal ── */
[data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--delay,0ms); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* ════════ responsive ════════ */
@media (max-width:880px) {
  .menu-toggle { display:inline-flex; flex-direction:column; gap:5px; width:2.8rem; height:2.8rem; align-items:center; justify-content:center;
    background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:.7rem; cursor:pointer; }
  .menu-toggle span { width:1.2rem; height:2px; background:var(--text); border-radius:2px; transition:.2s var(--ease); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .site-nav { position:fixed; inset:4.4rem .8rem auto; flex-direction:column; align-items:stretch; gap:.3rem; padding:.8rem;
    background:rgba(8,10,16,.96); backdrop-filter:blur(16px); border:1px solid var(--line); border-radius:var(--r);
    opacity:0; visibility:hidden; transform:translateY(-10px); transition:.2s var(--ease); }
  .site-nav.is-open { opacity:1; visibility:visible; transform:none; }
  .site-nav > a { padding:.8rem 1rem; }
  .nav-cta { margin-top:.3rem; text-align:center; }

  .journey-row { grid-template-columns:1fr; }
  .hero h1 { font-size:clamp(2.3rem,9vw,3.4rem); }
  /* mobile/tablet: drop the decorative mosaic, keep the glow centred behind the text */
  .hero-mosaic { display:none; }
  .hero-world { background-image:
      radial-gradient(125% 115% at 50% 36%, rgba(212,175,102,.11), rgba(7,9,18,0) 60%),
      linear-gradient(rgba(212,175,102,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(212,175,102,.07) 1px, transparent 1px),
      linear-gradient(rgba(86,98,150,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(86,98,150,.08) 1px, transparent 1px);
    background-size:100% 100%, 72px 72px, 72px 72px, 18px 18px, 18px 18px; }
  /* fade cleanly into the next section's page background at the bottom */
  .hero-veil { background:linear-gradient(180deg, rgba(5,6,10,.4) 0%, rgba(5,6,10,.12) 28%, rgba(5,6,10,.96) 100%); }
  .demo-grid { grid-template-columns:1fr; }
  /* stacked layout: float the memory card OVER the top of the map (inside .demo-stage),
     so a tapped memory reads right there — not stranded as a section item below the stepper.
     Compact, translucent, dismissed/replaced as you pick another tile. */
  .demo-card { position:absolute; z-index:5; inset:.55rem .55rem auto; margin:0; max-width:none;
    gap:.7rem; padding:.7rem .8rem; align-items:center;
    background:rgba(11,13,24,.86); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    box-shadow:0 12px 30px -12px rgba(0,0,0,.8); }
  .demo-card-thumb { width:3rem; height:3rem; }
  .demo-card-msg { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .demo-controls { z-index:6; } /* zoom buttons stay above the floating card */
  .demo-tools { width:100%; }
  .demo-tool { flex:1; text-align:center; }
}
@media (max-width:520px) {
  .waitlist-row { flex-direction:column; }
  /* tighter section rhythm on phones (~33% less than the 4.5rem floor → ~48px) */
  .section { padding-block:clamp(3rem,9vw,3.6rem); }
  .section-head { margin-bottom:clamp(1.6rem,5vw,2.2rem); }
  /* mobile hero — lighter, tighter, content-driven (no forced 86vh, smaller padding) */
  .hero { min-height:auto; padding-block:clamp(1.8rem,6vh,2.6rem); }
  .hero h1 { font-size:clamp(2rem,8.6vw,2.85rem); line-height:1.12; }
  .eyebrow { margin-bottom:1rem; }
  .hero-lead { margin-top:1rem; font-size:1rem; line-height:1.65; max-width:30rem; }
  .hero-actions { margin-top:1.4rem; gap:.6rem; }
  .hero-actions .button { flex:1 1 0; }              /* equal-width, balanced side-by-side */
  .hero-note { margin-top:.9rem; font-size:.85rem; }
  /* compact 90-day status card */
  .lifespan { flex-direction:column; align-items:stretch; gap:.55rem; text-align:center; margin-top:1.3rem; padding:.8rem 1rem; }
  .lifespan-num { flex-direction:row; gap:.4rem; justify-content:center; align-items:baseline; }
  .lifespan-num b { font-size:1.9rem; }
  .demo-pad { max-width:100%; }
  /* card stays a compact row as a map overlay here (no full-width tall thumbnail) */
  .demo-cta-row { flex-direction:column; }
  .demo-cta-row .button { width:100%; }
  .inspired-soul { flex-direction:column; align-items:stretch; gap:1rem; }
  .inspired-soul-art { width:100%; max-width:18rem; margin-inline:auto; }
}
@media (max-width:340px) {
  /* very small screens: stack the hero CTAs full-width for easy tapping */
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none!important; }
  [data-reveal] { opacity:1; transform:none; transition:none; }
  .demo-selection, .demo-plane.is-gliding { transition:none; }
  html { scroll-behavior:auto; }
}

/* Display / identity typography — Baloo Bhaijaan 2 (SIL OFL 1.1, self-hosted).
   Used only for brand + headings; body text stays on var(--font) (Plex Arabic). */
@font-face {
  font-family:"Baloo Bhaijaan 2";
  src:url("../fonts/baloo-bhaijaan-2/BalooBhaijaan2-VF.ttf") format("truetype");
  font-weight:400 800; font-style:normal; font-display:swap;
}
:root {
  --font-display-ar:"Baloo Bhaijaan 2", var(--font);
}
.brand-wordmark strong,
.hero h1,
.section-head h2,
.journey-copy h2,
.freeze-text h2,
.cta-card h2 {
  font-family:var(--font-display-ar);
  font-weight:500;   /* Medium — lighter display weight (Baloo is variable 400–800) */
}