@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');
:root{--navy:#07162f;--navy2:#0b2146;--blue:#1e60d5;--purple:#7238c9;--gold:#d8af58;--cream:#f6f2e9;--ink:#111b32;--muted:#687087}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--cream)}a{color:inherit;text-decoration:none}.site-header{height:84px;display:flex;align-items:center;padding:0 5vw;gap:36px;background:rgba(7,22,47,.96);color:#fff;position:absolute;z-index:10;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}.brand{margin-right:auto}.logo-slot{font-size:22px;letter-spacing:.26em;font-weight:600;color:#fff}.logo-slot:after{content:"";display:block;width:22px;height:2px;margin-top:5px;background:var(--gold)}nav{display:flex;gap:30px;font-size:13px}nav a{opacity:.7;padding:32px 0 27px;border-bottom:2px solid transparent}nav a:hover,nav a.active{opacity:1;border-color:var(--gold)}.button{display:inline-flex;align-items:center;gap:28px;background:linear-gradient(120deg,var(--blue),var(--purple));padding:16px 24px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;border:0}.button b{color:#f2d588;font-size:18px}.button-small{padding:12px 18px;gap:12px}.menu{display:none}.hero{min-height:760px;padding:170px 8vw 90px;background:radial-gradient(circle at 80% 40%,rgba(44,84,178,.35),transparent 30%),linear-gradient(135deg,#061329 0%,#0a2047 58%,#32185b 100%);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center}.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:64px 64px}.hero-copy{max-width:720px;position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;color:#b9c9e8;display:flex;align-items:center;gap:12px}.eyebrow span{display:inline-block;width:35px;height:1px;background:var(--gold)}h1,h2{font-family:"Playfair Display",serif;font-weight:600;margin:25px 0;line-height:1.03}h1{font-size:clamp(54px,7vw,94px);letter-spacing:-.035em}h1 em,h2 em{font-weight:600;color:#d7b15b}h1 em{display:inline-block}.intro{max-width:580px;font-size:18px;line-height:1.7;color:#c3cee1}.actions{margin-top:42px;display:flex;align-items:center;gap:34px}.text-link{font-size:13px;border-bottom:1px solid rgba(255,255,255,.3);padding:10px 0}.text-link span{color:var(--gold);margin-left:8px}.hero-mark{position:absolute;right:8vw;z-index:2;width:330px;height:330px;display:grid;place-items:center}.halo{position:absolute;border:1px solid rgba(216,175,88,.28);border-radius:50%}.halo-a{inset:0}.halo-b{inset:36px}.halo-c{inset:72px}.light-core{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#f1d27c 0%,#bd8135 15%,#34226e 55%,transparent 70%);box-shadow:0 0 90px #5e48bb}.light-core span{font:600 52px "Playfair Display";color:#f9e7b2}.hero-mark p{position:absolute;bottom:-12px;font-size:10px;letter-spacing:.28em;color:#cdb779;text-transform:uppercase}.scroll{position:absolute;bottom:25px;left:8vw;font-size:9px;letter-spacing:.2em;color:#8696b3;z-index:2;display:flex;align-items:center;gap:12px}.scroll i{width:70px;height:1px;background:#52617b}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:500px;height:500px;background:#1e60d520;left:-250px;bottom:-250px}.orb-two{width:350px;height:350px;background:#7338c930;right:-180px;top:80px}.principles,.programmes{padding:110px 8vw}.eyebrow.dark{color:#686e7c}.principles h2,.programmes h2{font-size:clamp(40px,5vw,62px)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ddd5c6;margin-top:55px}.cards article{background:var(--cream);padding:38px;min-height:300px;position:relative}.cards article>b{color:#9a8b70;font-size:11px}.icon{font-size:32px;color:var(--blue);margin:40px 0 25px}.cards h3{font:600 22px "Playfair Display"}.cards p,.programmes>p:last-child{color:var(--muted);line-height:1.7}.statement{background:linear-gradient(120deg,var(--navy),#15164a);color:#fff;padding:100px 8vw;display:flex;align-items:end;gap:70px}.statement>div{max-width:900px}.statement h2{font-size:clamp(38px,5vw,64px)}.outline{background:transparent;border:1px solid #9f8a5d;white-space:nowrap}.programmes{text-align:center}.programmes .eyebrow{justify-content:center}footer{padding:55px 8vw;background:#050f22;color:#9ba8bd;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:20px}footer .logo-slot{color:#fff}footer a{color:#d9bc74}footer small{text-align:right}.programmes{min-height:400px}
@media(max-width:900px){.site-header{height:72px}.site-header>.button-small{display:none}.menu{display:block;background:none;border:1px solid #5d6980;color:white;padding:8px 12px}nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--navy);padding:20px;flex-direction:column;gap:0}nav.open{display:flex}nav a{padding:14px}.hero{padding-top:130px;min-height:740px}.hero-mark{opacity:.3;right:-120px}.hero-copy{z-index:3}.cards{grid-template-columns:1fr}.statement{display:block}.statement .button{margin-top:20px}footer{grid-template-columns:1fr;text-align:left}footer small{text-align:left}}
.game-hero-button span{font-size:19px}.game-feature{min-height:600px;padding:90px 8vw;display:grid;grid-template-columns:minmax(300px,1fr) minmax(380px,1fr);gap:8vw;align-items:center;background:linear-gradient(135deg,#0a1a39,#18285c 55%,#4a267b);color:#fff;overflow:hidden}.game-feature-art{height:410px;border-radius:50%;position:relative;display:grid;place-items:center;perspective:800px;background:radial-gradient(circle,#7dd9ff 0 17%,#326ad9 18% 32%,#152b61 33% 52%,transparent 53%);filter:drop-shadow(0 28px 25px #0005)}.mini-globe{font-size:145px;filter:drop-shadow(0 22px 8px #07142b88);animation:gameBob 3s ease-in-out infinite}.game-feature-art .float{position:absolute;font-size:58px;filter:drop-shadow(0 16px 7px #0006);animation:gameFloat 3s ease-in-out infinite}.float-one{left:4%;top:15%;animation-delay:-.6s!important}.float-two{right:0;top:33%;animation-delay:-1.4s!important}.float-three{left:18%;bottom:2%;animation-delay:-2.1s!important}.game-feature-art i{position:absolute;right:20%;top:5%;font-style:normal;font-size:42px;transform:rotate(-15deg)}@keyframes gameBob{50%{transform:translateY(-12px) rotate(3deg)}}@keyframes gameFloat{50%{transform:translateY(-16px) scale(1.08)}}.game-feature-copy h2{font-size:clamp(42px,5vw,66px)}.game-feature-copy>p:not(.eyebrow){color:#bdc9df;line-height:1.7;max-width:620px}.game-pills{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}.game-pills b{font-size:11px;font-weight:600;padding:9px 12px;border:1px solid #ffffff30;border-radius:30px;background:#ffffff0d}.game-feature-copy .button{margin-top:8px}.game-feature .eyebrow{color:#cfdaed}@media(max-width:900px){.game-feature{grid-template-columns:1fr;padding:70px 8vw}.game-feature-art{height:330px;max-width:500px;width:100%;margin:auto}.mini-globe{font-size:115px}}
@media(max-width:560px){.hero,.principles,.programmes,.statement,.game-feature{padding-left:24px;padding-right:24px}.hero{min-height:700px}.actions{align-items:flex-start;flex-direction:column;gap:15px}h1{font-size:52px}.hero-mark{display:none}.cards article{min-height:auto}.site-header{padding:0 24px}.game-feature{padding-top:50px;padding-bottom:60px}.game-feature-art{height:260px}.mini-globe{font-size:90px}.game-feature-art .float{font-size:42px}}

.iqbal-feature{padding:100px 8vw;background:#07162f;color:#fff}.iqbal-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:44px}.iqbal-heading h2{font-size:clamp(40px,5vw,66px);margin-bottom:0}.iqbal-heading h2 em{font-family:serif;font-style:normal;display:block;font-size:.65em;margin-top:14px;direction:rtl;text-align:left}.iqbal-heading>p{max-width:490px;color:#aebbd1;line-height:1.7}.recitation{display:grid;grid-template-columns:1.4fr 1fr;min-height:570px;background:#0b1d3b;border:1px solid #ffffff18;box-shadow:0 32px 70px #020914aa;overflow:hidden}.recitation-visual{position:relative;min-height:570px;background-image:linear-gradient(90deg,transparent 65%,#0b1d3b),url('assets/images/allama-iqbal-3d.png');background-size:cover;background-position:center;overflow:hidden}.recitation.playing .recitation-visual{animation:portraitMove 18s ease-in-out infinite alternate}.film-grain{position:absolute;inset:0;opacity:.12;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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.light-dust{position:absolute;inset:0;background:radial-gradient(circle at 28% 30%,#f2cf7f99 0 1px,transparent 2px),radial-gradient(circle at 68% 18%,#fff8 0 1px,transparent 2px);background-size:110px 100px,150px 140px;animation:dust 12s linear infinite}.portrait-label,.ai-note{position:absolute;left:25px;bottom:25px;font-size:9px;letter-spacing:.16em;color:#f0d58e}.ai-note{left:auto;right:20px;color:#9ca9bf;letter-spacing:.08em}.recitation-panel{padding:48px 46px;display:flex;flex-direction:column}.now-playing{display:flex;align-items:center;gap:11px;color:#d5bd7c}.now-playing span{width:7px;height:7px;border-radius:50%;background:#d5bd7c;box-shadow:0 0 12px #d5bd7c}.now-playing small{font-size:9px;letter-spacing:.2em}.now-playing b{margin-left:auto;font-size:10px;letter-spacing:.12em}.verse{margin:auto 0}.urdu{font-family:serif;font-size:clamp(28px,3vw,43px);line-height:1.65;margin:0;color:#fff}.roman{font:italic 20px/1.5 "Playfair Display",serif;color:#dec57e;margin:22px 0 10px}.translation{font-size:16px;line-height:1.65;color:#b9c5d8;margin:0}.recitation-controls{display:flex;align-items:center;gap:25px}.play-recitation,.next-verse{border:0;color:#fff;cursor:pointer}.play-recitation{display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(120deg,var(--blue),var(--purple))}.play-recitation b{font-size:12px}.next-verse{background:none;color:#d7bf7c;font-size:12px}.timeline{height:2px;background:#ffffff17;margin-top:26px}.timeline i{display:block;width:8.33%;height:100%;background:#d5bd7c;transition:width .6s}.audio-note{font-size:10px;color:#72809a;line-height:1.5;margin:13px 0 0}.full-poem{margin-top:24px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}.full-poem summary{padding:22px 0;cursor:pointer;list-style:none;color:#d9c281;font-size:13px;display:flex;justify-content:space-between}.full-poem summary::-webkit-details-marker{display:none}.poem-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:35px;padding:22px 0;border-top:1px solid #ffffff12}.poem-row .urdu{font-size:22px}.poem-row .roman,.poem-row .translation{font-size:14px;margin:0}.poem-row .roman{align-self:center}@keyframes portraitMove{from{background-size:100% auto;background-position:45% center}to{background-size:107% auto;background-position:52% center}}@keyframes dust{to{transform:translateY(-100px)}}
@media(max-width:900px){.iqbal-heading{display:block}.recitation{grid-template-columns:1fr}.recitation-visual{min-height:440px;background-image:linear-gradient(0deg,#0b1d3b,transparent 35%),url('assets/images/allama-iqbal-3d.png')}.recitation-panel{min-height:480px}.poem-row{grid-template-columns:1fr}.poem-row .urdu{text-align:right}.iqbal-heading h2 em{text-align:left}}
@media(max-width:560px){.iqbal-feature{padding:70px 24px}.recitation-visual{min-height:330px;background-position:38% center}.recitation-panel{padding:32px 24px}.iqbal-heading h2 em{font-size:.58em}.portrait-label{left:14px;bottom:14px}.ai-note{right:14px;bottom:35px}.recitation-controls{align-items:flex-start;flex-direction:column;gap:16px}}

.full-verse{overflow:auto;max-height:410px;padding-right:8px;margin:28px 0}.full-verse .urdu{font-size:clamp(19px,1.65vw,27px);line-height:1.95}.full-poem[open] #poem-list{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:8px 0 35px}.poem-column h3{font:600 20px "Playfair Display",serif;color:#d9c281;margin:0 0 22px}.poem-column p{margin:0 0 12px;font-size:14px}.recitation.playing .now-playing span{animation:recitePulse 1.2s ease-in-out infinite}.recitation.playing .film-grain{animation:grainShift .35s steps(2) infinite}@keyframes recitePulse{50%{transform:scale(1.8);opacity:.45}}@keyframes grainShift{50%{transform:translate(1px,-1px)}}
@media(max-width:700px){.full-poem[open] #poem-list{grid-template-columns:1fr;gap:30px}.full-verse{max-height:460px}.full-verse .urdu{font-size:20px}}
