/* ==========================================================================
   Pulse Range product page.
   The game's own look: flat neon on a deep indigo backdrop, thick black
   outlines and hard offset shadows - the same "outlined slab" trick the game
   uses to ink its tiles. Structurally it is the sibling of the Hardstuck page
   (kicker chips, feature rows, hard cards) so the two read as one studio.
   ========================================================================== */

:root {
  --void:    #0a0616;
  --indigo:  #150c2b;
  --indigo2: #1d1140;
  --outline: #05010e;

  --neon-mint:   #45f0d0;
  --neon-pink:   #ff2f8e;
  --neon-yellow: #ffd83d;
  --neon-lime:   #a8ff4d;
  --neon-blue:   #5ac8ff;

  --page-bg:     var(--void);
  --page-fg:     #f6f2ff;
  --page-mute:   #b3a9cc;
  --page-rule:   #2c1d52;
  --page-accent: var(--neon-mint);
}

body {
  background:
    radial-gradient(90% 60% at 12% -6%, rgba(255, 47, 142, 0.18), transparent 60%),
    radial-gradient(80% 55% at 92% 4%, rgba(69, 240, 208, 0.14), transparent 62%),
    var(--void);
  background-attachment: fixed;
}

.topbar { background: color-mix(in srgb, var(--void) 88%, transparent); }
.topbar__brand span { color: var(--page-fg); }
.nav a[aria-current="page"]::after { background: var(--neon-mint); }

/* Halftone dots, the comic-print texture. Decorative only. */
.halftone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
  background-size: 7px 7px;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--neon-mint);
  color: var(--outline);
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--outline);
  padding: 14px 28px;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--outline); }
.btn--ghost {
  background: transparent; color: var(--page-fg);
  border-color: var(--page-fg);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.55);
}
.btn--ghost:hover { background: var(--page-fg); color: var(--outline); }
.btn--pink { background: var(--neon-pink); color: #fff; }

/* ---------------------------------------------------------------- badge -- */
.badge {
  display: inline-block;
  padding: 7px 16px;
  background: var(--neon-yellow);
  color: var(--outline);
  border: 3px solid var(--outline);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--outline);
  transform: rotate(-2deg);
}
.badge--mint { background: var(--neon-mint); }
.badge--pink { background: var(--neon-pink); color: #fff; }
.badge--blue { background: var(--neon-blue); }

/* ----------------------------------------------------------------- hero -- */
.phero {
  position: relative; overflow: hidden;
  padding-block: clamp(48px, 7vw, 96px) clamp(44px, 7vw, 88px);
  border-bottom: 3px solid var(--outline);
}
.phero > .wrap { position: relative; z-index: 2; }
.phero__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 940px) { .phero__grid { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); } }

.phero h1 {
  margin-top: 20px;
  font-size: clamp(2.6rem, 1.2rem + 6vw, 5.4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 0.92;
  color: #fff;
  /* stacked comic ink: a hard black offset plus a neon fringe */
  text-shadow:
    3px 0 0 var(--neon-pink),
    -3px 0 0 var(--neon-mint),
    6px 7px 0 var(--outline);
}
.phero__strap {
  margin-top: 20px;
  font-size: var(--step-1); font-weight: 800;
  color: var(--neon-mint);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.phero__body { margin-top: 16px; color: var(--page-mute); max-width: 48ch; font-size: 1.05rem; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.phero__note { margin-top: 18px; font-size: var(--step--1); color: #7d6fa3; }

/* A framed screenshot with the game's own outline treatment. */
.arcade-frame {
  position: relative; width: 100%; padding: 0; text-align: left;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--outline);
  border: 4px solid var(--outline);
  border-radius: 10px;
  box-shadow: 10px 12px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.07);
  overflow: hidden; cursor: zoom-in;
  transition: transform 0.22s var(--ease);
}
.arcade-frame:hover { transform: translate(-2px, -3px); }
.arcade-frame img { width: 100%; border-radius: 6px; }
.arcade-frame .shot__cap {
  display: block; padding: 11px 16px; text-align: left;
  font-size: var(--step--1); color: var(--page-mute);
  background: var(--outline); border: 0;
}

/* ---------------------------------------------------------------- cards -- */
.pcard {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  background: var(--indigo);
  border: 3px solid var(--outline);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--outline);
}
.pcard h3 { color: #fff; margin-bottom: 10px; }
.pcard p { color: var(--page-mute); font-size: 0.97rem; }
.pcard__num {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 16px;
  font-weight: 900; font-size: 1.05rem;
  color: var(--outline);
  background: var(--neon-mint);
  border: 3px solid var(--outline);
  border-radius: 12px;
}
.pcard:nth-child(2) .pcard__num { background: var(--neon-pink); color: #fff; }
.pcard:nth-child(3) .pcard__num { background: var(--neon-yellow); }
.pcard:nth-child(4) .pcard__num { background: var(--neon-blue); }

.cardgrid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 700px) { .cardgrid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .cardgrid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------- feature rows -- */
.feature { display: grid; gap: clamp(28px, 4vw, 58px); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .feature--flip > figure { order: -1; }
}
.feature + .feature { margin-top: clamp(56px, 8vw, 100px); }
.feature h3 {
  font-size: var(--step-2); margin: 16px 0 14px; color: #fff;
  text-transform: uppercase; letter-spacing: -0.02em;
}
.feature p { color: var(--page-mute); }
.feature ul { margin-top: 18px; display: grid; gap: 11px; }
.feature li { position: relative; padding-left: 28px; color: var(--page-mute); font-size: 0.97rem; }
.feature li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 13px; height: 13px; border-radius: 4px;
  background: var(--neon-mint); border: 2px solid var(--outline);
}
.feature--flip li::before { background: var(--neon-pink); }

/* ----------------------------------------------------------------- band -- */
.band {
  position: relative;
  background: var(--indigo);
  border-block: 3px solid var(--outline);
}

/* ------------------------------------------------------------- speedbar -- */
.speeds {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.speeds li {
  padding: 8px 16px;
  border: 3px solid var(--outline);
  border-radius: 999px;
  background: var(--indigo2);
  color: var(--page-fg);
  font-size: 0.78rem; font-weight: 850;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.speeds li:nth-child(1) { background: #2a6d5e; }
.speeds li:nth-child(2) { background: #2f7f4b; }
.speeds li:nth-child(3) { background: #6b7a24; }
.speeds li:nth-child(4) { background: #9a6a1c; }
.speeds li:nth-child(5) { background: #a8422f; }
.speeds li:nth-child(6) { background: var(--neon-pink); color: #fff; }

/* -------------------------------------------------------------- gallery -- */
.shot { border: 3px solid var(--outline); border-radius: 12px; background: var(--outline); }
.shot:hover { border-color: var(--neon-mint); }
.shot .shot__cap {
  background: var(--indigo); border-top: 3px solid var(--outline);
  color: var(--page-mute);
}

/* ------------------------------------------------------------------ cta -- */
.endcta {
  position: relative; overflow: hidden; text-align: center;
  border-top: 3px solid var(--outline);
}
.endcta h2 {
  max-width: 20ch; margin-inline: auto; color: #fff;
  text-transform: uppercase; letter-spacing: -0.02em;
  text-shadow: 4px 5px 0 var(--outline);
}
.endcta p { max-width: 52ch; margin: 20px auto 0; color: var(--page-mute); }
.endcta .phero__cta { justify-content: center; }

.foot { background: var(--void); border-top: 3px solid var(--outline); }
.foot a:hover { color: var(--neon-mint); }