:root{
      --bg: #0b0f16;
      --card:#0c1018;
      --line:#1e2635;
      --text:#e8edf6;
      --muted:#9aa6b8;
      --gold:#f5d06a;
      --gold-2:#d4af37;
      --brand:#3a57ff;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    html{scroll-behavior:smooth}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 110% -10%, #2644ff40 0%, transparent 60%),
        radial-gradient(1200px 700px at -10% -10%, #ffb10033 0%, transparent 60%),
        var(--bg);
    }
    a{color:inherit;text-decoration:none}

    .container{max-width:1100px;margin:0 auto;padding:0 20px}
    .btn{display:inline-flex;align-items:center;gap:.6rem;border:1px solid #273141;background:#121826;color:var(--text);
         padding:.8rem 1rem;border-radius:12px;transition:.18s ease;font-weight:600}
    .btn:hover{transform:translateY(-1px);border-color:#364058}
    .btn.gold{border:0;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#131313;font-weight:900;box-shadow:0 8px 22px rgba(212,175,55,.25)}
    .btn.ghost{background:transparent;border-color:#364058}

    /* Header */
    .site-header{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(6px);
      background:linear-gradient(180deg,rgba(11,15,22,.8),rgba(11,15,22,.35));
      border-bottom:1px solid #141b28;
    }
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.2px}
    .brand i{color:var(--gold-2)}

    /* Hero */
    .hero{
      text-align:center;
      padding:80px 0 64px;
      background:
        radial-gradient(900px 500px at 50% -10%, #2644ff20 0%, transparent 70%),
        linear-gradient(180deg,#0b0f16,#0b0f16);
    }
    .badge{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.4rem .9rem;border-radius:999px;border:1px solid #2a3350;
      background:#101726;color:#cfe0ff;font-size:.9rem
    }
    .hero h1{font-size:clamp(28px,5vw,46px);line-height:1.08;margin:16px 0 10px}
    .hero p{max-width:760px;margin:0 auto;color:var(--muted);font-size:clamp(15px,2.3vw,18px)}
    .hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:20px}

    /* Sections */
    .section{padding:64px 0}
    .section h2{font-size:clamp(22px,3.6vw,32px);margin:0 0 8px}
    .section header p{color:var(--muted);max-width:640px;margin:0 auto}

    /* Cards + Grid */
    .card{
      background:linear-gradient(180deg,var(--card),#0a0e14);
      border:1px solid var(--line);
      border-radius:16px;
      padding:18px;
      transition:.2s ease;
    }
    .card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.35)}
    .grid{display:grid;gap:16px}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    @media (max-width: 900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
    @media (max-width: 640px){ .grid-3{grid-template-columns:1fr} }

    /* Pricing highlight */
    .card.pro{border-color:rgba(245,208,106,.5); box-shadow:0 0 0 1px rgba(245,208,106,.2) inset}

    /* Footer */
    footer{border-top:1px solid var(--line);padding:18px 0;text-align:center;color:var(--muted)}

    /* Reveal on scroll */
    .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
    .reveal.in{opacity:1; transform:none}
    .delay-1{transition-delay:.08s}
    .delay-2{transition-delay:.16s}
    .delay-3{transition-delay:.24s}
    /* --- Header & nav --- */
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(6px);
  background:linear-gradient(180deg,rgba(11,15,22,.8),rgba(11,15,22,.35));
  border-bottom:1px solid #141b28}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.2px}
.brand i{color:var(--gold-2)}
.hambtn{display:none;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid #273141;background:#121826;color:var(--text);
  padding:.6rem .8rem;border-radius:10px}
.hambtn:active{transform:scale(.98)}
.nav-right{display:flex;gap:.6rem;align-items:center}

/* --- Mobile menu (<= 860px) --- */
@media (max-width:860px){
  .hambtn{display:inline-flex}
  .nav-right{
    position:fixed; inset:auto 16px 16px 16px; top:64px;
    display:none; flex-direction:column; gap:.6rem;
    background:#0c1018; border:1px solid var(--line); border-radius:14px;
    padding:12px; box-shadow:0 18px 40px rgba(0,0,0,.45)
  }
  .nav-right.open{display:flex}
  /* tombol dalam menu full width biar enak di-tap */
  .nav-right .btn{width:100%; justify-content:center}
}