/* SantrinPay — design system */
:root{
  --ink:#0a0a0f;--ink-2:#14141c;--blue:#1e4dff;--blue-d:#1537c7;
  --g50:#f6f7f9;--g100:#eceef2;--line:#e4e6eb;--muted:#6a7180;--text:#363a46;--ok:#12a150;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer}
.container{width:min(1200px,100% - 48px);margin-inline:auto}
.mono{font-family:var(--mono)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico.fill{fill:currentColor;stroke:none}
h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(2.2rem,4.6vw,3.9rem)}
h3{font-size:1.3rem;letter-spacing:-.03em;line-height:1.15}
.blue{color:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-weight:550;font-size:.97rem;border:1px solid transparent;transition:transform .25s var(--ease),background .2s,border-color .2s,box-shadow .25s}
.btn .ico{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--blue);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(30,77,255,.7)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn-line:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn-sm{height:42px;padding:0 20px;font-size:.92rem}

/* header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid transparent;transition:border-color .25s}
.header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav .logo{height:32px;width:auto}
.nav-links{display:flex;gap:6px;font-size:.94rem;font-weight:500}
.nav-links a{padding:8px 14px;border-radius:999px;color:var(--text);transition:.2s}
.nav-links a:hover{background:var(--g100);color:var(--ink)}
.burger{display:none;background:none;border:0;width:42px;height:42px}
.burger span{display:block;height:2px;background:var(--ink);margin:6px 9px;border-radius:2px}

/* hero */
.hero{padding:72px 0 0}
.hero-copy{max-width:940px}
.tag{display:inline-flex;align-items:center;gap:10px;font:500 .78rem var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(18,161,80,.16);animation:live 2s infinite}
@keyframes live{50%{box-shadow:0 0 0 8px rgba(18,161,80,0)}}
.hero h1{font-size:clamp(3rem,8.4vw,7.2rem);line-height:.94;letter-spacing:-.055em;font-weight:600}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px;flex-wrap:wrap}
.hero-row p{max-width:520px;font-size:1.2rem;color:var(--muted);line-height:1.5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:34px;font:500 .78rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* stage */
.stage{position:relative;margin-top:64px;height:640px;border-radius:34px 34px 0 0;border:1px solid var(--line);border-bottom:0;background:var(--g50);background-image:radial-gradient(#d3d7df 1px,transparent 1.2px);background-size:24px 24px;overflow:hidden}
.dash{position:absolute;left:25%;top:64px;width:70%;height:620px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 80px -30px rgba(10,10,15,.28),0 2px 0 rgba(10,10,15,.02);overflow:hidden;font-size:13px}
.dash-top{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--g50)}
.dash-top i{width:10px;height:10px;border-radius:50%;background:#d9dce3}
.dash-top span{margin-left:14px;font:500 11px var(--mono);color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 14px;border-radius:6px}
.dash-body{display:grid;grid-template-columns:62px 1fr;height:calc(100% - 38px)}
.dash-side{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 0}
.dash-side img{width:30px;height:30px;border-radius:8px;margin-bottom:14px}
.dash-side .ico{width:36px;height:36px;padding:9px;border-radius:10px;color:var(--muted)}
.dash-side .ico.on{background:var(--g100);color:var(--ink)}
.dash-main{padding:22px 26px;overflow:hidden}
.dash-head{display:flex;justify-content:space-between;align-items:flex-start}
.dash-head small,.kpi small{color:var(--muted);font-size:12px;display:block}
.dash-head strong{display:block;font-size:34px;letter-spacing:-.04em;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
.dash-head .acts{display:flex;gap:8px}
.chip{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:500;color:var(--ink);font-size:12px;background:#fff}
.chip.solid{background:var(--ink);border-color:var(--ink);color:#fff}
.dash-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-top:20px}
.chart-card{border:1px solid var(--line);border-radius:12px;padding:14px 14px 10px;display:flex;flex-direction:column}
.chart-card .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:4px}
.chart-card .row b{color:var(--ink);font-weight:550}
.chart-card svg{width:100%;flex:1;min-height:150px;overflow:visible}
.kpis{display:grid;gap:10px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.kpi b{display:block;font-size:19px;color:var(--ink);letter-spacing:-.03em;font-weight:600;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:11px;color:var(--ok);font-weight:550}
.tx{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tx-h{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:550;color:var(--ink);font-size:12px}
.tx-h span{color:var(--muted);font-weight:400}
.tx-list{display:block}
.tx-row{display:grid;grid-template-columns:30px 1fr auto auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--g100);background:#fff}
.tx-row:last-child{border-bottom:0}
.tx-row .m{width:30px;height:30px;border-radius:8px;background:var(--g50);display:grid;place-items:center;color:var(--ink)}
.tx-row .m .ico{width:15px;height:15px}
.tx-row b{display:block;color:var(--ink);font-weight:550;line-height:1.2}
.tx-row small{color:var(--muted);font-size:11px}
.badge{font-size:11px;font-weight:550;color:var(--ok);background:rgba(18,161,80,.1);padding:3px 9px;border-radius:999px}
.tx-row .v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.tx-row.new{animation:flash 1.6s var(--ease)}
@keyframes flash{from{background:rgba(30,77,255,.1)}to{background:#fff}}

/* phone */
.phone{position:relative;width:292px;height:600px;border-radius:50px;background:#0b0b10;padding:10px;box-shadow:0 0 0 1.5px #2b2c35 inset,0 50px 90px -30px rgba(10,10,15,.55),0 0 0 1px rgba(255,255,255,.04);flex:none}
.phone::before{content:"";position:absolute;right:-3px;top:150px;width:3px;height:64px;border-radius:0 3px 3px 0;background:#23242c}
.island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:92px;height:27px;border-radius:20px;background:#000;z-index:8}
.screen{position:relative;width:100%;height:100%;border-radius:41px;overflow:hidden}
.lock{background:radial-gradient(120% 70% at 50% 0%,#1a3ad6 0%,#0b1766 45%,#05070f 100%);color:#fff;padding:62px 14px 0}
.lock .mono-s{position:absolute;right:-70px;top:150px;width:300px;opacity:.07}
.lock-meta{text-align:center;margin-bottom:22px}
.lock-meta small{display:block;font-size:13px;font-weight:500;opacity:.85;margin-bottom:2px}
.lock-meta strong{display:block;font-size:68px;font-weight:600;letter-spacing:-.04em;line-height:1}
.nstack{display:flex;flex-direction:column;gap:8px;position:relative}
.notif{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:start;padding:11px 12px;border-radius:22px;background:rgba(238,240,246,.84);backdrop-filter:blur(18px);color:#0b0b10;box-shadow:0 8px 24px -10px rgba(0,0,0,.55);transform-origin:50% 0;will-change:transform}
.notif img{width:38px;height:38px;border-radius:9px}
.notif b{display:block;font-size:13.5px;font-weight:650;line-height:1.25}
.notif span{display:block;font-size:13px;line-height:1.3;color:#2b2e38}
.notif time{font-size:11.5px;color:#6b7080;padding-top:1px}
.notif:nth-child(n+3){opacity:.75;transform:scale(.96)}
.notif:nth-child(n+4){opacity:.45;transform:scale(.92)}
.notif:nth-child(n+5){display:none}
.lock-foot{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:space-between;padding:0 34px}
.lock-foot i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);display:grid;place-items:center}
.lock-foot .ico{width:20px;height:20px}
.homebar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:110px;height:4px;border-radius:4px;background:rgba(255,255,255,.8)}
#phone1{position:absolute;left:5%;top:76px;z-index:3}

.toast{position:absolute;z-index:4;right:3%;top:30px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 24px 50px -20px rgba(10,10,15,.35);font-size:13px}
.toast .ok{width:30px;height:30px;border-radius:50%;background:var(--ok);display:grid;place-items:center;color:#fff}
.toast .ok .ico{width:16px;height:16px;stroke-width:2.6}
.toast b{display:block;color:var(--ink);font-weight:600}
.toast small{color:var(--muted)}

/* marquee */
.logos{padding:56px 0;border-bottom:1px solid var(--line);border-top:1px solid var(--line);margin-top:0}
.logos p{text-align:center;color:var(--muted);font-size:.98rem;margin-bottom:34px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;width:max-content;align-items:center;animation:scroll 38s linear infinite}
.track img{height:36px;width:auto;margin-right:84px;flex:none}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
section{padding:128px 0}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:40px;margin-bottom:72px}
.label{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-top:14px;display:flex;gap:12px;align-items:flex-start}
.label b{color:var(--blue);font-weight:500}
.sec-head h2{max-width:820px}
.sec-head p{margin-top:22px;max-width:560px;font-size:1.15rem;color:var(--muted);line-height:1.5}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:22px;border:1px solid var(--line);background:#fff;border-radius:26px;padding:30px;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.tile:hover{border-color:#c4cbdb;transform:translateY(-4px)}
.tile .ic{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);background:#fff}
.tile p{color:var(--muted);font-size:.97rem;margin-top:10px;max-width:420px}
.tile .mock{margin-top:auto}
.s7{grid-column:span 7}.s5{grid-column:span 5}.s4{grid-column:span 4}
.tile.g{background:var(--g50)}
.tile.ink{background:var(--ink);border-color:var(--ink);color:#c8ccd8}
.tile.ink h3{color:#fff}.tile.ink p{color:#9aa1b4}
.tile.ink .ic{background:#1b1c26;border-color:#2a2c38;color:#fff}

.co{display:grid;grid-template-columns:1fr 168px;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 20px 40px -26px rgba(10,10,15,.25)}
.co .prod{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.co .thumb{width:46px;height:46px;border-radius:12px;background:var(--ink);display:grid;place-items:center}
.co .thumb img{width:24px}
.co b{color:var(--ink);font-weight:600;display:block;line-height:1.2;font-size:14px}
.co small{color:var(--muted);font-size:12px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--g100);border-radius:10px;padding:3px;margin-bottom:14px;font-size:12.5px;font-weight:550;text-align:center}
.seg span{padding:7px;border-radius:8px;color:var(--muted)}
.seg .on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.co .pay{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:12.5px;color:var(--muted)}
.co .pay strong{color:var(--ink);font-size:20px;letter-spacing:-.03em}
.co .go{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:10px;background:var(--blue);color:#fff;font-weight:550;font-size:13.5px}
.qr{width:168px;height:168px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff;position:relative}
.qr svg{width:100%;height:100%}
.qr::after{content:"";position:absolute;left:10px;right:10px;height:2px;background:var(--blue);box-shadow:0 0 14px var(--blue);animation:scan 2.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:14px}50%{top:calc(100% - 16px)}}

.flow{display:grid;gap:0;position:relative}
.flow li{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink);font-weight:500}
.flow li:first-child{border-top:0}
.flow .d{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:#fff;background:#fff;transition:.4s}
.flow .d .ico{width:14px;height:14px;stroke-width:3}
.flow time{font:500 11.5px var(--mono);color:var(--muted)}
.flow li.done .d{background:var(--ok);border-color:var(--ok)}
.flow li.cur .d{border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,77,255,.14)}

.linkbox{display:grid;gap:10px}
.pill{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 8px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font:500 12.5px var(--mono);color:var(--ink)}
.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill i{font-style:normal;background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px;font:550 12px var(--sans)}
.mini-stats{display:flex;gap:10px}
.mini-stats div{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;font-size:11.5px;color:var(--muted)}
.mini-stats b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.03em}

.wd{background:#1b1c26;border:1px solid #2a2c38;border-radius:16px;padding:16px}
.wd small{color:#8c93a8;font-size:12px}
.wd strong{display:block;color:#fff;font-size:26px;letter-spacing:-.04em;font-weight:600;margin:2px 0 14px}

.sec-list{display:grid;gap:12px}
.sec-list li{display:flex;gap:12px;align-items:center;font-size:14px;color:var(--ink);font-weight:500;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px}
.sec-list .ico{color:var(--ok);width:18px;height:18px;stroke-width:2.4}

/* pillars (dark) */
.dark{background:var(--ink);color:#fff;border-radius:40px;margin:0 16px}
.dark .label{color:#8c93a8}
.dark h2{color:#fff}
.dark .sec-head p{color:#9aa1b4}
.prows{border-top:1px solid #23242e}
.prow{display:grid;grid-template-columns:90px 1fr 1.1fr 40px;gap:30px;align-items:center;padding:34px 12px;border-bottom:1px solid #23242e;transition:background .3s,padding .3s var(--ease)}
.prow:hover{background:#12131b;padding-left:26px}
.prow .n{font:500 .85rem var(--mono);color:var(--blue)}
.prow h3{color:#fff;font-size:clamp(1.5rem,2.8vw,2.3rem);letter-spacing:-.04em}
.prow p{color:#9aa1b4;font-size:1rem}
.prow .ico{color:#5a6075;transition:.3s}
.prow:hover .ico{color:#fff;transform:translate(3px,-3px)}

/* app */
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.app-copy h2{margin-bottom:24px}
.app-copy>p{font-size:1.15rem;color:var(--muted);max-width:480px;margin-bottom:36px}
.feat{display:grid;gap:0;margin-bottom:38px}
.feat li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.feat li:last-child{border-bottom:1px solid var(--line)}
.feat .ic{width:40px;height:40px;border-radius:12px;background:var(--g50);display:grid;place-items:center;color:var(--blue)}
.feat b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.feat span{color:var(--muted);font-size:.95rem}
.app-stage{position:relative;display:flex;justify-content:center;padding:50px 0;background:var(--g50);border-radius:34px;border:1px solid var(--line);background-image:radial-gradient(#d3d7df 1px,transparent 1.2px);background-size:24px 24px;overflow:hidden}
.app-stage .phone{height:620px}
.appui{background:#f4f5f8;padding:58px 14px 0;color:var(--ink);font-size:12px}
.appui .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.appui .top small{color:var(--muted);display:block}
.appui .top b{font-size:15px;letter-spacing:-.02em}
.appui .top img{width:32px;height:32px;border-radius:9px}
.bal{background:var(--blue);color:#fff;border-radius:20px;padding:16px;position:relative;overflow:hidden}
.bal small{opacity:.8}
.bal strong{display:block;font-size:30px;letter-spacing:-.04em;font-weight:600;margin:2px 0 14px;font-variant-numeric:tabular-nums}
.bal .btns{display:flex;gap:8px}
.bal .btns span{flex:1;text-align:center;padding:9px 0;border-radius:11px;background:rgba(255,255,255,.18);font-weight:550}
.bal .btns span:first-child{background:#fff;color:var(--blue)}
.bal .mono-s{position:absolute;right:-30px;top:-20px;width:130px;opacity:.12}
.sec-t{display:flex;justify-content:space-between;margin:16px 2px 8px;font-weight:600}
.sec-t span{color:var(--muted);font-weight:400}
.alist{display:grid;gap:7px}
.arow{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:14px;padding:9px 11px}
.arow .m{width:34px;height:34px;border-radius:10px;background:#eaf0ff;color:var(--blue);display:grid;place-items:center}
.arow .m .ico{width:16px;height:16px}
.arow b{display:block;font-weight:600;line-height:1.2}
.arow small{color:var(--muted);font-size:11px}
.arow .v{font-weight:650;color:var(--ok)}
.tabbar{position:absolute;left:14px;right:14px;bottom:16px;height:54px;border-radius:20px;background:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.25);display:flex;justify-content:space-around;align-items:center;color:var(--muted)}
.tabbar .on{color:var(--blue)}
.toast.t2{right:4%;top:auto;bottom:90px;z-index:5}

/* hub */
.hub{position:relative;height:500px;margin-top:10px}
.hub svg.lines{position:absolute;inset:0;width:100%;height:100%}
.hub .base{fill:none;stroke:var(--line);stroke-width:1.5;vector-effect:non-scaling-stroke}
.hub .flowl{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:3 14;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-34}}
.node{position:absolute;width:15.5%;height:76px;transform:translateY(-50%);display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;transition:border-color .25s,transform .35s var(--ease),box-shadow .3s}
.node:hover{border-color:var(--blue);transform:translateY(-50%) scale(1.04);box-shadow:0 18px 36px -20px rgba(30,77,255,.6)}
.node img{height:30px;width:auto;max-width:78%}
.node.l{left:0}.node.r{right:0}
.node .two{display:flex;gap:14px;align-items:center}
.col-cap{position:absolute;top:-34px;font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.col-cap.l{left:0}.col-cap.r{right:0}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:30px;background:var(--blue);display:grid;place-items:center;box-shadow:0 30px 60px -20px rgba(30,77,255,.7)}
.core img{width:112px;height:112px;border-radius:30px}
.core::before,.core::after{content:"";position:absolute;inset:-18px;border-radius:44px;border:1px solid rgba(30,77,255,.28);animation:ring 3s var(--ease) infinite}
.core::after{animation-delay:1.5s}
@keyframes ring{from{transform:scale(.88);opacity:1}to{transform:scale(1.5);opacity:0}}

/* dev */
.dev-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.dev-copy h2{margin-bottom:24px}
.dev-copy>p{color:var(--muted);font-size:1.12rem;margin-bottom:30px;max-width:460px}
.dev-copy .feat{margin-bottom:34px}
.term{background:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(10,10,15,.6)}
.term-top{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #22232d}
.term-top i{width:10px;height:10px;border-radius:50%;background:#2b2c36}
.tabs{display:flex;gap:2px;margin-left:16px}
.tabs button{background:none;border:0;color:#7f869b;font:500 12px var(--mono);padding:6px 12px;border-radius:8px}
.tabs button.on{background:#1b1c26;color:#fff}
.term pre{display:none;padding:22px 24px;margin:0;font:400 13.2px/1.75 var(--mono);color:#cdd3e6;overflow-x:auto}
.term pre.on{display:block}
.term .k{color:#7ea0ff}.term .s{color:#7ee0a8}.term .c{color:#5b6178}.term .n{color:#ffb86b}
.resp{border-top:1px solid #22232d;padding:16px 24px;font:400 12.5px/1.7 var(--mono);color:#8c93a8}
.resp b{color:#7ee0a8;font-weight:500}

/* steps */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:56px}
.steps-line{position:absolute;left:0;right:0;top:18px;height:2px;background:var(--line)}
.steps-line i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.step{position:relative}
.step::before{content:"";position:absolute;left:0;top:-48px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--blue)}
.step .n{font:500 .85rem var(--mono);color:var(--blue);margin-bottom:14px;display:block}
.step h3{font-size:1.7rem;margin-bottom:12px}
.step p{color:var(--muted);max-width:340px}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.faq-grid p{margin-top:20px;color:var(--muted);font-size:1.08rem;max-width:360px}
.faq-grid p a{color:var(--blue);font-weight:550}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px 0;font-size:1.15rem;font-weight:550;color:var(--ink);letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary .ico{transition:transform .35s var(--ease);color:var(--muted)}
details[open] summary .ico{transform:rotate(45deg);color:var(--blue)}
details p{margin:0 0 26px;max-width:620px;color:var(--muted);font-size:1.02rem}

/* cta */
.cta{padding:0 16px 16px}
.cta-box{position:relative;overflow:hidden;background:var(--blue);border-radius:40px;padding:120px 40px;color:#fff;text-align:left}
.cta-box .container{position:relative;z-index:2}
.cta-box h2{color:#fff;font-size:clamp(2.6rem,7vw,6rem);line-height:.96;letter-spacing:-.055em;max-width:900px}
.cta-box p{font-size:1.2rem;opacity:.85;margin:26px 0 40px;max-width:520px}
.cta-mark{position:absolute;right:-90px;top:50%;width:640px;height:640px;margin-top:-320px;opacity:.14;z-index:1}

/* footer */
.footer{background:#fff;padding:90px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:70px}
.footer .flogo{height:34px;width:auto;margin-bottom:22px}
.footer p.about{max-width:320px;color:var(--muted);font-size:.95rem}
.footer h4{font:500 .75rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:20px}
.footer li{margin-bottom:12px;font-size:.97rem}
.footer li a{color:var(--ink);transition:color .2s}
.footer li a:hover{color:var(--blue)}
.footer .contact a{display:flex;align-items:center;gap:12px;color:var(--ink);margin-bottom:14px;font-size:.97rem}
.footer .contact a:hover{color:var(--blue)}
.footer .contact .ico{width:36px;height:36px;padding:9px;border:1px solid var(--line);border-radius:50%;transition:.2s}
.footer .contact a:hover .ico{background:var(--blue);border-color:var(--blue);color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:28px;color:var(--muted);font-size:.88rem}
.wpp{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(37,211,102,.7);transition:transform .25s var(--ease)}
.wpp:hover{transform:scale(1.08)}
.wpp .ico{width:28px;height:28px}

/* legal */
.legal-hero{padding:90px 0 60px;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(2.6rem,6vw,5rem);letter-spacing:-.05em;line-height:.98}
.legal-hero p{margin-top:18px;color:var(--muted);font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.05em}
.legal-wrap{display:grid;grid-template-columns:240px 1fr;gap:72px;padding:64px 0 120px}
.legal-nav{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.legal-nav a{padding:10px 18px;font-weight:500;font-size:.95rem;color:var(--muted);margin-left:-1px;border-left:2px solid transparent}
.legal-nav a:hover{color:var(--ink)}
.legal-nav a.on{color:var(--blue);border-color:var(--blue)}
.legal-body{max-width:720px}
.legal-body h2{font-size:1.45rem;letter-spacing:-.03em;margin:42px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:#4a4f5e;margin-bottom:12px;font-size:1.02rem}
.legal-body ul{list-style:disc;padding-left:22px}
.legal-body a{color:var(--blue);font-weight:550}
.form{display:grid;gap:12px;margin-top:20px}
.form select,.form textarea{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#fff}
.form select:focus,.form textarea:focus{outline:0;border-color:var(--blue)}
.form textarea{min-height:150px;resize:vertical}
.form .btn{justify-self:start;border:0}

/* responsive */
@media(max-width:1020px){
  section{padding:84px 0}
  .sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:48px}
  .label{padding-top:0}
  .s7,.s5,.s4{grid-column:span 12}
  .app-grid,.dev-grid,.faq-grid,.legal-wrap{grid-template-columns:1fr;gap:44px}
  .steps{grid-template-columns:1fr;gap:44px;padding-top:0}
  .steps-line{display:none}.step::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:50px 1fr 30px}.prow p{grid-column:2/3}.prow .ico{grid-row:1;grid-column:3}
  .legal-nav{position:static;flex-direction:row;flex-wrap:wrap;border:0;gap:6px}
  .legal-nav a{border:1px solid var(--line);border-radius:999px;margin:0}
  .legal-nav a.on{border-color:var(--blue)}
  .nav-links{position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;padding:14px 24px 22px;border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .burger{display:block}
  .nav-cta .btn{display:none}
  .stage{height:auto;padding:30px 0 0;display:flex;flex-direction:column;align-items:center}
  .dash{position:relative;left:auto;top:auto;width:calc(100% - 32px);height:auto}
  .dash-side,.dash-grid .kpis,.tx{display:none}
  .dash-grid{grid-template-columns:1fr}
  .dash-body{grid-template-columns:1fr}
  #phone1{position:relative;left:auto;top:auto;margin-top:-90px;height:470px}
  .toast{display:none}
  .hub{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:0}
  .hub svg.lines,.core,.col-cap{display:none}
  .node{position:static;width:auto;transform:none}
  .node:hover{transform:none}
  .app-stage .toast{display:flex}
}
@media(max-width:560px){
  #phone1 .notif:nth-child(n+4){display:none}
  .foot-grid{grid-template-columns:1fr}
  .co{grid-template-columns:1fr}.qr{justify-self:center}
  .cta-box{padding:80px 24px}
  .dark{margin:0 8px;border-radius:28px}
  .hero{padding-top:44px}
  .app-stage .toast{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* transição "Entrar" */
.enter{position:fixed;inset:0;z-index:300;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;visibility:hidden;clip-path:circle(0 at var(--x,50%) var(--y,50%))}
.enter.on{visibility:visible;animation:enter-open .7s cubic-bezier(.7,0,.2,1) forwards}
@keyframes enter-open{to{clip-path:circle(160% at var(--x,50%) var(--y,50%))}}
.enter::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 46%,rgba(30,77,255,.22),transparent 70%);opacity:0}
.enter.on::before{animation:fade-in 1s .5s forwards}
.enter-box{position:relative;width:220px;height:220px;display:grid;place-items:center}
.enter-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.enter-ring circle{fill:none;stroke-width:2}
.enter-ring .track{stroke:rgba(255,255,255,.1)}
.enter-ring .prog{stroke:var(--blue);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(30,77,255,.9))}
.enter.on .enter-ring .prog{animation:ring-fill 2.1s .45s cubic-bezier(.65,0,.35,1) forwards}
@keyframes ring-fill{to{stroke-dashoffset:0}}
.enter-s{width:104px;height:104px;overflow:visible}
.enter-s path{fill-opacity:0;stroke-width:5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.enter-s .a{stroke:#fff;fill:#fff}
.enter-s .b{stroke:var(--blue);fill:var(--blue)}
.enter.on .enter-s path{animation:s-draw 1.1s .55s cubic-bezier(.65,0,.35,1) forwards,s-fill .6s 1.45s ease forwards}
.enter.on .enter-s .b{animation-delay:.8s,1.6s}
@keyframes s-draw{to{stroke-dashoffset:0}}
@keyframes s-fill{to{fill-opacity:1}}
.enter.done .enter-s{animation:s-pop .5s cubic-bezier(.3,1.6,.5,1)}
.enter.done .enter-ring .prog{stroke:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.8));transition:stroke .3s}
@keyframes s-pop{50%{transform:scale(1.14)}}
.enter-t{margin-top:30px;font-size:1.15rem;font-weight:550;letter-spacing:-.02em;opacity:0}
.enter.on .enter-t{animation:fade-up .6s .8s forwards}
.enter-t span::after{content:"";display:inline-block;width:1.1em;text-align:left;animation:dots 1.2s steps(4) infinite;overflow:hidden;vertical-align:bottom}
.enter.done .enter-t span::after{display:none}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
.enter-sub{margin-top:10px;font:500 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6d7488;opacity:0}
.enter.on .enter-sub{animation:fade-up .6s 1s forwards}
@keyframes fade-in{to{opacity:1}}
@keyframes fade-up{from{transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.enter.on{animation:none;clip-path:none}.enter-s path{fill-opacity:1;stroke-dashoffset:0}.enter-t,.enter-sub{opacity:1}}

/* transição WhatsApp: o S vira o ícone do WhatsApp */
.enter-wa{position:absolute;width:104px;height:104px;border-radius:50%;background:#25d366;display:grid;place-items:center;color:#fff;opacity:0;transform:scale(.3) rotate(90deg);box-shadow:0 0 0 0 rgba(37,211,102,.5),0 18px 50px -10px rgba(37,211,102,.7)}
.enter-wa .ico{width:56px;height:56px}
.enter.wa::before{background:radial-gradient(60% 50% at 50% 46%,rgba(37,211,102,.16),transparent 70%)}
/* S mais rápido para dar tempo da troca */
.enter.wa.on .enter-s path{animation:s-draw .9s .5s cubic-bezier(.65,0,.35,1) forwards,s-fill .4s 1.2s ease forwards}
.enter.wa.on .enter-s .b{animation-delay:.7s,1.35s}
.enter.wa.on .enter-ring .prog{animation-duration:2.3s}
/* troca: S encolhe e gira, ícone entra com mola, anel fica verde */
.enter.wa.morph .enter-s{animation:s-out .45s cubic-bezier(.6,0,.8,.4) forwards}
.enter.wa.morph .enter-wa{animation:wa-in .6s .25s cubic-bezier(.2,1.5,.4,1) forwards}
.enter.wa.morph .enter-ring .prog{stroke:#25d366;filter:drop-shadow(0 0 8px rgba(37,211,102,.9));transition:stroke .4s}
.enter.wa.done .enter-ring .prog{stroke:#25d366}
.enter.wa.done .enter-wa{animation:wa-pop .5s cubic-bezier(.3,1.6,.5,1) forwards,wa-pulse 1s ease-out}
@keyframes s-out{to{transform:scale(.3) rotate(-90deg);opacity:0}}
@keyframes wa-in{to{opacity:1;transform:none}}
@keyframes wa-pop{0%,100%{opacity:1;transform:none}50%{opacity:1;transform:scale(1.14)}}
@keyframes wa-pulse{to{box-shadow:0 0 0 40px rgba(37,211,102,0),0 18px 50px -10px rgba(37,211,102,.7)}}
@media(prefers-reduced-motion:reduce){.enter-wa{display:none}}

/* saque instantâneo (interativo) */
.wd-top{display:flex;justify-content:space-between;align-items:center}
.wd-top em{display:inline-flex;align-items:center;gap:4px;font:500 11px var(--mono);font-style:normal;color:#7be0a4;background:rgba(123,224,164,.1);padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.wd-top em .ico{width:12px;height:12px;stroke-width:2.4}
.wd strong{font-variant-numeric:tabular-nums}
.wd .go{width:100%;border:0;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:10px;background:#fff;color:var(--ink);font:600 13px var(--sans);transition:background .3s,color .3s,transform .15s}
.wd .go:active{transform:scale(.97)}
.wd .go span{display:none;align-items:center;gap:8px}
.wd .go .l-idle{display:inline-flex}
.wd.busy .go .l-idle,.wd.done .go .l-idle{display:none}
.wd.busy .go .l-busy{display:inline-flex}
.wd.done .go .l-done{display:inline-flex}
.wd.busy .go{background:#e9ecf5;pointer-events:none}
.wd.done .go{background:#25c26e;color:#fff;pointer-events:none}
.wd .go .ico{width:16px;height:16px;stroke-width:2.6}
.wd .sp{width:14px;height:14px;border:2px solid rgba(10,10,15,.18);border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wd .st{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#7be0a4;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.wd .st .ico{width:14px;height:14px;stroke-width:2.6}
.wd.done .st{opacity:1;transform:none}
.wd.busy em{color:#ffd37a;background:rgba(255,211,122,.1)}

/* notificação de "caiu na conta" */
.wd .bar{height:3px;border-radius:3px;background:#2a2c38;margin-top:12px;overflow:hidden}
.wd .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1e4dff,#25c26e);border-radius:3px}
.wd.busy .bar i{animation:wdbar 1.5s cubic-bezier(.4,0,.2,1) forwards}
.wd.done .bar i{width:100%}
@keyframes wdbar{to{width:100%}}
.bank-notif{position:absolute;left:14px;right:14px;top:14px;z-index:6;padding:11px 14px 13px;border-radius:22px;background:rgba(246,247,251,.96);backdrop-filter:blur(16px);color:#0b0b10;box-shadow:0 24px 50px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.5) inset;opacity:0;transform:translateY(-150%) scale(.94);pointer-events:none}
.bank-notif .bn-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bank-notif .bn-ic{width:20px;height:20px;border-radius:6px;background:linear-gradient(145deg,#2fd97c,#12a150);display:grid;place-items:center;color:#fff}
.bank-notif .bn-ic .ico{width:12px;height:12px;stroke-width:2.2}
.bank-notif em{font:600 10.5px var(--sans);font-style:normal;letter-spacing:.06em;color:#5d6272}
.bank-notif time{margin-left:auto;font-size:11px;color:#7a7f90}
.bank-notif b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.bank-notif>span{display:block;font-size:13px;color:#2f323d;line-height:1.35}
.bank-notif.in{animation:bank-in .75s cubic-bezier(.2,1.35,.35,1) forwards}
.bank-notif.out{animation:bank-out .45s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes bank-in{0%{opacity:0;transform:translateY(-150%) scale(.94)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes bank-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-150%) scale(.96)}}
.wd.done .go{animation:go-pulse .9s ease-out}
@keyframes go-pulse{0%{box-shadow:0 0 0 0 rgba(37,194,110,.65)}100%{box-shadow:0 0 0 18px rgba(37,194,110,0)}}

/* ícone Pix oficial */
.tx-row .m .ico,.arow .m .ico{width:18px;height:18px}
.bank-notif .bn-ic{background:#fff;box-shadow:0 0 0 1px #dfe3ea inset}
.bank-notif .bn-ic .ico{width:14px;height:14px}

/* páginas legais completas */
.legal-sub{max-width:680px;margin-top:20px;font-size:1.2rem;color:var(--muted);line-height:1.5;font-family:var(--sans);text-transform:none;letter-spacing:0}
.legal-hero .legal-sub{font:400 1.2rem/1.5 var(--sans)}
.legal-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.legal-meta span{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--muted);background:#fff}
.legal-wrap{grid-template-columns:270px 1fr}
.legal-side{position:sticky;top:100px;align-self:start;display:grid;gap:30px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.legal-side .legal-nav{position:static}
.side-t{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.toc{display:grid;border-left:1px solid var(--line)}
.toc a{display:block;padding:7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:.86rem;color:var(--muted);line-height:1.35;transition:color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--blue);border-color:var(--blue);font-weight:500}
.legal-body{max-width:760px}
.callout{background:var(--g50);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:16px;padding:22px 26px;margin-bottom:44px;color:#3b3f4c;font-size:1.02rem}
.callout b{display:block;color:var(--ink);margin-bottom:6px;font-size:.78rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em}
.lsec{scroll-margin-top:104px;padding-bottom:6px}
.lsec h2{display:flex;align-items:baseline;gap:14px;font-size:1.5rem;margin:48px 0 14px}
.lsec:first-of-type h2{margin-top:0}
.lsec h2 .num{font:500 .8rem var(--mono);color:var(--blue);flex:none}
.legal-body ol{padding-left:22px;margin-bottom:14px}
.legal-body ol li{margin-bottom:10px}
.legal-body li b,.legal-body p b{color:var(--ink);font-weight:600}
.tbl{display:block;overflow-x:auto;width:100%;border-collapse:collapse;font-size:.92rem;margin:14px 0 22px;border:1px solid var(--line);border-radius:14px}
.tbl thead th{background:var(--g50);color:var(--ink);font-weight:600;text-align:left}
.tbl th,.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;color:#4a4f5e}
.tbl td:first-child{color:var(--ink);font-weight:550}
.tbl tbody tr:last-child td{border-bottom:0}
.contact-card{margin-top:60px;border:1px solid var(--line);border-radius:22px;padding:28px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--g50)}
.contact-card b{display:block;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em}
.contact-card span{color:var(--muted);font-size:.95rem}
.form input{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#fff}
.form input:focus{outline:0;border-color:var(--blue)}
@media(max-width:1020px){
  .legal-wrap{grid-template-columns:1fr}
  .legal-side{position:static;max-height:none;overflow:visible}
  .toc-wrap{display:none}
}
.legal-hero p.legal-sub{font:400 1.2rem/1.5 var(--sans);text-transform:none;letter-spacing:0;color:var(--muted);margin-top:20px}
.legal-side{scrollbar-width:thin;scrollbar-color:var(--line) transparent}