:root{
  --primary:#0D4694;--primary-strong:#083A7B;--primary-deep:#072B6A;--primary-soft:#EEF5FF;
  --ink:#101828;--text:#344054;--muted:#667085;--subtle:#98A2B3;--bg:#F8F9FF;--white:#fff;
  --border:#E4E7EC;--border-strong:#D0D5DD;--success:#079455;--success-bg:#ECFDF3;
  --warning:#DC6803;--warning-bg:#FFFAEB;--danger:#D92D20;--radius:14px;--shadow:0 1px 2px rgba(16,24,40,.04)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.section,.provider-section,.security-section,.integration-section,.pricing-section,.stats-section,#faq{scroll-margin-top:92px}

.topbar{position:sticky;top:0;z-index:80;height:76px;border-bottom:1px solid #DDE1EA;background:rgba(248,249,255,.92);backdrop-filter:blur(14px)}.topbar-inner{height:100%;max-width:1360px;margin:auto;padding:0 34px;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{height:38px;width:auto;max-width:170px;object-fit:contain}.desktop-nav{height:100%;display:flex;align-items:center;gap:28px;flex:1}.desktop-nav a{height:100%;display:flex;align-items:center;position:relative;color:#475467;font-size:14px;font-weight:550;transition:.18s}.desktop-nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:15px;height:2px;border-radius:999px;background:var(--primary);transition:.22s cubic-bezier(.2,.8,.2,1)}.desktop-nav a:hover,.desktop-nav a.active{color:var(--primary-deep)}.desktop-nav a.active{font-weight:700}.desktop-nav a.active::after{left:0;right:0}.topbar-actions{display:flex;align-items:center;gap:12px}.login-link{font-size:14px;font-weight:600;color:#344054}.login-link:hover{color:var(--primary)}.button{min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:650;transition:.17s ease;cursor:pointer}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--primary);border-color:var(--primary);color:#fff}.button-primary:hover{background:var(--primary-strong);border-color:var(--primary-strong)}.button-secondary{background:#fff;border-color:var(--border-strong);color:var(--ink)}.button-secondary:hover{background:#FCFCFD;border-color:#98A2B3}.button-small{min-height:40px;padding:0 15px}.button-large{min-height:48px;padding:0 20px}.button-light{background:#fff;color:var(--primary);border-color:#fff}.menu-button{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink);place-items:center}.menu-button svg{width:20px}.mobile-menu{position:absolute;top:76px;left:0;right:0;padding:14px 20px 20px;border-bottom:1px solid var(--border);background:#fff;box-shadow:0 16px 32px rgba(16,24,40,.08)}.mobile-menu a:not(.button){display:block;padding:12px 4px;color:var(--text);font-size:14px;font-weight:600}.mobile-auth{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--border)}

.hero{position:relative;overflow:hidden;max-width:1360px;margin:auto;padding:96px 34px 108px;min-height:calc(100vh - 76px);display:flex;align-items:center}.hero-orbits{display:none}.hero-content{width:100%;display:grid;grid-template-columns:minmax(0,.96fr) minmax(420px,1.04fr);column-gap:72px;align-items:center}.hero-content>*:not(.supported-card){grid-column:1}.eyebrow-pill{width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#E6ECFF;color:var(--primary);font-size:11px;font-weight:750;letter-spacing:.045em;text-transform:uppercase}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px rgba(13,70,148,.09)}.hero h1{margin:26px 0 22px;max-width:680px;font-size:clamp(44px,4.4vw,70px);line-height:1.06;letter-spacing:-.055em;font-weight:800}.hero h1 span{color:#0A3478}.hero-copy{max-width:630px;margin:0;color:#5A6477;font-size:18px;line-height:1.72}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-note{margin-top:26px;padding-top:22px;border-top:1px solid #D7DCE7;color:#475467;font-size:13px;line-height:1.7}.hero-note strong{color:#087443}.supported-card{grid-column:2;grid-row:1/span 6;align-self:center;min-height:520px;padding:38px;border:1px solid #B8C1D1;border-radius:16px;background:rgba(255,255,255,.62);position:relative;overflow:hidden}.supported-card::before{content:"PAYKITA ENGINE";display:inline-flex;padding:6px 11px;border:1px solid var(--primary);border-radius:999px;background:#fff;color:var(--primary);font-size:11px;font-weight:750;letter-spacing:.05em}.supported-card::after{content:"Pembayaran terdeteksi → status PAID → webhook terkirim";position:absolute;left:38px;right:38px;bottom:38px;padding:16px 18px 16px 48px;border:1px solid #CDEADB;border-left:4px solid var(--success);border-radius:10px;background:#fff;color:#344054;font-size:13px;font-weight:650;box-shadow:var(--shadow)}.supported-title{margin:42px 0 18px;color:#475467;font-size:11px;font-weight:700;letter-spacing:.07em}.supported-items{display:grid;gap:18px;position:relative}.supported-items::before{content:"";position:absolute;left:24px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(to bottom,#AFC5FF 0 7px,transparent 7px 14px)}.provider-inline{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#344054;font-size:13px;font-weight:650;box-shadow:var(--shadow)}.provider-icon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary)}.provider-icon svg{width:21px;height:21px}

.section-container{max-width:1180px;margin:auto;padding-left:32px;padding-right:32px}.section-container.wide{max-width:1260px}.section{padding:96px 0}.section-muted{background:#F3F6FB}.section-heading{max-width:760px;margin-bottom:40px}.section-heading.centered{text-align:center;margin-left:auto;margin-right:auto}.section-kicker{display:inline-flex;padding:6px 11px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:750;letter-spacing:.055em}.section-heading h2{margin:12px 0;font-size:clamp(30px,3vw,40px);line-height:1.15;letter-spacing:-.04em}.section-heading p{margin:0;color:var(--muted);font-size:15px;line-height:1.75}

.stats-section{padding:80px 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.stat-card{padding:24px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow)}.stat-value{font-size:27px;font-weight:750;letter-spacing:-.035em}.stat-label{margin-top:8px;color:var(--muted);font-size:12px;font-weight:650}
.steps-grid,.feature-grid,.provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.step-card,.feature-card,.provider-card{padding:25px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow);transition:.18s ease}.step-card:hover,.feature-card:hover,.provider-card:hover{transform:translateY(-3px);border-color:#CAD8EB;box-shadow:0 14px 34px rgba(16,24,40,.07)}.step-card.emphasized{border-color:#B9D0F1;background:#FBFDFF}.step-number,.feature-icon,.provider-card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;background:var(--primary-soft);color:var(--primary);font-weight:750}.step-card h3,.feature-card h3,.provider-card h3{margin:20px 0 10px;font-size:17px;letter-spacing:-.02em}.step-card p,.feature-card p,.provider-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.feature-icon svg,.provider-card-icon svg{width:22px;height:22px}.provider-section{padding:96px 0;background:#fff}.provider-card-head{display:flex;align-items:center;gap:13px}.provider-card-head h3{margin:0}.provider-card-head span:not(.provider-card-icon){display:block;margin-top:4px;color:var(--primary);font-size:10px;font-weight:750;letter-spacing:.04em}.provider-card p{margin-top:16px}.provider-card>a{display:inline-flex;margin-top:20px;color:var(--primary);font-size:13px;font-weight:700}.risk-note{margin-top:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:18px;border:1px solid #FEDF89;border-radius:12px;background:var(--warning-bg)}.risk-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#FEF0C7;color:#B54708;font-weight:800}.risk-note strong{font-size:13px}.risk-note p{margin:4px 0 0;color:#7A2E0E;font-size:12px;line-height:1.6}.risk-note>a{color:#B54708;font-size:12px;font-weight:700}

.security-section{padding:96px 0;background:var(--primary-deep);color:#fff}.security-layout,.integration-layout{max-width:1180px;margin:auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.security-section .section-kicker{background:rgba(255,255,255,.12);color:#DCEAFF}.security-section .section-heading p{color:#C9D5E7}.security-list{display:grid;gap:12px}.security-list>div{padding:16px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.06);font-size:13px;line-height:1.6}.integration-layout{padding-top:96px;padding-bottom:96px}.integration-layout .inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.code-card{overflow:hidden;border:1px solid #D5DBE5;border-radius:14px;background:#101828;box-shadow:0 18px 46px rgba(16,24,40,.12)}.code-card-head{padding:13px 16px;border-bottom:1px solid #344054;color:#D0D5DD;font-size:12px;font-weight:650}.code-card pre{margin:0;padding:22px;overflow:auto;color:#DCEAFF;font:500 12px/1.75 "SFMono-Regular",Consolas,monospace}

.pricing-section{padding:96px 0;background:#fff}.pricing-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.price-card{position:relative;padding:24px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow)}.price-card.featured{border:2px solid var(--primary);padding:23px;background:#FBFDFF}.popular{position:absolute;top:-13px;right:18px;padding:5px 9px;border-radius:999px;background:var(--primary);color:#fff;font-size:9px;font-weight:750;letter-spacing:.04em}.price-card>span{color:var(--muted);font-size:11px;font-weight:700}.price-card strong{display:block;margin:12px 0 10px;font-size:28px;letter-spacing:-.04em}.price-card p{min-height:42px;margin:0;color:var(--muted);font-size:12px;line-height:1.6}.price-card a{display:inline-flex;margin-top:18px;color:var(--primary);font-size:13px;font-weight:700}.pricing-footnote{text-align:center;margin:18px 0 0;color:var(--muted);font-size:12px}

.faq-container{max-width:920px}.faq-list{display:grid;gap:10px}.faq-list details{border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}.faq-list summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:14px;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list details p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:13px;line-height:1.7}.faq-list details[open]{border-color:#C6D9F4}.faq-list details[open] summary{color:var(--primary)}.final-cta{padding:86px 0;background:#F3F6FB;border-top:1px solid var(--border)}.centered-cta{text-align:center;max-width:860px}.centered-cta h2{margin:14px 0;font-size:38px;letter-spacing:-.04em}.centered-cta p{margin:auto;max-width:680px;color:var(--muted);line-height:1.75}.centered-cta .hero-actions{justify-content:center}

.footer{padding:64px 0 24px;background:#0B203E;color:#fff}.footer-top{display:grid;grid-template-columns:1fr 1.4fr;gap:70px}.footer-brand img{height:40px;filter:brightness(0) invert(1)}.footer-brand p{max-width:380px;color:#B8C7DB;font-size:13px;line-height:1.7}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.footer-links>div{display:grid;align-content:start;gap:10px}.footer-links strong{font-size:13px}.footer-links a{color:#B8C7DB;font-size:12px}.footer-links a:hover{color:#fff}.footer-bottom{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:20px;color:#91A3BC;font-size:11px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .58s ease,transform .58s cubic-bezier(.2,.75,.3,1)}.reveal.is-visible{opacity:1;transform:none}.reveal-group>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.75,.3,1)}.reveal-group.is-visible>*{opacity:1;transform:none}.reveal-group.is-visible>*:nth-child(2){transition-delay:.07s}.reveal-group.is-visible>*:nth-child(3){transition-delay:.14s}.reveal-group.is-visible>*:nth-child(4){transition-delay:.21s}.reveal-group.is-visible>*:nth-child(5){transition-delay:.28s}.reveal-group.is-visible>*:nth-child(6){transition-delay:.35s}

@media(max-width:980px){.hero{padding-top:72px}.hero-content{grid-template-columns:1fr;gap:44px}.hero-content>*:not(.supported-card){grid-column:1}.supported-card{grid-column:1;grid-row:auto;min-height:470px}.stats-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}.steps-grid,.feature-grid,.provider-grid{grid-template-columns:repeat(2,1fr)}.security-layout,.integration-layout{grid-template-columns:1fr;gap:36px}.footer-top{grid-template-columns:1fr;gap:36px}}
@media(max-width:760px){.topbar-inner{padding:0 16px}.desktop-nav,.topbar-actions>.login-link,.topbar-actions>.button{display:none}.topbar-actions{margin-left:auto}.menu-button{display:grid}.hero{padding:64px 18px 72px;min-height:auto}.hero h1{font-size:42px}.hero-copy{font-size:16px}.supported-card{padding:26px;min-height:440px}.supported-card::after{left:26px;right:26px;bottom:26px}.section-container,.security-layout,.integration-layout{padding-left:18px;padding-right:18px}.section,.provider-section,.pricing-section,.security-section{padding-top:72px;padding-bottom:72px}.stats-grid,.steps-grid,.feature-grid,.provider-grid,.pricing-grid{grid-template-columns:1fr}.risk-note{grid-template-columns:auto 1fr}.risk-note>a{grid-column:2}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.reveal,.reveal-group>*{transform:translateY(10px)}}
@media(max-width:460px){.brand img{height:34px;max-width:145px}.hero h1{font-size:36px}.eyebrow-pill{font-size:9px}.hero-actions .button{width:100%}.supported-card{padding:20px}.supported-card::after{left:20px;right:20px}.provider-inline{padding:12px}.footer-links{grid-template-columns:1fr}.mobile-auth{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.reveal-group>*{opacity:1!important;transform:none!important;transition:none!important}.button:hover,.step-card:hover,.feature-card:hover,.provider-card:hover{transform:none}}