@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&family=Inter:wght@400;600;700;800&display=swap');
:root{--bg:#f3f8f6;--paper:#fff;--green:#064e3b;--green2:#087052;--gold:#d29b20;--gold2:#f1c75b;--ink:#17352d;--muted:#71827d;--line:#dce9e4;--shadow:0 18px 45px rgba(8,55,42,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 10% 10%,#dff5ed,transparent 30rem),linear-gradient(135deg,#f9fcfb,#e8f0ed);color:var(--ink);font-family:Inter,system-ui,sans-serif}
.site{min-height:100vh}.hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#032f24,#07543f 55%,#092f27);color:#fff;padding:14px 16px 42px;box-shadow:0 18px 45px rgba(0,40,28,.22)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(3px);pointer-events:none}.orb1{width:300px;height:300px;right:-100px;top:-150px;background:rgba(241,199,91,.13)}.orb2{width:230px;height:230px;left:-110px;bottom:-140px;background:rgba(54,220,166,.10)}
.nav{position:relative;z-index:2;width:min(1160px,100%);margin:auto;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:10px;align-items:center}.brand-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(241,199,91,.4);border-radius:15px;color:#f3cc67;font:700 22px Amiri,serif;background:rgba(255,255,255,.06)}.brand b{display:block;font-size:16px}.brand small{display:block;color:#a9cfc3;font-size:8px;letter-spacing:1.4px;margin-top:2px}.theme-btn{width:40px;height:40px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:white;border-radius:13px}
.hero-content{position:relative;z-index:1;text-align:center;width:min(800px,100%);margin:45px auto 0}.badge{display:inline-block;padding:7px 12px;border:1px solid rgba(241,199,91,.28);border-radius:999px;color:#f2cd70;font-size:9px;letter-spacing:1.5px;background:rgba(241,199,91,.07)}h1{font:700 clamp(48px,9vw,78px)/1.15 Amiri,serif;color:#f3cd6c;margin:15px 0 0;text-shadow:0 5px 25px rgba(0,0,0,.2)}.hero-content p{font:700 22px/2.1 "Noto Nastaliq Urdu",serif;margin:0;color:#edf9f5}.hero-content p span{font:400 11px Inter,sans-serif;color:#a9ccc1;letter-spacing:1px}
.search{width:min(680px,100%);height:58px;margin:22px auto 0;background:#fff;border:2px solid transparent;border-radius:18px;display:flex;align-items:center;padding:0 13px;box-shadow:0 18px 40px rgba(0,0,0,.18)}.search:focus-within{border-color:#e6b83e}.search span{font-size:25px;color:#bb8b25}.search input{direction:rtl;flex:1;border:0;outline:0;color:#18382f;font:16px "Noto Nastaliq Urdu",serif;padding:3px 10px}.search input::placeholder{color:#9aa9a4}.search button{border:0;background:none;color:#91a09b;font-size:23px}.hero-stats{display:flex;justify-content:center;gap:8px;margin-top:18px}.hero-stats span{min-width:92px;padding:8px 13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.055)}.hero-stats b{display:block;color:#f3ce70;font-size:15px}.hero-stats small{font-size:8px;color:#a8c8bf;letter-spacing:1px}
main{width:min(1160px,100%);margin:auto;padding:35px 16px}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.section-label{font-size:9px;letter-spacing:2px;color:#9b731b;font-weight:800}.intro h2{font:700 32px "Noto Nastaliq Urdu",serif;margin:4px 0 0;color:#064e3b}.intro p{max-width:480px;text-align:right;color:var(--muted);font:16px/2 "Noto Nastaliq Urdu",serif}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{position:relative;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:22px;padding:18px 15px;text-align:center;box-shadow:0 7px 25px rgba(10,60,45,.06);transition:.22s}.card:before{content:"";position:absolute;top:0;right:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#e3b43e,transparent)}.card:hover{transform:translateY(-5px);border-color:#d7ad45;box-shadow:var(--shadow)}.num{position:absolute;top:10px;left:11px;color:#a77b19;font:800 9px Inter;background:#fff8df;border-radius:8px;padding:5px 6px}.arabic{font:700 35px/1.4 Amiri,serif;color:#07583f;margin-top:10px}.urdu-name{font:700 23px/2.1 "Noto Nastaliq Urdu",serif;color:#bf8b17;margin-top:2px}.meaning{border-top:1px solid #e7eeeb;margin-top:6px;padding-top:8px;color:#71817c;font:400 16px/2 "Noto Nastaliq Urdu",serif}.copy{position:absolute;bottom:9px;left:9px;border:0;background:transparent;color:#9caeaa;font-size:11px;opacity:0}.card:hover .copy{opacity:1}.empty{text-align:center;padding:70px 20px;color:#72837e}.empty div{font-size:40px;color:#c39227}.empty h3{font:700 25px "Noto Nastaliq Urdu";margin:7px 0}.empty p{font:15px "Noto Nastaliq Urdu"}
footer{background:#05261e;color:#d7e9e2;padding:35px 16px 18px;text-align:center;border-top:3px solid #c49425}.ayah{font:18px/2.2 "Noto Nastaliq Urdu",serif;color:#dcebe6}.ayah span{display:block;color:#9bb9b0;font:10px Inter;margin-top:4px}.whatsapp{display:inline-flex;margin:20px 0;padding:11px 22px;border-radius:999px;background:#25d366;color:white;text-decoration:none;gap:8px;align-items:center;box-shadow:0 12px 25px rgba(37,211,102,.2)}.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:15px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;color:#78978e;font-size:9px}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#45d9a9;margin-left:5px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:#0a3b2e;color:#fff;padding:10px 15px;border-radius:12px;font-size:11px;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
body.dark{--bg:#071a15;--paper:#0d2820;--green:#54d1ad;--ink:#edf8f4;--muted:#9ab0a8;--line:rgba(255,255,255,.09);background:#061710;color:var(--ink)}body.dark .card{background:linear-gradient(145deg,#102d24,#0b211a)}body.dark .intro h2{color:#77d8bc}body.dark .search{background:#edf5f2}body.dark main{background:transparent}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.hero{padding-bottom:30px}.hero-content{margin-top:32px}.hero-content p{font-size:19px}.intro{display:block}.intro p{text-align:right;margin-top:8px}.grid{grid-template-columns:repeat(2,1fr);gap:9px}.card{padding:14px 9px;border-radius:17px}.arabic{font-size:29px}.urdu-name{font-size:19px}.meaning{font-size:14px}.copy{opacity:1}.footer-bottom{gap:10px}}@media(max-width:390px){.grid{grid-template-columns:1fr}.hero-stats span{min-width:75px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}