/* ══════════════════════════════════════════════════════════════════════
   ModelUGC — Design System v3
   Dark Mode: Bloomberg Terminal × Premium Creative Studio
   Deep charcoal/near-black + electric purple + neon cyan
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BACKGROUND SYSTEM ── Deep charcoal, NOT navy, NOT pure black */
  --heist-bg-void:    #07070C;    /* Deepest — page background */
  --heist-bg-deep:    #090910;    /* Deep sections */
  --heist-bg:         #0A0A0F;    /* Default section bg */
  --heist-bg-alt:     #0F0F1A;    /* Alternate section bg */
  --heist-bg-surface: rgba(255,255,255,0.025); /* Card surfaces */
  --heist-bg-elevated: rgba(255,255,255,0.04); /* Elevated cards, modals */

  /* ── PRIMARY ACCENT: Electric Purple ── */
  --heist-purple-primary:  #7C3AED;
  --heist-purple-bright:   #8B5CF6;
  --heist-purple-light:    #A78BFA;
  --heist-purple-dim:      rgba(124,58,237,0.55);
  --heist-purple-glow:     rgba(124,58,237,0.25);
  --heist-purple-subtle:   rgba(124,58,237,0.08);
  --heist-purple-border:   rgba(124,58,237,0.22);

  /* ── SECONDARY ACCENT: Neon Cyan ── */
  --heist-cyan:          #00D4FF;
  --heist-cyan-bright:   #22E5FF;
  --heist-cyan-glow:     rgba(0,212,255,0.25);
  --heist-cyan-subtle:   rgba(0,212,255,0.08);
  --heist-cyan-border:   rgba(0,212,255,0.2);

  /* ── LEGACY ALIASES (backward compat) ── */
  --heist-blue:          #7C3AED;   /* Re-mapped to purple */
  --heist-blue-light:    #A78BFA;
  --heist-blue-dim:      rgba(124,58,237,0.55);
  --heist-blue-glow:     rgba(124,58,237,0.25);
  --heist-blue-subtle:   rgba(124,58,237,0.08);
  --heist-blue-border:   rgba(124,58,237,0.22);
  --heist-violet:        #8B5CF6;
  --heist-violet-light:  #A78BFA;
  --heist-violet-dim:    rgba(139,92,246,0.55);
  --heist-violet-glow:   rgba(139,92,246,0.2);
  --heist-violet-subtle: rgba(139,92,246,0.08);
  --heist-violet-border: rgba(139,92,246,0.2);
  --heist-teal:          #00D4FF;
  --heist-teal-light:    #22E5FF;
  --heist-teal-glow:     rgba(0,212,255,0.25);
  --heist-teal-subtle:   rgba(0,212,255,0.08);
  --heist-teal-border:   rgba(0,212,255,0.2);
  --heist-purple:        #7C3AED;
  --heist-purple-legacy: #8B5CF6;

  /* ── GRADIENTS ── Purple to cyan: intelligence × data × beauty */
  --heist-gradient:      linear-gradient(135deg, #7C3AED, #00D4FF);
  --heist-gradient-rev:  linear-gradient(135deg, #00D4FF, #7C3AED);
  --heist-gradient-text: linear-gradient(135deg, #A78BFA, #00D4FF);
  --heist-gradient-warm: linear-gradient(135deg, #7C3AED, #A855F7);
  --heist-gradient-glow: radial-gradient(ellipse at center, rgba(124,58,237,0.15), transparent 70%);

  /* ── TEXT ── High contrast on dark */
  --heist-text:          #F0F0F8;
  --heist-text-bright:   #FFFFFF;
  --heist-text-secondary: rgba(180,180,210,0.8);
  --heist-text-muted:    rgba(160,160,200,0.5);
  --heist-text-dim:      rgba(160,160,200,0.35);

  /* ── BORDERS ── */
  --heist-border:        rgba(255,255,255,0.06);
  --heist-border-subtle: rgba(255,255,255,0.04);
  --heist-border-medium: rgba(255,255,255,0.1);
  --heist-border-bright: rgba(255,255,255,0.15);

  /* ── CARD COMPONENT SYSTEM ── */
  --heist-card-bg:       rgba(255,255,255,0.025);
  --heist-card-border:   rgba(255,255,255,0.07);
  --heist-card-radius:   12px;
  --heist-card-padding:  20px;
  --heist-card-shadow:   0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --heist-card-shadow-hover: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.2), 0 0 20px rgba(124,58,237,0.08);

  /* ── STATUS ── */
  --heist-success:  #00FFA3;
  --heist-warning:  #F59E0B;
  --heist-danger:   #FF4D6D;
  --heist-gold:     #F59E0B;

  /* ── GLASS — premium blur panels ── */
  --heist-glass-bg:      rgba(10,10,15,0.82);
  --heist-glass-bg-hover:rgba(15,15,26,0.92);
  --heist-glass-border:  rgba(124,58,237,0.15);
  --heist-glass-shadow:  0 8px 32px rgba(0,0,0,0.5), 0 0 60px rgba(124,58,237,0.05);
  --heist-blur:          blur(20px);

  /* ── GLOW SYSTEM ── */
  --heist-glow-purple:   0 0 40px rgba(124,58,237,0.2), 0 0 80px rgba(124,58,237,0.06);
  --heist-glow-cyan:     0 0 40px rgba(0,212,255,0.18), 0 0 80px rgba(0,212,255,0.05);
  --heist-glow-card:     0 0 30px rgba(124,58,237,0.12);

  /* ── TYPOGRAPHY ── */
  --heist-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --heist-font-display:'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --heist-font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── SPACING ── */
  --heist-section-py:    96px;
  --heist-section-py-lg: 120px;
  --heist-gap-card:      16px;

  /* ── RADII ── */
  --heist-radius-sm:  6px;
  --heist-radius-md:  10px;
  --heist-radius-lg:  12px;
  --heist-radius-xl:  16px;
  --heist-radius-2xl: 20px;

  /* ── MOTION ── */
  --heist-ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --heist-transition:      0.2s cubic-bezier(0.22, 1, 0.36, 1);
  --heist-transition-slow: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── CARD COMPONENT ── Subtle border + purple glow on hover */
.heist-card {
  background: var(--heist-card-bg);
  border: 1px solid var(--heist-card-border);
  border-radius: var(--heist-card-radius);
  padding: var(--heist-card-padding);
  box-shadow: var(--heist-card-shadow);
  transition: transform var(--heist-transition), box-shadow var(--heist-transition), border-color var(--heist-transition);
}
.heist-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--heist-card-shadow-hover);
  border-color: rgba(124,58,237,0.2);
}

/* ── GLASS CARD — glassmorphism panels ── */
.heist-glass {
  background: var(--heist-glass-bg);
  backdrop-filter: var(--heist-blur);
  -webkit-backdrop-filter: var(--heist-blur);
  border: 1px solid var(--heist-glass-border);
  border-radius: var(--heist-radius-xl);
  box-shadow: var(--heist-glass-shadow);
  transition: border-color var(--heist-transition), transform var(--heist-transition), box-shadow var(--heist-transition);
}
.heist-glass:hover {
  transform: translateY(-2px);
  border-color: rgba(124,58,237,0.25);
  box-shadow: var(--heist-glass-shadow), var(--heist-glow-purple);
}

/* ── GRADIENT BORDER CARD ── */
.heist-gradient-border {
  position: relative;
  background: var(--heist-card-bg);
  border-radius: var(--heist-card-radius);
  overflow: hidden;
}
.heist-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--heist-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── GRADIENT TEXT ── */
.heist-gradient-text {
  background: var(--heist-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PRIMARY BUTTON ── Purple gradient with glow */
.heist-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--heist-radius-md);
  font-family: var(--heist-font);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--heist-transition), transform var(--heist-transition), box-shadow var(--heist-transition);
  box-shadow: 0 0 20px rgba(124,58,237,0.25);
}
.heist-btn-primary:hover {
  background: linear-gradient(135deg, #6D28D9, #9333EA);
  transform: translateY(-1px);
  box-shadow: 0 4px 24px rgba(124,58,237,0.45);
}

/* ── GHOST BUTTON ── */
.heist-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--heist-text-secondary);
  padding: 10px 20px;
  border-radius: var(--heist-radius-md);
  font-family: var(--heist-font);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--heist-border);
  cursor: pointer;
  transition: all var(--heist-transition);
}
.heist-btn-ghost:hover {
  color: var(--heist-text);
  border-color: rgba(124,58,237,0.3);
  background: rgba(124,58,237,0.06);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(124,58,237,0.12);
}

/* ── Legacy glow button alias ── */
.heist-btn-glow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: #fff;
  padding: 12px 28px;
  border-radius: var(--heist-radius-md);
  font-family: var(--heist-font);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--heist-transition), transform var(--heist-transition), box-shadow var(--heist-transition);
  box-shadow: 0 0 30px rgba(124,58,237,0.3);
}
.heist-btn-glow:hover {
  background: linear-gradient(135deg, #6D28D9, #9333EA);
  transform: translateY(-2px);
  box-shadow: 0 6px 32px rgba(124,58,237,0.5), 0 0 60px rgba(124,58,237,0.15);
}

/* ── SOFT GLOW ── Utility */
.heist-soft-glow {
  box-shadow:
    0 2px 12px rgba(0,0,0,0.4),
    0 0 0 1px rgba(124,58,237,0.08) inset;
}

/* ── SECTION SPACING ── */
.heist-section {
  padding: var(--heist-section-py) 0;
  position: relative;
}
.heist-section-lg {
  padding: var(--heist-section-py-lg) 0;
}

/* ── TYPOGRAPHY UTILITIES ── */
.heist-heading {
  font-family: var(--heist-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--heist-text-bright);
  line-height: 1.15;
}
.heist-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heist-text-muted);
}

/* ── BADGE ── */
.heist-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.heist-badge-blue,
.heist-badge-purple {
  background: var(--heist-purple-subtle);
  color: var(--heist-purple-light);
  border: 1px solid var(--heist-purple-border);
}
.heist-badge-violet {
  background: var(--heist-violet-subtle);
  color: var(--heist-violet-light);
  border: 1px solid var(--heist-violet-border);
}
.heist-badge-cyan {
  background: var(--heist-cyan-subtle);
  color: var(--heist-cyan);
  border: 1px solid var(--heist-cyan-border);
}

/* ── ANIMATED KEYFRAMES ── */
@keyframes heist-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes heist-pulse-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}
@keyframes heist-orb-drift {
  0%, 100% { transform: translate(0,0) scale(1); opacity: 0.8; }
  50% { transform: translate(30px, 20px) scale(1.05); opacity: 1; }
}

/* ── GLASSMORPHISM OVERLAY ── */
.heist-overlay {
  background: rgba(10,10,15,0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(124,58,237,0.12);
}

/* ── DATA CARD GLOW ── for analytics/metric cards */
.heist-data-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.heist-data-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,0.4), rgba(0,212,255,0.3), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.heist-data-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,58,237,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 30px rgba(124,58,237,0.12);
}
.heist-data-card:hover::after {
  opacity: 1;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  :root {
    --heist-section-py: 64px;
    --heist-section-py-lg: 80px;
    --heist-card-padding: 16px;
  }
}
@media (max-width: 480px) {
  :root {
    --heist-section-py: 48px;
    --heist-section-py-lg: 64px;
    --heist-card-padding: 14px;
  }
}