/* ===============================
   HERO BASE (CLEAN)
================================ */

.arsenal-hero {
  position: relative;
  overflow: hidden;
  text-align: center;

  margin: 0;
  padding: 50px 20px 50px;

  width: 100%;
}

/* ===============================
   WAVE IMAGE (HERO ONLY)
================================ */

.arsenal-hero::before {
  content: "";
  position: absolute;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  height: 280px;

  background: url("/images/beats-wav-bg.png") center/contain no-repeat;

  opacity: 0.1;
  filter: blur(1px);

  /* smooth side fade */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );

  pointer-events: none;
  z-index: 1;
}

/* ===============================
   🔴 WIDE GLOW (FIXED, NO BOX)
================================ */

.arsenal-hero::after {
  content: "";
  position: absolute;

  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  width: 700%;   /* KEEP wide cinematic glow */
  height: 300px;

  background: radial-gradient(
    ellipse at center,
    rgba(103, 0, 24, 0.35),
    transparent 70%
  );

  /* 🔥 THIS removes the box edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );

  pointer-events: none;
  z-index: 1;
}

/* ===============================
   CONTENT ABOVE BG
================================ */

.arsenal-hero * {
  position: relative;
  z-index: 2;
}

/* ===============================
   TITLE
================================ */

.arsenal-hero h1 {
  font-size: 38px;
  margin-bottom: 10px;
}

/* ===============================
   SUBTEXT
================================ */

.arsenal-hero p {
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ===============================
   MOBILE
================================ */

@media (max-width: 768px) {
  .arsenal-hero {
    padding: 60px 15px 40px;
  }

  .arsenal-hero h1 {
    font-size: 26px;
  }

  .arsenal-hero p {
    font-size: 14px;
  }

  .arsenal-hero::before {
    height: 200px;
  }

  .arsenal-hero::after {
    height: 180px;
  }
}