/* ============================================================
   VOLTZ DESIGN SYSTEM v2.0
   Identidade: Cyberpunk · Neon · Dark · Premium
   ============================================================ */

/* ── 1. Tokens ──────────────────────────────────────────────── */
:root {
  --vz-cyan:   #00d4ff;
  --vz-blue:   #3b82f6;
  --vz-purple: #a855f7;
  --vz-green:  #00ff88;
  --vz-orange: #ff9500;
  --vz-red:    #ff3366;
  --vz-yellow: #facc15;
  --vz-discord:#5865F2;

  --vz-glow-cyan:   0 0 24px rgba(0,212,255,.35), 0 0 56px rgba(0,212,255,.12);
  --vz-glow-blue:   0 0 24px rgba(59,130,246,.4),  0 0 56px rgba(59,130,246,.15);
  --vz-glow-purple: 0 0 24px rgba(168,85,247,.35), 0 0 56px rgba(168,85,247,.12);
  --vz-glow-green:  0 0 20px rgba(0,255,136,.35);
  --vz-glow-white:  0 0 24px rgba(255,255,255,.12);

  --vz-s0: #030307;
  --vz-s1: rgba(5,9,18,.96);
  --vz-s2: rgba(8,12,24,.88);
  --vz-s3: rgba(12,16,32,.65);

  --vz-b0: rgba(0,212,255,.04);
  --vz-b1: rgba(0,212,255,.10);
  --vz-b2: rgba(0,212,255,.22);
  --vz-b3: rgba(0,212,255,.42);

  --vz-fast:   140ms;
  --vz-mid:    260ms;
  --vz-slow:   440ms;
  --vz-spring: cubic-bezier(.16,1,.3,1);
  --vz-ease:   cubic-bezier(.4,0,.2,1);
}

/* ── 2. Focus global ────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--vz-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 3. Scroll reveal ───────────────────────────────────────── */
.vz-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .68s var(--vz-spring), transform .68s var(--vz-spring);
}
.vz-reveal.is-visible { opacity: 1; transform: none; }
.vz-d1 { transition-delay: .10s; }
.vz-d2 { transition-delay: .20s; }
.vz-d3 { transition-delay: .30s; }
.vz-d4 { transition-delay: .42s; }
.vz-d5 { transition-delay: .54s; }

/* ── 4. Glass card ──────────────────────────────────────────── */
.vz-card {
  background: var(--vz-s1);
  border: 1px solid var(--vz-b0);
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--vz-mid) var(--vz-ease),
    transform    var(--vz-mid) var(--vz-spring),
    box-shadow   var(--vz-mid) var(--vz-ease);
}
.vz-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(0,212,255,.05) 0%,transparent 55%);
  opacity: 0;
  transition: opacity var(--vz-mid);
  pointer-events: none;
}
.vz-card:hover {
  border-color: var(--vz-b2);
  transform: translateY(-4px);
  box-shadow: var(--vz-glow-cyan), 0 28px 56px rgba(0,0,0,.45);
}
.vz-card:hover::after { opacity: 1; }

/* Featured / hero card */
.vz-card--hero {
  border-color: var(--vz-b2);
  background: linear-gradient(135deg,rgba(0,14,28,.98) 0%,rgba(3,4,18,.99) 100%);
}
.vz-card--hero::before {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(135deg,rgba(0,212,255,.45) 0%,rgba(168,85,247,.2) 50%,transparent 72%);
}
.vz-card--hero:hover {
  border-color: var(--vz-b3);
  box-shadow: var(--vz-glow-cyan), var(--vz-glow-purple), 0 36px 72px rgba(0,0,0,.55);
}

/* Tilt enabled cards */
.vz-tilt { will-change: transform; }

/* ── 5. Buttons ─────────────────────────────────────────────── */
.vz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.75rem;
  font-weight: 700; font-size: .8125rem;
  letter-spacing: .075em; text-transform: uppercase;
  border-radius: .875rem; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: all var(--vz-mid) var(--vz-spring);
}
.vz-btn:active { transform: scale(.97) !important; }

.vz-btn--white  { background:#fff; color:#000; box-shadow: var(--vz-glow-white); }
.vz-btn--white:hover { background:#ececec; transform:translateY(-2px); box-shadow:0 0 32px rgba(255,255,255,.2); }

.vz-btn--primary {
  background: linear-gradient(135deg,#1d4ed8,#3b82f6);
  border-color: rgba(59,130,246,.45); color:#fff;
  box-shadow: 0 0 22px rgba(59,130,246,.28);
}
.vz-btn--primary:hover { box-shadow:0 0 36px rgba(59,130,246,.55),0 10px 28px rgba(0,0,0,.4); transform:translateY(-2px); }

.vz-btn--ghost {
  background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); color:#d4d4d8;
}
.vz-btn--ghost:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#fff; }

.vz-btn--cyan {
  background:rgba(0,212,255,.07); border-color:rgba(0,212,255,.28); color:var(--vz-cyan);
}
.vz-btn--cyan:hover { background:rgba(0,212,255,.15); border-color:rgba(0,212,255,.5); box-shadow:var(--vz-glow-cyan); color:#fff; transform:translateY(-2px); }

/* ── 6. Badges ──────────────────────────────────────────────── */
.vz-badge {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.35rem .9rem; border-radius:9999px; border:1px solid;
  font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.vz-badge--cyan   { background:rgba(0,212,255,.07);   border-color:rgba(0,212,255,.22);   color:var(--vz-cyan); }
.vz-badge--blue   { background:rgba(59,130,246,.08);  border-color:rgba(59,130,246,.22);  color:#93c5fd; }
.vz-badge--green  { background:rgba(0,255,136,.07);   border-color:rgba(0,255,136,.22);   color:var(--vz-green); }
.vz-badge--purple { background:rgba(168,85,247,.07);  border-color:rgba(168,85,247,.22);  color:#c084fc; }
.vz-badge--orange { background:rgba(255,149,0,.07);   border-color:rgba(255,149,0,.22);   color:var(--vz-orange); }
.vz-badge--live   { background:rgba(0,255,136,.07);   border-color:rgba(0,255,136,.22);   color:var(--vz-green); }

/* ── 7. Stat chips ──────────────────────────────────────────── */
.vz-stat {
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  padding:.875rem 1.5rem;
  background:rgba(0,0,0,.35); border:1px solid var(--vz-b1); border-radius:1rem;
  transition: border-color var(--vz-mid), box-shadow var(--vz-mid);
}
.vz-stat:hover { border-color:var(--vz-b2); box-shadow:var(--vz-glow-cyan); }
.vz-stat__val {
  font-family:'JetBrains Mono',monospace;
  font-size:1.375rem; font-weight:700; color:var(--vz-cyan);
}
.vz-stat__lbl {
  font-size:.6875rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#52525b;
}

/* ── 8. Gradient text ───────────────────────────────────────── */
.vz-text-glow {
  background: linear-gradient(135deg,#fff 0%,var(--vz-cyan) 45%,var(--vz-purple) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  background-size:200% 200%;
  animation: vz-gradient-shift 5s ease infinite;
}
.vz-text-blue {
  background: linear-gradient(135deg,#fff 0%,#93c5fd 55%,var(--vz-blue) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.vz-text-cyan {
  background: linear-gradient(135deg,#fff 0%,var(--vz-cyan) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── 9. Grid bg ─────────────────────────────────────────────── */
.vz-grid {
  background-size:44px 44px;
  background-image:
    linear-gradient(to right, rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,212,255,.04) 1px, transparent 1px);
}

/* ── 10. Scanlines ──────────────────────────────────────────── */
.vz-scanlines::before {
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.013) 2px,rgba(0,0,0,.013) 4px);
}

/* ── 11. Live dot ───────────────────────────────────────────── */
.vz-dot-live {
  width:7px; height:7px; border-radius:50%;
  background:var(--vz-green);
  box-shadow:0 0 8px rgba(0,255,136,.9);
  animation:vz-dot-pulse 2.2s ease-in-out infinite;
  flex-shrink:0;
}

/* ── 12. Gradient border wrapper ────────────────────────────── */
.vz-grad-border { position:relative; }
.vz-grad-border::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background:linear-gradient(135deg,rgba(0,212,255,.5) 0%,rgba(168,85,247,.3) 50%,transparent 75%);
}

/* ── 13. Section separator ──────────────────────────────────── */
.vz-sep {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.2),transparent);
}

/* ── 14. Keyframes ──────────────────────────────────────────── */
@keyframes vz-gradient-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
@keyframes vz-dot-pulse {
  0%,100% { opacity:1; box-shadow:0 0 8px rgba(0,255,136,.9); }
  50%     { opacity:.55; box-shadow:0 0 18px rgba(0,255,136,.4); }
}
@keyframes vz-float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}
@keyframes vz-blob-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(3%,4%) scale(1.04); }
  66%     { transform:translate(-3%,2%) scale(.97); }
}
@keyframes vz-shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
@keyframes vz-glow-ring {
  0%,100% { box-shadow:0 0 16px rgba(0,212,255,.3); }
  50%     { box-shadow:0 0 36px rgba(0,212,255,.65),0 0 72px rgba(0,212,255,.2); }
}