@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}

:root{--navy:#0B3345;--navy-2:#0F4057;--navy-3:#16506b;--red:#ED3537;--red-d:#C92B2D;--steel:#BDBFC1;--ink:#1d2328;--soft:#5c6670;--paper:#F4F6F8;--line:#dfe4e9;--ok:#1E8E5A;--wa:#25D366;--r:14px}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Plex,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
code{font-family:ui-monospace,Menlo,Consolas,monospace;background:rgba(127,140,150,.18);padding:1px 6px;border-radius:5px;font-size:.88em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.narrow{width:min(820px,100% - 40px)}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:12px;font:600 15.5px/1 Plex,sans-serif;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,background-color .18s,border-color .18s,box-shadow .18s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid rgba(237,53,55,.45);outline-offset:3px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px -10px rgba(237,53,55,.8)}
.btn-red:hover{background:var(--red-d)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#fff;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn-wa{background:#159947;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:0 12px 26px -10px rgba(0,0,0,.5)}
.btn-wa svg{color:#fff;flex:none}
.btn-wa:hover{background:#12843c;border-color:#fff;box-shadow:0 16px 32px -12px rgba(0,0,0,.6)}
.btn-sm{height:40px;padding:0 18px;font-size:14px;border-radius:10px}

/* navigasi */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background-color .25s,box-shadow .25s,backdrop-filter .25s}
.nav.solid{background:rgba(11,51,69,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand img{width:36px;height:36px;border-radius:9px;background:#fff;padding:2px;object-fit:contain}
.nav-links{display:flex;gap:26px;margin-left:auto;margin-right:6px}
.nav-links a{color:rgba(255,255,255,.78);text-decoration:none;font-size:14.5px;font-weight:500;transition:color .15s}
.nav-links a:hover{color:#fff}

/* hero */
.hero{position:relative;background:var(--navy);color:#fff;padding:132px 0 120px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(900px 480px at 78% 12%,rgba(22,80,107,.75),transparent 70%),linear-gradient(180deg,#0B3345 0%,#08283a 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.hero .eyebrow{color:#ff8587}
.hero h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.028em;font-weight:700;margin:16px 0 20px}
.hero h1 em{font-style:normal;color:#ff6b6d;position:relative;white-space:normal}
.lead{font-size:18px;color:rgba(255,255,255,.8);max-width:520px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font-size:14px;color:rgba(255,255,255,.62)}
.hero-facts li{position:relative;padding-left:16px}
.hero-facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--red)}
.hero-edge{position:absolute;left:0;right:0;bottom:-1px;height:56px;background:#fff;clip-path:polygon(0 100%,100% 100%,100% 0,0 100%)}
.hero-visual{position:relative;padding-bottom:60px}

/* bingkai tangkapan layar */
.shot{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(15,64,87,.18);box-shadow:0 40px 80px -30px rgba(3,18,27,.55),0 8px 24px -12px rgba(3,18,27,.3)}
.shot .bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 13px;background:#e9edf1;border-bottom:1px solid #d6dce2}
.shot .bar i{width:10px;height:10px;border-radius:50%;background:#c3cad1}
.shot .bar i:nth-child(1){background:#ff5f57}.shot .bar i:nth-child(2){background:#febc2e}.shot .bar i:nth-child(3){background:#28c840}
.shot .bar span{margin-left:10px;font-size:11.5px;color:#6b7680}
.shot img{width:100%}
.hero-shot{transform:perspective(1800px) rotateY(-7deg) rotateX(3deg);transform-origin:left center;transition:transform .5s ease}
.hero-shot:hover{transform:perspective(1800px) rotateY(-2deg) rotateX(1deg)}

/* ponsel + chat WhatsApp */
.phone{position:absolute;right:-6px;bottom:-4px;width:270px;background:#0b141a;border-radius:34px;padding:9px;box-shadow:0 40px 70px -20px rgba(0,0,0,.7),0 0 0 2px #1f2c34 inset;z-index:2}
.phone-top{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;background:#1f2c34;border-radius:26px 26px 0 0;color:#e9edef}
.phone-top .av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy-3);font-size:12px;font-weight:700}
.phone-top b{display:block;font-size:13.5px;line-height:1.2}
.phone-top small{font-size:11px;color:#8696a0;transition:color .2s}
.chat{position:relative;height:236px;padding:12px 10px;background:#0b141a;background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:14px 14px;border-radius:0 0 26px 26px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px}
.day{align-self:center;font-size:10.5px;color:#8696a0;background:#182229;padding:3px 10px;border-radius:8px;margin-bottom:auto}
.msg{display:none;align-self:flex-start;max-width:92%;background:#202c33;color:#e9edef;border-radius:2px 12px 12px 12px;padding:6px 8px 5px;font-size:12.5px;line-height:1.4;transform-origin:0 100%}
.msg.show{display:block;animation:msgIn .5s cubic-bezier(.2,.8,.2,1.15) both}
@keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.msg .doc{display:flex;gap:9px;align-items:center;background:#1a252b;border-radius:8px;padding:8px;margin-bottom:6px}
.msg .pdf{display:grid;place-items:center;width:34px;height:40px;border-radius:5px;background:#e5484d;color:#fff;font-size:10px;font-weight:700}
.msg .doc b{display:block;font-size:11.5px;font-weight:600;word-break:break-all}
.msg .doc small{font-size:10px;color:#8696a0}
.msg .time{display:flex;justify-content:flex-end;align-items:center;gap:3px;font-size:10px;color:#8696a0;margin-top:2px}
.ticks{position:relative;width:16px;height:10px;display:inline-block}
.ticks::before,.ticks::after{content:"";position:absolute;top:1px;width:5px;height:9px;border:solid #8696a0;border-width:0 1.8px 1.8px 0;transform:rotate(40deg);transition:border-color .3s,opacity .3s}
.ticks::before{left:2px}.ticks::after{left:7px;opacity:0}
.msg.sent .ticks::after{opacity:1}
.msg.read .ticks::before,.msg.read .ticks::after{border-color:#53bdeb}
.typing{align-self:flex-start;display:none;gap:4px;background:#202c33;padding:10px 12px;border-radius:2px 12px 12px 12px}
.typing.on{display:flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* section umum */
.sec{padding:104px 0}
.sec.paper{background:var(--paper)}
.sec.dark{background:var(--navy);color:#fff}
.h2{font-size:clamp(28px,3.4vw,42px);line-height:1.14;letter-spacing:-.022em;font-weight:700;margin:12px 0 0;max-width:760px}
.muted{color:var(--soft);font-size:17px;margin-top:16px}
.sec.dark .eyebrow{color:#ff8587}

.contrast{padding:88px 0}
.two-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-col{border-radius:var(--r);padding:24px;border:1px solid var(--line)}
.vs-col h3{font-size:15px;font-weight:700;margin-bottom:14px}
.vs-col li{position:relative;padding-left:24px;margin:9px 0;font-size:14.5px;color:var(--soft)}
.vs-col li::before{position:absolute;left:0;top:1px;font-weight:700}
.vs-col.bad{background:var(--paper)}
.vs-col.bad li::before{content:"×";color:#b3262a}
.vs-col.good{background:var(--navy);border-color:var(--navy);color:#fff}
.vs-col.good li{color:rgba(255,255,255,.86)}
.vs-col.good li::before{content:"✓";color:#4fd18b}

/* cara kerja */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;position:relative}
.steps::before{content:"";position:absolute;left:22px;right:22px;top:23px;height:2px;background:linear-gradient(90deg,var(--red),rgba(255,255,255,.14));z-index:0}
.steps li{position:relative;z-index:1}
.steps .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);font-weight:700;font-size:18px;box-shadow:0 0 0 7px var(--navy)}
.steps h3{font-size:18px;margin:20px 0 8px}
.steps p{font-size:14.5px;color:rgba(255,255,255,.7)}
.queue{margin-top:60px;background:#fff;color:var(--ink);border-radius:18px;padding:24px;max-width:760px;box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
.queue-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pill{font-size:12.5px;font-weight:600;background:var(--paper);padding:4px 12px;border-radius:99px;color:var(--navy);font-variant-numeric:tabular-nums}
.bar-track{height:8px;background:#e8ecf0;border-radius:99px;overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--navy);border-radius:99px;transition:width .5s ease}
.q-list{margin-top:16px}
.q-list li{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-top:1px solid #eef1f4;font-size:14.5px}
.q-name small{margin-left:9px;color:#8a949e;font-size:12.5px}
.q-st{font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:99px;background:#e9eef2;color:#4d5964;min-width:92px;text-align:center;transition:background-color .3s,color .3s}
.q-list li[data-s=send] .q-st{background:#FBF1DE;color:#9a6a12;animation:pulse 1s ease-in-out infinite}
.q-list li[data-s=done] .q-st{background:#E3F4EA;color:#17724a}
@keyframes pulse{50%{opacity:.55}}
.q-note{margin-top:14px;font-size:12.5px;color:#7b8691}

/* fitur */
.feat{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:92px}
.feat.flip{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.feat.flip .feat-copy{order:2}.feat.flip .feat-img{order:1}
.idx{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--red)}
.feat h3{font-size:28px;line-height:1.18;letter-spacing:-.015em;margin:8px 0 12px}
.feat-copy p{color:var(--soft);font-size:16.5px}
.feat-copy ul{margin-top:20px}
.feat-copy li{position:relative;padding-left:26px;margin:10px 0;font-size:15px}
.feat-copy li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg) translateY(-3px)}
.feat-img .shot{transition:transform .4s ease,box-shadow .4s}
.feat-img .shot:hover{transform:translateY(-8px);box-shadow:0 50px 90px -30px rgba(3,18,27,.5)}

/* tiga jalur */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.path{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;transition:transform .25s,box-shadow .25s}
.path:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(11,51,69,.45)}
.path h3{font-size:20px;margin-bottom:10px}
.path p{color:var(--soft);font-size:15px}
.path ul{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.path li{font-size:14px;margin:8px 0;padding-left:20px;position:relative}
.path li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--navy)}
.path.hl{background:var(--navy);color:#fff;border-color:var(--navy)}
.path.hl p{color:rgba(255,255,255,.78)}
.path.hl ul{border-color:rgba(255,255,255,.2)}
.path.hl li::before{background:var(--red)}
.tag{position:absolute;top:-12px;left:24px;background:var(--red);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:99px}

/* angka & keamanan */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;border-top:1px solid rgba(255,255,255,.16)}
.stat{padding:30px 22px 6px 0}
.stat+.stat{padding-left:26px;border-left:1px solid rgba(255,255,255,.12)}
.stat b{display:block;font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.68)}
.stat b span{display:inline;margin:0;font-size:inherit;color:inherit}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px}
.sec-grid h3{font-size:18px;margin-bottom:8px}
.sec-grid p{font-size:15px;color:rgba(255,255,255,.7)}

/* faq */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 2px;font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);font-size:20px;font-weight:500;color:var(--navy);transition:transform .25s,background-color .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--red);color:#fff}
.faq details p{padding:0 44px 22px 2px;color:var(--soft)}
.faq summary:focus-visible{outline:3px solid rgba(237,53,55,.4);outline-offset:2px;border-radius:6px}

/* ajakan */
.cta-band{background:var(--red);color:#fff;padding:64px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.02em}
.cta-band p{margin-top:8px;opacity:.92}

/* footer */
.foot{background:#071f2b;color:rgba(255,255,255,.7);padding:60px 0 0;font-size:14.5px}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px}
.foot-brand p{margin-top:14px;max-width:320px}
.foot h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.foot a:not(.brand){display:block;text-decoration:none;margin:9px 0;transition:color .15s}
.foot a:not(.brand):hover{color:#fff}
.foot-in span{display:block;margin:9px 0}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:rgba(255,255,255,.5)}
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 12px 28px -8px rgba(0,0,0,.5);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}

/* animasi masuk (fade in down / up / left / right) */
.rv{opacity:0}
.rv.in{animation:.8s cubic-bezier(.2,.7,.2,1) var(--d,0ms) both}
.rv.in.up{animation-name:fadeUp}.rv.in.down{animation-name:fadeDown}.rv.in.left{animation-name:fadeLeft}.rv.in.right{animation-name:fadeRight}
@keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
.hero-shot.rv.in{animation-name:shotIn}
@keyframes shotIn{from{opacity:0;transform:perspective(1800px) rotateY(-16deg) rotateX(6deg) translateY(40px)}to{opacity:1;transform:perspective(1800px) rotateY(-7deg) rotateX(3deg)}}

@media (max-width:980px){
  .nav-links{display:none}.nav-in{justify-content:space-between}
  .hero{padding:104px 0 96px}
  .hero-in,.two-col,.feat,.feat.flip{grid-template-columns:1fr;gap:38px}
  .feat.flip .feat-copy,.feat.flip .feat-img{order:initial}
  .hero-visual{padding-bottom:0}
  .hero-shot{transform:none}.hero-shot.rv.in{animation-name:fadeUp}
  .phone{position:relative;right:auto;bottom:auto;margin:-60px 12px 0 auto}
  .steps{grid-template-columns:1fr 1fr;gap:34px 22px}.steps::before{display:none}
  .paths,.sec-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}.stat+.stat{border-left:0;padding-left:0}.stat:nth-child(odd){padding-right:14px}.stat{border-top:0}
  .foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}
  .sec{padding:76px 0}.feat{margin-top:64px}
}
@media (max-width:560px){
  .vs{grid-template-columns:1fr}.steps{grid-template-columns:1fr}
  .btn{width:100%}.nav .btn{width:auto}
  .phone{width:250px}.queue{padding:18px}.foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.rv{opacity:1}.rv.in{animation:none}.hero-shot,.phone{animation:none}.wa-float::after,.typing i,.q-list li[data-s=send] .q-st{animation:none}
}