:root{
  --blue:#1d63d8;--blue-2:#2f7bf0;--deep:#0b3a9a;--navy:#0a3066;--ink:#071d42;
  --cyan:#12c0e0;--green:#2bd16f;--sand:#f4efe6;--paper:#f6f8fc;--line:rgba(10,48,102,.12);
  --text:#0d2348;--muted:#5a6b8a;
  --kufi:"Noto Kufi Arabic",system-ui,sans-serif;--plex:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --r:22px;--bar-h:64px;--dock-h:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--plex);color:var(--text);background:var(--paper);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:10px}
svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Top bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);display:flex;align-items:center;gap:18px;padding:0 16px;
  background:linear-gradient(180deg,rgba(7,29,66,.55),rgba(7,29,66,0));transition:background .4s,box-shadow .4s}
.bar.solid{background:rgba(10,48,102,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(7,29,66,.25)}
.bar-logo img{height:34px;width:auto}
.bar-nav{display:none;gap:4px;margin-inline-start:auto}
.bar-nav a{color:#fff;font-weight:700;font-size:.95rem;padding:8px 14px;border-radius:999px;transition:background .25s}
.bar-nav a:hover{background:rgba(255,255,255,.14)}
.bar-call{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);font-weight:800;
  font-family:var(--kufi);font-size:.85rem;padding:8px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(7,29,66,.25)}
.bar-call span{direction:ltr}

/* Sound toggles */
.bar-sound{margin-inline-start:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;padding:0}
.bar-sound+.bar-call{margin-inline-start:8px}
.bar-sound .i-on,.sound-on .bar-sound .i-off{display:none}
.sound-on .bar-sound .i-on{display:block}
.sound-on .bar-sound{background:#fff;color:var(--navy)}
.sound-cta{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;border:0;border-radius:999px;padding:10px 18px;background:#fff;color:var(--navy);
  font-family:var(--kufi);font-weight:800;font-size:.9rem;box-shadow:0 8px 0 -2px rgba(7,29,66,.3),0 14px 30px rgba(7,29,66,.3);transform:rotate(-2deg);transition:transform .2s}
.sound-cta:hover{transform:rotate(0) translateY(-2px)}
.sound-cta svg{width:20px;height:20px;color:var(--blue)}
.sound-cta .on,.sound-on .sound-cta .off{display:none}
.sound-on .sound-cta .on{display:inline}
.sound-on .sound-cta{background:var(--green);color:var(--ink)}
.sound-on .sound-cta svg{color:var(--ink)}
.intro .sound-cta+.intro-cue{margin-top:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:14px 26px;
  font-family:var(--kufi);font-weight:800;font-size:1rem;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:#fff;color:var(--navy);box-shadow:0 10px 0 -2px rgba(7,29,66,.35),0 18px 40px rgba(7,29,66,.35)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(10,48,102,.28)}
.btn-navy:hover{background:var(--deep)}
.btn-lg{padding:17px 34px;font-size:1.1rem}

/* ---------- Story / tower ---------- */
.story{position:relative;height:520vh;background:var(--deep)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 18%,#6fb2ff 0%,rgba(111,178,255,0) 60%),linear-gradient(180deg,#1b5fd3 0%,#1d63d8 45%,#164fc0 74%,#0e3fa6 100%)}
.spot{position:absolute;inset:-10% 10% 30%;background:radial-gradient(50% 50% at 50% 30%,rgba(255,255,255,.38),rgba(255,255,255,0) 70%);pointer-events:none}
.floor{position:absolute;inset:auto 0 0;height:22%;background:linear-gradient(180deg,rgba(84,156,255,.0),rgba(84,156,255,.35) 18%,#2a73e6 60%,#1d5fd0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.floor::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 50% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}

.tower{position:absolute;inset:0;pointer-events:none}
.piece,.family{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform;opacity:0;
  filter:drop-shadow(0 18px 18px rgba(4,22,64,.28))}
.family{opacity:1;filter:drop-shadow(0 10px 10px rgba(4,22,64,.3))}
.family img{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);opacity:0;transition:opacity .45s ease}
.family img.on{opacity:1}
.puff{position:absolute;width:160px;height:60px;margin:-30px 0 0 -80px;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));filter:blur(6px);opacity:0}
.puff.go{animation:puff .9s ease-out forwards}
@keyframes puff{0%{opacity:.9;transform:scale(.4,.5)}100%{opacity:0;transform:scale(1.6,1.1) translateY(-18px)}}

.intro{position:absolute;inset:calc(var(--bar-h) + 6vh) 20px auto;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;transition:opacity .5s,transform .5s}
.intro-kicker{margin:0 0 6px;font-weight:700;opacity:.85;letter-spacing:.02em}
.intro h1{margin:0;font-family:var(--kufi);font-weight:900;font-size:clamp(2.6rem,10vw,5.6rem);line-height:1.15;text-shadow:0 8px 30px rgba(4,22,64,.35)}
.intro-cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin:22px 0 0;font-weight:700;font-size:.95rem;opacity:.9}
.intro-cue i{width:2px;height:46px;border-radius:2px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
.intro.out{opacity:0;transform:translateY(-30px);pointer-events:none}

.meter{position:absolute;top:calc(var(--bar-h) + 14px);inset-inline-start:16px;display:grid;gap:2px;color:#fff;opacity:0;transform:translateY(-10px);transition:opacity .4s,transform .4s;
  background:rgba(7,29,66,.32);border:1px solid rgba(255,255,255,.18);padding:10px 16px 12px;border-radius:18px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:140px}
.meter.on{opacity:1;transform:none}
.meter-label{font-size:.75rem;font-weight:700;opacity:.8}
.meter-num{font-family:var(--kufi);font-weight:900;font-size:2rem;line-height:1.1;direction:ltr;text-align:end}
.meter-num b{font-variant-numeric:tabular-nums}
.meter-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}
.meter-bar i{display:block;height:100%;width:var(--fill,0%);background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.meter.pop .meter-num{animation:pop .45s ease}
@keyframes pop{40%{transform:scale(1.18)}}

.cat{position:absolute;top:calc(var(--bar-h) + 14px);inset-inline-end:16px;max-width:min(54vw,330px);color:#fff;text-align:start;opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .35s}
.cat.on{opacity:1;transform:none}
.cat-step{display:inline-block;font-family:var(--kufi);font-weight:800;font-size:.72rem;letter-spacing:.06em;background:var(--green);color:var(--ink);padding:3px 10px;border-radius:999px;direction:ltr}
.cat h2{margin:8px 0 2px;font-family:var(--kufi);font-weight:900;font-size:clamp(1.15rem,4.6vw,2rem);line-height:1.35;text-shadow:0 6px 24px rgba(4,22,64,.35)}
.cat p{margin:0;font-size:.92rem;opacity:.9}
.cat.swap{animation:swap .45s ease}
@keyframes swap{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}

.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.finale{z-index:5;position:absolute;inset:calc(var(--bar-h) + 8px) 16px auto;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
.finale.on{opacity:1;transform:none;pointer-events:auto}
.stage.end .skip{opacity:0;pointer-events:none}
.finale-title{width:min(46vw,250px);height:auto;filter:drop-shadow(0 10px 22px rgba(4,22,64,.35))}
.finale.on .finale-title{animation:stamp .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes stamp{0%{transform:scale(.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.finale-pct{margin:6px 0 10px;font-family:var(--kufi);font-weight:900;font-size:clamp(1.9rem,8.6vw,3.6rem);line-height:1.4;text-shadow:0 10px 34px rgba(4,22,64,.45)}
.finale-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.finale-play{margin-top:12px;border:0;background:none;color:#fff;font-weight:700;font-size:.9rem;text-decoration:underline;text-underline-offset:5px;opacity:.95}

.rail{position:absolute;inset-inline-end:14px;bottom:calc(22% + 8px);margin:0;padding:0;list-style:none;display:none;flex-direction:column;gap:8px}
.rail button{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.7);background:transparent;padding:0;transition:background .3s,transform .3s}
.rail button.on{background:#fff;transform:scale(1.15)}
.skip{transition:opacity .3s;position:absolute;inset-inline-start:16px;bottom:calc(16px + var(--dock-h));color:#fff;font-size:.8rem;font-weight:700;opacity:.8;border-bottom:1px solid rgba(255,255,255,.5)}

/* ---------- Sections ---------- */
.section{padding:72px 16px;max-width:1180px;margin:0 auto}
.sec-head{max-width:720px;margin:0 auto 34px;text-align:center}
.eyebrow{display:inline-block;margin:0 0 10px;font-family:var(--kufi);font-weight:800;font-size:.8rem;color:var(--blue);background:rgba(29,99,216,.1);padding:5px 14px;border-radius:999px}
.eyebrow-light{color:#fff;background:rgba(255,255,255,.16)}
.sec-head h2{margin:0 0 10px;font-family:var(--kufi);font-weight:900;font-size:clamp(1.7rem,5.4vw,2.7rem);line-height:1.35;color:var(--navy)}
.sec-head h2 em{font-style:normal;color:var(--blue)}
.sec-head p{margin:0;color:var(--muted)}
.note{margin:16px 0 0;font-size:.8rem;color:var(--muted)}

/* Catalogue (one PDF) */
.catalog{padding-block:56px}
.cat-pdf{position:relative;display:grid;gap:26px;align-items:center;overflow:hidden;color:#fff;border-radius:28px;padding:30px 20px 34px;
  background:radial-gradient(60% 70% at 15% 20%,#5aa2ff,rgba(90,162,255,0) 60%),linear-gradient(160deg,#1d63d8,#0b3a9a 75%);box-shadow:0 24px 60px rgba(10,48,102,.22)}
.pdf-copy h2{margin:0 0 10px;font-family:var(--kufi);font-weight:900;font-size:clamp(1.5rem,5vw,2.4rem);line-height:1.4}
.pdf-copy h2 em{font-style:normal;color:var(--green)}
.pdf-copy>p{margin:0;opacity:.9;max-width:520px}
.pdf-meta{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pdf-meta li{font-size:.8rem;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:4px 12px;border-radius:999px}
.pdf-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px}
.pdf-ctas .btn{min-width:0;padding:14px 10px;font-size:clamp(.82rem,3.6vw,1rem);white-space:nowrap;gap:8px}
.pdf-ctas .btn svg{flex:none}
.wa-short{display:none}
@media (max-width:340px){.wa-long{display:none}.wa-short{display:inline}}
.pdf-art{order:-1;display:grid;place-items:center;perspective:1100px;padding:6px 0 4px}
.pdf-art[data-pdf]{cursor:pointer}
/* Arabic magazine: spine on the right, pages turn over it toward the reader. */
.pdf-book{position:relative;width:min(38vw,160px);aspect-ratio:480/854;transform:rotateY(-14deg) rotateZ(-1.5deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat-pdf:hover .pdf-book{transform:rotateY(-6deg) rotateZ(0deg) translateY(-4px)}
.pdf-book::before,.pdf-book::after{content:"";position:absolute;inset:0;border-radius:12px 5px 5px 12px;background:#e9eef7;box-shadow:0 10px 24px rgba(4,22,64,.25)}
.pdf-book::before{transform:translate(-9px,8px) translateZ(-2px)}
.pdf-book::after{transform:translate(-4.5px,4px) translateZ(-1px);background:#fff}
.pdf-sheet{position:absolute;inset:0;border-radius:12px 5px 5px 12px;overflow:hidden;background:#1d63d8;transform-origin:right center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset -7px 0 10px -6px rgba(0,0,0,.35),0 22px 40px rgba(4,22,64,.4)}
.pdf-sheet>img{width:100%;height:100%;object-fit:cover}
/* the page darkens as it lifts, like light falling off a turning sheet */
.pdf-sheet::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,22,64,.55),rgba(4,22,64,.1));opacity:0;pointer-events:none}
.pdf-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px 14px;
  background:radial-gradient(70% 38% at 50% 16%,#79b6ff,rgba(121,182,255,0) 70%),linear-gradient(175deg,#2a72e8,#0d42ac)}
.pdf-logo{width:46%;align-self:flex-start}
.pdf-title{width:52%;margin-top:6%;filter:drop-shadow(0 6px 10px rgba(4,22,64,.35))}
.pdf-cover p{margin:0;font-family:var(--kufi);font-weight:800;font-size:.72rem;letter-spacing:.02em;color:#fff}
.pdf-stack{flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.pdf-stack img{filter:drop-shadow(0 6px 6px rgba(4,22,64,.35))}
.pdf-stack img:nth-child(1){width:62%;margin-bottom:-11%;position:relative;z-index:1}
.pdf-stack img:nth-child(2){width:74%}
.pdf-pct{font-family:var(--kufi);font-weight:800;font-size:.6rem;background:var(--green);color:var(--ink);padding:2px 8px;border-radius:999px;white-space:nowrap}
.pdf-sheet--1{z-index:3}.pdf-sheet--2{z-index:2}.pdf-sheet--3{z-index:1}
/* 7s loop, first turn half a second after it shows, so even a fast scroll catches it moving. */
.pdf-book.is-on .pdf-sheet--1{animation:pdf-turn1 7s cubic-bezier(.45,.05,.3,1) infinite}
.pdf-book.is-on .pdf-sheet--1::after{animation:pdf-shade1 7s linear infinite}
.pdf-book.is-on .pdf-sheet--2{animation:pdf-turn2 7s cubic-bezier(.45,.05,.3,1) infinite}
.pdf-book.is-on .pdf-sheet--2::after{animation:pdf-shade2 7s linear infinite}
@keyframes pdf-turn1{0%,7%{transform:rotateY(0)}17%,77%{transform:rotateY(180deg)}84%,100%{transform:rotateY(0)}}
@keyframes pdf-shade1{0%,7%{opacity:0}12%{opacity:1}13%,79%{opacity:0}80%{opacity:1}84%,100%{opacity:0}}
@keyframes pdf-turn2{0%,37%{transform:rotateY(0)}47%,70%{transform:rotateY(180deg)}77%,100%{transform:rotateY(0)}}
@keyframes pdf-shade2{0%,37%{opacity:0}42%{opacity:1}43%,72%{opacity:0}73%{opacity:1}77%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pdf-book.is-on .pdf-sheet,.pdf-book.is-on .pdf-sheet::after,.play-art.is-on *,.play-art.is-on .play-swing::before{animation:none}}

/* Game teaser */
.play{background:radial-gradient(60% 80% at 80% 10%,#4b93ff,rgba(75,147,255,0) 60%),linear-gradient(160deg,#1d63d8,#0b3a9a 70%);color:#fff;overflow:hidden}
.play-inner{max-width:1180px;margin:0 auto;padding:72px 16px;display:grid;gap:30px;align-items:center}
.play h2{margin:0;font-family:var(--kufi);font-weight:900;font-size:clamp(2.1rem,7vw,3.6rem);line-height:1.25}
.play-tag{margin:2px 0 12px;font-family:var(--kufi);font-weight:800;font-size:1.15rem;color:var(--green)}
.play-copy>p{max-width:520px;opacity:.92}
.rewards{list-style:none;margin:20px 0 26px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:200px}
.rewards li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:12px 10px;text-align:center;display:grid}
.rewards b{font-family:var(--kufi);font-weight:900;font-size:1.8rem;line-height:1.1}
.rewards span{font-size:.8rem;opacity:.85}
.rewards em{font-style:normal;font-weight:700;font-size:.8rem;margin-top:6px;color:var(--green)}
.play-art{position:relative;aspect-ratio:420/560;max-width:400px;width:100%;margin:0 auto;cursor:pointer}
/* a soft floor shadow so the tower stands on something */
.play-art::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(3,16,48,.5),rgba(3,16,48,0))}
.play-art>img{position:absolute;filter:drop-shadow(0 12px 12px rgba(4,22,64,.35))}
.play-c{bottom:3%;width:57.4%;left:21.3%}
.play-b{bottom:20.1%;width:52.5%;left:23.75%}
.play-a{bottom:32.9%;width:41%;left:30.2%}
/* the swing: rope + window turn around the hook at the top centre */
.play-swing{position:absolute;top:0;left:0;width:100%;height:28.1%;transform-origin:50% 0;pointer-events:none}
.play-swing::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:2px;height:24.9%;background:rgba(255,255,255,.75);transform-origin:top;border-radius:2px}
.play-swing::after{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(4,22,64,.35)}
.play-swing img{position:absolute;bottom:0;left:37.5%;width:25%;max-width:none;filter:drop-shadow(0 10px 10px rgba(4,22,64,.35))}
.play-plus{position:absolute;top:24%;left:50%;transform:translateX(-50%);font-family:var(--kufi);font-weight:900;font-size:1.5rem;color:var(--green);text-shadow:0 3px 10px rgba(4,22,64,.45);opacity:0;pointer-events:none}
/* the game's own counter: 3 → 4 pieces, bar towards the first code */
.play-hud{position:absolute;top:2%;right:0;display:grid;justify-items:start;gap:4px;font-family:var(--kufi);font-weight:800;font-size:.9rem;line-height:1.2;
  background:rgba(7,29,66,.35);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:8px 12px 9px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.play-hud p{margin:0;display:flex;align-items:baseline;gap:6px}
.play-hud b{position:relative;display:inline-grid;font-size:1.5rem;font-weight:900;line-height:1;}
.play-hud b span{grid-area:1/1}
.play-hud .n4{opacity:0}
.play-bar{display:block;width:96px;height:6px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.play-bar i{display:block;height:100%;width:60%;border-radius:99px;background:var(--green);margin-inline-start:0}
.play-hud small{font-family:var(--plex);font-weight:700;font-size:.68rem;opacity:.85}
/* 5s round, only while on screen */
.play-art.is-on .play-swing{animation:play-swing 5s ease-in-out infinite}
.play-art.is-on .play-swing::before{animation:play-rope 5s ease-in-out infinite}
.play-art.is-on .play-swing img{animation:play-drop 5s infinite}
.play-art.is-on .play-plus{animation:play-plus 5s ease-out infinite}
.play-art.is-on .play-a{animation:play-land 5s infinite}
.play-art.is-on .n3{animation:play-n3 5s infinite}
.play-art.is-on .n4{animation:play-n4 5s infinite}
.play-art.is-on .play-bar i{animation:play-bar 5s infinite}
@keyframes play-swing{0%{transform:rotate(0)}8%{transform:rotate(10deg)}17%{transform:rotate(-9deg)}25%{transform:rotate(6deg)}32%,100%{transform:rotate(0)}}
@keyframes play-rope{0%,32%{transform:scaleY(1);opacity:1}38%{transform:scaleY(0);opacity:0}94%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
@keyframes play-drop{0%{transform:translateY(0);opacity:0}5%,32%{transform:translateY(0);opacity:1;animation-timing-function:cubic-bezier(.55,0,1,.45)}39%{transform:translateY(106%) scale(1.04,.94)}42%{transform:translateY(100%) scale(.98,1.03)}45%,86%{transform:translateY(106%) scale(1);opacity:1}92%,100%{transform:translateY(106%);opacity:0}}
@keyframes play-land{0%,38.5%{transform:translateY(0)}41%{transform:translateY(3%)}45%,100%{transform:translateY(0)}}
@keyframes play-plus{0%,39%{opacity:0;transform:translate(-50%,10px) scale(.6)}43%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}60%{opacity:1;transform:translate(-50%,-22px) scale(1)}70%,100%{opacity:0;transform:translate(-50%,-32px)}}
@keyframes play-n3{0%,39%{opacity:1}40%,94%{opacity:0}96%,100%{opacity:1}}
@keyframes play-n4{0%,39%{opacity:0;transform:scale(1)}40%{opacity:1;transform:scale(1.5)}46%,94%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes play-bar{0%,39%{width:60%}46%,94%{width:80%}100%{width:60%}}

/* Branches */
.br-tools{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:22px}
.chips{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:4px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:700;font-size:.88rem;padding:8px 16px;border-radius:999px;transition:background .2s,color .2s}
.chip[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.br-layout{display:grid;gap:16px}
.map{position:relative;border-radius:var(--r);overflow:hidden;background:radial-gradient(70% 60% at 60% 40%,#174da8,#0a3066);min-height:360px;box-shadow:0 18px 40px rgba(10,48,102,.18)}
.map svg{position:absolute;inset:0;width:100%;height:100%;stroke:none}
.map .land{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.35);stroke-width:1.2;stroke-dasharray:3 4}
.map .net{stroke:rgba(18,192,224,.35);stroke-width:1;fill:none}
.map .dot{fill:var(--cyan);cursor:pointer;transition:r .25s}
.map .ring{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
.map .city{fill:#fff;font-family:var(--kufi);font-weight:800;font-size:13px;paint-order:stroke;stroke:#0a3066;stroke-width:4px;stroke-linejoin:round}
.map .count{fill:var(--ink);font-family:var(--kufi);font-weight:900;font-size:10px}
.map g.on .dot{fill:var(--green)}
.map g.dim{opacity:.35}
.map-cap{position:absolute;bottom:10px;inset-inline-start:14px;color:rgba(255,255,255,.6);font-size:.72rem}
@keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.4);opacity:0}}
.br-col{min-width:0}
.br-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start}
.br{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;background:#fff;border-radius:18px;padding:14px 16px;border:1px solid var(--line);transition:box-shadow .3s,transform .3s}
.br.hl{box-shadow:0 0 0 2px var(--green),0 16px 34px rgba(10,48,102,.16)}
.br h3{margin:0;font-family:var(--kufi);font-weight:800;font-size:1rem;color:var(--navy)}
.br h3 em{font-style:normal;font-size:.7rem;background:var(--green);color:var(--ink);padding:2px 8px;border-radius:999px;vertical-align:2px}
.br p{margin:0;grid-column:1;font-size:.86rem;color:var(--muted);line-height:1.6}
.br .st,.nc-meta li.is-open,.nc-meta li.is-closed{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.br .st{font-size:.8rem}
.is-open{color:#14a552}.is-closed{color:#d4473d}
.br .st::before,.nc-meta .is-open::before,.nc-meta .is-closed::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.9}
.br .dist{grid-column:1;font-size:.78rem;font-weight:700;color:var(--blue)}
.br-acts{grid-row:1/span 4;grid-column:2;display:flex;flex-direction:column;gap:6px}
.br-acts a{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.82rem;padding:9px 12px;border-radius:999px;background:rgba(29,99,216,.1);color:var(--blue);white-space:nowrap}
.br-acts a svg{width:15px;height:15px}
.br-acts a.go{background:var(--navy);color:#fff}
.br-hint{display:none}
.map g.focus .dot{fill:var(--green)}
.map g.focus .city{fill:var(--green)}
.map .dot{transform-box:fill-box;transform-origin:center;transition:transform .3s,fill .3s}
.map g.focus .dot{transform:scale(1.45)}

/* "Your code is ready" and the nearest-branch card */
.code-card{max-width:720px;margin:0 auto 22px;border-radius:24px;padding:20px 22px;text-align:center;color:#fff;background:linear-gradient(150deg,#1d63d8,#0b3a9a)}
.code-card.has-code{background:linear-gradient(150deg,#14a552,#0a7a3d)}
.code-card .cc-tag{display:inline-block;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.18);padding:4px 12px;border-radius:999px}
.code-card h3{margin:10px 0 6px;font-family:var(--kufi);font-weight:900;font-size:1.25rem;line-height:1.5}
.code-card p{margin:0 0 14px;font-size:.9rem;opacity:.92}
/* No code yet: a slim invite, text and button on one row */
.code-card:not(.has-code){display:flex;align-items:center;gap:14px;text-align:start;padding:14px 16px}
.code-card:not(.has-code) .cc-tag{display:none}
.code-card:not(.has-code) h3{margin:0;flex:1;font-size:.95rem;line-height:1.55}
.code-card:not(.has-code) .btn{flex:none;padding:11px 16px;font-size:.9rem}
.code-card .cc-code{display:inline-block;margin:2px 0 10px;font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:1.3rem;letter-spacing:.08em;background:#fff;color:var(--ink);padding:8px 18px;border-radius:14px;border:2px dashed #0a7a3d;opacity:1}
.near-card{max-width:720px;margin:0 auto 18px;background:#fff;border-radius:24px;padding:18px 20px;border:2px solid var(--green);box-shadow:0 18px 40px rgba(10,48,102,.12);animation:up .45s cubic-bezier(.2,.8,.2,1)}
.near-card[hidden]{display:none}
.nc-k{margin:0;font-weight:800;font-size:.85rem;color:#14a552}
.near-card h3{margin:4px 0 8px;font-family:var(--kufi);font-weight:900;font-size:1.3rem;color:var(--navy);line-height:1.45}
.near-card h3 span{font-family:var(--plex);font-weight:600;font-size:.95rem;color:var(--muted)}
.nc-meta{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.86rem;color:var(--muted);font-weight:600}
.nc-acts{display:grid;gap:10px}
.nc-acts .btn{padding:13px 10px;font-size:.95rem;white-space:nowrap;min-width:0}
.nc-acts .btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(10,48,102,.25)}
@keyframes up{from{transform:translateY(18px);opacity:0}}

/* Phones: branch cards become a swipeable row under the map */
@media (max-width:699px){
  .br-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 16px 12px;margin:0 -16px;scrollbar-width:none;overscroll-behavior-x:contain}
  .br-list::-webkit-scrollbar{display:none}
  .br{flex:0 0 84%;scroll-snap-align:center;grid-template-columns:minmax(0,1fr);gap:4px}
  .br-acts{grid-row:auto;grid-column:1;flex-direction:row;margin-top:8px}
  .br-acts a{flex:1}
  .br-hint{display:block;margin:2px 0 0;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted)}
  .branches .map{min-height:300px}
}

/* Insights */
.insights{padding-bottom:90px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{background:#fff;border-radius:var(--r);padding:18px;display:grid;gap:2px;box-shadow:0 1px 0 var(--line),0 12px 30px rgba(10,48,102,.07);min-width:0}
.kpi span{font-size:.82rem;font-weight:700;color:var(--muted)}
.kpi b{font-family:var(--kufi);font-weight:900;font-size:clamp(1.5rem,6vw,2.3rem);color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.35}
.kpi small{font-size:.76rem;color:var(--blue);font-weight:700}
.sources{margin-top:12px;background:var(--navy);color:#fff;border-radius:var(--r);padding:20px;display:grid;gap:12px}
.sources>p{margin:0 0 4px;font-family:var(--kufi);font-weight:800}
.src{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:.88rem}
.src i{height:10px;border-radius:10px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.src i::after{content:"";position:absolute;inset:0;inset-inline-end:auto;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:inherit;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.sources.in .src i::after{width:var(--v)}
.src b{font-family:var(--kufi);text-align:end;direction:ltr}

/* Footer, dock, badge */
.foot{background:var(--ink);color:#fff;text-align:center;padding:48px 16px calc(40px + var(--dock-h))}
.foot img{height:54px;width:auto;margin:0 auto 22px}
.foot-contact{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.foot-contact a{display:grid;background:rgba(255,255,255,.08);border-radius:16px;padding:10px 22px;min-width:150px}
.foot-contact span{font-size:.78rem;opacity:.7}
.foot-contact b{font-family:var(--kufi);font-size:1.25rem;direction:ltr;letter-spacing:.04em}
.foot-note{max-width:520px;margin:22px auto 0;font-size:.8rem;opacity:.6}

.dock{position:fixed;inset:auto 10px calc(10px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;
  background:rgba(10,48,102,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:22px;box-shadow:0 14px 34px rgba(7,29,66,.35)}
.dock a,.dock button{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:#fff;font-size:.72rem;font-weight:700;padding:7px 2px;border-radius:16px}
.dock svg{width:20px;height:20px}
.dock a:active,.dock button:active{background:rgba(255,255,255,.12)}
body{--dock-h:76px}

.toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + 24px);z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:999px;box-shadow:0 12px 30px rgba(7,29,66,.35);transition:opacity .3s,transform .3s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Larger screens ---------- */
/* Phones: finale, category and meter layout. */
@media (max-width:959px){
  .finale{bottom:calc(var(--dock-h) + 14px)}
  .finale-title{width:min(34vw,170px)}
  .finale-ctas{display:none} /* the bottom dock carries catalogue and branches on phones */
  .finale-play{display:none}
  .cat{inset-inline:16px;max-width:none;top:calc(var(--bar-h) + 62px)}
  /* The meter becomes a slim strip above the category, so the floor is left to the family and the tower. */
  .meter{top:calc(var(--bar-h) + 10px);inset-inline:16px;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:999px}
  .meter-label{font-size:.72rem;white-space:nowrap}
  .meter-num{font-size:1.05rem;order:3;min-width:44px}
  .meter-bar{flex:1;height:6px}
}
@media (min-width:700px){
  .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .br-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .map{min-height:520px}
  .br-list{max-height:520px;overflow:auto;padding:2px 4px 2px 2px}
}
@media (min-width:960px){
  :root{--bar-h:76px}
  .bar{padding:0 32px}
  .bar-logo img{height:40px}
  .bar-nav{display:flex}
  .bar-call{margin-inline-start:8px}
  .bar-sound{margin-inline-start:8px}
  body{--dock-h:0px}
  .dock{display:none}
  .intro{inset-inline:7vw auto;width:40vw;text-align:start;top:calc(var(--bar-h) + 18vh)}
  .intro{align-items:flex-start}
  .intro-cue{align-items:flex-start}
  .meter{inset-inline-start:7vw;top:auto;bottom:calc(22% + 24px)}
  .cat{inset-inline-end:auto;inset-inline-start:7vw;top:calc(var(--bar-h) + 16vh);max-width:36vw}
  .cat h2{font-size:clamp(1.8rem,3vw,2.8rem)}
  .cat p{font-size:1.05rem}
  .finale{inset-inline:7vw auto;width:38vw;top:calc(var(--bar-h) + min(9vh,60px));align-items:flex-start;text-align:start}
  .finale-title{width:min(24vw,300px,32vh)}
  .finale-pct{font-size:clamp(1.9rem,min(3.4vw,6.5vh),3.6rem)}
  .finale-ctas{justify-content:flex-start}
  .finale-play{text-align:start}
  .rail{display:flex}
  .skip{inset-inline-start:7vw;bottom:24px}
  .section{padding:110px 32px}
  .play-inner{grid-template-columns:1.1fr .9fr;padding:110px 32px}
  .catalog{padding-block:80px}
  .cat-pdf{grid-template-columns:1.25fr .75fr;padding:48px 56px;gap:40px}
  .pdf-art{order:0}
  .pdf-book{width:220px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}