@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* =========================================================
   STEALTH THEME VARIABLES
   ========================================================= */

:root {
  --stealth-red: #c1121f;
  --stealth-red-bright: #ef233c;
  --stealth-red-hover: #d7192b;
  --stealth-red-dark: #580008;

  --stealth-bg: #090002;
  --stealth-bg-soft: #120003;
  --stealth-surface: rgba(18, 0, 3, 0.72);
  --stealth-line: rgba(255, 46, 70, 0.18);

  --cl-accent: #c1121f !important;
  --cl-accent-rgb: 193, 18, 31 !important;

  --bs-primary: #c1121f !important;
  --bs-primary-rgb: 193, 18, 31 !important;

  --bs-link-color: #ef233c !important;
  --bs-link-hover-color: #ff5267 !important;
}

/* =========================================================
   GLOBAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background:
    radial-gradient(
      circle at 14% 22%,
      rgba(193, 18, 31, 0.12),
      transparent 28rem
    ),
    radial-gradient(
      circle at 88% 58%,
      rgba(239, 35, 60, 0.08),
      transparent 32rem
    ),
    var(--cl-background-primary);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
  -webkit-mask-image:
    radial-gradient(circle at center, #000 15%, transparent 82%);
  mask-image:
    radial-gradient(circle at center, #000 15%, transparent 82%);
}

/* Keep borders dark without breaking button borders */
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.input-group,
.navbar,
footer,
section {
  border-color: rgba(0, 0, 0, 0.85) !important;
}

/* =========================================================
   SECTION TITLES
   ========================================================= */

.section-title,
.section-title h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center !important;
  margin: 0 auto;
  padding-bottom: 0.15em;

  background:
    linear-gradient(
      135deg,
      rgba(255, 28, 28, 0.92) 0%,
      rgba(180, 0, 0, 0.72) 48%,
      rgba(70, 0, 0, 0.38) 100%
    );

  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: stealth-title-flow 5s ease infinite;
  filter: drop-shadow(0 8px 26px rgba(193, 18, 31, 0.15));
}

.section-subtitle,
.section-subtitle p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.75;
  color: #94a3b8;
  text-align: center !important;
  margin: 0 auto 1.25rem;
  max-width: 44rem;
}

@keyframes stealth-title-flow {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* =========================================================
   LINKS
   ========================================================= */

a:not(.btn) {
  color: inherit;
}

.link-primary,
.text-primary {
  color: var(--stealth-red-bright) !important;
}

/* =========================================================
   PRIMARY COLORS
   ========================================================= */

.bg-primary,
.badge.bg-primary,
.progress-bar,
.dropdown-item.active,
.nav-pills .nav-link.active,
.page-item.active .page-link {
  background:
    linear-gradient(
      135deg,
      var(--stealth-red-bright),
      var(--stealth-red)
    ) !important;

  color: #ffffff !important;
  border-color: rgba(255, 91, 109, 0.38) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
button[type="submit"] {
  position: relative;
  overflow: hidden;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--stealth-red-bright),
      var(--stealth-red)
    ) !important;

  border: 1px solid rgba(255, 91, 109, 0.38) !important;
  border-radius: 0.7rem;

  box-shadow:
    0 10px 34px rgba(193, 18, 31, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.16) !important;

  transition:
    transform 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.btn-primary::after,
.btn.btn-primary::after,
a.btn-primary::after,
button.btn-primary::after,
button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 42%;
  pointer-events: none;

  transform: skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.24),
      transparent
    );

  transition: left 0.65s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
button[type="submit"]:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  filter: brightness(1.08);

  border-color: rgba(255, 112, 128, 0.6) !important;

  box-shadow:
    0 16px 42px rgba(239, 35, 60, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.18) !important;
}

.btn-primary:hover::after,
.btn.btn-primary:hover::after,
a.btn-primary:hover::after,
button.btn-primary:hover::after,
button[type="submit"]:hover::after {
  left: 125%;
}

.btn-primary:focus,
.btn-primary:active,
button[type="submit"]:focus,
button[type="submit"]:active {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--stealth-red-bright),
      var(--stealth-red)
    ) !important;

  border-color: rgba(255, 112, 128, 0.65) !important;

  box-shadow:
    0 0 0 0.2rem rgba(193, 18, 31, 0.2),
    0 12px 34px rgba(193, 18, 31, 0.3) !important;
}

/* Force checkout buttons away from white */
.checkout-button,
.payment-button,
.checkout-submit,
.checkout button[type="submit"],
form button[type="submit"] {
  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      var(--stealth-red-bright),
      var(--stealth-red)
    ) !important;

  border: 1px solid rgba(255, 91, 109, 0.38) !important;
}

.checkout-button:hover,
.payment-button:hover,
.checkout-submit:hover,
.checkout button[type="submit"]:hover,
form button[type="submit"]:hover {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #ff334d,
      var(--stealth-red-hover)
    ) !important;
}

/* =========================================================
   PREMIUM FLOATING NAVBAR
   ========================================================= */

header.sticky-top {
  z-index: 1050;
}

header.sticky-top nav,
header.sticky-top .navbar {
  background:
    linear-gradient(
      180deg,
      rgba(55, 0, 7, 0.92),
      rgba(30, 0, 4, 0.82)
    ) !important;

  border: 1px solid rgba(255, 44, 67, 0.13) !important;

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

/* =========================================================
   HERO CINEMATIC PARALLAX
   ========================================================= */

.p3wr8 {
  isolation: isolate;
  --hero-x: 0px;
  --hero-y: 0px;
}

.p3wr8 .t2nq6 {
  transform:
    translate3d(var(--hero-x), var(--hero-y), 0)
    scale(1.065);

  transition: transform 0.18s ease-out;
  will-change: transform;
}

.p3wr8::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 32%,
      transparent 10%,
      rgba(20, 0, 3, 0.18) 58%,
      rgba(7, 0, 1, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08),
      transparent 46%,
      rgba(45, 0, 7, 0.38)
    );
}

.p3wr8 .v9fb1,
.p3wr8 .n7kx2 {
  display: block !important;
  position: absolute;
  width: 34rem;
  height: 34rem;
  z-index: 1;
  pointer-events: none;

  border-radius: 50%;
  opacity: 0.17;
  filter: blur(85px);
  background: var(--stealth-red-bright);

  animation:
    stealth-orbit 10s ease-in-out infinite alternate;
}

.p3wr8 .v9fb1 {
  left: -14rem;
  top: 10%;
}

.p3wr8 .n7kx2 {
  right: -16rem;
  bottom: -12%;
  animation-delay: -4s;
}

@keyframes stealth-orbit {
  to {
    transform: translate3d(70px, -32px, 0) scale(1.18);
    opacity: 0.25;
  }
}

/* =========================================================
   REACTIVE GLASS CARDS
   ========================================================= */

.card,
.feature,
.a1x9k,
.f7j1n {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(42, 0, 6, 0.78),
      rgba(13, 0, 2, 0.88)
    ) !important;

  border: 1px solid var(--stealth-line) !important;

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.2),
    inset 0 1px rgba(255, 255, 255, 0.025);

  transition:
    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.32s ease,
    box-shadow 0.32s ease;

  transform-style: preserve-3d;
}

.card::before,
.feature::before,
.f7j1n::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(
      380px circle
      at var(--spot-x, 50%) var(--spot-y, 50%),
      rgba(239, 35, 60, 0.18),
      transparent 42%
    );

  transition: opacity 0.25s ease;
}

.card:hover::before,
.feature:hover::before,
.f7j1n:hover::before {
  opacity: 1;
}

.card:hover,
.feature:hover,
.f7j1n:hover {
  transform: translateY(-6px);

  border-color: rgba(255, 65, 87, 0.46) !important;

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.34),
    0 0 40px rgba(193, 18, 31, 0.1);
}

.card > *,
.feature > *,
.f7j1n > * {
  position: relative;
  z-index: 1;
}

.card img,
.card-img-top,
.f7j1n img {
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.card:hover img,
.card:hover .card-img-top,
.f7j1n:hover img {
  transform: scale(1.055);
  filter: contrast(1.05) saturate(1.08);
}

/* =========================================================
   SECTION REVEALS
   ========================================================= */

.stealth-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);

  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stealth-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   MOUSE GLOW
   ========================================================= */

#stealth-cursor-glow {
  position: fixed;
  width: 320px;
  height: 320px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.08;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      var(--stealth-red-bright) 0%,
      rgba(193, 18, 31, 0.28) 28%,
      transparent 68%
    );

  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer,
footer .component {
  background:
    linear-gradient(
      180deg,
      rgba(35, 0, 5, 0.35),
      rgba(18, 0, 3, 0.88)
    ) !important;

  border-top:
    1px solid rgba(255, 40, 62, 0.12) !important;
}

/* =========================================================
   MOBILE AND REDUCED MOTION
   ========================================================= */

@media (max-width: 767px) {
  .section-title,
  .section-title h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
  }

  #stealth-cursor-glow {
    display: none;
  }

  .p3wr8 .t2nq6 {
    transform: scale(1.03);
  }

  .card:hover,
  .feature:hover,
  .f7j1n:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #stealth-cursor-glow {
    display: none;
  }

  .p3wr8 .v9fb1,
  .p3wr8 .n7kx2 {
    animation: none;
  }

  .stealth-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Force Sellauth checkout button to red, including disabled state */
button[type="submit"],
button[type="submit"]:disabled,
button[type="submit"][disabled],
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled,
.checkout-button,
.checkout-button:disabled,
.payment-button,
.payment-button:disabled,
form button:last-of-type {
  background: linear-gradient(135deg, #ef233c, #c1121f) !important;
  background-color: #c1121f !important;
  color: #ffffff !important;
  border: 1px solid #ef233c !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(193, 18, 31, 0.28) !important;
}

/* Keep the disabled button visibly red */
button[type="submit"]:disabled,
button[type="submit"][disabled],
.btn-primary:disabled,
.btn-primary.disabled {
  cursor: not-allowed !important;
  filter: brightness(0.72) !important;
}

/* Enabled hover */
button[type="submit"]:not(:disabled):hover,
.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #ff334d, #d7192b) !important;
  color: #ffffff !important;
  filter: brightness(1.08) !important;
}

/* =========================================================
   PRODUCT COLOR FIX — gray by default, red only when selected
   ========================================================= */
.b3kp8 {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
.b3kp8:hover:not(:disabled):not(.w7tz2) {
  background: rgba(255, 255, 255, 0.065) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.b3kp8.w7tz2 {
  background: linear-gradient(135deg, #ef233c, #c1121f) !important;
  border-color: rgba(255, 91, 109, 0.72) !important;
  box-shadow: 0 10px 26px rgba(193, 18, 31, 0.22) !important;
}
.b3kp8 .p4xs6 {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.b3kp8.w7tz2 .p4xs6 {
  background: rgba(75, 0, 8, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #fff !important;
}
.v3k7p:hover,
.v3k7p:focus-visible {
  border-color: rgba(239, 35, 60, 0.42) !important;
}
.v3k7p:focus-visible {
  outline-color: rgba(239, 35, 60, 0.58) !important;
}
.b6t9r .e1w6q {
  background: rgba(193, 18, 31, 0.18) !important;
  border: 1px solid rgba(239, 35, 60, 0.22) !important;
}


/* =========================================================
   PRODUCT VARIANT STATE — exactly one red selection
   ========================================================= */
.q1jv5 .b3kp8 {
  background: #171216 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.q1jv5 .b3kp8:not(.w7tz2):hover:not(:disabled) {
  background: #21191e !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

.q1jv5 .b3kp8.w7tz2 {
  background: linear-gradient(135deg, #ef233c, #c1121f) !important;
  border-color: rgba(255, 91, 109, 0.72) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(193, 18, 31, 0.22) !important;
}

.q1jv5 .b3kp8:not(.w7tz2) .p4xs6 {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.q1jv5 .b3kp8.w7tz2 .p4xs6 {
  background: rgba(75, 0, 8, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
}