/* ===================================================================
   FrostyUp — Design Tokens
   Color: Dark Navy #0B1220, Ice Blue #4CC9F0, Cyan Glow #00E5FF,
          White Frost #F8FAFC, Deep Slate #131C2E, Success #2DD4BF
   Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
=================================================================== */

:root{
  --navy: #0B1220;
  --navy-soft: #0F1830;
  --slate: #131C2E;
  --slate-2: #1A2540;
  --ice: #4CC9F0;
  --cyan: #00E5FF;
  --frost: #F8FAFC;
  --frost-dim: #C9D5E8;
  --muted: #7E8CAD;
  --success: #2DD4BF;
  --danger: #FB7185;
  --warn: #FBBF24;

  --grad-cyan: linear-gradient(135deg, var(--ice), var(--cyan));
  --grad-bg:
    radial-gradient(ellipse at 15% 0%, rgba(76,201,240,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 5%, rgba(0,229,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(76,201,240,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 50%, rgba(0,229,255,0.06) 0%, transparent 40%),
    linear-gradient(180deg, #080E1A 0%, #0B1220 40%, #0A1018 100%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-glow: 0 0 0 1px rgba(76,201,240,0.15), 0 8px 30px rgba(0,0,0,0.45);
  --shadow-glow-strong: 0 0 24px rgba(0,229,255,0.35), 0 8px 30px rgba(0,0,0,0.5);

  --ff-display: 'Space Grotesk', 'Inter', sans-serif;
  --ff-body: 'Inter', sans-serif;
  --ff-mono: 'JetBrains Mono', monospace;

  --container: 1200px;
  --nav-h: 76px;

  color-scheme: dark;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: auto; overflow-x: hidden; max-width: 100%; }

body{
  font-family: var(--ff-body);
  background: var(--grad-bg);
  color: var(--frost);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  
}

a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor: pointer; border:none; background:none; color:inherit; }
input{ font-family: inherit; }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
}

h1,h2,h3,h4,h5{
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.muted{ color: var(--muted); }

.text-gradient{
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ===================== Background layers ===================== */
.bg-frost{
  position: fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
}
#frostCanvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(76,201,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,201,240,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 0%, rgba(0,0,0,0.9), transparent 70%);
}

/* ===================== Glassmorphism ===================== */
.glass{
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.02) 100%
  );
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    var(--shadow-glow),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.12);
}

/* ===================== Buttons ===================== */
.btn{
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-sm{ padding: 9px 16px; font-size: 0.85rem; }
.btn-lg{ padding: 16px 30px; font-size: 1rem; }

.btn-primary{
  background: var(--grad-cyan);
  color: #04141C;
  box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 8px 24px rgba(0,229,255,0.25);
}
.btn-primary:hover{
  box-shadow: 0 0 0 1px rgba(0,229,255,0.6), 0 0 30px rgba(0,229,255,0.55), 0 10px 28px rgba(0,229,255,0.3);
  transform: translateY(-2px);
}

.btn-outline{
  background: transparent;
  border: 1.5px solid rgba(76,201,240,0.45);
  color: var(--frost);
}
.btn-outline:hover{
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0,229,255,0.25);
  transform: translateY(-2px);
}

.btn-ghost{
  background: rgba(255,255,255,0.06);
  color: var(--frost);
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.12); }

.icon-btn{
  width: 38px; height: 38px;
  display: flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--frost-dim);
  transition: all .2s ease;
  font-size: .72rem; font-weight:700; letter-spacing:.5px;
}
.icon-btn:hover{ color: var(--cyan); border-color: rgba(0,229,255,0.4); }

/* ===================== Navbar ===================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: background .3s ease, border-color .3s ease, height .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(11,18,32,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 64px;
}

.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ display:flex; filter: drop-shadow(0 0 8px rgba(0,229,255,0.5)); }
.brand-mark.small{ filter: drop-shadow(0 0 6px rgba(0,229,255,0.4)); }
.brand-logo-img{ height: 34px; width: auto; display:block; }
.brand-mark.small .brand-logo-img{ height: 26px; }
.brand-name{ font-family: var(--ff-display); font-weight:700; font-size:1.3rem; letter-spacing:-0.02em; }
.brand-accent{ color: var(--cyan); }

.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
  font-size: 0.92rem; font-weight:500; color: var(--frost-dim);
  position:relative; transition: color .2s ease;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-8px; width:0; height:2px;
  background: var(--grad-cyan); transition: width .25s ease; border-radius:2px;
}
.nav-links a:hover{ color: var(--frost); }
.nav-links a:hover::after{ width:100%; }

.nav-actions{ display:flex; align-items:center; gap: 10px; }
.burger{ display:none; flex-direction:column; gap:5px; width:32px; height:32px; align-items:center; justify-content:center; }
.burger span{ width:20px; height:2px; background: var(--frost); border-radius:2px; transition: all .25s ease; }
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer{
  position: fixed; top: var(--nav-h); right:0; width: min(82vw, 340px); height: calc(100vh - var(--nav-h));
  background: rgba(11,18,32,0.96); backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap: 4px; padding: 24px;
  transform: translateX(100%); transition: transform .3s ease;
  z-index: 199; overflow-y:auto;
}

.mobile-drawer.open{ transform: translateX(0); }
.mobile-drawer a{ padding: 14px 8px; font-weight:500; border-bottom:1px solid rgba(255,255,255,0.06); }
.drawer-cta{ display:flex; flex-direction:column; gap:10px; margin-top: 20px; }
.drawer-cta .btn{ width:100%; }

/* ===================== Hero ===================== */
.hero-banner{
  position: relative;
  padding: calc(var(--nav-h) + 32px) 0 60px;
  overflow: hidden;
}
.hero-banner::before{
  content:''; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 15% 20%, rgba(76,201,240,0.22), transparent 60%),
    radial-gradient(ellipse 600px 600px at 85% 15%, rgba(0,229,255,0.16), transparent 55%),
    radial-gradient(ellipse 500px 400px at 75% 85%, rgba(76,201,240,0.12), transparent 60%),
    linear-gradient(180deg, rgba(0,229,255,0.04), transparent 40%);
  animation: heroGlowDrift 16s ease-in-out infinite;
}
@keyframes heroGlowDrift{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  33%{ transform: translate(2%, -2%) scale(1.05); }
  66%{ transform: translate(-2%, 1.5%) scale(0.98); }
}
.hero-banner::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(76,201,240,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,201,240,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 900px 600px at 30% 30%, rgba(0,0,0,0.8), transparent 70%);
  animation: heroGridPan 22s linear infinite;
}
@keyframes heroGridPan{
  0%{ background-position: 0 0; }
  100%{ background-position: 48px 48px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--ff-mono); font-size: 0.78rem; letter-spacing: .04em;
  color: var(--ice); padding: 7px 14px; border-radius: 999px;
  background: rgba(76,201,240,0.08); border:1px solid rgba(76,201,240,0.25);
  margin-bottom: 22px;
}
.eyebrow-light{ background: rgba(76,201,240,0.1); }
.eyebrow-warn{ color: var(--warn); background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3); }
.eyebrow-warn .dot-pulse{ background: var(--warn); box-shadow: 0 0 0 0 rgba(251,191,36,0.6); animation-name: pulseDotWarn; }
@keyframes pulseDotWarn{
  0%{ box-shadow: 0 0 0 0 rgba(251,191,36,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(251,191,36,0); }
  100%{ box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
.dot-pulse{
  width:7px; height:7px; border-radius:50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(0,229,255,0.6);
  animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(0,229,255,0.55); }
  70%{ box-shadow: 0 0 0 7px rgba(0,229,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(0,229,255,0); }
}

/* ===================== Banner slider (carousel) ===================== */
.banner-slider{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
  border: 1px solid rgba(76,201,240,0.18);
}
.banner-track{
  display:flex;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.banner-slide{
  position: relative;
  flex: 0 0 100%;
  min-height: 440px;
  display:flex; align-items:center;
  overflow: hidden;
}
.banner-slide::before{
  /* darkening + side fade so text always stays readable over any photo dropped in later */
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.74) 38%, rgba(11,18,32,0.30) 68%, rgba(11,18,32,0.05) 100%);
}
.banner-slide-inner{
  position: relative; z-index:2;
  width: 100%; max-width: 560px;
  padding: 48px 5%;
}
.banner-title{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 14px;
  line-height: 1.15;
}
.banner-sub{
  font-size: 1.02rem; color: var(--frost-dim); max-width: 460px; margin-bottom: 26px; line-height:1.6;
}
.banner-cta{ display:flex; flex-wrap:wrap; gap: 14px; }

/* Placeholder gradient "art" per slide — swap for background-image: url(...) on
   .banner-slide when real photos are ready. Keep .banner-slide::before above
   the photo so the text stays legible. */
.ph-slide-1{ background:
    radial-gradient(ellipse 480px 380px at 82% 30%, rgba(0,229,255,0.35), transparent 60%),
    radial-gradient(ellipse 420px 420px at 95% 80%, rgba(76,201,240,0.30), transparent 65%),
    linear-gradient(120deg, #0B1220 0%, #0F1830 45%, #15213d 100%);
}
.ph-slide-2{ background:
    radial-gradient(ellipse 480px 380px at 80% 25%, rgba(251,191,36,0.30), transparent 60%),
    radial-gradient(ellipse 420px 420px at 95% 85%, rgba(251,113,133,0.22), transparent 65%),
    linear-gradient(120deg, #0B1220 0%, #1c1430 50%, #2a1530 100%);
}
.ph-slide-3{ background:
    radial-gradient(ellipse 480px 380px at 82% 28%, rgba(45,212,191,0.30), transparent 60%),
    radial-gradient(ellipse 420px 420px at 95% 80%, rgba(76,201,240,0.28), transparent 65%),
    linear-gradient(120deg, #0B1220 0%, #0f2330 50%, #102a2a 100%);
}
.ph-slide-4{ background:
    radial-gradient(ellipse 480px 380px at 80% 30%, rgba(0,229,255,0.32), transparent 60%),
    radial-gradient(ellipse 420px 420px at 92% 85%, rgba(168,85,247,0.22), transparent 65%),
    linear-gradient(120deg, #0B1220 0%, #181430 50%, #1b1240 100%);
}
.ph-slide-5{ background:
    radial-gradient(ellipse 480px 380px at 82% 28%, rgba(76,201,240,0.32), transparent 60%),
    radial-gradient(ellipse 420px 420px at 95% 82%, rgba(0,229,255,0.24), transparent 65%),
    linear-gradient(120deg, #0B1220 0%, #102035 50%, #122845 100%);
}

.banner-arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(11,18,32,0.55); border: 1px solid rgba(255,255,255,0.16);
  color: var(--frost); cursor:pointer; backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.banner-arrow:hover{ background: rgba(76,201,240,0.25); border-color: rgba(76,201,240,0.5); }
.banner-arrow:active{ transform: translateY(-50%) scale(0.92); }
.banner-arrow-prev{ left:18px; }
.banner-arrow-next{ right:18px; }

.banner-dots{
  position:absolute; left:0; right:0; bottom:18px; z-index:3;
  display:flex; justify-content:center; gap:8px;
}
.banner-dot{
  width:8px; height:8px; border-radius:999px; border:none; padding:0; cursor:pointer;
  background: rgba(255,255,255,0.3);
  transition: width .3s ease, background .3s ease;
}
.banner-dot.active{ width:26px; background: var(--grad-cyan); }

/* Trust strip under the banner (carried over from old hero) */
.hero-trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: 24px; margin-top: 28px;
}
.hero-badges{ display:flex; flex-wrap:wrap; gap: 10px 18px; }
.badge-trust{
  display:flex; align-items:center; gap:6px; font-size: 0.82rem; color: var(--frost-dim);
}
.badge-trust svg{ color: var(--success); flex-shrink:0; }

.hero-stats{
  display:grid; grid-template-columns: repeat(4, auto); gap: 28px;
}
.stat-num{
  font-family: var(--ff-display); font-size: 1.6rem; font-weight:700;
  background: var(--grad-cyan); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ font-size: 0.78rem; color: var(--muted); margin-top: 4px; }

.hero-fade{
  position:absolute; bottom:0; left:0; right:0; height:120px;
  background: linear-gradient(to bottom, transparent, var(--navy));
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .banner-track{ transition: none; }
  .hero-banner::before, .hero-banner::after{ animation: none; }
}

/* ===================== Logo strip ===================== */
.strip{ padding: 26px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.strip-inner{ display:flex; flex-wrap:wrap; align-items:center; gap: 24px; justify-content:space-between; }
.strip-label{ font-size: 0.78rem; color: var(--muted); font-family: var(--ff-mono); white-space:nowrap; }
.strip-logos{ display:flex; flex-wrap:wrap; gap: 28px; }
.strip-logos span{ font-family: var(--ff-display); font-weight:600; font-size: 0.95rem; color: var(--frost-dim); opacity:.8; }

/* ===================== Sections generic ===================== */
.section{ padding: 90px 0; }
.section-alt{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.12) 0%,
    rgba(76,201,240,0.04) 50%,
    rgba(0,0,0,0.08) 100%
  );
  position:relative;
}
.section-alt::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,229,255,0.05) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.section-alt > *{ position:relative; z-index:1; }

.section-head{ max-width: 620px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 8px 0 12px; }
.section-head p{ color: var(--muted); font-size: 1rem; }
.section-cta{ display:flex; justify-content:center; margin-top: 42px; }

/* ===================== Joki promo banner ===================== */
.joki-banner-section{ padding-top: 0; padding-bottom: 0; }
.joki-banner{
  display:flex; align-items:center; gap: 24px; padding: 28px 32px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.joki-banner:hover{
  transform: translateY(-3px);
  border-color: rgba(0,229,255,0.4);
  box-shadow: var(--shadow-glow-strong);
}
.joki-banner-visual{
  width: 130px; height: 130px; flex-shrink:0; border-radius: 16px;
  object-fit: cover; border: 1px solid rgba(76,201,240,0.25);
}
.joki-banner-text{ flex:1; min-width: 0; }
.joki-banner-text h3{ font-size: 1.15rem; margin: 4px 0 6px; }
.joki-banner-text p{ font-size: 0.88rem; }
.joki-banner-cta{ flex-shrink:0; white-space:nowrap; }

/* ===================== Game Grid ===================== */
.game-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 20px;
}
.game-card{
  display:block;
  position:relative; border-radius: var(--radius-md); overflow:hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.game-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,229,255,0.4);
  box-shadow: var(--shadow-glow-strong);
}
.game-thumb{
  height: 130px; display:flex; align-items:center; justify-content:center;
  font-size: 2.6rem; position:relative;
}
.game-thumb::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, transparent 40%, rgba(11,18,32,0.55));
}

/* ---------- Game icon (logo image OR emoji fallback) ----------
   Shared across homepage cards, game switcher chips, and the
   topup page header — sizing controlled per-context via the
   extra class passed into getGameIcon(g, sizeClass).
---------------------------------------------------------- */
.game-icon-emoji{ position:relative; z-index:1; line-height:1; }
.game-icon-img{ position:relative; z-index:1; object-fit: contain; }

.card-icon.game-icon-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; border-radius:0; box-shadow:none; z-index:0;
}
.card-icon.game-icon-emoji{ font-size: 2.6rem; }

.gs-icon.game-icon-img{ width: 20px; height: 20px; border-radius: 4px; }
.gs-icon.game-icon-emoji{ font-size: 1rem; line-height:1; }

.header-icon.game-icon-img{ width: 40px; height: 40px; border-radius: 10px; }
.header-icon.game-icon-emoji{ font-size: 1.8rem; }

.game-trending{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size: 0.66rem; font-weight:700; letter-spacing:.03em;
  padding: 4px 9px; border-radius: 999px; color:#04141C;
  background: var(--grad-cyan);
}
.game-body{ padding: 14px; }
.game-name{ font-weight:600; font-size: 0.96rem; margin-bottom: 3px; }
.game-cat{ font-size: 0.74rem; color: var(--muted); margin-bottom: 14px; }
.game-btn{
  display:block;
  width:100%; text-align:center; padding: 9px 0; border-radius: 999px;
  font-size: 0.82rem; font-weight:600; font-family: var(--ff-display);
  background: rgba(76,201,240,0.1); border: 1px solid rgba(76,201,240,0.3); color: var(--ice);
  transition: all .2s ease;
}
.game-card:hover .game-btn{ background: var(--grad-cyan); color:#04141C; border-color: transparent; }

/* ===================== Flow ===================== */
.flow-wrap{ position:relative; }
.flow-track{
  position:absolute; top: 28px; left: 0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, rgba(76,201,240,0.4), transparent);
  display:none;
}
.flow-steps{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
  counter-reset: step;
}
.flow-step{ text-align:center; padding: 0 6px; }
.flow-icon{
  width:56px; height:56px; margin: 0 auto 16px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(76,201,240,0.08); border: 1px solid rgba(76,201,240,0.25); color: var(--cyan);
  position: relative;
}
.flow-step h3{ font-size: 0.96rem; margin-bottom:6px; }
.flow-step p{ font-size: 0.8rem; color: var(--muted); line-height:1.5; }

/* ===================== Payment ===================== */
.payment-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 16px;
}
.pay-item{
  flex-direction: column; gap: 10px; padding: 18px 10px; border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  transition: all .3s ease;
}
.pay-name{ font-family: var(--ff-display); font-weight:600; color: var(--frost-dim); font-size: 0.85rem; }
.pay-item:hover{
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(0,229,255,0.45);
  box-shadow: 0 0 22px rgba(0,229,255,0.22);
}
.pay-item:hover .pay-name{ color: var(--cyan); }
.pay-more{ background: rgba(76,201,240,0.06); aspect-ratio: 2/1; }
.pay-more span{ color: var(--ice); font-size: 0.85rem; font-weight:600; }

/* Payment brand logo badges — flat-color chips standing in for official
   logos (no external image dependency, brand-accurate hues) */
.pay-logo{
  width: 44px; height: 44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ff-display); font-weight:800; font-size: 0.7rem; letter-spacing: -0.02em;
  color: #fff; flex-shrink:0;
}
.pay-logo-qris{ background: linear-gradient(135deg, #00529C, #D71921); font-size: 0.56rem; }
.pay-logo-dana{ background: #118EEA; font-size: 1.1rem; }
.pay-logo-ovo{ background: #4C3494; font-size: 0.62rem; }
.pay-logo-gopay{ background: #00AA13; font-size: 1.1rem; }
.pay-logo-shopeepay{ background: #EE4D2D; font-size: 1.1rem; }
.pay-logo-bca{ background: #0066AE; font-size: 0.58rem; }
.pay-logo-bri{ background: #00529C; font-size: 0.6rem; }
.pay-logo-mandiri{ background: #003D79; font-size: 1.1rem; }
.pay-logo-bni{ background: #FF7A00; font-size: 0.62rem; }
.pay-logo-va{ background: rgba(76,201,240,0.14); color: var(--cyan); }
.pay-logo-ewallet{ background: rgba(76,201,240,0.14); color: var(--cyan); }

/* ===================== Cek Pesanan ===================== */
.cek-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:start; }
.invoice-box{
  display:flex; gap: 10px; padding: 10px; margin: 28px 0 32px;
}
.invoice-box input{
  flex:1; background:transparent; border:none; outline:none; color: var(--frost);
  font-family: var(--ff-mono); font-size: 0.92rem; padding: 0 10px;
}
.invoice-box input::placeholder{ color: var(--muted); }

.status-track{ display:flex; flex-direction:column; gap: 22px; }
.status-step{ display:flex; gap: 16px; align-items:flex-start; opacity:.45; }
.status-step.done, .status-step.active{ opacity:1; }
.status-circle{
  width:30px; height:30px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem;
}
.status-step.done .status-circle{ background: var(--success); color:#04241F; border-color:transparent; }
.status-step.active .status-circle{ background: var(--grad-cyan); color:#04141C; border-color:transparent; box-shadow: 0 0 14px rgba(0,229,255,0.55); animation: pulseDot 1.6s infinite; }
.status-step p{ font-size: 0.82rem; color: var(--muted); margin-top: 2px; }

.receipt{ padding: 28px; }
.receipt-head{ display:flex; justify-content:space-between; font-size: 0.8rem; color: var(--muted); margin-bottom: 18px; }
.receipt-id{ font-family: var(--ff-mono); color: var(--ice); }
.receipt-row{ display:flex; justify-content:space-between; font-size: 0.9rem; padding: 9px 0; color: var(--frost-dim); }
.receipt-row span:last-child{ color: var(--frost); font-weight:500; }
.receipt-divider{ height:1px; background: rgba(255,255,255,0.1); margin: 14px 0; }
.receipt-status{ display:flex; align-items:center; gap:8px; font-size: 0.88rem; font-weight:600; color: var(--success); }

/* ===================== Flash Sale ===================== */
.flashsale{ position:relative; }
.flash-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap: 24px; margin-bottom: 44px; }
.flash-head h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin-top:6px; }
.countdown{ display:flex; align-items:center; gap: 10px; }
.cd-box{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 14px; min-width: 60px;
}
.cd-box span{ font-family: var(--ff-mono); font-size: 1.3rem; font-weight:700; color: var(--cyan); }
.cd-box label{ font-size: 0.65rem; color: var(--muted); }
.cd-sep{ color: var(--muted); font-weight:700; }

.flash-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.flash-card{ position:relative; padding: 22px; text-align:center; }
.flash-tag{
  position:absolute; top:14px; right:14px; background: var(--danger); color:#fff;
  font-size: 0.7rem; font-weight:700; padding: 4px 9px; border-radius: 999px;
}
.flash-thumb{ font-size: 2.4rem; margin-bottom: 14px; }
.flash-card h4{ font-size: 0.94rem; margin-bottom: 10px; }
.flash-price{ display:flex; flex-direction:column; gap:2px; margin-bottom: 14px; }
.flash-price .old{ font-size: 0.78rem; color: var(--muted); text-decoration: line-through; }
.flash-price .new{ font-family: var(--ff-display); font-weight:700; color: var(--cyan); font-size: 1.1rem; }
.flash-bar{ height:6px; border-radius:999px; background: rgba(255,255,255,0.08); overflow:hidden; margin-bottom: 8px; }
.flash-bar div{ height:100%; background: var(--grad-cyan); border-radius:999px; }
.flash-stock{ font-size: 0.74rem; color: var(--muted); }

/* ===================== Rewards (spin + checkin) ===================== */
.rewards-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.reward-card{ padding: 32px; }
.reward-card h3{ font-size: 1.3rem; margin: 8px 0 10px; }
.reward-card p{ margin-bottom: 22px; }

.spin-wheel-wrap{ position:relative; width:240px; height:240px; margin:0 auto 24px; }
#spinWheel{ display:block; border-radius:50%; }
.spin-pointer{
  position:absolute; top:-6px; left:50%; transform: translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
  border-top: 16px solid var(--cyan); filter: drop-shadow(0 0 6px rgba(0,229,255,0.6)); z-index:5;
}
.reward-card .btn{ display:flex; margin: 0 auto; }
.spin-result{ text-align:center; margin-top: 14px; font-size: 0.88rem; color: var(--cyan); min-height: 20px; }

.checkin-row{ display:grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 20px; }
.checkin-day{
  aspect-ratio: 1; border-radius: 12px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--ff-mono); font-size: 0.85rem; color: var(--muted);
}
.checkin-day.done{ background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.4); color: var(--success); }
.checkin-day.active{ background: var(--grad-cyan); color:#04141C; border-color:transparent; box-shadow: 0 0 14px rgba(0,229,255,0.5); font-weight:700; }
.checkin-day.milestone{ border-color: rgba(251,191,36,0.5); color: var(--warn); }
.milestone-row{ display:flex; flex-wrap:wrap; gap: 8px; margin-bottom: 8px; }
.milestone-pill{
  font-size: 0.74rem; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--muted);
}
.milestone-pill.active{ border-color: rgba(0,229,255,0.4); color: var(--cyan); background: rgba(0,229,255,0.08); }
.milestone-note{ font-size: 0.72rem; color: var(--muted); margin-bottom: 18px; line-height:1.5; }

/* ===================== VIP ===================== */
.vip-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.vip-card{
  padding: 32px; position:relative; transition: transform .3s ease, box-shadow .3s ease;
  border-radius: var(--radius-lg); overflow:hidden;
}
.vip-card::before{
  content:''; position:absolute; inset:0; opacity:0.07; pointer-events:none;
  background: radial-gradient(circle at 30% 0%, currentColor 0%, transparent 70%);
}
.vip-card:hover{ transform: translateY(-6px); }
.vip-card.featured{ transform: scale(1.04); }

/* Silver */
.tier-silver{
  background: linear-gradient(160deg, rgba(180,190,210,0.08) 0%, rgba(120,140,160,0.04) 100%);
  border: 1px solid rgba(180,190,210,0.25);
  box-shadow: 0 4px 24px rgba(180,190,210,0.08);
}
.tier-silver:hover{ box-shadow: 0 8px 32px rgba(180,190,210,0.18); }
.tier-silver .vip-tier{
  background: linear-gradient(135deg, #B8C5D6, #8FA3B8, #C9D5E8);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-size:1.2rem;
}
.tier-silver .vip-cashback{ color: #B8C5D6; }
.tier-silver .vip-icon{ color: #B8C5D6; }

/* Gold */
.tier-gold{
  background: linear-gradient(160deg, rgba(255,200,50,0.1) 0%, rgba(200,140,20,0.05) 100%);
  border: 1px solid rgba(255,200,50,0.35);
  box-shadow: 0 4px 24px rgba(255,185,0,0.12);
}
.tier-gold.featured{ box-shadow: 0 8px 40px rgba(255,185,0,0.25); }
.tier-gold:hover{ box-shadow: 0 8px 32px rgba(255,185,0,0.22); }
.tier-gold .vip-tier{
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFE566);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-size:1.2rem;
}
.tier-gold .vip-cashback{ color: #FFD700; }
.tier-gold .vip-badge{
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1A1000; border:none; font-weight:700;
}

/* Platinum */
.tier-platinum{
  background: linear-gradient(160deg, rgba(100,80,220,0.12) 0%, rgba(60,180,255,0.06) 100%);
  border: 1px solid rgba(120,80,255,0.35);
  box-shadow: 0 4px 24px rgba(100,60,255,0.12);
}
.tier-platinum:hover{ box-shadow: 0 8px 32px rgba(100,60,255,0.25); }
.tier-platinum .vip-tier{
  background: linear-gradient(135deg, #B794F4, #7C3AED, #4CC9F0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-size:1.2rem;
}
.tier-platinum .vip-cashback{ color: #B794F4; }
.tier-platinum li::before{ color: #B794F4; }
.vip-badge{
  position:absolute; top:-12px; right: 24px; background: var(--grad-cyan); color:#04141C;
  font-size: 0.68rem; font-weight:700; padding: 5px 12px; border-radius:999px;
}
.vip-tier{ font-family: var(--ff-display); font-weight:700; font-size: 1.1rem; margin-bottom: 10px; }
.vip-cashback{ font-size: 2rem; font-family: var(--ff-display); font-weight:700; color: var(--cyan); margin-bottom: 18px; }
.vip-cashback span{ font-size: 0.85rem; color: var(--muted); font-weight:500; display:block; margin-top:2px; }
.vip-card ul{ display:flex; flex-direction:column; gap: 10px; }
.vip-card li{ font-size: 0.88rem; color: var(--frost-dim); padding-left: 20px; position:relative; }
.vip-card li::before{ content:'✓'; position:absolute; left:0; color: var(--success); font-weight:700; }
.tier-silver .vip-tier{ color: #C9D5E8; }
.tier-platinum .vip-cashback{ color: var(--ice); }

/* ===================== Reseller ===================== */
.reseller-levels{
  display:flex; justify-content:center; flex-wrap:wrap; gap: 14px; margin-bottom: 50px;
}
.rl-item{
  display:flex; flex-direction:column; align-items:center; gap: 4px;
  padding: 16px 22px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  font-weight:600; font-size: 0.85rem; min-width: 110px;
  transition: all .25s ease;
}
.rl-item:hover{ border-color: rgba(0,229,255,0.4); transform: translateY(-4px); }
.rl-icon{ font-size: 1.5rem; }
.rl-item small{ color: var(--muted); font-weight:400; font-size: 0.72rem; }

.reseller-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.rfeat{ padding: 24px; }
.rfeat h4{ font-size: 0.98rem; margin-bottom: 8px; }
.rfeat p{ font-size: 0.85rem; color: var(--muted); }

/* ===================== Affiliate ===================== */
.affiliate-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; }
.aff-stats{ display:flex; gap: 32px; margin: 28px 0 30px; }
.aff-stats strong{ display:block; font-family: var(--ff-display); font-size: 1.4rem; color: var(--cyan); }
.aff-stats span{ font-size: 0.78rem; color: var(--muted); }
.ref-link-card{ padding: 28px; display:flex; flex-direction:column; gap: 14px; }
.ref-link-row{
  display:flex; align-items:center; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 12px 14px;
}
.ref-link-row code{ font-family: var(--ff-mono); font-size: 0.85rem; color: var(--ice); word-break: break-all; }
.ref-rate-row{ display:flex; justify-content:space-between; font-size: 0.88rem; color: var(--frost-dim); }

/* ===================== Dashboard preview ===================== */
.dash-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; }
.dash-item{
  padding: 26px 16px; text-align:center; font-weight:600; font-size: 0.88rem;
  transition: all .25s ease;
}
.dash-item:hover{ transform: translateY(-4px); border-color: rgba(0,229,255,0.35); }
.dash-icon{ font-size: 1.8rem; margin-bottom: 10px; }

/* ===================== Leaderboard ===================== */
.leaderboard{ padding: 10px; max-width: 640px; margin: 0 auto; }
.lb-row{
  display:flex; align-items:center; gap: 16px; padding: 14px 18px; border-radius: 14px;
}
.lb-row + .lb-row{ border-top: 1px solid rgba(255,255,255,0.06); }
.lb-rank{ width: 28px; text-align:center; font-weight:700; }
.lb-name{ flex:1; font-weight:500; }
.lb-amount{ font-family: var(--ff-mono); color: var(--cyan); font-size: 0.9rem; }
.lb-1{ background: linear-gradient(90deg, rgba(251,191,36,0.1), transparent); }

/* ===================== Blog ===================== */
.blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.blog-card{ padding: 22px; transition: transform .25s ease; }
.blog-card:hover{ transform: translateY(-5px); }
.blog-tag{
  display:inline-block; font-size: 0.7rem; font-weight:700; color: var(--cyan);
  background: rgba(0,229,255,0.1); padding: 4px 10px; border-radius:999px; margin-bottom: 14px;
}
.blog-card h4{ font-size: 1rem; margin-bottom: 10px; line-height:1.4; }
.blog-card p{ font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; }
.blog-date{ font-size: 0.74rem; color: var(--muted); font-family: var(--ff-mono); }

/* ===================== Trust section ===================== */
.trust-section{ padding-top: 50px; padding-bottom: 50px; }
.trust-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; }
.trust-icon{ font-size: 1.8rem; margin-bottom: 12px; }
.trust-item h4{ font-size: 0.95rem; margin-bottom: 8px; }
.trust-item p{ font-size: 0.82rem; color: var(--muted); }

/* ===================== CTA Band ===================== */
.cta-band-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 28px;
  padding: 40px;
}
.cta-band-inner h2{ font-size: 1.5rem; margin-bottom: 6px; }
.cta-band-actions{ display:flex; flex-wrap:wrap; gap: 12px; }

/* ===================== Footer ===================== */
.footer{ border-top: 1px solid rgba(255,255,255,0.08); padding: 60px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand p{ margin: 14px 0 18px; font-size: 0.86rem; max-width: 280px; }
.footer-social{ display:flex; gap: 10px; }
.footer-social a{
  width: 36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.7rem; font-weight:700; transition: all .2s ease;
}
.footer-social a:hover{ color: var(--cyan); border-color: rgba(0,229,255,0.4); }
.footer-col h5{ font-size: 0.85rem; margin-bottom: 16px; color: var(--frost-dim); }
.footer-col a{ display:block; font-size: 0.86rem; color: var(--muted); padding: 6px 0; transition: color .2s ease; }
.footer-col a:hover{ color: var(--cyan); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap: 10px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.78rem; color: var(--muted);
}

/* ===================== Floating chat ===================== */
.fab-wrap{ position: fixed; bottom: 24px; right: 24px; z-index: 250; display:flex; flex-direction:column; align-items:flex-end; gap: 12px; }
.fab-menu{ display:flex; flex-direction:column; gap: 10px; opacity:0; pointer-events:none; transform: translateY(10px); transition: all .25s ease; }
.fab-menu.open{ opacity:1; pointer-events:auto; transform: translateY(0); }
.fab-item{
  padding: 10px 16px; border-radius: 999px; font-size: 0.82rem; font-weight:600;
  background: rgba(19,28,46,0.92); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px); box-shadow: var(--shadow-glow);
  display:flex; align-items:center; gap: 8px;
}
.fab-item.wa:hover{ color:#25D366; border-color:#25D366; }
.fab-item.tg:hover{ color:#34AADF; border-color:#34AADF; }
.fab-item.dc:hover{ color:#5865F2; border-color:#5865F2; }
.fab-main{
  width: 58px; height:58px; border-radius:50%;
  background: var(--grad-cyan); color:#04141C; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 8px 24px rgba(0,229,255,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: floatFab 3s ease-in-out infinite;
}
.fab-main:hover{ box-shadow: 0 0 0 1px rgba(0,229,255,0.6), 0 0 30px rgba(0,229,255,0.6); }
@keyframes floatFab{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }

/* ===================== Toast ===================== */
.toast{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(19,28,46,0.95); border: 1px solid rgba(0,229,255,0.3);
  color: var(--frost); padding: 12px 22px; border-radius: 999px; font-size: 0.86rem;
  box-shadow: var(--shadow-glow-strong); opacity:0; pointer-events:none; transition: all .3s ease; z-index: 300;
  backdrop-filter: blur(10px);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1024px){
  .vip-grid{ grid-template-columns: 1fr; }
  .vip-card.featured{ transform:none; }
  .trust-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .flow-steps{ grid-template-columns: repeat(3,1fr); row-gap: 36px; }
  .rewards-grid{ grid-template-columns: 1fr; }
  .cek-grid, .affiliate-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .nav-links{ display:none; }
  .nav-actions .btn{ display:none; }
  .burger{ display:flex; }
  .hero-banner{ padding-top: calc(var(--nav-h) + 20px); }
  .banner-slide{ min-height: 380px; }
  .banner-slide-inner{ max-width: 100%; padding: 36px 6%; }
  .banner-title{ font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .banner-sub{ font-size: 0.92rem; }
  .banner-cta{ flex-direction:column; }
  .banner-cta .btn{ width:100%; justify-content:center; }
  .banner-arrow{ width:34px; height:34px; }
  .hero-trust-strip{ flex-direction:column; align-items:flex-start; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); width:100%; }
  .section{ padding: 56px 0; }
  .section-head h2{ font-size: 1.5rem; }
  .game-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .game-thumb{ height: 105px; }
  .game-name{ font-size: 0.88rem; }
  .game-cat{ font-size: 0.7rem; }
  .game-btn{ font-size: 0.78rem; padding: 8px 0; }
  .flow-steps{ grid-template-columns: repeat(2,1fr); }
  .payment-grid{ grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .flash-grid{ grid-template-columns: repeat(2,1fr); }
  .vip-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .joki-banner{ flex-wrap: wrap; padding: 22px; }
  .joki-banner-visual{ width: 90px; height: 90px; }
  .joki-banner-cta{ width: 100%; justify-content:center; }
  .joki-service-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .game-grid{ gap: 10px; }
  .game-thumb{ height: 90px; }
  .game-body{ padding: 10px; }
}

@media (max-width: 480px){
  .hero-stats{ grid-template-columns: repeat(2,1fr); gap: 18px; }
  .flow-steps{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .trust-grid{ grid-template-columns: 1fr 1fr; }
  .checkin-row{ grid-template-columns: repeat(7,1fr); gap:5px; }
  .icon-btn{ width:34px; height:34px; }
}

/* ============================================================
   Promo popup — appears on page load, closable via X or
   clicking the dark overlay outside the modal.
============================================================ */
.promo-overlay{
  position: fixed; inset:0; z-index: 500;
  display:flex; align-items:center; justify-content:center;
  background: rgba(5,9,18,0.72); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition: opacity .3s ease;
  padding: 20px;
}
.promo-overlay.show{ opacity:1; pointer-events:auto; }

.promo-modal{
  position: relative; width: 100%; max-width: 420px;
  padding: 36px 30px 30px; text-align:center;
  transform: scale(0.92) translateY(10px); transition: transform .3s cubic-bezier(.2,1.2,.4,1);
}
.promo-overlay.show .promo-modal{ transform: scale(1) translateY(0); }

.promo-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: var(--frost-dim); cursor:pointer; transition: all .2s ease;
}
.promo-close:hover{ background: rgba(251,113,133,0.15); color: var(--danger); border-color: rgba(251,113,133,0.3); }

.promo-badge{
  display:inline-block; font-family: var(--ff-mono); font-size: 0.78rem;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
  background: rgba(0,229,255,0.1); border:1px solid rgba(0,229,255,0.3); color: var(--ice);
}
.promo-title{ font-size: 1.4rem; margin-bottom: 8px; }
.promo-sub{ font-size: 0.92rem; color: var(--frost-dim); margin-bottom: 22px; line-height:1.5; }

.promo-code-box{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 14px 18px; border-radius: 14px; margin-bottom: 10px;
  background: rgba(0,229,255,0.06); border: 1.5px dashed rgba(0,229,255,0.4);
}
.promo-code{ font-family: var(--ff-mono); font-weight:700; font-size: 1.15rem; color: var(--cyan); letter-spacing: .05em; }
.promo-copy-btn{
  font-family: var(--ff-display); font-weight:600; font-size: 0.8rem;
  padding: 7px 14px; border-radius: 999px; background: var(--grad-cyan); color:#04141C;
  flex-shrink:0; transition: transform .15s ease;
}
.promo-copy-btn:hover{ transform: scale(1.05); }
.promo-note{ font-size: 0.76rem; color: var(--muted); margin-bottom: 22px; }

.promo-divider{ height:1px; background: rgba(255,255,255,0.08); margin: 0 0 18px; }

.promo-social-label{ font-size: 0.8rem; color: var(--muted); margin-bottom: 12px; }
.promo-social-links{ display:flex; justify-content:center; gap: 10px; margin-bottom: 24px; flex-wrap:wrap; }
.promo-social-item{
  display:flex; align-items:center; gap: 6px; font-size: 0.78rem; font-weight:600;
  padding: 8px 13px; border-radius: 999px; color: var(--frost-dim);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  transition: all .2s ease;
}
.promo-social-item:hover{ color: var(--frost); border-color: rgba(0,229,255,0.3); }
.promo-social-item.ig:hover{ color: #E1306C; border-color: rgba(225,48,108,0.3); }
.promo-social-item.tg:hover{ color: #229ED9; border-color: rgba(34,158,217,0.3); }
.promo-social-item.wa:hover{ color: #25D366; border-color: rgba(37,211,102,0.3); }

.promo-cta{ width:100%; }

@media (max-width: 480px){
  .promo-modal{ padding: 30px 22px 24px; }
  .promo-title{ font-size: 1.2rem; }
  .promo-code-box{ flex-direction:column; gap: 10px; }
  .promo-copy-btn{ width:100%; }
}

/* ===== Back Button ===== */
.back-btn-wrap{ margin: 8px 0 16px; }
.back-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:var(--frost-dim); font-size:0.85rem; font-weight:500;
  cursor:pointer; transition:all .2s ease;
}
.back-btn:hover{
  background:rgba(0,229,255,0.08); border-color:rgba(0,229,255,0.3);
  color:var(--cyan); transform:translateX(-3px);
}

/* ===== APK Promo Banner (homepage) ===== */
.apk-promo-banner{ display:block; }
.apk-promo-inner{
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; align-items:stretch; min-height:160px;
  transition:all .3s ease;
}
.apk-promo-inner:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,229,255,0.15);
}
.apk-promo-visual{
  flex:1; min-width:0; overflow:hidden;
}
.apk-promo-visual svg{ display:block; }
.apk-promo-content{
  flex-shrink:0; width:260px; padding:28px 28px 28px 24px;
  display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid rgba(255,255,255,0.06);
}
.apk-promo-content h3{ font-size:1.3rem; margin:8px 0 6px; }
.apk-promo-content p{ font-size:0.85rem; color:var(--muted); line-height:1.5; margin:0; }

@media(max-width:768px){
  .apk-promo-inner{ flex-direction:column; }
  .apk-promo-content{ width:auto; border-left:none; border-top:1px solid rgba(255,255,255,0.06); }
}

/* ============================================================
   APK grid mobile — 2 kolom di layar kecil
============================================================ */
@media (max-width: 600px){
  .apk-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
  .apk-card{ padding: 16px 12px; }
  .apk-card-name{ font-size: 0.85rem; }
  .apk-card-type{ font-size: 0.72rem; }
  .apk-price{ font-size: 1rem; }
  .apk-buy-btn{ padding: 8px 12px; font-size: 0.78rem; }
  .apk-features li{ font-size: 0.75rem; }
}


/* ============================================================
   Flash Sale Ticker Bar (scrolling marquee)
============================================================ */
.flash-ticker-wrap{
  display:flex; align-items:center; gap:0;
  background: rgba(255,60,60,0.08); border:1px solid rgba(255,60,60,0.2);
  border-radius: 999px; overflow:hidden; margin-bottom:8px;
}
.flash-ticker-label{
  flex-shrink:0; padding:10px 18px;
  background: linear-gradient(135deg,#FF3C3C,#FF6B35);
  font-family:var(--ff-display); font-weight:800; font-size:0.78rem;
  letter-spacing:0.08em; color:#fff; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.flash-dot{
  width:8px; height:8px; border-radius:50%; background:#fff;
  animation: flashblink 1s ease-in-out infinite;
}
@keyframes flashblink{ 0%,100%{opacity:1} 50%{opacity:0.2} }
.flash-ticker-track{
  flex:1; overflow:hidden; min-width:0; padding:0 8px;
}
.flash-ticker-inner{
  display:flex; gap:0; white-space:nowrap;
  animation: flashScroll 25s linear infinite;
}
.flash-ticker-inner:hover{ animation-play-state: paused; }
@keyframes flashScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
.flash-ticker-item{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 24px; font-size:0.82rem; color:var(--frost-dim);
  border-right:1px solid rgba(255,255,255,0.06);
}
.flash-ticker-item b{ color:var(--cyan); font-weight:700; }
.flash-ticker-item s{ color:var(--muted); font-size:0.75rem; }
.flash-ticker-item em{ 
  font-style:normal; background:rgba(255,60,60,0.15);
  color:#FF6B6B; font-size:0.72rem; font-weight:700;
  padding:2px 6px; border-radius:4px;
}
.flash-ticker-countdown{
  flex-shrink:0; padding:10px 18px;
  font-family:var(--ff-mono); font-weight:700; font-size:0.82rem;
  color:var(--cyan); letter-spacing:0.05em; white-space:nowrap;
  border-left:1px solid rgba(255,255,255,0.06);
}

/* ============================================================
   Payment section di halaman topup/joki/apk — lebih compact
============================================================ */
.payment-section-inline{
  margin: 32px 0 0;
}
.payment-section-inline h3{
  font-size:1rem; margin-bottom:16px; color:var(--frost-dim);
  display:flex; align-items:center; gap:8px;
}
.payment-section-inline h3::after{
  content:''; flex:1; height:1px; background:rgba(255,255,255,0.08);
}
.payment-tabs{
  display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;
}
.payment-tab-btn{
  padding:6px 14px; border-radius:999px; font-size:0.8rem; font-weight:600;
  border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
  color:var(--frost-dim); cursor:pointer; transition:all .2s;
}
.payment-tab-btn.active{
  background:var(--grad-cyan); color:#04141C; border-color:transparent;
}
.payment-group{ display:none; }
.payment-group.active{ display:flex; flex-wrap:wrap; gap:10px; }
.pay-chip{
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:10px; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08); font-size:0.82rem;
}
.pay-chip-logo{
  width:28px; height:20px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:800; letter-spacing:-0.02em;
}

/* Flash ticker mobile - memanjang horizontal */
@media (max-width: 768px){
  .flash-ticker-wrap{
    border-radius: 0 !important;
    margin-left: calc(-1 * var(--container-pad, 16px));
    margin-right: calc(-1 * var(--container-pad, 16px));
    width: calc(100% + 2 * var(--container-pad, 16px));
  }
  .flash-ticker-label{ padding: 8px 12px; font-size:0.72rem; }
  .flash-ticker-countdown{ padding: 8px 12px; font-size:0.75rem; }
  .flash-ticker-item{ padding: 8px 16px; font-size:0.78rem; }
}

/* ============================================================
   User ID Modal (trigger saat klik nominal tanpa isi User ID)
============================================================ */
#userIdModal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .2s ease;
  pointer-events:none;
}
#userIdModal.show{ opacity:1; pointer-events:all; }
.uid-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
}
.uid-modal-box{
  position:relative; z-index:1;
  padding:36px 32px; border-radius:var(--radius-lg);
  text-align:center; max-width:340px; width:90%;
  animation: uidPop .25s cubic-bezier(.2,1.3,.4,1);
}
@keyframes uidPop{ from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.uid-modal-icon{ font-size:2.5rem; margin-bottom:12px; }
.uid-modal-box h4{ font-size:1.1rem; margin-bottom:8px; }
.uid-modal-box p{ color:var(--muted); font-size:0.88rem; line-height:1.6; margin-bottom:20px; }
.uid-modal-box strong{ color:var(--cyan); }
.uid-modal-ok{ width:100%; }

/* ============================================================
   Promo popup - tombol jangan tampilkan lagi
============================================================ */
.promo-never-show{
  display:block; width:100%; margin-top:10px;
  background:none; border:none; color:var(--muted);
  font-size:0.78rem; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}
.promo-never-show:hover{ color:var(--frost-dim); }

/* ============================================================
   Logo FrostyUp animasi (shimmer + pulse glow)
============================================================ */
.brand-logo-img{
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow{
  0%, 100%{
    filter: drop-shadow(0 0 4px rgba(0,229,255,0.4)) drop-shadow(0 0 8px rgba(76,201,240,0.2));
  }
  50%{
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.8)) drop-shadow(0 0 20px rgba(76,201,240,0.5)) drop-shadow(0 0 40px rgba(0,229,255,0.2));
  }
}
.brand-mark{
  position:relative;
}
.brand-mark::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 30%, rgba(0,229,255,0.15) 50%, transparent 70%);
  background-size:200% 200%;
  animation: logoShimmer 3s linear infinite;
  border-radius:8px;
  pointer-events:none;
}
@keyframes logoShimmer{
  0%{ background-position: -100% -100%; }
  100%{ background-position: 200% 200%; }
}


/* Flash sale carousel scrolling */
.flash-carousel-wrap{
  position:relative; display:flex; align-items:center; gap:12px;
}
.flash-carousel-track{
  flex:1; overflow:hidden; min-width:0;
}
.flash-carousel-inner{
  display:flex; gap:20px; will-change:transform;
}
.flash-carousel-arrow{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:var(--frost-dim); cursor:pointer; transition:all .2s ease; z-index:2;
}
.flash-carousel-arrow:hover{
  background:rgba(0,229,255,0.12); border-color:rgba(0,229,255,0.3); color:var(--cyan);
}
.flash-card{
  flex-shrink:0; width:240px; padding:24px 20px;
  border-radius:var(--radius-md); cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.flash-card:hover{
  transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,229,255,0.15);
}
/* ============================================================
   MOBILE OVERHAUL — Kompak seperti Bangjeff
   Target: tampilan rapat, tidak zoom, elemen proporsional
   Breakpoint utama: ≤480px (HP portrait)
============================================================ */

/* ---- Root variables override untuk mobile ---- */
@media (max-width: 480px){
  :root{
    --nav-h: 52px;
    --radius-md: 10px;
    --radius-lg: 14px;
  }
}

/* ---- Navbar compact ---- */
@media (max-width: 480px){
  .nav-inner{ height: 52px; padding: 0 14px; }
  .brand-logo-img{ height: 26px; }
  .icon-btn{ width: 30px; height: 30px; }
  .burger{ width: 30px; height: 30px; gap: 4px; }
  .burger span{ width: 18px; }
  .nav-actions{ gap: 6px; }
  .nav-actions .btn-ghost{ padding: 5px 10px; font-size: 0.75rem; }
}

/* ---- Section padding compact ---- */
@media (max-width: 480px){
  .section{ padding: 28px 0; }
  .section-head{ margin-bottom: 18px; }
  .section-head h2{ font-size: 1.15rem; margin-bottom: 6px; }
  .section-head p{ font-size: 0.8rem; }
  .container{ padding: 0 12px; }
}

/* ---- Hero banner compact ---- */
@media (max-width: 480px){
  .hero-banner{ padding-top: calc(52px + 10px); }
  .banner-slide{ min-height: 220px; }
  .banner-slide-inner{ padding: 20px 14px 16px; }
  .eyebrow{ font-size: 0.65rem; }
  .banner-title{ font-size: 1.25rem; line-height: 1.25; margin-bottom: 6px; }
  .banner-sub{ font-size: 0.78rem; margin-bottom: 14px; }
  .banner-cta .btn{ padding: 10px 16px; font-size: 0.82rem; }
  .banner-dots{ bottom: 8px; }
  .banner-arrow{ width: 28px; height: 28px; }
}

/* ---- Hero stats compact ---- */
@media (max-width: 480px){
  .hero-trust-strip{ padding: 14px; gap: 10px; }
  .hero-badges{ gap: 6px; flex-wrap: wrap; }
  .badge-trust{ font-size: 0.72rem; padding: 5px 10px; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); gap: 10px; padding: 10px 0; }
  .stat-num{ font-size: 1.1rem; }
  .stat-label{ font-size: 0.68rem; }
}

/* ---- Game grid compact ---- */
@media (max-width: 480px){
  .game-grid{ grid-template-columns: repeat(2,1fr); gap: 8px; }
  .game-card{ border-radius: 10px; }
  .game-thumb{ height: 80px; border-radius: 8px 8px 0 0; }
  .game-body{ padding: 8px 10px 10px; }
  .game-name{ font-size: 0.82rem; margin-bottom: 2px; }
  .game-cat{ font-size: 0.66rem; margin-bottom: 6px; }
  .game-btn{ font-size: 0.74rem; padding: 6px 0; border-radius: 6px; }
}

/* ---- Flash sale carousel compact ---- */
@media (max-width: 480px){
  .flash-carousel-wrap{ gap: 6px; }
  .flash-carousel-arrow{ width: 28px; height: 28px; }
  .flash-card{ width: 160px; padding: 14px 12px; }
  .flash-tag{ font-size: 0.65rem; padding: 3px 7px; top: 10px; right: 10px; }
  .flash-thumb{ width: 44px; height: 44px; margin: 0 auto 8px; }
  .flash-card h4{ font-size: 0.8rem; margin-bottom: 6px; }
  .flash-price .old{ font-size: 0.68rem; }
  .flash-price .new{ font-size: 0.95rem; }
  .flash-bar{ margin: 6px 0 4px; height: 3px; }
  .flash-stock{ font-size: 0.68rem; }

  /* Flash ticker compact */
  .flash-ticker-wrap{ border-radius: 6px; margin-bottom: 12px; }
  .flash-ticker-label{ padding: 6px 10px; font-size: 0.68rem; }
  .flash-ticker-item{ font-size: 0.72rem; padding: 6px 14px; }
  .flash-ticker-countdown{ padding: 6px 10px; font-size: 0.72rem; }
}

/* ---- VIP cards compact ---- */
@media (max-width: 480px){
  .vip-grid{ grid-template-columns: 1fr; gap: 12px; }
  .vip-card{ padding: 20px 18px; }
  .vip-card.featured{ transform: none; }
  .vip-tier{ font-size: 1rem !important; }
  .vip-cashback{ font-size: 1.6rem; }
  .vip-card ul{ font-size: 0.82rem; }
}

/* ---- Blog compact ---- */
@media (max-width: 480px){
  .blog-grid{ grid-template-columns: 1fr; gap: 12px; }
  .blog-card{ padding: 16px; }
  .blog-tag{ font-size: 0.68rem; }
  .blog-card h4{ font-size: 0.9rem; }
  .blog-card p{ font-size: 0.8rem; }
  .blog-date{ font-size: 0.7rem; }
}

/* ---- Trust section compact ---- */
@media (max-width: 480px){
  .trust-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .trust-item{ padding: 14px; }
  .trust-icon{ font-size: 1.4rem; margin-bottom: 6px; }
  .trust-item h4{ font-size: 0.82rem; }
  .trust-item p{ font-size: 0.74rem; }
}

/* ---- CTA band compact ---- */
@media (max-width: 480px){
  .cta-band-inner{ padding: 22px 18px; gap: 14px; }
  .cta-band-inner h2{ font-size: 1.1rem; }
  .cta-band-inner p{ font-size: 0.8rem; }
  .cta-band-actions{ flex-direction: column; width: 100%; gap: 8px; }
  .cta-band-actions .btn{ width: 100%; justify-content: center; padding: 11px; }
}

/* ---- Footer compact ---- */
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .footer-brand p{ font-size: 0.8rem; }
  .footer-social{ gap: 8px; }
  .footer-social a{ width: 32px; height: 32px; font-size: 0.72rem; }
  .footer-col h5{ font-size: 0.85rem; margin-bottom: 10px; }
  .footer-col a{ font-size: 0.8rem; padding: 3px 0; }
  .footer-bottom{ font-size: 0.72rem; padding: 14px 0; flex-direction: column; gap: 4px; text-align: center; }
}

/* ---- Joki banner compact ---- */
@media (max-width: 480px){
  .joki-banner{ padding: 14px 16px; gap: 12px; }
  .joki-banner-visual{ width: 60px; height: 60px; border-radius: 10px; }
  .joki-banner-text h3{ font-size: 0.9rem; }
  .joki-banner-text p{ font-size: 0.76rem; }
  .joki-banner-cta{ font-size: 0.8rem; padding: 9px 14px; }
}

/* ---- APK promo banner compact ---- */
@media (max-width: 480px){
  .apk-promo-content{ padding: 16px; }
  .apk-promo-content h3{ font-size: 1rem; }
  .apk-promo-content p{ font-size: 0.78rem; }
}

/* ---- Social proof toast compact ---- */
@media (max-width: 480px){
  #socialProofToast{ bottom: 70px; left: 8px; right: 8px; padding: 10px 12px; }
  .sp-name{ font-size: 0.78rem; }
  .sp-product{ font-size: 0.73rem; }
  .sp-time{ font-size: 0.68rem; }
}

/* ---- FAB compact ---- */
@media (max-width: 480px){
  .fab-main{ width: 46px; height: 46px; right: 14px; bottom: 14px; }
  .fab-item{ font-size: 0.8rem; padding: 8px 14px; }
}

/* ---- Logo partner strip compact ---- */
@media (max-width: 480px){
  .strip-inner{ flex-direction: column; gap: 8px; padding: 14px 0; }
  .strip-label{ font-size: 0.72rem; }
  .strip-logos{ gap: 12px; font-size: 0.78rem; flex-wrap: wrap; justify-content: center; }
}

/* ---- Membership VIP compact ---- */
@media (max-width: 480px){
  .vip-badge{ font-size: 0.65rem; top: 10px; right: 10px; }
}

/* ---- Promo popup compact ---- */
@media (max-width: 480px){
  .promo-modal{ padding: 24px 18px; margin: 12px; border-radius: 18px; }
  .promo-title{ font-size: 1.1rem; }
  .promo-sub{ font-size: 0.82rem; }
  .promo-code{ font-size: 1.1rem; }
  .promo-social-links{ gap: 8px; }
  .promo-social-item{ padding: 8px 12px; font-size: 0.78rem; }
}

/* ---- Back button compact ---- */
@media (max-width: 480px){
  .back-btn{ font-size: 0.8rem; padding: 6px 12px; }
  .breadcrumb{ font-size: 0.76rem; }
}

/* ============================================================
   PROFESSIONAL BACKGROUND ENHANCEMENTS
   Aurora glow + animated orbs + depth layers
============================================================ */

/* Aurora orbs yang bergerak di background */
.bg-frost{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* Orb 1 - top left cyan */
.bg-frost::before{
  content:'';
  position:absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,229,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
  top: -200px; left: -200px;
  animation: auroraFloat1 20s ease-in-out infinite;
  pointer-events:none;
}

/* Orb 2 - bottom right blue */
.bg-frost::after{
  content:'';
  position:absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(76,201,240,0.06) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -150px; right: -150px;
  animation: auroraFloat2 25s ease-in-out infinite;
  pointer-events:none;
}

@keyframes auroraFloat1{
  0%,100%{ transform: translate(0,0) scale(1); opacity:0.8; }
  33%{ transform: translate(60px,40px) scale(1.1); opacity:1; }
  66%{ transform: translate(-40px,80px) scale(0.9); opacity:0.6; }
}
@keyframes auroraFloat2{
  0%,100%{ transform: translate(0,0) scale(1); opacity:0.7; }
  33%{ transform: translate(-80px,-40px) scale(1.15); opacity:1; }
  66%{ transform: translate(40px,-80px) scale(0.85); opacity:0.5; }
}

/* Subtle animated grid */
.bg-grid{
  animation: gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.6; }
}

/* ---- Navbar dengan glass effect lebih dalam ---- */
.nav{
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(
    180deg,
    rgba(8,14,26,0.92) 0%,
    rgba(11,18,32,0.88) 100%
  );
}

/* ---- Section divider line ---- */
.section + .section{
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ---- Hero banner depth ---- */
.banner-slide::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(
    90deg,
    rgba(8,14,26,0.7) 0%,
    rgba(8,14,26,0.3) 50%,
    rgba(8,14,26,0.5) 100%
  );
  z-index:1;
}
.banner-slide-inner{ position:relative; z-index:2; }

/* ---- Cyan accent line di atas halaman ---- */
body::before{
  content:'';
  position:fixed; top:0; left:0; right:0; height:2px; z-index:9999;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--ice), var(--cyan), transparent);
  animation: topLineShimmer 4s linear infinite;
}
@keyframes topLineShimmer{
  0%{ background-position: -100% 0; }
  100%{ background-position: 200% 0; }
}

/* ---- Card hover glow effect lebih dramatis ---- */
.game-card:hover,
.flash-card:hover,
.joki-service-card:hover,
.vip-card:hover{
  box-shadow:
    0 0 0 1px rgba(0,229,255,0.3),
    0 8px 32px rgba(0,229,255,0.15),
    0 2px 8px rgba(0,0,0,0.5);
}

/* ---- Eyebrow badge glow ---- */
.eyebrow-light{
  text-shadow: 0 0 12px rgba(0,229,255,0.4);
}

/* ---- Section head title glow ---- */
.section-head h2{
  text-shadow: 0 2px 20px rgba(76,201,240,0.1);
}

/* ---- Gradient border on active elements ---- */
.nominal-item.selected{
  background: linear-gradient(
    135deg,
    rgba(0,229,255,0.12) 0%,
    rgba(76,201,240,0.06) 100%
  ) !important;
  box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(0,229,255,0.2) !important;
}