:root{--ink:#0e1020;--ink2:#171a33;--bg:#f6f5ff;--card:#fff;--tx:#1b1d36;--mut:#5d6080;--v:#7c5cff;--v2:#a78bfa;--e:#f7931e;--w:#25d366;--t:#2aabee;--r:#e0447c;--line:#e7e5f5;--rad:22px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PK Baloo Bhaijaan 2",system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.75;overflow-x:hidden;padding-bottom:80px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.nar{max-width:820px}
h1,h2,h3{line-height:1.3;font-weight:800}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;background:linear-gradient(135deg,var(--v),#5b3df5);color:#fff;font-weight:800;box-shadow:0 12px 26px -10px rgba(124,92,255,.7);transition:.25s;border:0;cursor:pointer;font:inherit;font-weight:800}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(124,92,255,.8)}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1.5px solid rgba(255,255,255,.25)}
.btn.sm{padding:9px 18px;font-size:.9rem}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:.3s}
.nav .wrap{display:flex;align-items:center;gap:22px;height:72px}
.nav.sc{background:rgba(14,16,32,.86);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px #000}
.logo{display:flex;align-items:center;gap:9px;color:#fff;font-size:1.25rem}
.logo i{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-style:normal;background:conic-gradient(from 200deg,var(--e),var(--w),var(--t),var(--v),var(--e));color:#fff;font-size:1.1rem}
.links{display:flex;gap:4px;margin-inline-start:auto}
.links a{color:#d9d8f5;padding:8px 13px;border-radius:999px;font-size:.95rem}
.links a:hover{background:rgba(255,255,255,.08);color:#fff}
.burger{display:none;background:none;border:0;width:42px;height:42px;border-radius:12px;color:#fff;cursor:pointer}
.burger svg{width:24px;stroke:currentColor;stroke-width:2;fill:none}
/* hero */
.hero{background:radial-gradient(60% 70% at 85% 10%,rgba(124,92,255,.35),transparent 60%),radial-gradient(50% 60% at 10% 90%,rgba(37,211,102,.16),transparent 60%),var(--ink);color:#fff;padding:120px 0 70px;overflow:hidden}
.hg{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.88rem;color:#cfcdf2}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--w);box-shadow:0 0 0 0 var(--w);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.6rem);margin:18px 0 14px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--e),var(--w),var(--t));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#c3c2e2;font-size:1.08rem;max-width:560px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.chs{display:flex;gap:8px;flex-wrap:wrap}
.ch{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.85rem;color:#dcdbf5}
html[dir=rtl] .ch{padding:5px 6px 5px 12px}
.ch i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.75rem;font-weight:800;color:#fff;font-family:system-ui}
.ch.e i{background:var(--e)}.ch.w i{background:var(--w)}.ch.t i{background:var(--t)}.ch.r i{background:#8b5cf6;opacity:.6}
/* phones */
.phones{position:relative;height:520px;direction:ltr}
.ph{position:absolute;width:250px;height:470px;border-radius:34px;background:#0b0c18;border:7px solid #23263f;box-shadow:0 40px 80px -30px #000,inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden;display:flex;flex-direction:column;transition:.5s;direction:rtl}
html[dir=ltr] .ph{direction:ltr}
.ph.e{left:0;top:40px;transform:rotate(-6deg) scale(.9);opacity:.85}
.ph.t{right:0;top:40px;transform:rotate(6deg) scale(.9);opacity:.85}
.ph.main{left:50%;top:0;transform:translateX(-50%);z-index:2}
.pt{display:flex;align-items:center;gap:9px;padding:12px 12px 10px;color:#fff}
.ph.e .pt{background:#f7931e}.ph.w .pt{background:#075e54}.ph.t .pt{background:#2aabee}
.pt i{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-style:normal;font-weight:800;font-family:system-ui;flex:none}
.pt b{display:block;font-size:.86rem;line-height:1.2}.pt small{font-size:.72rem;opacity:.85}
.msgs{flex:1;padding:10px;display:flex;flex-direction:column;gap:7px;justify-content:flex-end;overflow:hidden;font-size:.8rem;line-height:1.55}
.ph.w .msgs{background:#0b141a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1.2' fill='%23ffffff10'/%3E%3C/svg%3E")}
.ph.e .msgs{background:#1d1a16}.ph.t .msgs{background:#0e1621}
.m{max-width:84%;padding:7px 10px;border-radius:14px;color:#e9edef;animation:pop .35s cubic-bezier(.2,1.4,.4,1) both;word-wrap:break-word}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.92)}}
.m.in{align-self:flex-start;background:#202c33;border-start-start-radius:4px}
.m.out{align-self:flex-end;background:#005c4b;border-start-end-radius:4px}
.ph.e .m.out{background:#a75a0a}.ph.t .m.out{background:#2b5278}
.m small{display:block;font-size:.65rem;opacity:.6;text-align:end}
.m.bot::before{content:"🤖 ";}
.m.typing{display:flex;gap:4px;padding:10px 12px}
.m.typing i{width:6px;height:6px;border-radius:50%;background:#9aa;animation:tp 1s infinite}.m.typing i:nth-child(2){animation-delay:.15s}.m.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{transform:translateY(-4px);opacity:.4}}
.m.card{padding:0;overflow:hidden;width:84%}
.m.card .pi{height:74px;display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,#3b2f7a,#7c5cff)}
.m.card div{padding:7px 10px}.m.card b{display:block}
.m.pay{background:linear-gradient(135deg,#1f9d55,#25d366)!important;font-weight:800;text-align:center}
.m.done{align-self:center;background:rgba(37,211,102,.18);color:#7ef0a8;font-weight:800;font-size:.75rem;border-radius:999px}
.sold{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:3;background:#fff;color:var(--tx);border-radius:18px;padding:10px 18px;display:flex;align-items:center;gap:10px;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);white-space:nowrap;direction:rtl}
html[dir=ltr] .sold{direction:ltr}
.sold b{font-size:1.6rem;color:var(--w);line-height:1}.sold span{font-size:.85rem;color:var(--mut)}
.sold.bump{animation:bump .5s}
@keyframes bump{40%{transform:translateX(-50%) scale(1.12)}}
/* strip */
.strip{background:var(--ink2);color:#fff;padding:26px 0}
.st4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center}
.st4 b{display:block;font-size:2rem;background:linear-gradient(90deg,var(--v2),var(--t));-webkit-background-clip:text;background-clip:text;color:transparent}
.st4 span{color:#b5b4d6;font-size:.92rem}
/* sections */
.sec{padding:90px 0}
.sec.soft{background:linear-gradient(180deg,#efedff,#f6f5ff)}
.sec.dark{background:var(--ink);color:#fff}
.hd{text-align:center;max-width:720px;margin:0 auto 46px}
.tag{display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(124,92,255,.12);color:var(--v);font-weight:800;font-size:.85rem;margin-bottom:12px}
.tag.light{background:rgba(255,255,255,.1);color:#d7ccff}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
.mut{color:var(--mut);margin:14px 0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.st{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:26px 22px;transition:.3s}
.st:hover{transform:translateY(-4px);box-shadow:0 24px 40px -26px rgba(60,40,160,.4)}
.st b{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--v),var(--t));color:#fff;font-size:1.3rem;margin-bottom:14px}
.st h3{font-size:1.2rem;margin-bottom:6px}.st p{color:var(--mut);font-size:.95rem}
.two{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.ck{list-style:none;display:grid;gap:9px}
.ck li{padding-inline-start:30px;position:relative}
.ck li::before{content:"✓";position:absolute;inset-inline-start:0;top:2px;width:21px;height:21px;border-radius:50%;background:var(--w);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:800}
/* funnel */
.fn{background:var(--card);border-radius:28px;padding:26px;box-shadow:0 30px 60px -36px rgba(60,40,160,.45);border:1px solid var(--line)}
.fn .row{display:grid;grid-template-columns:120px 1fr 80px;align-items:center;gap:12px;margin-bottom:12px;font-size:.95rem}
.fn .bar{height:30px;border-radius:10px;background:#f0eefc;overflow:hidden;direction:ltr}
.fn .bar i{display:block;height:100%;border-radius:10px;transition:width 1.2s cubic-bezier(.2,.8,.2,1);width:0}
.fn .row b{text-align:end;font-size:1.05rem}
.fn .hd2{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.fn .hd2 small{color:var(--mut)}
.fn .tabs{display:flex;gap:6px}
.fn .tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.fn .tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.fn .rev{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;font-weight:800}
.fn .rev b{color:#16a34a}
/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cd{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:26px}
.cd i{font-style:normal;font-size:1.8rem;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#f1eeff;margin-bottom:12px}
.cd h3{font-size:1.15rem;margin-bottom:6px}.cd p{color:var(--mut);font-size:.95rem}
.lic{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.lic p{color:#c3c2e2;margin-top:14px}
.lb{background:linear-gradient(160deg,rgba(124,92,255,.25),rgba(42,171,238,.12));border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:28px;display:grid;gap:12px;text-align:center}
.lb s{color:#9e9cc4}.lb b{font-size:1.25rem;color:#fde68a}
details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin-bottom:10px}
summary{cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:10px}
summary::after{content:"+";color:var(--v);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--mut);margin-top:8px}
.ft{background:var(--ink);color:#bdbbe0;padding:30px 0;font-size:.9rem}
.ft .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ft [data-pk-credit] a{color:#d7ccff}
.lat{font-family:system-ui}
/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* pkbar */
.pkbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:90;display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(14,16,32,.94);backdrop-filter:blur(12px);color:#fff;font-size:.84rem;box-shadow:0 20px 40px -10px rgba(14,16,32,.6)}
.pkbar a{padding:8px 14px;border-radius:999px;white-space:nowrap}
.pkbar a:hover{background:rgba(255,255,255,.12)}
.pkbar a.on{background:var(--v);font-weight:800}
.pkbar a.kl{background:#fbbf24;color:#1a1200;font-weight:800}
.embed .pkbar,.embed .pk-lang{display:none}
@media (max-width:980px){
  .hg,.two,.lic{grid-template-columns:1fr}
  .phones{height:500px;max-width:520px;margin:10px auto 0;width:100%}
  .steps{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr}
  .links{position:fixed;inset:72px 12px auto;flex-direction:column;background:var(--ink2);padding:12px;border-radius:18px;display:none}
  .links.op{display:flex}.burger{display:block}
  .nav .btn.sm{margin-inline-start:auto}
}
@media (max-width:620px){
  .hero{padding-top:100px}
  .ph{width:212px;height:420px}
  .ph.e{left:-40px;top:50px}.ph.t{right:-40px;top:50px}
  .phones{height:460px}
  .st4{grid-template-columns:1fr 1fr}.steps,.grid3{grid-template-columns:1fr}
  .fn .row{grid-template-columns:86px 1fr 62px;font-size:.85rem}
  .nav .btn.sm{display:none}.burger{margin-inline-start:auto}
  .sec{padding:64px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.msgs>*{flex:none}
