/*
  IntoTheBattle — Design System v2
  Loaded after page-local styles as a global override.
  All pages import this file via <link rel="stylesheet">.
*/

/* ─── GOOGLE FONTS ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Inter:wght@400;500;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #080c14;
  --bg-raised:    #0e1422;
  --bg-card:      rgba(255,255,255,0.045);
  --bg-card-h:    rgba(255,255,255,0.075);

  /* Brand colors */
  --gold:         #f5c842;
  --gold-light:   #ffe99a;
  --gold-dim:     rgba(245,200,66,0.14);
  --red:          #ff2a4a;
  --red-dim:      rgba(255,42,74,0.12);
  --blue:         #00c8ff;
  --blue-dim:     rgba(0,200,255,0.10);
  --green:        #39d875;
  --green-dim:    rgba(57,216,117,0.10);

  /* Text */
  --txt:          #edf0fa;
  --txt-muted:    #8896ae;
  --txt-dim:      #4e5a6c;

  /* Borders */
  --border:       rgba(255,255,255,0.09);
  --border-gold:  rgba(245,200,66,0.28);
  --border-blue:  rgba(0,200,255,0.20);
  --border-red:   rgba(255,42,74,0.22);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #f5c842 0%, #ffe99a 42%, #ff7a3a 100%);
  --grad-heading: linear-gradient(115deg, #fff5d6 0%, #f5c842 38%, #ff6b35 100%);
  --grad-card:    linear-gradient(180deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.018) 100%);

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow:      0 8px 48px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 24px rgba(0,0,0,0.38);
  --glow-gold:   0 0 40px rgba(245,200,66,0.18);
  --glow-blue:   0 0 40px rgba(0,200,255,0.14);
  --glow-red:    0 0 40px rgba(255,42,74,0.14);

  /* Transitions */
  --ease: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BASE ───────────────────────────────────────────────── */
html { color-scheme: dark; }

*,
*::before,
*::after { box-sizing: border-box; }

body {
  color: var(--txt) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(245,200,66,0.13) 0%, transparent 100%),
    radial-gradient(ellipse 55% 38% at 90% 8%, rgba(255,42,74,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 50% 35% at 50% 105%, rgba(0,200,255,0.07) 0%, transparent 100%),
    linear-gradient(180deg, #0d1322 0%, #080c14 45%, #050911 100%) !important;
  overflow-x: hidden;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.027) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, black, transparent) !important;
  opacity: 0.9 !important;
}

body::after {
  display: none !important;
}

::selection {
  background: var(--gold) !important;
  color: #0a0800 !important;
}

a { text-decoration: none; color: inherit; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3,
.hero h1, .hero h2,
.section-head h2 {
  font-family: 'Black Ops One', 'Rajdhani', sans-serif !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;
  color: var(--txt) !important;
}

h1 span,
.hero h1 span,
.grad-text {
  background: var(--grad-heading) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.lede,
.sub,
.hero p,
.card p,
.format p,
.feature p,
.section > p,
.muted {
  color: var(--txt-muted) !important;
  line-height: 1.7 !important;
}

/* ─── NAVIGATION ─────────────────────────────────────────── */
.nav-wrap nav,
nav.main-nav,
nav {
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--r-lg) !important;
  background: rgba(8,12,20,0.90) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.brand img,
.brand-mark img,
.brand-logo img {
  border-radius: 14px !important;
  border: 1px solid rgba(245,200,66,0.38) !important;
  background: rgba(245,200,66,0.07) !important;
  box-shadow: 0 0 24px rgba(245,200,66,0.16) !important;
}

.nav-links a,
.nav-link {
  color: var(--txt-muted) !important;
  transition: color var(--ease), background var(--ease) !important;
  border-radius: var(--r-pill) !important;
}

.nav-links a:hover,
.nav-link:hover {
  color: var(--txt) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn,
.nav-links .cta,
.nav-cta,
.hero-links a,
.actions a,
button {
  border-radius: var(--r-md) !important;
  transition: transform var(--ease), filter var(--ease), box-shadow var(--ease) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.btn:hover,
.actions a:hover,
.hero-links a:hover,
button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.07) !important;
}

.nav-links .cta,
.nav-cta,
.btn.primary,
.primary,
.btn-primary,
button.primary {
  color: #0a0700 !important;
  background: var(--grad-primary) !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(245,200,66,0.28) !important;
  font-weight: 800 !important;
}

.nav-links .cta:hover,
.btn.primary:hover,
.primary:hover,
.btn-primary:hover {
  box-shadow: 0 12px 36px rgba(245,200,66,0.38) !important;
}

.btn.secondary,
.secondary,
.btn-secondary {
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.05) !important;
}

.btn.secondary:hover,
.secondary:hover {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.09) !important;
}

/* ─── KICKER / EYEBROW BADGES ────────────────────────────── */
.kicker,
.eyebrow,
.price-label,
.section-title {
  border-radius: var(--r-pill) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ─── CARDS / PANELS ─────────────────────────────────────── */
.card,
.feature-card,
.objection-card,
.flow-card,
.step,
.command,
.rule-band,
.quick-item,
.faq-item,
.signal,
.format,
.roadmap-item,
.page-card,
.home-blog-card,
.proof-card {
  border-radius: var(--r-md) !important;
  border-color: var(--border) !important;
  background: var(--grad-card) !important;
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.055) !important;
  transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease) !important;
}

.card:hover,
.feature-card:hover,
.flow-card:hover,
.faq-item:hover,
.step:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245,200,66,0.22) !important;
  box-shadow: var(--shadow-card), 0 8px 32px rgba(245,200,66,0.10) !important;
}

/* Alternating card accent borders */
.grid .card:nth-child(2n),
.feature-grid .feature-card:nth-child(2n),
.command-grid .command:nth-child(2n),
.formats .format:nth-child(2n) {
  border-color: var(--border-red) !important;
}

.grid .card:nth-child(3n),
.feature-grid .feature-card:nth-child(3n),
.command-grid .command:nth-child(3n),
.formats .format:nth-child(3n) {
  border-color: var(--border-blue) !important;
}

/* Demo / video shell */
.demo-shell,
.battle-clip-frame {
  border-radius: var(--r-lg) !important;
  border-color: rgba(0,200,255,0.22) !important;
  box-shadow: var(--shadow), var(--glow-blue) !important;
}

/* Hero card */
.hero-card,
.form-card,
.pricing-card {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow) !important;
}

/* ─── PROOF CHIPS ─────────────────────────────────────────── */
.proof-list span,
.proof {
  border-radius: var(--r-pill) !important;
  background: var(--gold-dim) !important;
  border-color: rgba(245,200,66,0.22) !important;
  color: var(--txt) !important;
  font-size: 13px !important;
}

/* ─── FORM INPUTS ─────────────────────────────────────────── */
input,
select,
textarea {
  color: var(--txt) !important;
  border-color: var(--border) !important;
  background: rgba(0,0,0,0.28) !important;
  border-radius: var(--r-md) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(245,200,66,0.5) !important;
  box-shadow: 0 0 0 3px rgba(245,200,66,0.09) !important;
  outline: none !important;
}

/* ─── CTA BAND ───────────────────────────────────────────── */
.cta-band {
  border-radius: var(--r-lg) !important;
  border-color: var(--border-gold) !important;
  background:
    linear-gradient(120deg, rgba(245,200,66,0.08) 0%, rgba(0,200,255,0.06) 50%, rgba(245,200,66,0.05) 100%) !important;
}

/* ─── SECTION BORDERS ─────────────────────────────────────── */
.section {
  border-top-color: var(--border) !important;
}

/* ─── FOOTER ──────────────────────────────────────────────── */
footer {
  color: var(--txt-dim) !important;
  border-top-color: var(--border) !important;
}

footer a {
  color: var(--txt-muted) !important;
  transition: color var(--ease) !important;
}

footer a:hover {
  color: var(--gold) !important;
}

/* ─── RULE BAND LEFT BORDERS ──────────────────────────────── */
.rule-band {
  border-left-width: 3px !important;
  border-left-style: solid !important;
}

/* ─── TERMINAL / CODE ─────────────────────────────────────── */
.terminal {
  border-color: rgba(0,200,255,0.22) !important;
  border-radius: var(--r-md) !important;
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-wrap nav,
  nav.main-nav,
  nav {
    border-radius: var(--r-md) !important;
  }

  h1, .hero h1 {
    font-size: clamp(36px, 11vw, 64px) !important;
  }

  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .section-head p {
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .proof-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .proof-list span,
  .proof {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* ─── UTILITY CLASSES ─────────────────────────────────────── */
.text-gold  { color: var(--gold) !important; }
.text-blue  { color: var(--blue) !important; }
.text-red   { color: var(--red)  !important; }
.text-muted { color: var(--txt-muted) !important; }

.border-gold { border-color: var(--border-gold) !important; }
.border-blue { border-color: var(--border-blue) !important; }
.border-red  { border-color: var(--border-red)  !important; }

.glow-gold { box-shadow: var(--glow-gold) !important; }
.glow-blue { box-shadow: var(--glow-blue) !important; }

/* Pulse animation for live indicators */
@keyframes itb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.15); }
}
.pulse { animation: itb-pulse 2.2s ease-in-out infinite; }

/* Fade-in-up for page load */
@keyframes itb-fadein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fadein { animation: itb-fadein 0.55s ease both; }