/* Sharia Halaal Trader – style.css */
:root{--y:#c9a227;--r:#13315c;--r2:#0b2545;--ink:#0d1b2a;--muted:#5c6779;--line:#ece4cf}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Nastaliq Urdu","Noto Naskh Arabic","Geeza Pro",Arial,sans-serif;
  color:var(--ink);min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:
    radial-gradient(circle at 50% 0%,rgba(201,162,39,.25),transparent 50%),
    radial-gradient(circle at 0% 100%,rgba(19,49,92,.6),transparent 55%),
    #0b2545;
  -webkit-font-smoothing:antialiased;
}
.card{
  width:100%;max-width:400px;background:#fffdf7;border-radius:18px;
  padding:0 18px 18px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.band{display:flex;height:4px;margin:0 -18px 16px}
.band i{flex:1}.band i:first-child{background:var(--y)}.band i:last-child{background:var(--r)}
.logo{width:96px;height:96px;margin:0 auto 12px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--y),0 10px 22px rgba(11,37,69,.3)}
.logo{overflow:hidden}
.logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.namaskara{display:inline-block;font-size:13px;font-weight:700;color:#8a6d12;background:#faf3dc;border-radius:99px;padding:4px 12px;margin-bottom:8px}
h1{font-size:25px;font-weight:900;letter-spacing:-.3px;line-height:1.15}
h1 span{color:var(--r)}
.kn{font-size:17px;font-weight:700;color:#8a6d12;margin-top:6px;line-height:1.5}
.sub{color:var(--muted);font-size:14px;margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.tile{background:#fff;border:1px solid var(--line);border-top:3px solid var(--y);border-radius:12px;padding:10px 6px 9px}
.tile .ic{display:block;font-size:22px;line-height:1;margin-bottom:6px}
.tile b{display:block;font-size:12.5px;line-height:1.2;color:var(--r2)}
.tile small{display:block;font-size:11px;color:var(--muted);line-height:1.3;margin-top:2px}
.ur{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Geeza Pro",serif}
.cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:15px 12px;border-radius:12px;
  font-size:clamp(13px,4vw,16px);font-weight:900;color:#fff;text-decoration:none;white-space:nowrap;
  background:linear-gradient(135deg,#1d4e89,var(--r) 50%,var(--r2));
  box-shadow:0 10px 24px rgba(11,37,69,.35),inset 0 -3px 0 rgba(0,0,0,.15);
  -webkit-tap-highlight-color:transparent;
}
.cta svg{width:22px;height:22px;flex:0 0 22px}
.cta.wait{opacity:.7;pointer-events:none}
.cta.ready{animation:g 1.6s infinite}
@keyframes g{50%{transform:scale(1.025);box-shadow:0 10px 32px rgba(11,37,69,.55),inset 0 -3px 0 rgba(0,0,0,.15)}}
.free{margin-top:10px;font-size:12.5px;color:var(--muted)}
.free b{color:#15803d}
hr{border:0;border-top:1px solid var(--line);margin:14px 0 10px}
.disc{font-size:11.5px;color:#8b7f78;line-height:1.55}
.disc b{color:#5b4f48}
.links{margin-top:8px;font-size:12px}
.links a{color:#8b7f78;text-decoration:none}

.modal{position:fixed;inset:0;background:rgba(11,37,69,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;animation:fi .2s ease-out}
.modal[hidden]{display:none}
@keyframes fi{from{opacity:0}to{opacity:1}}
.mbox{position:relative;background:#ffffff;width:100%;max-width:400px;max-height:80vh;overflow-y:auto;border-radius:18px;padding:22px 18px 18px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.4);animation:up .25s ease-out}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.mbox h2{font-size:19px;color:var(--r2);margin-bottom:2px}
.mbox small{color:#8b7f78;font-size:11.5px}
.mbox h3{font-size:14px;margin:14px 0 3px}
.mbox p{font-size:13px;color:#5b4f48;line-height:1.55}
.mbox a{color:var(--r)}
.mclose{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:#f3ece4;color:#5b4f48;font-size:15px;cursor:pointer}
/* --- Join hint popup (CTA click ke baad) --- */
.jh{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;animation:jhf .15s ease-out}
.jh[hidden]{display:none}
@keyframes jhf{from{opacity:0}to{opacity:1}}
.jh-box{position:relative;background:#fff;color:#111827;width:100%;max-width:340px;border-radius:20px;padding:24px 18px 16px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:jhu .2s ease-out}
@keyframes jhu{from{transform:translateY(14px)}to{transform:none}}
.jh-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f5f9;color:#475569;font-size:14px;cursor:pointer}
.jh-ic svg{width:52px;height:52px;display:block;margin:0 auto 10px}
.jh-t{font-size:17px;font-weight:800;line-height:1.35}
.jh-t b{color:#229ED9}
.jh-s{font-size:14px;color:#475569;margin-top:4px;line-height:1.5}
.jh-btn{display:block;margin:14px 0 10px;padding:13px;border-radius:14px;background:#229ED9;color:#fff;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 8px 20px rgba(34,158,217,.35)}
.jh-ur{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Geeza Pro",serif;font-size:15px;margin-top:2px;margin-bottom:8px}
.jh-n{font-size:12px;color:#64748b;display:flex;align-items:center;justify-content:center;gap:6px}
.jh-sp{width:12px;height:12px;border:2px solid #cbd5e1;border-top-color:#229ED9;border-radius:50%;animation:jhs .8s linear infinite}
@keyframes jhs{to{transform:rotate(360deg)}}
@media (max-height:700px){.logo{width:78px;height:78px;margin-bottom:8px}.tile{padding:8px 5px 7px}.tile .ic{font-size:19px;margin-bottom:4px}.band{margin-bottom:12px}.kn{margin-top:4px}hr{margin:10px 0 8px}.free{margin-top:7px}}
@media (max-width:350px){h1{font-size:22px}.tile small{display:none}}