:root {
  --ink: #f7f2e8;
  --navy: #061a2d;
  --blue: #0a4964;
  --gold: #efbd6c;
  --muted: rgba(247,242,232,.66);
  --bg-a: #071a2c;
  --bg-b: #0d4960;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body { margin: 0; color: var(--ink); background: var(--navy); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body.ready .loading { opacity: 0; visibility: hidden; }
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 72% 30%, color-mix(in srgb, var(--bg-b) 85%, white 15%), transparent 42%), linear-gradient(145deg, var(--bg-a), var(--bg-b)); transition: background .15s linear; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; filter: saturate(.95) contrast(1.04); }
.veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(2,13,25,.7) 0%, rgba(2,13,25,.08) 52%, rgba(2,13,25,.28) 100%), linear-gradient(0deg, rgba(2,13,25,.42), transparent 60%); }
.grain { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.topbar { position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 54px; border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.brand { color: white; text-decoration: none; font: 700 13px/1 "Manrope"; letter-spacing: .28em; display: flex; gap: 13px; align-items: center; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 24px var(--gold); }
.arabic { position: absolute; left: 50%; transform: translateX(-50%); font: 700 18px/1 "Noto Kufi Arabic"; }
.sound { border: 0; background: transparent; color: white; display: flex; align-items: center; gap: 4px; padding: 12px; }
.sound i { display: block; width: 2px; height: 11px; background: var(--gold); animation: bars 1s ease-in-out infinite alternate; }
.sound i:nth-child(2) { height: 18px; animation-delay: -.3s; }
.sound i:nth-child(3) { height: 7px; animation-delay: -.55s; }
.sound span { margin-left: 9px; font: 600 10px/1 "Manrope"; letter-spacing: .18em; }
.rail { position: fixed; z-index: 10; right: 45px; top: 50%; transform: translateY(-50%); display: grid; gap: 20px; }
.rail a { color: rgba(255,255,255,.38); text-decoration: none; font: 600 10px/1 "Manrope"; letter-spacing: .12em; display: flex; align-items: center; gap: 11px; }
.rail a::after { content: ""; width: 25px; height: 1px; background: currentColor; transition: width .25s, color .25s; }
.rail a.active { color: var(--gold); }
.rail a.active::after { width: 48px; }
.progress { position: fixed; z-index: 10; left: 0; top: 0; width: 3px; height: 100vh; background: rgba(255,255,255,.08); }
.progress span { display: block; width: 100%; height: 0; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
main { position: relative; z-index: 4; }
section { min-height: 100vh; position: relative; padding: 130px clamp(42px,8vw,150px) 80px; display: flex; align-items: center; }
#home { display: block; padding-top: 22vh; }
.eyebrow,.chapter { color: var(--gold); font: 600 11px/1 "Manrope"; letter-spacing: .3em; margin-bottom: 25px; }
h1,h2 { font-family: "Manrope",sans-serif; margin: 0; letter-spacing: -.07em; line-height: .82; text-transform: uppercase; }
h1 { font-size: clamp(75px,11vw,190px); max-width: 1200px; }
h1 span { display: block; }
h1 span:last-child { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.78); margin-left: clamp(30px,8vw,160px); }
.intro { width: min(430px,70vw); font-size: 15px; line-height: 1.7; color: var(--muted); margin: 42px 0 0 clamp(20px,8vw,160px); }
.scroll-cue { position: absolute; bottom: 55px; left: 54px; display: flex; align-items: center; gap: 16px; color: white; text-decoration: none; }
.scroll-cue b { font: 600 10px/1 "Manrope"; letter-spacing: .2em; }
.scroll-cue i { width: 72px; height: 1px; background: white; position: relative; overflow: hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation:scan 1.8s ease-in-out infinite; }
.copy { width: min(570px,52vw); }
.copy.right { margin-left: auto; }
.copy h2 { font-size: clamp(55px,7vw,120px); }
.copy p { max-width: 450px; color: var(--muted); line-height: 1.75; font-size: 15px; }
.copy.right p { margin-left: 8px; }
.fact { position: absolute; bottom: 74px; display: grid; gap: 5px; padding-left: 16px; border-left: 2px solid var(--gold); }
.fact.left { left: clamp(42px,8vw,150px); }
.fact.right { right: clamp(42px,9vw,175px); text-align: right; padding-left: 0; padding-right: 16px; border-left: 0; border-right: 2px solid var(--gold); }
.fact strong { font: 700 22px/1 "Manrope"; letter-spacing: .08em; }
.fact span { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.closing { position: absolute; right: 8vw; bottom: 8vh; text-align: right; display: grid; }
.closing span { color: var(--gold); font: 600 11px/1 "Manrope"; letter-spacing: .24em; margin-bottom: 11px; }
.closing strong { font: 800 clamp(22px,3vw,48px)/1 "Manrope"; letter-spacing: -.04em; }
.loading { position: fixed; z-index: 50; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; background: #061a2d; transition: opacity .6s, visibility .6s; }
.loading div { width: 170px; height: 2px; background: rgba(255,255,255,.13); overflow: hidden; }
.loading div span { display: block; height: 100%; width: 45%; background: var(--gold); animation:load 1.1s ease-in-out infinite; }
.loading p { font: 600 10px/1 "Manrope"; letter-spacing: .28em; }
@keyframes bars { to { transform: scaleY(.4); opacity: .5; } }
@keyframes scan { 50%,100% { transform: translateX(100%); } }
@keyframes load { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@media (max-width: 720px) {
  .topbar { padding: 0 22px; height: 70px; }
  .arabic,.sound span { display:none; }
  .rail { right: 14px; }
  .rail a span { display:none; }
  .rail a::after { width: 14px; }
  .rail a.active::after { width: 30px; }
  section { padding: 100px 28px 70px; }
  #home { padding-top: 25vh; }
  h1 { font-size: 20vw; }
  h1 span:last-child { margin-left: 0; }
  .intro { margin-left: 0; }
  .copy { width: 90%; }
  .copy.right { margin-left: 0; }
  .fact { display:none; }
  .scroll-cue { left: 28px; bottom: 34px; }
}