:root{
  --ink:#101321; --ink-2:#2A2F45; --muted:#5D6478; --line:#E7E5EF;
  --paper:#F6F5F2; --paper-2:#FBFAF8; --card:#FFFFFF;
  --accent:#4B37E0; --accent-2:#6D4AFF; --coral:#FF7A59; --mint:#0FA97F;
  --green:#0FA97F; --red:#E0453F;
  --r:20px; --wrap:1200px;
  --ff:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fh:'Space Grotesk','Inter',system-ui,sans-serif;
  --shadow:0 14px 40px rgba(16,19,33,.07);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);font-size:16px;line-height:1.65;color:var(--ink);
  background:
    radial-gradient(60% 42% at 82% -6%,rgba(109,74,255,.14),transparent 62%),
    radial-gradient(42% 34% at 8% 2%,rgba(255,122,89,.10),transparent 68%),
    var(--paper);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.028em;font-family:var(--fh)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.white{color:var(--ink)}.muted{color:var(--muted)}.small{font-size:13px}
.center{text-align:center}.w100{width:100%}
.h2{font-size:clamp(26px,3.4vw,42px);font-weight:600;margin-bottom:14px;color:var(--ink)}
.lead{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin-bottom:38px}
.sec{padding:clamp(56px,7vw,104px) 0;position:relative}
.br-lg{display:inline}

/* buttons */
.btn-solid{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;
  font-weight:600;padding:13px 26px;border-radius:12px;transition:.22s;
  box-shadow:0 10px 24px rgba(75,55,224,.28)}
.btn-solid:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 16px 32px rgba(75,55,224,.34)}
.btn-solid.lg{padding:16px 32px;font-size:17px}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:12px;
  border:1px solid #D9D6E4;background:#fff;color:var(--ink);font-weight:500;transition:.22s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 8px 20px rgba(75,55,224,.12)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:12px;
  border:1.5px solid var(--accent);color:var(--accent);background:#fff;font-weight:600;transition:.22s}
.btn-outline:hover{background:var(--accent);color:#fff}
.chev{font-style:normal;opacity:.8}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:60;transition:.28s;background:transparent}
.hdr.solid{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 6px 26px rgba(16,19,33,.06)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:76px}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:18px}
.burger{display:flex;flex-direction:column;gap:4px;padding:6px}
.burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.burger:hover span:nth-child(2){opacity:.45}
.lang{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:13px;font-weight:500}
.flag{width:22px;height:15px;border-radius:2px}
.chat{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:14px}
.chat svg{width:17px;height:17px;color:var(--accent)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:20px;
  font-family:var(--fh);letter-spacing:-.03em}
.mark{width:26px;height:29px;color:var(--accent)}
.wordmark sup{font-size:.5em;opacity:.5}
.login{font-size:15px;color:var(--ink-2);font-weight:500}
.login:hover{color:var(--accent)}

/* drawer */
.drawer{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;z-index:90;background:#fff;
  border-right:1px solid var(--line);transform:translateX(-102%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:22px;
  box-shadow:24px 0 60px rgba(16,19,33,.12)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.drawer ul{display:grid;gap:4px;flex:1}
.drawer ul a{display:block;padding:12px 14px;border-radius:10px;color:var(--ink-2);font-size:15px}
.drawer ul a:hover{background:#F0EEFA;color:var(--accent)}
.drawer-foot{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.x{font-size:28px;line-height:1;color:var(--ink-2)}
.scrim{position:fixed;inset:0;z-index:80;background:rgba(16,19,33,.42);backdrop-filter:blur(3px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(76px + clamp(34px,5vw,64px)) 0 clamp(50px,6vw,90px);overflow:hidden}
.hero-glow{position:absolute;inset:-24% -12% auto;height:126%;pointer-events:none;
  background:radial-gradient(46% 46% at 70% 30%,rgba(109,74,255,.16),transparent 64%),
             radial-gradient(38% 38% at 90% 76%,rgba(255,122,89,.12),transparent 70%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;
  min-height:min(78vh,660px)}
.hero-copy{max-width:600px}
h1{font-size:clamp(38px,5.4vw,74px);font-weight:700;line-height:1.04;letter-spacing:-.04em;color:var(--ink)}
.blue{background:linear-gradient(96deg,#4B37E0,#6D4AFF 45%,#FF7A59 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--muted);font-size:clamp(15px,1.55vw,19px);margin:24px 0 28px;max-width:470px}
.trust-row{display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}
.chips{display:flex}
.chip{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:15px;font-weight:700;color:#fff;margin-left:-8px;border:2.5px solid var(--paper);
  box-shadow:0 6px 16px rgba(16,19,33,.16)}
.chip:first-child{margin-left:0}
.chip.fb{background:#1877F2}.chip.mc{background:#DA291C}.chip.ts{background:#E82127}
.chip.gg{background:#fff;color:#4285F4;border-color:#E7E5EF}.chip.ap{background:#111}
.chip.ap::after{content:"";width:14px;height:16px;background:#fff;
  clip-path:polygon(50% 0,72% 22%,58% 34%,58% 100%,42% 100%,42% 34%,28% 22%)}
.pill{font-size:13px;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--ink-2);font-weight:500;box-shadow:0 4px 14px rgba(16,19,33,.05)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* collage */
.hero-art{position:relative;height:min(92vw,560px);perspective:1400px}
.stage{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s ease-out}
.phone{position:absolute;left:44%;top:50%;width:250px;height:500px;margin:-250px 0 0 -125px;
  transform:rotate(-7deg) translateZ(40px);z-index:3}
.phone-body{width:100%;height:100%;border-radius:34px;background:linear-gradient(160deg,#252A3D,#12151F 62%);
  border:1px solid rgba(16,19,33,.14);padding:11px;position:relative;overflow:hidden;
  box-shadow:0 42px 80px rgba(16,19,33,.30),0 8px 24px rgba(16,19,33,.14)}
.notch{position:absolute;left:50%;top:9px;width:74px;height:16px;margin-left:-37px;border-radius:9px;background:#05070A;z-index:2}
.screen{height:100%;border-radius:26px;background:linear-gradient(175deg,#181C2B,#0E1119);padding:26px 14px 14px;
  display:flex;flex-direction:column;gap:10px;overflow:hidden}
.s-top{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.bal{font-size:15px;font-weight:700;color:#fff}
.dep{background:linear-gradient(100deg,#6D4AFF,#FF7A59);color:#fff;font-size:10px;font-weight:700;padding:5px 11px;border-radius:7px}
.s-card{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.08);
  border-radius:9px;padding:7px 10px;font-size:10px;color:#C9D2E2}
.s-card b{font-size:11px;color:#fff}
.s-chart{width:100%;height:158px;margin-top:2px}
.s-rows{display:grid;gap:7px;margin-top:auto}
.s-rows span{height:8px;border-radius:5px;background:rgba(255,255,255,.09)}
.s-rows span:nth-child(2){width:76%}.s-rows span:nth-child(3){width:54%}
.screen{justify-content:flex-start}

.cats{position:absolute;left:-6%;top:29%;display:grid;gap:10px;z-index:4}
.cat{padding:10px 18px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(140deg,#6D4AFF,#4B37E0);
  box-shadow:0 14px 28px rgba(75,55,224,.30),inset 0 1px 0 rgba(255,255,255,.3);
  transform:rotate(-7deg);transition:.3s}
.cat:nth-child(2){margin-left:12px}.cat:nth-child(3){margin-left:24px}.cat:nth-child(4){margin-left:12px}
.cat:nth-child(3){background:linear-gradient(140deg,#FF8A6A,#E85F3C);
  box-shadow:0 14px 28px rgba(232,95,60,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.cat:hover{transform:rotate(-7deg) translateX(5px)}

.assetlist{position:absolute;right:-9%;top:8%;width:232px;z-index:4;padding:14px;border-radius:18px;
  background:#fff;border:1px solid var(--line);box-shadow:0 26px 60px rgba(16,19,33,.14);
  transform:rotate(2deg)}
.al-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.al-head b{font-size:13.5px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.al-head i{font-style:normal;color:#9AA0B4;font-size:15px;margin-right:5px}
.al-bar{display:flex;gap:8px;margin-bottom:11px}
.sel{font-size:10.5px;color:var(--ink-2);background:#F2F1F7;border-radius:7px;padding:5px 9px;display:flex;gap:5px}
.sel em{font-style:normal;opacity:.5}
.srch{flex:1;display:flex;align-items:center;gap:5px;font-size:10.5px;color:#8B92A6;
  background:#F7F6FA;border:1px solid #EFEDF5;border-radius:7px;padding:5px 9px}
.srch i{width:8px;height:8px;border:1.5px solid #A6ADC0;border-radius:50%;position:relative}
.srch i::after{content:"";position:absolute;width:4px;height:1.5px;background:#A6ADC0;
  bottom:-2px;right:-3px;transform:rotate(45deg)}
.al-rows{display:grid;gap:9px}
.al-rows li{display:grid;grid-template-columns:20px 1fr 46px 26px;align-items:center;gap:8px;font-size:11.5px}
.ai{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:8px;font-weight:700;color:#fff}
.ai.ts{background:#E82127}.ai.ap{background:#F4F6FA;color:#0A0C11}.ai.ibm{background:#0F62FE;font-size:6.5px}
.ai.gg{background:#fff;color:#4285F4;border:1px solid #E7E5EF}.ai.nf{background:#E50914}.ai.fb{background:#1877F2}
.ai.ap::after{content:"";width:9px;height:11px;background:#0A0C11;
  clip-path:polygon(50% 0,74% 24%,58% 36%,58% 100%,42% 100%,42% 36%,26% 24%)}
.nm{color:var(--ink);font-weight:500}
.chg.dn{color:var(--red);font-weight:600;text-align:right}
.chg.up{color:var(--green);font-weight:600;text-align:right}
.ring{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:8px;color:var(--ink-2);
  background:conic-gradient(var(--accent) calc(var(--p)*1%),#EDEBF4 0)}
.ring em{width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal}
.fl{position:absolute;display:grid;place-items:center;border-radius:14px;background:#fff;border:1px solid var(--line);
  color:#111;font-style:normal;font-weight:700;box-shadow:0 16px 34px rgba(16,19,33,.16);animation:float 6s ease-in-out infinite}
.fl svg{width:22px;height:24px}
.fl.t1{width:42px;height:42px;left:6%;top:8%}
.fl.t2{display:none}
.fl.t3{width:36px;height:36px;left:-3%;bottom:27%;background:#E50914;color:#fff;border-color:transparent;animation-delay:1.6s}
.fl.t4{width:34px;height:34px;right:-1%;bottom:13%;color:#4B37E0;animation-delay:2.4s}
.fl.t5{width:34px;height:34px;left:17%;bottom:1%;background:#1877F2;color:#fff;border-color:transparent;animation-delay:3.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- ticker ---------- */
.ticker{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0}
.tk-track{display:flex;gap:38px;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;color:#6B7288}
.tk b{color:var(--ink);font-weight:600}
.tk .u{color:var(--green);font-weight:600}.tk .d{color:var(--red);font-weight:600}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:.26s;box-shadow:0 2px 10px rgba(16,19,33,.04)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#D9D3F7}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

/* devices */
.devices{background:var(--paper-2)}
.dev{padding:32px 22px;text-align:center}
.dev .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin:0 auto 16px;
  background:#F1EEFE;border:1px solid #DFD8FB;color:var(--accent);font-size:22px;font-weight:700;font-family:var(--fh)}
.dev h3{font-size:17px;margin-bottom:5px;font-weight:600}
.dev p{color:var(--muted);font-size:14px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{position:relative;padding:30px 26px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:.28s;box-shadow:0 2px 10px rgba(16,19,33,.04)}
.step:hover{border-color:#D9D3F7;box-shadow:var(--shadow);transform:translateY(-3px)}
.num{position:absolute;top:-16px;left:24px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,#6D4AFF,#4B37E0);color:#fff;font-weight:700;font-family:var(--fh);
  box-shadow:0 12px 24px rgba(75,55,224,.32)}
.step h3{font-size:19px;margin:14px 0 8px;font-weight:600}
.step p{color:var(--muted);font-size:14.5px}

/* trusted */
.trusted-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center}
.award{display:flex;gap:18px;align-items:center;padding:26px;border-radius:var(--r);
  background:linear-gradient(150deg,#F1EEFE,#FFFFFF 70%);border:1px solid #DED7FB;
  box-shadow:0 18px 44px rgba(75,55,224,.10)}
.award-ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:#fff;color:#F2A03D;font-size:22px;box-shadow:0 6px 16px rgba(16,19,33,.10)}
.award h3{font-size:16px;margin-bottom:3px;font-weight:600}
.award p{color:var(--ink-2);font-size:14px}

/* platform */
.platform{background:var(--paper-2);overflow:hidden}
.platform .wrap{position:relative;z-index:2}
.dotmap{position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(rgba(75,55,224,.22) 1px,transparent 1px);background-size:10px 10px;
  mask-image:radial-gradient(56% 60% at 50% 62%,#000 22%,transparent 76%);
  -webkit-mask-image:radial-gradient(56% 60% at 50% 62%,#000 22%,transparent 76%)}
.stats{margin-bottom:26px}
.stat{text-align:center;padding:34px 18px}
.stat b{display:block;font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(96deg,#4B37E0,#6D4AFF 50%,#FF7A59);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-family:var(--fh)}
.stat p{color:var(--muted);font-size:14px}
.users-ico{color:var(--accent);font-size:.7em;vertical-align:middle;margin-right:8px}

/* features */
.feat .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:#F4F1FE;border:1px solid #E3DCFC;color:var(--accent);font-size:18px;font-weight:700;font-family:var(--fh)}
.feat h3{font-size:17px;margin-bottom:8px;font-weight:600}
.feat p{color:var(--muted);font-size:14.5px}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{display:flex;flex-direction:column;padding:32px 26px;position:relative}
.tier h3{font-size:19px;margin-bottom:6px;font-weight:600}
.price{font-size:34px;font-weight:700;color:var(--ink);margin-bottom:20px;font-family:var(--fh)}
.price span{font-size:12px;font-weight:400;color:var(--muted);margin-left:6px;font-family:var(--ff)}
.tier ul{display:grid;gap:11px;margin-bottom:26px;flex:1}
.tier li{position:relative;padding-left:26px;font-size:14px;color:var(--ink-2)}
.tier li::before{content:"✓";position:absolute;left:0;color:var(--mint);font-weight:700}
.tier.pop{border:2px solid #CFC5FB;background:linear-gradient(170deg,#F7F4FF,#FFFFFF 60%);
  box-shadow:0 24px 56px rgba(75,55,224,.16);transform:translateY(-8px)}
.tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(100deg,#6D4AFF,#FF7A59);color:#fff;font-size:11px;font-weight:700;
  padding:5px 14px;border-radius:999px;white-space:nowrap;letter-spacing:.03em}

/* islamic + pays */
.islamic{padding-top:0}
.islamic-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:30px 34px;border-radius:var(--r);background:linear-gradient(120deg,#EAF8F3,#FFFFFF 72%);
  border:1px solid #CBEADF;box-shadow:0 10px 30px rgba(15,169,127,.08)}
.islamic h3{font-size:20px;margin-bottom:6px;font-weight:600;color:var(--ink)}
.islamic p{color:var(--muted);font-size:14.5px;max-width:560px}
.pays{padding-top:0}
.pay-marquee{overflow:hidden;margin-top:22px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pay-track{display:flex;gap:14px;width:max-content;animation:slide 34s linear infinite}
.pay{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);padding:12px 22px;
  border-radius:12px;border:1px solid var(--line);background:#fff;white-space:nowrap;
  box-shadow:0 2px 8px rgba(16,19,33,.04)}

/* quotes */
.quotes{background:var(--paper-2)}
.quote{display:flex;flex-direction:column;gap:14px}
.stars{color:#F2A03D;letter-spacing:2px;font-size:13px}
.quote p{color:var(--ink-2);font-size:14.5px;font-style:italic;flex:1}
.quote footer{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--line)}
.quote footer i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-weight:700;font-size:13px;background:#F1EEFE;color:var(--accent);font-family:var(--fh)}
.quote footer b{display:block;font-size:14px}
.quote footer span{font-size:12px;color:var(--muted)}

/* faq */
.acc{display:grid;gap:12px}
.acc-item{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;transition:.25s;
  box-shadow:0 2px 8px rgba(16,19,33,.03)}
.acc-item.open{border-color:#CFC5FB;box-shadow:0 12px 30px rgba(75,55,224,.10)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;
  padding:19px 22px;font-size:15.5px;font-weight:600;color:var(--ink);font-family:var(--fh)}
.acc-q i{font-style:normal;font-size:20px;color:var(--accent);transition:.25s}
.acc-item.open .acc-q i{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.acc-a p{padding:0 22px 20px;color:var(--muted);font-size:14.5px}
.acc-a a{color:var(--accent)}

/* cta */
.cta-band{padding:clamp(56px,7vw,100px) 0;position:relative;overflow:hidden;
  background:radial-gradient(62% 100% at 50% 0%,rgba(109,74,255,.14),transparent 72%)}
.cta-in{text-align:center;max-width:680px}
.cta-in h2{font-size:clamp(26px,3.6vw,44px);font-weight:700;margin-bottom:14px;color:var(--ink)}
.cta-in p{color:var(--muted);margin-bottom:30px}
.cta-in .hero-cta{justify-content:center}

/* footer (ink) */
.ft{background:#0F1220;color:#C9CFE0;padding:56px 0 26px}
.ft .brand{color:#fff}
.ft-brand p{margin:14px 0 18px;font-size:14px;max-width:280px;color:#98A0B8}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#C9CFE0;transition:.22s}
.socials a:hover{background:linear-gradient(100deg,#6D4AFF,#FF7A59);color:#fff;border-color:transparent}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:30px}
.ft-col h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:14px;
  font-family:var(--ff);font-weight:600}
.ft-col a{display:block;font-size:14px;color:#98A0B8;padding:5px 0;transition:.2s}
.ft-col a:hover{color:#fff}
.ft-legal{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:10px}
.ft .muted{color:#8A93AB}
.warn{font-size:12.5px;color:#D9C3C1;background:rgba(224,69,63,.14);border-left:3px solid #E0453F;
  padding:12px 16px;border-radius:10px}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(16,19,33,.42);backdrop-filter:blur(6px)}
.modal[hidden]{display:none !important}
.scrim[hidden]{display:none !important}
.modal-card{position:relative;width:100%;max-width:420px;background:#fff;border:1px solid var(--line);
  border-radius:22px;padding:32px;box-shadow:0 40px 90px rgba(16,19,33,.28);animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;font-size:24px;line-height:1;color:#8B92A6;transition:.2s}
.modal-x:hover{background:#F2F1F7;color:var(--ink)}
.modal-card h3{font-size:21px;margin-bottom:6px;font-weight:700;color:var(--ink)}
#regForm{display:grid;gap:14px;margin-top:20px}
.modal-card label{display:grid;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500}
.modal-card input[type=text],.modal-card input[type=email],.modal-card input[type=password]{
  width:100%;padding:12px 14px;border-radius:11px;background:#F8F7FB;border:1px solid #E7E5EF;
  color:var(--ink);font-family:inherit;font-size:14px;outline:none;transition:.2s}
.modal-card input::placeholder{color:#A2A8BA}
.modal-card input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(75,55,224,.12)}
.modal-card input.bad{border-color:var(--red);background:#FFF7F6}
.err{color:#D6453F;font-size:11.5px;font-style:normal}
.check{grid-template-columns:auto 1fr!important;align-items:start;gap:10px!important;font-size:12.5px!important}
.check input[type=checkbox]{width:16px;height:16px;margin:0;border-radius:4px;appearance:none;
  border:1.5px solid #C9CDDA;background:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s}
.check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.check input[type=checkbox]:checked::after{content:"✓";color:#fff;font-size:11px;line-height:1}
.check span{line-height:1.45;color:var(--muted)}
.meter{height:4px;border-radius:3px;background:#EDEBF4;overflow:hidden;margin-top:-6px}
.meter span{display:block;height:100%;width:0;background:var(--red);transition:.3s}
.ok{color:var(--mint);font-size:13px;text-align:center}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .tk-track,.pay-track,.fl{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media(max-width:1080px){.phone{left:48%}.assetlist{right:-3%;width:212px}.cats{left:-2%}}
@media(max-width:1024px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr}
  .tier.pop{transform:none}
  .trusted-grid{grid-template-columns:1fr;gap:26px}
  .ft-grid{grid-template-columns:1fr 1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:26px;min-height:0}
  .hero-art{height:470px;margin-top:6px}
  .phone{left:50%;width:220px;height:440px;margin:-220px 0 0 -110px}
  .assetlist{right:0;width:206px;top:10%}
  .cats{left:0;top:22%}
}
@media(max-width:900px){.hdr-left .chat,.hdr-left .lang{display:none}.hdr-right .login{display:none}}
@media(max-width:640px){
  .grid4,.grid3,.grid2{grid-template-columns:1fr}
  .wrap{padding:0 18px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn-solid,.hero-cta .btn-ghost{width:100%;justify-content:center}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/-1}
  .card{padding:24px}
  .islamic-in{padding:24px}
  .modal-card{padding:26px 22px}
}
@media(max-width:560px){
  .hero-art{height:420px;transform:scale(.92);transform-origin:top center}
  .assetlist{right:-2%;width:168px}
  .cats{left:-3%;top:16%}
  .cat{padding:8px 13px;font-size:10.5px}
  .fl.t5{display:none}
  .br-lg{display:none}
  .s-chart{height:120px}
}

/* ---------- contrast pass ---------- */
.chip.gg{color:#1A73E8;border-color:#C9CDDA;background:#fff;font-weight:700}
.sel{color:#2A2F45;background:#EFEDF6;font-weight:600}
.srch{color:#6B7288;background:#F5F4F9;border-color:#E4E2EC}
.srch i{border-color:#8B92A6}
.srch i::after{background:#8B92A6}
.al-head i{color:#6B7288}
.ring{color:#2A2F45;font-weight:600;background:conic-gradient(var(--accent) calc(var(--p)*1%),#E4E2EC 0)}
.ring em{background:#F7F6FA}
.s-card{color:#B9C4D8}
.s-card span{color:#AEB9CE}
.cat:nth-child(3){background:linear-gradient(140deg,#F2703F,#D9541F);
  box-shadow:0 14px 28px rgba(217,84,31,.26),inset 0 1px 0 rgba(255,255,255,.28)}
.hero .sub{color:#545B6E}
.trst,.muted{color:#5D6478}

/* brand + placeholder contrast */
.ai.gg{background:#fff;color:#1A73E8;border:1px solid #C3C7D4;font-weight:700}
.srch{color:#5D6478}
.srch i{border-color:#6B7288}
.srch i::after{background:#6B7288}
.s-rows span{background:rgba(255,255,255,.14)}