/* UPSIDE ACTIVATION THEME – Bootstrap-safe version */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;800&display=swap');

:root {
  --up-red: #B9082C;
  --up-blue: #2AA3FF;
  --up-ink: #0B0F14;
  --up-graphite: #151A20;
  --up-fog: #C9D2DA;
  --up-mist: #7A8A97;
  --up-ember: #FF5A3C;
  --up-teal: #18D0C2;

  --up-grad-crimson: radial-gradient(60% 60% at 50% 80%, rgba(185,8,44,0.45) 0%, rgba(11,15,20,0.0) 70%), linear-gradient(180deg, rgba(11,15,20,0.85) 0%, #0B0F14 100%);
  --up-grad-blue: radial-gradient(50% 50% at 50% 0%, rgba(42,163,255,0.35) 0%, rgba(11,15,20,0.0) 50%);

  --font-head: "Bebas Neue", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

html, body {
  background: var(--up-ink) !important;
  color: var(--up-fog) !important;
  font-family: var(--font-body) !important;
  line-height: 1.45 !important;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--up-grad-blue), var(--up-grad-crimson), var(--up-ink);
  background-blend-mode: screen, normal;
  background-size: cover;
  pointer-events: none;
}

h1, .h1 {
  font-family: var(--font-head) !important;
  font-size: clamp(40px, 7vw, 72px) !important;
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--up-fog);
}
h2, .h2 {
  font-family: var(--font-head) !important;
  font-size: clamp(28px, 4.5vw, 40px);
  color: var(--up-blue);
}
h3, .h3 {
  font-family: var(--font-head) !important;
  font-size: 22px;
  color: var(--up-mist);
}

a {
  color: var(--up-blue) !important;
  text-underline-offset: 2px;
}
a:hover {
  color: #76caff !important;
}

.btn, button {
  font-family: var(--font-body) !important;
  font-weight: 700;
  border-radius: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary, button.btn-primary {
  background: linear-gradient(180deg, #D40A34 0%, var(--up-red) 100%) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
}

.btn-secondary {
  background: linear-gradient(180deg, #42B2FF 0%, var(--up-blue) 100%) !important;
  color: #041119 !important;
  border: none !important;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  color: var(--up-fog) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.text-red   { color: var(--up-red) !important; }
.text-blue  { color: var(--up-blue) !important; }
.text-mist  { color: var(--up-mist) !important; }
.muted      { color: var(--up-mist) !important; }
.small      { font-size: 0.85rem !important; }

:root {
  --bs-body-bg: var(--up-ink);
  --bs-body-color: var(--up-fog);
  --bs-link-color: var(--up-blue);
  --bs-link-hover-color: #76caff;
  --bs-btn-primary-bg: var(--up-red);
  --bs-btn-primary-border-color: var(--up-red);
  --bs-btn-primary-hover-bg: #980724;
}