/* ═══════════════════════════════════════════════════════════
   DealOS — Light Design System
   Soft light base, violet→cyan gradient accents, glassmorphism
   ═══════════════════════════════════════════════════════════ */

:root {
  --base:      #F6F8FC;
  --base-2:    #FFFFFF;
  --panel:     #FFFFFF;
  --panel-2:   #F1F5F9;
  --line:      rgba(15,23,42,0.08);
  --line-2:    rgba(15,23,42,0.14);
  --text:      #0F172A;
  --muted:     #64748B;
  --violet:    #7C3AED;
  --violet-lt: #6D28D9;
  --cyan:      #0891B2;
  --cyan-lt:   #0E7490;
  --green:     #059669;
  --amber:     #D97706;
  --red:       #DC2626;
  --grad:      linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --font-disp: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body {
  font-family: var(--font-body);
  background: var(--base);
  color: var(--text);
  overflow-x: hidden;
}

.font-display { font-family: var(--font-disp); }
.mono { font-family: var(--font-mono); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Glassmorphism ─────────────────────────────── */
.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.glass-2 { background: var(--panel-2); }
.glass-hover { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.glass-hover:hover {
  border-color: rgba(124,58,237,0.3);
  box-shadow: 0 16px 32px -12px rgba(15,23,42,0.12);
  transform: translateY(-2px);
}

/* ── Cards (clean professional hover) ──────────── */
.neon-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.neon-card:hover {
  border-color: rgba(124,58,237,0.4);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(15,23,42,0.18), 0 8px 20px -12px rgba(15,23,42,0.08);
}

/* ── Buttons ───────────────────────────────────── */
.btn-grad {
  background: var(--grad);
  color: #fff;
  font-family: var(--font-disp);
  font-weight: 700;
  box-shadow: 0 6px 20px -6px rgba(124,58,237,0.4);
  transition: opacity .15s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-grad:hover { opacity: .94; box-shadow: 0 12px 28px -8px rgba(124,58,237,0.45); transform: translateY(-1px); }
.btn-ghost {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-disp);
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.06); }

/* ── Section labels ────────────────────────────── */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-lt);
}
.sec-label::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--grad);
}

/* ── Live dot ──────────────────────────────────── */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse-dot 1.8s ease infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.8)} }

/* ── Hero mesh ─────────────────────────────────── */
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .5;
}
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-40px) scale(1.15)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,50px) scale(1.1)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,30px) scale(1.2)} }
.drift-1 { animation: drift1 16s ease-in-out infinite; }
.drift-2 { animation: drift2 19s ease-in-out infinite; }
.drift-3 { animation: drift3 22s ease-in-out infinite; }

.mesh-grid {
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ── Hero header (shared inner-page heroes) ────── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--base);
  border-bottom: 1px solid var(--line);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero .mesh-blob { position: absolute; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-up   { animation: fadeUp .7s ease both; }
.anim-up-2 { animation: fadeUp .7s .12s ease both; }
.anim-up-3 { animation: fadeUp .7s .24s ease both; }

/* ── Chips ─────────────────────────────────────── */
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.chip-violet { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.35); color: var(--violet-lt); }
.chip-cyan   { background: rgba(34,211,238,0.12); border: 1px solid rgba(34,211,238,0.35); color: var(--cyan-lt); }
.chip-green  { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); color: var(--green); }
.chip-amber  { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.35); color: var(--amber); }
.chip-red    { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: var(--red); }

.code-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(34,211,238,0.08);
  border: 1px dashed rgba(34,211,238,0.4);
  color: var(--cyan-lt);
}

/* ── Inputs / search ───────────────────────────── */
.input-dark {
  background: #FFFFFF;
  border: 1px solid var(--line-2);
  color: var(--text);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-dark::placeholder { color: rgba(100,116,139,0.6); }
.input-dark:focus { border-color: rgba(124,58,237,0.6); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); background: #FFFFFF; }

.search-wrap:focus-within { border-color: rgba(124,58,237,0.6) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.12), 0 0 30px rgba(124,58,237,0.1) !important; }

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

/* ── Dark data cards (used across inner pages) ─── */
.deal-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.deal-card:hover {
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 20px 40px -16px rgba(15,23,42,0.16);
  transform: translateY(-3px);
}

.store-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.store-card:hover {
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 20px 40px -16px rgba(15,23,42,0.16);
  transform: translateY(-3px);
}

/* ── Stat tiles ────────────────────────────────── */
.stat-tile {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.stat-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad);
  opacity: .8;
}
.stat-tile:hover {
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 16px 32px -14px rgba(15,23,42,0.14);
}

/* ── FAQ ───────────────────────────────────────── */
.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item.open { border-color: rgba(124,58,237,0.35); box-shadow: 0 12px 28px -14px rgba(15,23,42,0.14); }
.faq-icon {
  transition: transform .22s ease, background .22s ease, color .22s ease;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(139,92,246,0.2); border-color: rgba(139,92,246,0.5); color: var(--violet-lt); }

/* ── Data rows ─────────────────────────────────── */
.data-row {
  padding: 13px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.data-row:hover {
  border-color: rgba(34,211,238,0.45);
  background: rgba(34,211,238,0.05);
  box-shadow: 0 0 24px rgba(34,211,238,0.12);
}

.divider { border-color: var(--line); }
.text-muted { color: var(--muted); }
.text-light { color: var(--text); }

/* Header link */
.nav-link { color: var(--muted); transition: color .18s ease, background .18s ease; }
.nav-link:hover { color: var(--text); background: var(--panel-2); }