/* Layout mengikuti desain Banklio: hero gelap yang memudar ke putih, bento abu muda, CTA gelap.
   Aksen hijau-lime diganti biru. */
:root{
  --navy:#050B1F; --navy-2:#0A1B4D; --blue:#2F6BFF; --blue-d:#1D4FD8; --pop:#8CC0FF; --pop-ink:#04122F;
  --ink:#0B1226; --muted:#5C667F; --gray:#F1F4FA; --line:#E4E9F3; --white:#fff; --ok:#12A150;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,pre{margin:0}
ul,ol{padding:0;list-style:none}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}

/* Tombol */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font:600 14px var(--font);padding:11px 20px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background-color .2s}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-lg{padding:8px 8px 8px 24px;font-size:15px}
.btn-pop{background:var(--pop);color:var(--pop-ink)}
.btn-pop:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(140,192,255,.8)}
.btn-blue{background:var(--blue);color:#fff;padding:8px 8px 8px 22px}
.btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);justify-content:center}
.btn-ghost:hover{background:var(--gray)}
.btn:focus-visible,.pill-nav a:focus-visible{outline:3px solid #9DBEFF;outline-offset:2px}
.arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font-size:14px;transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translate(3px,-3px) rotate(0)}

/* ===== Hero ===== */
.hero{position:relative;margin:12px;border-radius:28px;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#050B1F 0%,#07123A 30%,#0E2A7A 48%,#7FA6F0 63%,#E6EEFF 76%,#fff 90%)}
.grid-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 62%);mask-image:linear-gradient(180deg,#000 10%,transparent 62%)}
.grid-bg .tw{position:absolute;width:64px;height:64px;background:rgba(80,130,255,.22);opacity:0;animation:tw 5s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:0}50%{opacity:1}}
.glow{position:absolute;right:-10%;top:-20%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.45),transparent 65%);pointer-events:none}

.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(18px,4vw,44px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px}
.mark{display:inline-flex;gap:3px;transform:skewX(-18deg)}
.mark i{display:block;width:6px;height:18px;border-radius:2px;background:var(--pop)}
.mark i+i{background:#fff;height:12px;align-self:flex-end}
.brand.dark .mark i{background:var(--blue)}
.brand.dark .mark i+i{background:var(--ink)}
.pill-nav{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.pill-nav a{display:block;padding:7px 16px;border-radius:999px;font-size:13px;color:rgba(255,255,255,.7);transition:color .2s,background-color .3s}
.pill-nav a:hover{color:#fff}
.pill-nav a.on{background:rgba(255,255,255,.14);color:#fff}

.hero-body{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding-block:48px 24px}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:400;text-wrap:balance;max-width:11ch}
.lead{margin-top:20px;max-width:34rem;color:rgba(255,255,255,.72);font-size:15px}
.hero-copy .btn{margin-top:28px}

.hero-visual{position:relative;min-height:360px;padding-bottom:30px;display:grid;place-items:center}
.px{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.pay-card{position:relative;overflow:hidden;width:min(380px,92%);aspect-ratio:1.55/1;margin-inline:auto;border-radius:18px;padding:20px 22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  /* biru gradasi sama dengan sidebar panel merchant */
  background:linear-gradient(165deg,#0A2557 0%,#0B4290 50%,#2380CC 100%);
  box-shadow:0 40px 70px -28px rgba(0,10,60,.75),inset 0 0 0 1px rgba(255,255,255,.14);transform:rotate(-4deg);animation:bob 6s ease-in-out infinite}
.pay-card::before{content:"";position:absolute;right:-60px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%);pointer-events:none}
@keyframes bob{50%{transform:rotate(-4deg) translateY(-10px)}}
.pc-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.pc-top strong{font-weight:600;letter-spacing:-.01em}
.pc-top span{color:rgba(255,255,255,.7);font-size:12px}
.pc-mid{display:grid;gap:2px}
.pc-label{font-size:11.5px;color:rgba(255,255,255,.7)}
.pc-amt{font-size:clamp(26px,3vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.pc-bottom{display:flex;gap:12px;align-items:flex-end;justify-content:space-between}
.qr{flex:none;width:62px;height:62px;background:#fff;border-radius:9px;padding:6px;display:grid;grid-template-columns:repeat(7,1fr);gap:1.5px}
.qr b{background:#0A2557;border-radius:1.5px}
.qr b.o{background:transparent}
.pc-meta{text-align:right}
.pc-meta span{display:block;font-weight:600;font-size:13px;color:#CFE6FF}
.pc-meta small{display:block;font-size:11px;color:rgba(255,255,255,.72);line-height:1.3}
.toast{position:absolute;left:-4%;bottom:-6%;display:flex;gap:10px;align-items:center;background:#fff;color:var(--ink);border-radius:16px;padding:12px 16px;font-size:12px;box-shadow:0 20px 40px -18px rgba(0,10,60,.5)}
.toast .ok{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#E7F7EE;color:var(--ok);font-weight:700;animation:pop 3.2s var(--ease) infinite}
@keyframes pop{0%,86%,100%{transform:scale(1)}92%{transform:scale(1.2)}}
.toast strong{display:block;font-size:13px}
.toast span{color:var(--muted)}
#feed{transition:opacity .35s,transform .35s var(--ease)}
#feed.swap{opacity:0;transform:translateY(6px)}

.hero-base{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:end;padding-block:28px 12px;color:var(--ink)}
.claim h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;font-weight:400;letter-spacing:-.03em;max-width:16ch}
.claim p{margin-top:12px;color:var(--muted);max-width:26rem;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stats li{padding-inline:clamp(10px,2vw,28px);border-left:1px solid #C9D3E8}
.stats li:first-child{border-left:0}
.stats b{display:block;font-size:clamp(2.2rem,5vw,4rem);line-height:1;font-weight:300;letter-spacing:-.04em;color:var(--navy-2);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted)}

.partners{position:relative;z-index:2;padding-block:26px 34px;color:var(--ink);text-align:center}
.partners p{font-size:12.5px;color:var(--muted)}
.marq{overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marq-row{display:flex;width:max-content;font-weight:700;font-size:20px;color:#9AA6C4;letter-spacing:-.01em;animation:marq 24s linear infinite}
.marq-row span{padding-inline:28px;white-space:nowrap}
.marq:hover .marq-row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===== Section umum ===== */
.sec{padding-block:72px 0}
h2.mid,.head-block h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;font-weight:400;letter-spacing:-.035em}
.sub{margin-top:12px;color:var(--muted);max-width:30rem}

/* Fitur */
.fitur{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.head-block{display:grid;gap:18px;justify-items:start}
.bullets{display:grid;gap:8px;color:var(--muted);font-size:13.5px;max-width:24rem;padding-left:18px;list-style:disc}
.mock{position:relative;margin-top:28px;min-height:400px}
.mock-card{background:#fff;border-radius:20px;padding:18px;box-shadow:0 26px 50px -26px rgba(11,30,90,.35);border:1px solid var(--line)}
.mock-card.chart{width:78%}
.mock-card.cards{position:absolute;right:0;top:215px;width:72%}
.mc-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.sel{border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.mc-big{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.mock svg{width:100%;height:auto;display:block}
.line{stroke-dasharray:1;stroke-dashoffset:1}
.in .line,.line.draw{animation:draw 1.8s var(--ease) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.row-item{display:flex;gap:12px;align-items:center;background:var(--gray);border-radius:14px;padding:12px;margin-top:10px}
.row-item small{display:block;color:var(--muted);font-size:11.5px}
.row-item b{font-size:16px;font-variant-numeric:tabular-nums}
.ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-size:13px;font-weight:700;flex:none}
.ic-blue{background:#E4EDFF;color:var(--blue)}.ic-sky{background:#E2F3FF;color:#0A84C6}
.ic-green{background:#E3F6EB;color:var(--ok)}.ic-violet{background:#EEE8FF;color:#6D4AE0}

.fitur-right .mid{margin-top:0}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.f-card{background:var(--gray);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s}
.f-card:hover{transform:translateY(-5px);background:#E9F0FF;box-shadow:0 24px 40px -26px rgba(47,107,255,.5)}
.f-card h3{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.02em}
.f-card p{font-size:13.5px;color:var(--muted)}
.code{margin-top:auto;font:500 11.5px ui-monospace,Menlo,Consolas,monospace;background:var(--navy);color:#CFE0FF;border-radius:10px;padding:10px 12px;overflow-x:auto}

/* Bento cara kerja */
.bento{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.b-card{position:relative;background:var(--gray);border-radius:26px;padding:clamp(20px,3vw,34px);overflow:hidden}
.steps{display:grid;gap:18px;margin-top:26px;position:relative;z-index:1;max-width:30rem}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px}
.steps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--blue);font-weight:600;font-size:13px;box-shadow:0 0 0 1px var(--line)}
.steps strong{display:block;font-weight:600}
.steps p{font-size:13.5px;color:var(--muted)}
.dots{position:absolute;right:-30px;bottom:-20px;width:50%;height:60%;opacity:.8;
  background-image:radial-gradient(#B9C4DC 1.6px,transparent 1.8px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse at 60% 40%,#000 25%,transparent 70%)}
.badge-dark{position:relative;z-index:1;margin-top:26px;display:inline-grid;gap:2px;background:var(--navy-2);color:#fff;border-radius:18px;padding:14px 18px}
.badge-dark b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.badge-dark span{font-size:12px;color:#B8C8F0}
.mini{font-size:18px;font-weight:500;letter-spacing:-.02em}
.notif{display:grid;gap:10px;margin-top:18px}
.notif li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 12px 26px -20px rgba(11,30,90,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.notif li.live{transform:translateX(-8px) scale(1.02);box-shadow:0 22px 36px -20px rgba(47,107,255,.55)}
.notif strong{display:block;font-size:13.5px}
.notif small{display:block;font-size:11.5px;color:var(--muted)}
.notif b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* Harga */
.price-head{text-align:center;display:grid;justify-items:center}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--gray);border-radius:26px;padding:26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.plan:hover{transform:translateY(-6px);box-shadow:0 28px 44px -28px rgba(47,107,255,.5)}
.plan h3{font-size:18px;font-weight:500}
.price{font-size:2.2rem;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price small{font-size:13px;color:var(--muted);letter-spacing:0}
.plan ul{display:grid;gap:8px;font-size:14px;color:var(--muted)}
.plan li::before{content:"✓";color:var(--blue);margin-right:8px;font-weight:700}
.plan .btn{margin-top:auto}
.plan.pop{background:var(--navy-2);color:#fff}
.plan.pop .price small,.plan.pop ul{color:#B8C8F0}
.tag{position:absolute;right:20px;top:20px;border-radius:999px;background:rgba(140,192,255,.2);color:var(--pop);font-size:11px;font-weight:600;padding:3px 10px}
.note{margin-top:14px;font-size:12px;color:var(--muted);text-align:center}

/* CTA */
.cta-wrap{padding-block:72px 0}
.cta{position:relative;overflow:hidden;border-radius:30px;color:#fff;text-align:center;padding:clamp(48px,8vw,88px) 20px;display:grid;justify-items:center;gap:16px;
  background:linear-gradient(135deg,#071538,#0C2A78 60%,#1A47B8)}
.cta .grid-bg{-webkit-mask-image:none;mask-image:none;opacity:.8}
.cta h2,.cta p,.cta .btn{position:relative}
.cta h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05;font-weight:400;letter-spacing:-.035em}
.cta p{color:rgba(255,255,255,.75)}

/* Footer */
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:56px 24px}
.foot-brand p{margin-top:12px;color:var(--muted);max-width:18rem;font-size:13.5px}
.foot h4{font-size:14px;font-weight:600;margin-bottom:12px}
.foot a:not(.brand){display:block;color:var(--muted);font-size:13.5px;padding-block:4px;transition:color .2s}
.foot a:not(.brand):hover{color:var(--blue)}
.copy{grid-column:1/-1;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

/* ===== Animasi masuk (transform dan opacity saja) ===== */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.h-word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.h-word>span{display:inline-block;transform:translateY(108%);transition:transform .85s var(--ease);transition-delay:calc(var(--i)*80ms + 120ms)}
.h-in .h-word>span{transform:none}
.top{transition:transform .5s var(--ease)}
.js .top{animation:drop .8s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}}

/* ===== Responsif ===== */
@media (max-width:900px){
  .hero-body,.hero-base,.fitur,.bento{grid-template-columns:1fr}
  .pill-nav{display:none}
  .plans{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .hero-visual{min-height:300px}
  .hero h1{max-width:none}
}
@media (max-width:560px){
  .f-grid{grid-template-columns:1fr}
  .mock{min-height:430px}
  .mock-card.chart{width:100%}
  .mock-card.cards{width:90%;top:240px}
  .stats li{padding-inline:8px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.h-word>span{opacity:1!important;transform:none!important;transition:none!important}
  .pay-card,.marq-row,.toast .ok,.grid-bg .tw,.js .top{animation:none!important}
  .line{stroke-dashoffset:0;animation:none!important}
  html{scroll-behavior:auto}
}

/* Logo Rainy Feel */
.logo-img{display:block;width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none}
.foot .logo-img{width:34px;height:34px}