@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Orbitron:wght@600;700&display=swap');

:root {
    --bg: #080c22;
    --panel: rgba(13, 18, 50, .78);
    --panel-bd: #b3b3ff22;
    --text: #eaf1ff;
    --accent: #00e0ff;
    --accent2: #9b5bff;
    --radius: 22px;
}

html,
body {
    background: var(--bg) url('/assets/izoh9I.jpg?v=2') center/cover fixed no-repeat !important;
    color: var(--text);
    font-family: Poppins, system-ui;
}

/* efek kaca dan neon */
.glass {
    background: var(--panel);
    border: 1px solid var(--panel-bd);
    border-radius: var(--radius);
    backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 8px 30px rgba(0, 224, 255, .18), 0 10px 34px rgba(155, 91, 255, .14);
}

.btn-neon {
    color: white;
    background-image: linear-gradient(135deg, var(--accent), var(--accent2));
    border: 0;
    border-radius: 999px;
    padding: .6rem 1rem;
    box-shadow: 0 8px 30px rgba(0, 224, 255, .25), 0 8px 24px rgba(155, 91, 255, .25);
}

.badge-neon {
    background: #ffffff12;
    border: 1px solid #ffffff2a;
    color: #fff;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.heading-hero {
    font-family: Orbitron, Poppins, sans-serif;
    font-size: clamp(28px, 5vw, 56px);
    letter-spacing: 1px;
}

.heading-hero .accent {
    color: var(--accent2);
    text-shadow: 0 0 18px rgba(155, 91, 255, .4), 0 0 8px rgba(0, 224, 255, .25);
}