:root{--navy:#0f172a;--navy2:#1e293b;--blue:#2563eb;--blue2:#3b82f6;--green:#10b981;--amber:#f59e0b;--purple:#9333ea;--red:#ef4444;--bg:#f5f7fb;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--r:20px;--shadow:0 10px 30px -12px rgba(15,23,42,.18)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blue)}code{font-family:'JetBrains Mono',monospace;font-size:.9em}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em}
.muted{color:var(--muted)}.center{text-align:center}.small{font-size:.85rem}
.ico{flex:none}
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:1.35rem}
.logo b{color:var(--blue2)}.logo sup{font-size:.5em;color:#cbd5e1;margin-left:2px}
.auth-card .logo,.foot .logo{color:var(--navy)}.foot .logo{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;border:1px solid transparent;font:600 .95rem 'Poppins',sans-serif;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px -8px rgba(37,99,235,.7)}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--text)}.btn-ghost:hover{background:#f8fafc}
.btn-ghost.light{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}.btn-ghost.light:hover{background:rgba(255,255,255,.1)}
.btn-ghost.danger{color:var(--red)}
.btn.lg{padding:14px 26px;font-size:1.02rem}.btn.block{width:100%}
.btn-row{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.mini-btn{border:0;background:var(--amber);color:#fff;font:600 .78rem 'Poppins',sans-serif;padding:4px 12px;border-radius:8px;cursor:pointer;text-decoration:none;margin-left:6px}
.copybox .mini-btn{background:var(--blue)}

/* toast */
.toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99;padding:12px 20px;border-radius:14px;color:#fff;font-weight:500;box-shadow:var(--shadow);animation:drop .5s cubic-bezier(.2,1.3,.4,1);max-width:92vw}
.toast.ok{background:#059669}.toast.err{background:#dc2626}.toast.hide{opacity:0;transition:opacity .5s}
@keyframes drop{from{transform:translate(-50%,-80px);opacity:0}}

/* forms */
.fg{display:block;margin-bottom:18px}
.fg>span{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin-bottom:6px;font-size:.95rem}
.fg em{font-style:normal;font-weight:400;color:var(--muted);font-size:.8rem}
input,select{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:14px;font:400 1rem 'Poppins',sans-serif;background:#fff;color:var(--text);transition:border .2s,box-shadow .2s}
input:focus,select:focus{outline:0;border-color:var(--blue2);box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.pw{position:relative}.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:0;color:var(--muted);cursor:pointer;padding:6px}
.hint{color:var(--muted);font-size:.88rem}
.alert{padding:12px 16px;border-radius:12px;margin:14px 0;font-size:.92rem}.alert.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* auth + checkout */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:linear-gradient(160deg,#eef4ff,#f8fafc)}
.auth-card{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:28px;padding:34px 28px;box-shadow:var(--shadow);animation:rise .7s cubic-bezier(.2,.9,.3,1) both}
.auth-card h1{margin:20px 0 4px;font-size:1.6rem}.auth-card form{margin:20px 0 14px}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:drift 14s ease-in-out infinite alternate}
.blob.b1{width:360px;height:360px;background:#93c5fd;top:-90px;left:-90px}
.blob.b2{width:300px;height:300px;background:#c4b5fd;bottom:-80px;right:-60px;animation-delay:-6s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.pay .amount{font-size:2.6rem;text-align:center;color:var(--blue);margin:4px 0}
.qr-wrap{position:relative;width:224px;height:224px;margin:22px auto 16px;padding:12px;border:2px dashed #bfdbfe;border-radius:20px;overflow:hidden;display:grid;place-items:center}
.scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--blue2),transparent);box-shadow:0 0 14px var(--blue2);animation:scan 2.4s ease-in-out infinite;z-index:2}
@keyframes scan{0%,100%{top:6%}50%{top:92%}}
.upi-id{background:#f1f5f9;padding:4px 10px;border-radius:8px;display:inline-block;margin:12px 0}
.timer{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:.9rem}
.bar{height:6px;background:#e2e8f0;border-radius:6px;margin-top:12px;overflow:hidden}.bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:width 1s linear}
.state[hidden]{display:none}
.big-check,.big-x{width:110px;display:block;margin:16px auto}
.big-check circle,.big-x circle{fill:none;stroke-width:6;stroke-dasharray:277;stroke-dashoffset:277;animation:draw .7s ease forwards}
.big-check circle{stroke:var(--green)}.big-x circle{stroke:var(--red)}
.big-check path,.big-x path{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw .5s .6s ease forwards}
.big-check path{stroke:var(--green)}.big-x path{stroke:var(--red)}
.big-check.loop circle{animation:drawloop 3.4s ease infinite}.big-check.loop path{animation:drawloop 3.4s .5s ease infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes drawloop{0%{stroke-dashoffset:277}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

/* app shell */
.app-header{position:sticky;top:0;z-index:20;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:16px 22px;flex-wrap:wrap;gap:8px}
.menu-btn{display:none;border:1px solid #334155;background:var(--navy2);color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer}
.app-nav{display:flex;gap:6px;align-items:center}
.app-nav a{color:#cbd5e1;text-decoration:none;padding:8px 14px;border-radius:10px;font-weight:500;transition:.2s}
.app-nav a:hover,.app-nav a.on{background:var(--navy2);color:#fff}.app-nav a.out{color:#fca5a5}
.container{max-width:1080px;margin:0 auto;padding:28px 20px 60px}.container.narrow{max-width:760px}
.intro h1{font-size:1.9rem}.intro{margin-bottom:22px}
.rise{animation:rise .6s both}.wave{display:inline-block;transform-origin:70% 70%;animation:wave 2.2s 1s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(16deg)}20%,40%{transform:rotate(-10deg)}}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;color:#1d4ed8;font:500 .92rem 'Poppins',sans-serif;cursor:default}
.pill.copy{background:#fff;color:var(--text);border-color:var(--line);cursor:pointer}.pill.copy.copied{border-color:var(--green);color:var(--green)}
.pill .k{font-weight:700;color:var(--muted)}
.pill.warn{background:#fffbeb;border-color:#fde68a;color:#b45309}.pill.good{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
.pill.tog{cursor:pointer;opacity:.5}.pill.tog.on{opacity:1}
.dot{width:9px;height:9px;border-radius:50%;background:#64748b;display:inline-block}.dot.blue{background:var(--blue)}.dot.purple{background:var(--purple)}
.pill.warn .dot{background:var(--amber)}.dot.live{background:var(--green);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}100%{box-shadow:0 0 0 10px transparent}}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--r);padding:26px;margin-bottom:20px;box-shadow:var(--shadow)}
.card h2{display:flex;align-items:center;gap:10px;font-size:1.3rem;margin-bottom:4px}.card h2 small{font:400 .8rem 'Poppins';color:var(--muted)}
.card-h{margin-bottom:12px}.card-h.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:20px}
.stat{display:flex;justify-content:space-between;align-items:center;margin:0;transition:transform .25s}.stat:hover{transform:translateY(-4px)}
.lbl{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num{font-size:2rem;font-weight:700;margin-top:10px}.num.green{color:var(--green)}
.ico-box{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.ico-box.g{background:linear-gradient(135deg,#10b981,#059669)}.ico-box.b{background:linear-gradient(135deg,#3b82f6,#2563eb)}.ico-box.a{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.seg{display:inline-flex;background:#f1f5f9;border-radius:12px;padding:4px;margin-bottom:12px}
.seg button{border:0;background:0;padding:7px 16px;border-radius:9px;font:600 .9rem 'Poppins';color:var(--muted);cursor:pointer}.seg button.on{background:#fff;color:var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.chart-box{height:300px}
.empty{text-align:center;padding:30px 10px;color:var(--muted)}.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;padding:12px;background:#f8fafc;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
td{padding:12px;border-top:1px solid var(--line);vertical-align:top}tr:hover td{background:#fafcff}
.badge{padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:600}
.badge.success{background:#d1fae5;color:#047857}.badge.pending{background:#fef3c7;color:#b45309}.badge.failed{background:#fee2e2;color:#b91c1c}.badge.expired{background:#e2e8f0;color:#475569}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.filters input{flex:2;min-width:180px}.filters select{flex:1;min-width:140px}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:16px}

/* tabs, steps */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{display:flex;gap:8px;align-items:center;border:0;background:0;padding:12px 16px;font:600 1rem 'Poppins';color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.on{color:var(--blue);border-color:var(--blue)}
.panel[hidden]{display:none}.panel{animation:rise .4s both}
.panel h3{margin:20px 0 8px;font-size:1.05rem}
.steps{list-style:none;padding:0;margin:20px 0}
.steps li{display:flex;gap:16px;margin-bottom:24px}
.steps li>span{width:44px;height:44px;border-radius:50%;background:#e0e9ff;color:var(--blue);font-weight:700;display:grid;place-items:center;flex:none}
.steps h3{margin:0 0 4px}.steps p{color:var(--muted)}
.copybox{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:10px 14px;overflow:hidden}
.copybox code{overflow:hidden;text-overflow:ellipsis;font-weight:500}
pre{background:var(--navy);color:#e2e8f0;border-radius:16px;padding:18px;overflow-x:auto;font-size:.82rem;line-height:1.7;margin:12px 0}

/* landing */
.landing{background:#fff}
.top{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 5vw;flex-wrap:wrap}
.top nav{display:flex;gap:24px}.top nav a{color:#cbd5e1;text-decoration:none;font-weight:500}.top nav a:hover{color:#fff}
.top-cta{display:flex;gap:10px}
.hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#0b1224,#13224a 70%,#1d3a8a);color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:150px 5vw 90px;min-height:640px}
.hero .blob.b1{background:#2563eb;opacity:.35}.hero .blob.b2{background:#7c3aed;opacity:.3}
.hero-text{position:relative;z-index:2;animation:rise .8s both}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800}
.hero p{color:#cbd5e1;font-size:1.1rem;max-width:520px;margin:20px 0 28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{position:relative;height:460px;display:grid;place-items:center}
.ring{position:absolute;border:1.5px dashed rgba(147,197,253,.35);border-radius:50%;animation:spin 30s linear infinite}
.ring.r1{width:330px;height:330px}.ring.r2{width:440px;height:440px;animation-direction:reverse;animation-duration:44s}
@keyframes spin{to{transform:rotate(360deg)}}
.phone{position:relative;width:230px;background:#fff;color:var(--text);border-radius:34px;padding:34px 20px 22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:float 5s ease-in-out infinite;text-align:center}
.phone .notch{position:absolute;top:10px;left:50%;width:60px;height:8px;border-radius:8px;background:#e2e8f0;transform:translateX(-50%)}
.p-sm{color:var(--muted)!important;font-size:.82rem!important;margin:0!important}.p-amt{color:var(--blue)!important;font-size:1.8rem!important;font-weight:700;margin:2px 0 12px!important}
.p-qr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:110px;margin:0 auto 14px}
.p-qr i{aspect-ratio:1;background:var(--navy);border-radius:4px;animation:blink 2.4s infinite}.p-qr i:nth-child(2n){animation-delay:.4s;background:var(--blue)}.p-qr i:nth-child(3n){animation-delay:.9s}
@keyframes blink{50%{opacity:.25}}
.p-ok{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.85rem;color:#047857}.p-ok .big-check{width:30px;margin:0}
.chip{position:absolute;width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-weight:700;color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.chip.c1{background:var(--green);top:50px;left:8%;font-size:1.6rem;animation:float 4s ease-in-out infinite}
.chip.c2{background:var(--blue2);bottom:60px;left:2%;animation:float 5.5s -1s ease-in-out infinite}
.chip.c3{background:var(--purple);top:90px;right:4%;animation:float 4.6s -2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-16px)}}
.band{background:var(--navy);color:#fff;padding:34px 5vw}
.stat-row{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;text-align:center}
.stat-row b{display:block;font-size:2.2rem;color:var(--blue2)}.stat-row span{color:#94a3b8;font-size:.9rem}
.sec{padding:80px 5vw;max-width:1180px;margin:0 auto}.sec.alt{max-width:none;background:var(--bg)}.sec.alt>*{max-width:1000px;margin-left:auto;margin-right:auto}
.sec-h{text-align:center;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:44px}.sec-h.left{text-align:left;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .25s,box-shadow .25s}.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat h3{margin:16px 0 6px}.feat p{color:var(--muted);font-size:.95rem}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;position:relative}
.flow li{text-align:center}.flow span{width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:1.2rem;display:grid;place-items:center;margin:0 auto 14px;position:relative;box-shadow:0 0 0 8px #dbeafe}
.flow li:not(:last-child) span::after{content:"";position:absolute;left:66px;top:50%;width:calc(100% + 40px);height:2px;background:repeating-linear-gradient(90deg,#93c5fd 0 8px,transparent 8px 16px);animation:dash 1.2s linear infinite;background-size:16px 2px}
@keyframes dash{to{background-position:16px 0}}
.flow p{color:var(--muted);font-size:.92rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.split .btn{margin-top:20px}
.code{font-size:.85rem}
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;transition:box-shadow .2s}.faq details[open]{box-shadow:var(--shadow);border-color:#bfdbfe}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;font-weight:600;cursor:pointer}.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .3s;color:var(--blue)}.faq details[open] summary .ico{transform:rotate(180deg)}
.faq details>div{padding:0 0 18px;color:var(--muted);animation:rise .35s both}
.cta{text-align:center;padding:80px 5vw;background:linear-gradient(135deg,#1d4ed8,#2563eb 50%,#7c3aed);color:#fff}.cta h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:24px}
.cta .btn-primary{background:#fff;color:var(--blue);box-shadow:none}
.foot{background:var(--navy);color:#94a3b8;text-align:center;padding:36px 5vw;display:grid;gap:12px;justify-items:center;font-size:.9rem}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:130px;text-align:center}.hero p{margin-inline:auto}.hero-btns{justify-content:center}.hero-visual{height:420px}
  .split{grid-template-columns:1fr}.top nav{display:none}.flow li:not(:last-child) span::after{display:none}
  .menu-btn{display:block}.app-nav{display:none;width:100%;flex-direction:column;align-items:stretch}.app-nav.open{display:flex}
  .intro h1{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}

/* ===== v2: logo plate, Google, result pages, landing scenes ===== */
.logo img{display:block;height:34px;width:auto}
.logo.plate{background:var(--navy);padding:10px 18px;border-radius:14px;display:flex;justify-content:center;width:max-content;margin:0 auto 6px}
.auth-card .logo.plate{color:#fff}.foot .logo{color:#fff}
.auth-card>h1,.auth-card>p.muted{text-align:center}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 18px;border:1px solid #dadce0;border-radius:12px;background:#fff;color:#3c4043!important;font:500 .98rem 'Poppins',sans-serif;text-decoration:none;margin:18px 0 6px;transition:box-shadow .2s,transform .15s}
.btn-google:hover{box-shadow:0 4px 14px rgba(60,64,67,.25);transform:translateY(-1px)}
.hero .btn-google,.cta .btn-google{width:auto;margin:0;padding:14px 22px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:14px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.me{border-radius:50%;margin:0 6px;object-fit:cover}
.link-btn{display:block;margin:14px auto 0;border:0;background:0;color:var(--muted);font:500 .88rem 'Poppins',sans-serif;text-decoration:underline;cursor:pointer}.link-btn:hover{color:var(--red)}.link-btn.inline{display:inline;margin:0;color:var(--blue)}
.paying{margin-top:14px}

/* result pages */
.result .auth-card{max-width:440px}
.big-amt{text-align:center;font-size:2.4rem;font-weight:700;margin:14px 0 4px}.big-amt.ok{color:var(--green)}.big-amt.bad{color:var(--red)}
.rows{margin:16px 0;border:1px solid var(--line);border-radius:16px;padding:4px 16px}
.rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}.rows div:last-child{border:0}
.rows dt{color:var(--muted)}.rows dd{margin:0;font-weight:500;text-align:right;word-break:break-all}
.note{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:14px;padding:12px 14px;font-size:.88rem;margin-bottom:14px}
.receipt .btn{margin-top:10px}.receipt h1{margin:6px 0}
.receipt .big-check,.receipt .big-x{margin:10px auto}
.big-x.shake{animation:shake .6s .9s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.is-ok{background:linear-gradient(160deg,#ecfdf5,#f8fafc)}.is-bad{background:linear-gradient(160deg,#fef2f2,#f8fafc)}
.is-ok .blob.b1{background:#6ee7b7}.is-bad .blob.b1{background:#fca5a5}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-20px;left:var(--x);width:9px;height:15px;background:var(--c);border-radius:2px;transform:rotate(var(--r));animation:fall var(--d) var(--w) linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(calc(var(--r) + 540deg))}}
@media print{.blob,.confetti,.btn,.link-btn,#auto,.logo{display:none!important}body,.auth-page{background:#fff!important}.auth-card{box-shadow:none}}

/* landing: hero phone scenes */
.ticks{list-style:none;padding:0;display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:#93c5fd;font-size:.9rem}.ticks li::before{content:"✓ ";color:var(--green)}
.hero-text p{margin-bottom:28px}
.phone-body{position:relative;height:260px}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0}
.sA{animation:sA 9s infinite}.sB{animation:sB 9s infinite}.sC{animation:sC 9s infinite}
@keyframes sA{0%,30%{opacity:1}36%,100%{opacity:0}}
@keyframes sB{0%,30%{opacity:0}36%,54%{opacity:1}60%,100%{opacity:0}}
@keyframes sC{0%,56%{opacity:0}62%,94%{opacity:1}100%{opacity:0}}
.spin{width:46px;height:46px;border:4px solid #dbeafe;border-top-color:var(--blue);border-radius:50%;animation:spin .9s linear infinite}
.p-ok2{font-weight:700;color:#047857;margin:0!important;font-size:1rem!important}
.big-check.cyc{width:76px;margin:0}.big-check.cyc circle{animation:cA 9s infinite}.big-check.cyc path{animation:cB 9s infinite}
@keyframes cA{0%,58%{stroke-dashoffset:277}68%,100%{stroke-dashoffset:0}}
@keyframes cB{0%,64%{stroke-dashoffset:90}72%,100%{stroke-dashoffset:0}}
.notif{position:absolute;background:#fff;color:var(--text);border-radius:14px;padding:10px 14px;font-size:.8rem;font-weight:600;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);opacity:0}
.notif.n1{left:0;top:96px;animation:nA 9s infinite}.notif.n2{right:0;bottom:70px;animation:nB 9s infinite}
@keyframes nA{0%,34%{opacity:0;transform:translateX(-24px)}40%,56%{opacity:1;transform:none}62%,100%{opacity:0}}
@keyframes nB{0%,64%{opacity:0;transform:translateX(24px)}70%,92%{opacity:1;transform:none}98%,100%{opacity:0}}

/* demo */
.demo-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.demo-wrap .sec-h{margin-bottom:14px}
.demo-card{background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:24px;max-width:390px;width:100%;margin:auto}
.d-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.d-amt{color:var(--blue);font-size:1.5rem}
.d-stage{height:250px;display:grid;place-items:center;text-align:center}.d-stage>div{display:flex;flex-direction:column;align-items:center;gap:10px;animation:rise .4s both}
.d-stage .big-check,.d-stage .big-x{width:84px;margin:0}
.d-btns{display:flex;gap:10px}.d-btns .btn{flex:1;padding:11px 10px;font-size:.88rem}
.p-qr.big{width:130px}
.ctabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.ctabs button{border:1px solid var(--line);background:#fff;padding:7px 14px;border-radius:10px;font:600 .85rem 'Poppins',sans-serif;cursor:pointer}.ctabs .on{background:var(--navy);color:#fff;border-color:var(--navy)}
pre[hidden]{display:none}.code-box pre{margin:0}
@media (max-width:860px){.demo-wrap{grid-template-columns:1fr}.hero-visual .notif.n1{left:-4px}.ticks{justify-content:center}.hero .btn-google{width:100%}}