:root{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#e8e9de;background:#101310;color-scheme:dark;font-size:15px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% 0,#20271b88,transparent 60%);line-height:1.7}
a{color:#dfca99}
a:focus-visible,summary:focus-visible{outline:2px solid #d6bb79;outline-offset:3px}
h1,h2,h3,p{margin:0}
b,strong{color:#e8e9de}
.wrap{max-width:1120px;margin:auto;padding:0 20px}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;border-bottom:1px solid #2a3026}
.brand{font-size:21px;letter-spacing:5px;font-weight:700;color:#e8e9de;text-decoration:none}
.brand small{display:block;font-size:9px;letter-spacing:2.3px;color:#9ba08f;font-weight:500}
.topnav{display:flex;align-items:center;gap:6px}
.topnav a:not(.button){padding:8px 11px;border-radius:6px;color:#a5b098;text-decoration:none;font-size:13px}
.topnav a:not(.button):hover{background:#283122;color:#e0c68b}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border:1px solid #d8bf84;background:#d8bf84;border-radius:7px;color:#262b1b;font-size:13px;font-weight:600;text-decoration:none}
.button:hover{background:#e9d398}
.button.ghost{background:transparent;color:#dfca99;border-color:#4a5240}
.button.ghost:hover{background:#283122;border-color:#d8bf84}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding:64px 0 72px}
.eyebrow{color:#bca46c;font-size:10px;letter-spacing:2px;font-weight:600;margin-bottom:12px}
h1{font-size:44px;font-weight:650;letter-spacing:-1.6px;line-height:1.12;text-wrap:balance}
h1 em{font-style:normal;color:#dfca99}
.lead{color:#a8b19e;margin-top:16px;max-width:520px;font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0;list-style:none;color:#8e9885;font-size:13px}
.hero-meta li::before{content:'✧';color:#bca46c;margin-right:7px}

/* Ilustrasi panel (bukan data nyata) */
.mock{border:1px solid #343d2e;background:#161c14;border-radius:14px;padding:18px;box-shadow:0 30px 70px -30px #000}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mock-head b{font-size:17px;letter-spacing:-.3px}
.mock-head span{font-size:10px;letter-spacing:1.5px;color:#7b8872}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips i{font-style:normal;font-size:11px;padding:4px 10px;border:1px solid #343d2e;border-radius:99px;color:#a5b098}
.chips i.on{background:#d8bf84;border-color:#d8bf84;color:#262b1b;font-weight:600}
.mock-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mock-stats div{border:1px solid #2a3026;background:#1b2219;border-radius:9px;padding:10px 12px}
.mock-stats small{display:block;font-size:10px;color:#8e9885}
.mock-stats strong{font-size:19px;font-variant-numeric:tabular-nums}
.mock-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.hero-card{border:1px solid #2a3026;background:#1b2219;border-radius:9px;padding:12px}
.hero-card b{display:block;font-size:13px}
.hero-card small{display:block;color:#8e9885;font-size:11px}
.status{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;color:#a9c58f}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:#8fbf6a}
.status.gold{color:#dfca99}.status.gold::before{background:#d8bf84}
.status.off{color:#7b8872}.status.off::before{background:#555e4d}
.bar{height:4px;border-radius:99px;background:#2a3026;margin-top:9px;overflow:hidden}
.bar span{display:block;height:100%;background:#8fbf6a}

/* Section */
section{padding:56px 0;border-top:1px solid #2a3026}
h2{font-size:28px;font-weight:620;letter-spacing:-.7px;line-height:1.2;text-wrap:balance}
.sub{color:#a8b19e;margin-top:10px;max-width:600px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.card{border:1px solid #343d2e;background:#1b2219;border-radius:11px;padding:20px}
.card h3{font-size:16px;font-weight:600;color:#dac28b}
.card p{color:#c1c8b7;margin-top:7px;font-size:14px}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 0;padding:0;list-style:none}
.steps li{counter-increment:step;border-top:2px solid #42482e;padding-top:14px;color:#c1c8b7;font-size:14px}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;color:#bca46c;font-size:12px;letter-spacing:2px;font-weight:600;margin-bottom:6px}
.steps b{display:block;font-size:15px;margin-bottom:3px}

/* Harga */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.price-box{border:1px solid #42482e;background:#242b1c;border-radius:14px;padding:28px}
.price-box .amount{font-size:42px;font-weight:650;letter-spacing:-1.5px;line-height:1.1;color:#e8e9de}
.price-box .unit{color:#b9c0a8;margin-top:4px}
.price-box ul{margin:18px 0 22px;padding-left:20px;color:#c1c8b7;font-size:14px}
.price-box li{margin-top:5px}
.price-box .button{width:100%}
.note{border:1px solid #76453b;background:#3a2420;border-radius:9px;padding:14px 18px;margin-top:18px;color:#f0c2b5;font-size:14px}

/* FAQ */
.faq{max-width:760px;margin-top:22px}
details{border:1px solid #343d2e;background:#1b2219;border-radius:9px;margin-top:10px;padding:0 18px}
summary{cursor:pointer;padding:14px 0;font-weight:600;color:#e8e9de}
details[open]{padding-bottom:16px}
details p{color:#c1c8b7}

footer{border-top:1px solid #2a3026;padding:22px 0 40px;color:#7b8872;font-size:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:4px 18px}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding:40px 0 48px}
  h1{font-size:32px;letter-spacing:-1px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .price{grid-template-columns:1fr;gap:24px}
  section{padding:42px 0}
  h2{font-size:23px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .topnav a:not(.button){display:none}
  .grid,.steps{grid-template-columns:1fr}
  .cta .button{flex:1 1 100%}
  .price-box .amount{font-size:34px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}