/* CSS Reset & Basic Premium Theme config (Global) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg:            #02040a;
  --bg-darker:     #000000;
  --bg-card:       rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.08);
  --border-hover:  rgba(99,102,241,0.4);
  --text-1:        #ffffff;
  --text-2:        #94a3b8;
  --text-3:        #64748b;
  --accent:        #6366f1; /* Inter matches Primary */
  --accent2:       #8b5cf6;
  --nav-bg:        rgba(2,4,10,0.85);
  --orb-opacity:   0.3;
  --grid-opacity:  0.03;
  --r:             24px;
  --ease:          0.4s cubic-bezier(0.4,0,0.2,1);
  --font:          'Outfit', sans-serif;
  --font-d:        'Outfit', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; transition: var(--ease); }

/* Animated Orbs Background */
.bg-orbs { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb {
  position:absolute; border-radius:50%;
  filter:blur(100px); opacity:var(--orb-opacity);
  animation:orbDrift 14s ease-in-out infinite alternate;
}
.orb-1 { width:620px;height:620px; background:radial-gradient(circle,#7c3aed,#2563eb); top:-160px;left:-120px; animation-duration:16s; }
.orb-2 { width:450px;height:450px; background:radial-gradient(circle,#0ea5e9,#7c3aed); top:35%;right:-100px; animation-duration:11s;animation-delay:-5s; }
.orb-3 { width:380px;height:380px; background:radial-gradient(circle,#6d28d9,#1d4ed8); bottom:0;left:28%; animation-duration:18s;animation-delay:-9s; }
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: var(--orb-opacity); }
  50%  { transform: translate(40px, 50px) scale(1.1); opacity: calc(var(--orb-opacity) * 1.25); }
  100% { transform: translate(-30px, 30px) scale(0.95); opacity: var(--orb-opacity); }
}

/* ── Live Indicator & Animations ───────────────── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--profit);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--profit);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 10px var(--profit);
}

.pulse-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: var(--profit);
    border-radius: 50%;
    opacity: 0.6;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.flash-up { animation: flashUp 0.8s ease-out; }
.flash-down { animation: flashDown 0.8s ease-out; }

@keyframes flashUp {
    0% { background: rgba(16, 185, 129, 0.4); }
    100% { background: transparent; }
}

@keyframes flashDown {
    0% { background: rgba(239, 68, 68, 0.4); }
    100% { background: transparent; }
}

.grid-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,var(--grid-opacity)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,var(--grid-opacity)) 1px,transparent 1px);
  background-size:60px 60px;
}

/* Button Resets */
button { font-family: inherit; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:0.95rem; font-weight:600;
  padding:12px 24px; border-radius:12px; cursor:pointer;
  transition:var(--ease); border:1px solid transparent; width:100%;
  min-height: 48px;
}
.btn-primary {
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff; box-shadow:0 4px 24px rgba(124,58,237,0.4);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(124,58,237,0.55); }
.btn-ghost { background:rgba(255,255,255,0.05); border-color:var(--border); color:var(--text-1); }
.btn-ghost:hover { background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.18); }