:root{--bg:#0f1724;--muted:#94a3b8;--accent:#60a5fa}
    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:Inter,system-ui,sans-serif;color:#e6eef8;background:linear-gradient(180deg,#071027 0%, #081829 60%);overflow-x:hidden}

    header{padding:20px 16px;display:flex;align-items:center;justify-content:space-between;background:rgba(2,6,23,0.6);backdrop-filter:blur(6px);position:sticky;top:0;z-index:50}
    header .brand{color:var(--accent);font-weight:700;font-size:16px}
    header nav a{margin:0 10px;color:#e6eef8;text-decoration:none;font-size:14px;transition:color .3s}
    header nav a:hover{color:var(--accent)}

    .hero{text-align:center;padding:60px 16px}
    .hero h1{font-size:32px;margin-bottom:16px}
    .hero p{color:var(--muted);max-width:640px;margin:0 auto 20px}
    .btn{display:inline-block;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:.3s}
    .btn.primary{background:linear-gradient(90deg,var(--accent),#7dd3fc);color:#04263b}
    .btn.primary:hover{opacity:0.9;transform:scale(1.05)}

    .blog-intro{max-width:800px;margin:40px auto;text-align:center;line-height:1.6;color:var(--muted)}
    .blog-intro h2{font-size:24px;margin-bottom:12px;color:#fff}

    /* Gambar Promo */
    .promo-img{max-width:600px;margin:40px auto;border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
    .promo-img img{width:100%;height:auto;display:block;border-radius:14px}

    footer{padding:28px;text-align:center;color:var(--muted);margin-top:40px;border-top:1px solid rgba(255,255,255,0.05)}