/* ═══════════════════════════════════════════════════════════ landing.css — public homepage (first-time visitors) Shown when carries .bm-landing (decided synchronously at boot in index.html). Fixed full-screen layer ABOVE the lock screen; everything is scoped under #landing / .ld-*. ═══════════════════════════════════════════════════════════ */ #landing{ --ld-ink:#0f172a; --ld-mut:#475569; --ld-soft:#64748b; --ld-bd:#e2e8f0; --ld-bg:#f8fafc; --ld-card:#ffffff; --ld-navy:#0a1628; --ld-navy2:#0e3a4a; --ld-teal:#0891b2; --ld-cyan:#06b6d4; --ld-green:#10b981; --ld-amber:#f59e0b; --ld-head:'Barlow Condensed',system-ui,sans-serif; --ld-font:'IBM Plex Sans',system-ui,Segoe UI,Arial,sans-serif; --ld-mono:'IBM Plex Mono',ui-monospace,monospace; position:fixed; inset:0; z-index:100000; display:none; overflow-y:auto; overflow-x:hidden; background:var(--ld-bg); color:var(--ld-ink); font-family:var(--ld-font); font-size:15px; line-height:1.65; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; text-align:left; } html.bm-landing #landing{display:block} html.bm-landing #lock-screen{display:none!important} #landing *,#landing *::before,#landing *::after{box-sizing:border-box} #landing a{color:var(--ld-teal);text-decoration:none} #landing img{max-width:100%} #landing section{scroll-margin-top:74px} /* ── Buttons ─────────────────────────────────────────────── */ .ld-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer; font-family:var(--ld-font);font-weight:700;border-radius:12px;transition:transform .16s,box-shadow .16s,background .16s,color .16s; text-decoration:none!important;white-space:nowrap} .ld-btn:active{transform:scale(.97)} .ld-btn-solid{background:linear-gradient(135deg,#0891b2,#06b6d4);color:#fff!important;padding:14px 26px;font-size:16px; box-shadow:0 10px 26px rgba(8,145,178,.32)} .ld-btn-solid:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(8,145,178,.42)} .ld-btn-ghost{background:transparent;color:var(--ld-ink)!important;border:1.5px solid var(--ld-bd);padding:13px 22px;font-size:15px} .ld-btn-ghost:hover{border-color:var(--ld-teal);color:var(--ld-teal)!important} .ld-btn-sm{padding:9px 18px;font-size:14px;border-radius:10px} /* On the dark hero */ .ld-hero .ld-btn-ghost{border-color:rgba(255,255,255,.25);color:#e2e8f0!important} .ld-hero .ld-btn-ghost:hover{border-color:var(--ld-cyan);color:var(--ld-cyan)!important} /* ── Top navigation ──────────────────────────────────────── */ .ld-nav{position:sticky;top:0;z-index:50;background:rgba(10,22,40,.86);backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08)} .ld-nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:12px 22px} .ld-brand{display:flex;align-items:center;gap:10px;font-family:var(--ld-head);font-weight:800;font-size:21px; letter-spacing:.3px;color:#fff!important} .ld-brand img{width:34px;height:34px;border-radius:9px;display:block} .ld-brand .mint{color:#7cdec8;background:linear-gradient(100deg,#22d3ee 10%,#5be8c4 60%,#7cdec8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .ld-links{display:flex;align-items:center;gap:4px;margin-left:8px} .ld-links a{color:#cbd5e1!important;font-size:14px;font-weight:600;padding:8px 12px;border-radius:8px;transition:color .15s,background .15s} .ld-links a:hover{color:#fff!important;background:rgba(255,255,255,.07)} .ld-nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px} .ld-nav .ld-signin{background:none;border:1.5px solid rgba(255,255,255,.22);color:#e2e8f0!important;padding:8px 16px;font-size:14px;border-radius:10px} .ld-nav .ld-signin:hover{border-color:var(--ld-cyan);color:var(--ld-cyan)!important} /* ── Hero ────────────────────────────────────────────────── */ .ld-hero{background:radial-gradient(120% 110% at 18% 0%,#10455c 0%,var(--ld-navy) 58%);color:#fff;overflow:hidden;position:relative} .ld-hero::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 78% 22%,rgba(6,182,212,.14) 0%,transparent 52%), radial-gradient(ellipse at 8% 88%,rgba(139,92,246,.10) 0%,transparent 46%)} .ld-hero-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:64px 22px 72px; display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:center} .ld-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,.13);border:1px solid rgba(6,182,212,.35); color:#7dd3fc;font-size:12.5px;font-weight:700;letter-spacing:.4px;padding:7px 14px;border-radius:999px;margin-bottom:20px} .ld-h1{font-family:var(--ld-head);font-weight:800;font-size:clamp(38px,5.4vw,58px);line-height:1.06;letter-spacing:.2px;margin:0 0 18px} .ld-h1 em{font-style:normal;color:var(--ld-cyan)} .ld-hero-sub{font-size:17.5px;line-height:1.7;color:#b7c4d4;max-width:540px;margin:0 0 28px} .ld-cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:26px} .ld-trust{display:flex;flex-wrap:wrap;gap:8px 18px;color:#8aa0b5;font-size:13px;font-weight:600} .ld-trust span{display:inline-flex;align-items:center;gap:7px} .ld-trust i{color:var(--ld-green);font-size:12px} /* ── Phone mockup (pure CSS, no images) ──────────────────── */ .ld-phone-wrap{position:relative;display:flex;justify-content:center;padding:10px 0} .ld-phone{width:min(300px,78vw);background:#0b1220;border:10px solid #1b2738;border-radius:38px; box-shadow:0 34px 80px rgba(2,6,23,.55),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;position:relative} .ld-phone::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%); width:96px;height:7px;border-radius:4px;background:#1b2738} .ld-phone-screen{background:#f1f5f9;margin-top:26px;border-radius:24px 24px 28px 28px;padding:14px 12px 16px;color:var(--ld-ink)} .ld-pos-top{display:flex;align-items:center;gap:10px;margin-bottom:12px} .ld-pos-logo{width:34px;height:34px;border-radius:8px;overflow:hidden} .ld-pos-logo img{width:100%;height:100%;display:block} .ld-pos-top b{display:block;font-size:13.5px;line-height:1.2} .ld-pos-top small{display:block;color:var(--ld-soft);font-size:11px} .ld-pos-pill{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:#dcfce7;color:#15803d; font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px} .ld-pos-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#22c55e} .ld-pos-item{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ld-bd); border-radius:11px;padding:9px 11px;margin-bottom:7px;font-size:12.5px;font-weight:600} .ld-pos-item i{font-style:normal;color:var(--ld-soft);font-weight:500;font-size:11.5px} .ld-pos-item b{margin-left:auto;font-family:var(--ld-mono);font-size:12.5px} .ld-pos-total{display:flex;align-items:center;justify-content:space-between;background:#0a1628;color:#fff; border-radius:12px;padding:11px 13px;margin:11px 0 10px;font-size:13px;font-weight:700} .ld-pos-total b{font-family:var(--ld-mono);font-size:16px;color:#67e8f9} .ld-pos-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ld-pos-btns span{text-align:center;padding:10px 4px;border-radius:11px;font-size:13px;font-weight:800;font-family:var(--ld-head);letter-spacing:.5px} .ld-pos-btns .cash{background:linear-gradient(135deg,#0891b2,#06b6d4);color:#fff} .ld-pos-btns .udhaar{background:#fff;border:1.5px solid var(--ld-bd);color:var(--ld-ink)} .ld-chip{position:absolute;background:#fff;border:1px solid var(--ld-bd);border-radius:14px;padding:10px 14px; font-size:12px;font-weight:700;color:var(--ld-ink);box-shadow:0 16px 38px rgba(2,6,23,.28); display:flex;align-items:center;gap:9px;animation:ldFloat 5.2s ease-in-out infinite} .ld-chip i{font-size:14px} .ld-chip small{display:block;font-weight:500;color:var(--ld-soft);font-size:10.5px;line-height:1.3} .ld-chip-1{top:9%;left:max(-12px,1%);animation-delay:0s} .ld-chip-1 i{color:var(--ld-green)} .ld-chip-2{bottom:14%;right:max(-10px,1%);animation-delay:1.6s} .ld-chip-2 i{color:var(--ld-amber)} @keyframes ldFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @media (prefers-reduced-motion:reduce){.ld-chip{animation:none}} /* ── Shop-type strip ─────────────────────────────────────── */ .ld-strip{background:var(--ld-navy);border-top:1px solid rgba(255,255,255,.06);padding:18px 22px 26px} .ld-strip-inner{max-width:1120px;margin:0 auto;text-align:center} .ld-strip p{margin:0 0 12px;color:#7e93a8;font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase} .ld-strip-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .ld-strip-chips span{border:1px solid rgba(255,255,255,.14);color:#c3d0dd;background:rgba(255,255,255,.04); font-size:13px;font-weight:600;padding:7px 15px;border-radius:999px} /* ── Generic section scaffolding ─────────────────────────── */ .ld-sec{max-width:1120px;margin:0 auto;padding:72px 22px 8px} .ld-sec-head{max-width:660px;margin:0 auto 40px;text-align:center} .ld-kicker{display:inline-block;color:var(--ld-teal);font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px} .ld-h2{font-family:var(--ld-head);font-weight:800;font-size:clamp(28px,3.6vw,40px);line-height:1.12;margin:0 0 12px;color:var(--ld-navy)} .ld-sec-head p{color:var(--ld-mut);font-size:16px;margin:0} /* ── Feature grid ────────────────────────────────────────── */ .ld-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ld-card{background:var(--ld-card);border:1px solid var(--ld-bd);border-radius:18px;padding:22px 20px; transition:transform .18s,box-shadow .18s,border-color .18s} .ld-card:hover{transform:translateY(-3px);border-color:#bae6fd;box-shadow:0 14px 34px rgba(8,145,178,.12)} .ld-card-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-size:19px;margin-bottom:14px;background:rgba(8,145,178,.1);color:var(--ld-teal)} .ld-card h3{font-family:var(--ld-head);font-size:19px;font-weight:700;margin:0 0 6px;color:var(--ld-navy)} .ld-card p{margin:0;color:var(--ld-mut);font-size:13.5px;line-height:1.6} /* ── Split highlight sections ────────────────────────────── */ .ld-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; background:var(--ld-card);border:1px solid var(--ld-bd);border-radius:24px;padding:42px 44px;margin-top:18px} .ld-split .ld-h2{font-size:clamp(24px,3vw,32px)} .ld-split p{color:var(--ld-mut);font-size:15px;margin:0 0 14px} .ld-split ul{list-style:none;margin:0;padding:0} .ld-split li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;color:var(--ld-ink);font-size:14.5px;font-weight:500} .ld-split li i{color:var(--ld-green);margin-top:4px;font-size:13px;flex-shrink:0} .ld-split-visual{display:flex;align-items:center;justify-content:center} /* offline card */ .ld-offline-card{width:100%;max-width:380px;background:linear-gradient(160deg,#0e3a4a,#0a1628);border-radius:20px; padding:24px;color:#e2e8f0;box-shadow:0 24px 56px rgba(2,6,23,.35)} .ld-offline-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:12px 14px;margin-bottom:10px;font-size:13px;font-weight:600} .ld-offline-row:last-child{margin-bottom:0} .ld-offline-row i{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0} .ld-offline-row .amber{background:rgba(245,158,11,.16);color:var(--ld-amber)} .ld-offline-row .green{background:rgba(16,185,129,.16);color:var(--ld-green)} .ld-offline-row .cyan{background:rgba(6,182,212,.16);color:var(--ld-cyan)} .ld-offline-row small{display:block;color:#8aa0b5;font-weight:500;font-size:11.5px;margin-top:1px} /* urdu card — generous line-height so Nastaliq never clips (see CLAUDE.md) */ .ld-urdu-card{width:100%;max-width:380px;background:var(--ld-bg);border:1px solid var(--ld-bd);border-radius:20px;padding:26px 24px;text-align:center} .ld-urdu-line{font-family:'Noto Nastaliq Urdu','Noto Naskh Arabic',serif;font-size:24px;line-height:2.15;color:var(--ld-navy);overflow:visible} .ld-urdu-en{color:var(--ld-soft);font-size:13px;margin-top:8px} .ld-urdu-toggle{display:inline-flex;gap:0;margin-top:16px;border:1.5px solid var(--ld-bd);border-radius:999px;overflow:hidden} .ld-urdu-toggle span{padding:7px 18px;font-size:13px;font-weight:700} .ld-urdu-toggle .on{background:var(--ld-teal);color:#fff} /* ── Steps ───────────────────────────────────────────────── */ .ld-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ld-step{background:var(--ld-card);border:1px solid var(--ld-bd);border-radius:18px;padding:26px 22px;position:relative} .ld-step-num{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0891b2,#06b6d4);color:#fff; font-family:var(--ld-mono);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px} .ld-step h3{font-family:var(--ld-head);font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ld-navy)} .ld-step p{margin:0;color:var(--ld-mut);font-size:14px} /* ── Pricing ─────────────────────────────────────────────── */ .ld-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch} .ld-plan{background:var(--ld-card);border:1.5px solid var(--ld-bd);border-radius:20px;padding:28px 24px; display:flex;flex-direction:column;position:relative} .ld-plan.featured{border-color:var(--ld-teal);box-shadow:0 18px 44px rgba(8,145,178,.16)} .ld-plan-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ld-green);color:#fff; font-family:var(--ld-head);font-size:11.5px;font-weight:800;letter-spacing:.8px;padding:4px 14px;border-radius:999px;white-space:nowrap} .ld-plan-name{font-family:var(--ld-head);font-size:15px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--ld-soft);margin-bottom:10px} .ld-plan-price{font-family:var(--ld-mono);font-weight:800;font-size:34px;color:var(--ld-navy);line-height:1} .ld-plan-price small{font-family:var(--ld-font);font-weight:600;font-size:13px;color:var(--ld-soft)} .ld-plan-note{color:var(--ld-mut);font-size:13px;margin:10px 0 16px} .ld-plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1} .ld-plan li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:13.5px;color:var(--ld-ink)} .ld-plan li i{color:var(--ld-green);margin-top:3px;font-size:12px;flex-shrink:0} .ld-plan .ld-btn{width:100%} .ld-price-foot{text-align:center;color:var(--ld-soft);font-size:12.5px;margin-top:18px} /* ── FAQ ─────────────────────────────────────────────────── */ .ld-faq{max-width:760px;margin:0 auto} .ld-faq details{background:var(--ld-card);border:1px solid var(--ld-bd);border-radius:14px;padding:16px 20px;margin-bottom:10px} .ld-faq details[open]{border-color:#bae6fd} .ld-faq summary{font-weight:700;cursor:pointer;color:var(--ld-navy);font-size:15px;list-style:none;display:flex;align-items:center;gap:10px} .ld-faq summary::-webkit-details-marker{display:none} .ld-faq summary::after{content:'\2b';margin-left:auto;color:var(--ld-teal);font-weight:800;font-size:17px;transition:transform .2s} .ld-faq details[open] summary::after{transform:rotate(45deg)} .ld-faq p{color:var(--ld-mut);margin:10px 0 0;font-size:14px} /* ── Final CTA band ──────────────────────────────────────── */ .ld-final{background:radial-gradient(110% 130% at 50% 0%,#10455c 0%,var(--ld-navy) 62%);border-radius:26px; max-width:1120px;margin:72px auto 0;padding:56px 30px;text-align:center;color:#fff} .ld-final .ld-h2{color:#fff} .ld-final p{color:#b7c4d4;font-size:16px;max-width:560px;margin:0 auto 26px} /* ── Footer ──────────────────────────────────────────────── */ .ld-foot{background:var(--ld-navy);margin-top:72px;padding:52px 22px 30px;color:#8aa0b5} .ld-foot-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} .ld-foot h4{font-family:var(--ld-head);color:#fff;font-size:15px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 14px} .ld-foot ul{list-style:none;margin:0;padding:0} .ld-foot li{margin-bottom:9px} .ld-foot a{color:#a8b8c8!important;font-size:13.5px;transition:color .15s} .ld-foot a:hover{color:var(--ld-cyan)!important} .ld-foot-brand p{font-size:13px;line-height:1.7;margin:12px 0 16px;max-width:300px} .ld-socials{display:flex;gap:10px} .ld-socials a{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center;font-size:16px;color:#cbd5e1!important;transition:all .16s} .ld-socials a:hover{border-color:var(--ld-cyan);color:var(--ld-cyan)!important;transform:translateY(-2px)} .ld-foot-bottom{max-width:1120px;margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08); display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;font-size:12.5px;color:#64748b} /* ── Responsive ──────────────────────────────────────────── */ @media (max-width:1020px){ .ld-grid{grid-template-columns:repeat(2,1fr)} .ld-foot-inner{grid-template-columns:1fr 1fr} } @media (max-width:880px){ .ld-hero-inner{grid-template-columns:1fr;gap:46px;padding:46px 20px 60px;text-align:center} .ld-hero-sub{margin-left:auto;margin-right:auto} .ld-cta-row,.ld-trust{justify-content:center} .ld-split{grid-template-columns:1fr;gap:30px;padding:30px 22px} .ld-steps,.ld-plans{grid-template-columns:1fr} .ld-plan.featured{order:-1} .ld-sec{padding:54px 18px 8px} } @media (max-width:760px){ .ld-links{display:none} .ld-nav-inner{padding:10px 14px;gap:10px} .ld-brand{font-size:18px} } @media (max-width:560px){ .ld-grid{grid-template-columns:1fr} .ld-cta-row .ld-btn{width:100%} .ld-chip-1{left:-4px} .ld-chip-2{right:-4px} .ld-foot-inner{grid-template-columns:1fr;gap:26px} .ld-final{margin:54px 14px 0;padding:44px 20px} }