:root{--bg:#f4f2ee;--fg:#1a1a1e;--muted:#5d5b57;--card:#fff;--line:#e3dfd8;--accent:#ffc233}
@media(prefers-color-scheme:dark){:root{--bg:#161618;--fg:#f1efea;--muted:#a9a59d;--card:#1f1f23;--line:#33333a}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:32px 16px 56px}
header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.mark{width:40px;height:40px;border-radius:10px}
.brand{font-weight:800;font-size:20px;text-decoration:none;color:var(--fg)}
h1{font-size:28px;line-height:1.25;margin:0 0 4px}h2{font-size:19px;margin:28px 0 6px}
p,li{color:var(--fg)}.muted{color:var(--muted);font-size:14px}
a{color:inherit}ul{padding-left:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0}
nav a{margin-right:16px}footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.wide{max-width:1040px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;margin:8px 0 40px}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-1px;margin:12px 0}
.hero p.lead{font-size:19px;color:var(--muted);margin:0 0 20px}
.pill{display:inline-block;background:var(--accent);color:#1a1a1e;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px}
.phone{justify-self:center;width:260px;border-radius:30px;border:8px solid #1a1a1e;box-shadow:0 24px 60px rgba(0,0,0,.22);display:block}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-block;padding:13px 20px;border-radius:12px;font-weight:700;text-decoration:none;background:#1a1a1e;color:#fff}
.btn.alt{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
@media(prefers-color-scheme:dark){.btn{background:var(--accent);color:#1a1a1e}.phone{border-color:#000}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 8px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.feat h3{margin:0 0 6px;font-size:17px}.feat p{margin:0;color:var(--muted);font-size:15px}
.shots{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory}
.shots img{height:440px;border-radius:18px;scroll-snap-align:start;flex:none}
.band{background:#1a1a1e;color:#fff;border-radius:18px;padding:28px;margin:36px 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.band h2{margin:0;font-size:24px;color:#fff}.band p{margin:6px 0 0;color:#c9c6bf}
.band .btn{background:var(--accent);color:#1a1a1e}
h2.sec{font-size:26px;margin:44px 0 4px;letter-spacing:-.4px}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.steps li:before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#1a1a1e;font-weight:800;margin-bottom:8px}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero h1{font-size:34px}.grid,.steps{grid-template-columns:1fr}.phone{width:220px}.shots img{height:380px}}
/* Animasi masuk saat digulir. Hanya aktif bila JS jalan (kelas .js) dan pengguna tidak meminta gerak dikurangi. */
@media(prefers-reduced-motion:no-preference){
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js .rv.in{opacity:1;transform:none}
.js .phone.rv{transform:translateY(28px) scale(.97)}.js .phone.rv.in{transform:none}
.feat,.steps li,.btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feat:hover,.steps li:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:scale(.98)}
}
.band .btn.alt{background:transparent;color:#fff;border:1.5px solid #55555c}
/* Atribut width/height di <img> hanya untuk memesan ruang; ukuran tampil mengikuti CSS tanpa mengubah perbandingan. */
.phone{height:auto;max-width:100%}
.shots img{width:auto}
img{max-width:100%}
.flows{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:14px 0 8px}
.flow{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.flow video{width:100%;aspect-ratio:9/16;background:#1a1a1e;display:block}
.flow .tx{padding:14px 16px 16px}.flow h3{margin:0 0 6px;font-size:17px}
.flow ol{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:980px){.flows{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.flows{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.flow{flex:none;width:78%;scroll-snap-align:start}}