/* public/css/header.css */
:root{
  --vx-gold:#f5c518;
  --vx-gold-d:#caa316;
  --vx-deep:#0b0e18;
  --vx-ink:#0a0d15;
  --vx-ink-2:#121626;
  --vx-white:#ffffff;
  --vx-muted:#9aa3b2;
  --logo-w: clamp(360px, 42vw, 880px);
}

/* SHELL */
.vx-header{font-family:'Nunito',sans-serif;color:var(--vx-white);}
.vx-container{max-width:1200px;margin:0 auto;padding:0 16px;}

/* TOP MINI BAR */
.vx-minibar{background:#0b0e19;border-bottom:1px solid #171b2a;}
.vx-mini-in{height:40px;display:flex;align-items:center;gap:12px;}
.vx-spacer{flex:1}
.vx-auth{display:flex;gap:10px;align-items:center}
.vx-btn-text{font-weight:700;color:#ccd3e8;text-decoration:none;padding:6px 10px;border-radius:8px;}
.vx-btn-text:hover{background:#14192a}
.vx-btn-outline{font-weight:800;color:var(--vx-gold);text-decoration:none;border:1px solid var(--vx-gold-d);padding:6px 12px;border-radius:8px;box-shadow:0 2px 10px #f5c51833;}
.vx-btn-outline:hover{background:var(--vx-gold);color:#000}

/* HERO */
.vx-hero{
  background:
    radial-gradient(1200px 280px at 50% -60px, #1e2336 0%, transparent 60%),
    linear-gradient(180deg,#0e1224 0%,#0b0f1d 100%);
  padding:28px 0 22px; position:relative; z-index:0; text-align:center;
  border-bottom:1px solid #14192a;
}
.vx-hero-in{display:flex;align-items:center;justify-content:center;}
.vx-hero-text{text-align:center;}
.vx-logo{
  width: clamp(80px, 22vw, 280px)!important;
  height: auto!important;
  display: block;
  margin: 0 auto 10px;
  image-rendering: auto;
  filter: drop-shadow(0 12px 30px #0008);
}

.vx-sub{margin:0 0 14px;font-size:15px;opacity:.92;}
.vx-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.vx-btn{background:#1a1f33;border:1px solid #2b3354;color:#fff;border-radius:10px;padding:10px 18px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:.15s;}
.vx-btn:hover{transform:translateY(-1px);}
.vx-btn-yellow{background:var(--vx-gold);color:#000;border-color:var(--vx-gold-d);box-shadow:0 6px 18px #f5c5183a;}
.vx-sm{padding:8px 12px;border-radius:8px;}
.vx-ip{background:#fff;color:#000;border-radius:10px;padding:8px 12px;display:inline-flex;align-items:center;gap:10px;border:1px solid #e6e6f0;}
.vx-live{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 10px #22c55e;}
.vx-ip-text{font-weight:800;}
.vx-copy{border:0;background:#f2f3f8;border-radius:8px;padding:6px 8px;cursor:pointer;}

/* NAV BAR */
.vx-navwrap{background:var(--vx-deep);border-top:1px solid #13182a;border-bottom:1px solid #13182a;position:sticky;top:0;z-index:40;}
.vx-nav-in{height:60px;display:flex;align-items:center;gap:18px;}
.vx-brand{color:#fff;font-weight:900;text-decoration:none;letter-spacing:.5px;}

.vx-nav{display:flex;align-items:center;gap:22px;margin-left:8px;position:relative;}
.vx-nav a{
  position:relative;
  color:#e9ecff;text-decoration:none;font-weight:800;opacity:.92;padding:6px 2px;border-radius:4px;
}
.vx-nav a:hover{opacity:1}
.vx-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-14px;
  height:3px; background:linear-gradient(90deg,#e8c14b, #f5c518, #e8c14b);
  border-radius:3px; box-shadow:0 4px 12px #f5c51866;
}

/* search */
.vx-search{margin-left:auto;display:flex;align-items:center}
.vx-search input{
  width:260px;background:#0f1324;border:1px solid #1b2140;color:#fff;
  padding:10px 12px;border-radius:10px 0 0 10px;outline:none;
}
.vx-search .vx-btn{border-radius:0 10px 10px 0;}
.vx-suggest{display:none}
.vx-btn-text {
  font-weight:700;
  color:#ccd3e8;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  background:transparent;
  border:0;
  cursor:pointer;
}
.vx-btn-text:hover { background:#14192a }

.vx-btn-outline {
  font-weight:800;
  color:var(--vx-gold);
  text-decoration:none;
  border:1px solid var(--vx-gold-d);
  padding:6px 12px;
  border-radius:8px;
  box-shadow:0 2px 10px #f5c51833;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.vx-btn-outline:hover {
  background:var(--vx-gold);
  color:#000;
}

/* RESPONSIVE */
@media (max-width:980px){
  .vx-nav{gap:14px}
  .vx-search input{width:190px}
}
@media (max-width:720px){
  .vx-nav-in{flex-wrap:wrap;gap:10px;height:auto;padding:10px 0}
  .vx-search{width:100%;order:3}
  .vx-search input{flex:1;width:auto}
}