/* Affiliate Nex - Official Brand System & Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --nex-navy: #060B26;
  --nex-navy-light: #0B133B;
  --nex-cyan: #00D2FF;
  --nex-blue: #0066FF;
  --nex-purple: #7000FF;
  --nex-magenta: #C837FF;
  --nex-slate: #F8FAFC;
  --nex-text: #0F172A;
  --nex-muted: #475569;
  --nex-border: #E2E8F0;
}

.dark {
  --nex-slate: #060B26;
  --nex-text: #F8FAFC;
  --nex-muted: #94A3B8;
  --nex-border: #1E293B;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--nex-slate);
  color: var(--nex-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Exact Logo Gradient Utilities */
.bg-nex-gradient {
  background: linear-gradient(135deg, #00D2FF 0%, #0066FF 35%, #7000FF 72%, #C837FF 100%);
}

.bg-nex-dark-hero {
  background: radial-gradient(circle at 80% 20%, rgba(112, 0, 255, 0.25) 0%, rgba(0, 102, 255, 0.18) 38%, rgba(6, 11, 38, 1) 80%), #060B26;
}

.text-nex-gradient {
  background: linear-gradient(135deg, #00C6FF 0%, #0066FF 35%, #7000FF 75%, #C837FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.border-nex-gradient {
  position: relative;
}
.border-nex-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #00D2FF, #0066FF, #7000FF, #C837FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Executive Card Hover & Spotlight */
.exec-card {
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
  overflow: hidden;
}

.exec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(0, 102, 255, 0.14), 0 8px 20px -8px rgba(112, 0, 255, 0.1);
  border-color: rgba(0, 102, 255, 0.35);
}

/* Subtle Grid Overlay */
.bg-exec-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(0, 102, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(112, 0, 255, 0.05) 1px, transparent 1px);
}

.dark .bg-exec-grid {
  background-image: 
    linear-gradient(to right, rgba(0, 210, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 55, 255, 0.06) 1px, transparent 1px);
}

/* Primary Button */
.btn-nex-primary {
  background: linear-gradient(135deg, #00B4FF 0%, #0066FF 45%, #7000FF 85%, #B829FF 100%);
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px -5px rgba(0, 102, 255, 0.38);
}

.btn-nex-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -6px rgba(112, 0, 255, 0.48);
  filter: brightness(1.06);
}

/* Reveal Animations */
.reveal-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Active Nav Pill */
.nav-link-active {
  color: #0066FF !important;
  font-weight: 700;
  position: relative;
}
.dark .nav-link-active {
  color: #00D2FF !important;
}
.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2.5px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00D2FF, #0066FF, #7000FF, #C837FF);
}