:root {
  --bg: #050608;
  --panel: #0b1015;
  --panel-2: #111821;
  --text: #f3f7fb;
  --muted: #a8b3be;
  --line: #263440;
  --red: #ff2d2d;
  --red-dim: #721515;
  --blue: #20bfff;
  --blue-dim: #0a4770;
  --radius: 8px;
  font-family: "Rajdhani", "Orbitron", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 82% 14%, rgba(255, 0, 0, 0.18), transparent 28rem),
    radial-gradient(circle at 30% 12%, rgba(0, 191, 255, 0.14), transparent 24rem),
    linear-gradient(180deg, #020305 0%, #07090c 48%, #040507 100%);
  color: var(--text);
}

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

svg {
  fill: none;
  height: 1.25em;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.25em;
}

button,
input,
textarea,
select {
  font: inherit;
}

.siteBanner {
  background: #020305;
  display: block;
  overflow: hidden;
  width: 100%;
}

.siteBanner img {
  display: block;
  height: auto;
  margin-top: -4.2vw;
  width: 100%;
}

header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(3, 5, 8, 0.82);
  border-bottom: 1px solid rgba(255, 45, 45, 0.35);
  display: flex;
  gap: 32px;
  height: 64px;
  justify-content: flex-end;
  left: 0;
  margin-top: -64px;
  padding: 0 clamp(18px, 4vw, 42px);
  position: sticky;
  top: 0;
  z-index: 10;
}

nav {
  display: flex;
  gap: clamp(16px, 3vw, 42px);
  margin-left: auto;
}

nav a,
footer a {
  color: #d9e6ef;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cart {
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
}

.cart svg {
  height: 24px;
  width: 24px;
}

.hero {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(400px, 0.95fr) minmax(420px, 1.05fr);
  min-height: 68vh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 70px) clamp(18px, 4vw, 42px) 34px;
  position: relative;
}

.hero::before,
.sectionTitle::after {
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  content: "";
  height: 1px;
  left: 0;
  opacity: 0.55;
  position: absolute;
  right: 0;
}

.hero::before {
  top: 0;
}

.heroCopy {
  align-self: center;
  max-width: 620px;
  z-index: 1;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(3.2rem, 6.3vw, 6.35rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  margin-bottom: 24px;
  text-transform: uppercase;
}

h1::first-line {
  color: #f4f6f8;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.16);
}

.heroCopy h1 {
  color: var(--red);
  font-size: clamp(1.6rem, 3.15vw, 3.175rem);
  line-height: 0.96;
  text-shadow: 0 0 28px rgba(255, 45, 45, 0.36);
}

.heroCopy p {
  color: #d8e1e8;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  max-width: 540px;
}

.actions,
.proof,
.buyRow,
.sectionTitle {
  align-items: center;
  display: flex;
}

.actions {
  flex-wrap: wrap;
  gap: 18px;
  margin: 34px 0 38px;
}

.button,
.productCard button,
.detailLink {
  align-items: center;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0.06em;
  min-height: 52px;
  padding: 0 24px;
  text-transform: uppercase;
}

.button.primary {
  background: linear-gradient(180deg, rgba(255, 45, 45, 0.24), rgba(92, 8, 8, 0.88));
  border: 1px solid var(--red);
  box-shadow: 0 0 18px rgba(255, 45, 45, 0.28), inset 0 0 18px rgba(255, 45, 45, 0.12);
  color: #fff;
}

.button.secondary {
  background: rgba(8, 20, 28, 0.84);
  border: 1px solid var(--blue);
  color: var(--blue);
}

.proof {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 18px;
}

.proof span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.heroMedia {
  align-self: center;
  border: 1px solid rgba(32, 191, 255, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  justify-self: center;
  min-height: 250px;
  overflow: hidden;
  position: relative;
  width: 50%;
}

.heroMedia img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.scanner {
  animation: scan 3.6s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 45, 45, 0.9), transparent);
  height: 3px;
  left: -15%;
  position: absolute;
  top: 46%;
  width: 130%;
}

.products,
.features,
.quote {
  padding: clamp(34px, 5vw, 72px) clamp(18px, 4vw, 42px);
}

.pedalNotice {
  background:linear-gradient(145deg,#080b10 0%,#0b141b 100%);
  border:1px solid #3d4a56;
  box-shadow:0 30px 100px #000,0 0 45px rgba(239,24,41,.2);
  color:#f6f9fb;
  max-width:590px;
  padding:42px;
  width:calc(100% - 32px);
}
.pedalNotice::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
.pedalNoticeClose { background:transparent; border:0; color:#aab4be; font-size:30px; height:42px; line-height:1; position:absolute; right:12px; top:10px; width:42px; }
.pedalNoticeClose:hover { color:#fff; }
.pedalNoticeLabel { color:#55e69b; display:block; font:700 12px/1 monospace; letter-spacing:.18em; margin-bottom:14px; }
.pedalNotice h2 { color:#fff; font-size:clamp(29px,5vw,46px); line-height:1; margin:0 0 18px; }
.pedalNotice > p { color:#b6c0ca; font-size:17px; line-height:1.55; }
.pedalNoticeTimeline { border-left:2px solid #ef1829; display:grid; gap:5px; margin:26px 0 30px; padding-left:20px; }
.pedalNoticeTimeline strong { color:#24c8ff; font-size:18px; margin-top:7px; }
.pedalNoticeTimeline span { color:#aeb8c2; }
.pedalNoticeActions { display:flex; flex-wrap:wrap; gap:12px; }
.pedalNoticeActions .button { flex:1 1 210px; text-align:center; }

@media (max-width:600px) {
  .pedalNotice { padding:34px 24px 26px; }
}

.products {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
  position: relative;
  z-index: 2;
}

.productCard,
.feature,
.quotePanel {
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.92), rgba(7, 9, 12, 0.94));
  border: 1px solid rgba(160, 185, 202, 0.3);
  border-radius: var(--radius);
}

.productCard {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  padding: 22px;
}

.cardHeading {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 72px;
}

.cardHeading svg {
  color: var(--blue);
}

.productCard h2,
.sectionTitle h2,
.quote h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.productCard .cardHeading p {
  color: #dde7ef;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: uppercase;
}

.productCard > img {
  aspect-ratio: 16 / 10;
  background: #050608;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
  margin: 18px 0;
  object-fit: cover;
  width: 100%;
}

.productCard > img.realProductPhoto {
  object-fit: contain;
  padding: 8px;
}

.productCard > p,
.feature p,
.quoteSteps {
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.52;
}

.stockIndicator {
  color: var(--blue) !important;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 14px 0 0;
  text-transform: uppercase;
}

.stockIndicator.soldOut { color: var(--red) !important; }
.detailStock { margin-top: 14px; }
.button.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.55;
  pointer-events: none;
}

.paymentChoice.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.5;
  pointer-events: none;
}

.formStock {
  align-self: center;
  margin: 0;
}

.buyRow {
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.buyRow strong {
  color: var(--red);
  font-size: 1.5rem;
  white-space: nowrap;
}

.productCard .buyRow {
  align-items: stretch;
  flex-direction: column;
}

.productCard .detailLink {
  width: 100%;
}

.productCard button,
.detailLink {
  background: rgba(30, 3, 3, 0.75);
  border: 1px solid var(--red);
  color: #fff;
  min-height: 44px;
  padding: 0 16px;
}

.sectionTitle {
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
}

.sectionTitle::after {
  left: 300px;
  top: 50%;
}

.featureGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature {
  min-height: 220px;
  padding: 28px;
  text-align: center;
}

.feature svg {
  color: var(--blue);
  filter: drop-shadow(0 0 12px rgba(32, 191, 255, 0.46));
}

.feature h3 {
  letter-spacing: 0.14em;
  margin: 18px 0 10px;
  text-transform: uppercase;
}

.quotePanel {
  display: grid;
  gap: 28px;
  grid-template-columns: 0.75fr 1.25fr;
  padding: clamp(22px, 4vw, 38px);
}

.quoteSteps {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}

.quoteSteps span {
  align-items: center;
  display: flex;
  gap: 12px;
}

.quoteSteps svg {
  color: var(--blue);
  flex: 0 0 auto;
  width: 28px;
}

form {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

input,
select,
textarea {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(168, 179, 190, 0.24);
  border-radius: 4px;
  color: var(--text);
  min-height: 50px;
  padding: 0 15px;
}

select {
  color-scheme: dark;
}

select option {
  background: var(--panel-2);
  color: var(--text);
}

textarea {
  grid-column: 1 / -1;
  min-height: 112px;
  padding-top: 14px;
  resize: vertical;
}

.check,
form .button,
.success,
.paymentNote,
.formSectionTitle,
.fullField {
  grid-column: 1 / -1;
}

.formSectionTitle {
  border-bottom: 1px solid rgba(168, 179, 190, 0.24);
  color: var(--blue);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-top: 6px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.paymentNote {
  align-items: flex-start;
  background: rgba(32, 191, 255, 0.07);
  border: 1px solid rgba(32, 191, 255, 0.28);
  display: flex;
  font-family: "Segoe UI", system-ui, sans-serif;
  gap: 12px;
  padding: 14px;
}

.paymentNote strong { color: var(--blue); white-space: nowrap; }
.paymentNote span { color: var(--muted); line-height: 1.45; }

.purchaseSection {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  padding: clamp(34px, 5vw, 64px) clamp(18px, 4vw, 42px);
}

.purchaseSection h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.purchaseSection p { color: var(--muted); line-height: 1.55; }
.paymentChoices { display: grid; gap: 12px; }
.paymentChoice {
  align-items: center;
  background: rgba(8, 12, 17, 0.86);
  border: 1px solid rgba(160, 185, 202, 0.3);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  min-height: 74px;
  padding: 16px 20px;
}
.paymentChoice strong { font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase; }
.paymentChoice span { color: var(--muted); font-family: "Segoe UI", system-ui, sans-serif; text-align: right; }
.paymentChoice.stripe { border-color: #635bff; }
.paymentChoice.paypal { border-color: #2f80ed; }
.paymentChoice.contact { border-color: var(--red); }
.paymentChoice:hover { background: rgba(24, 35, 46, 0.92); }

.downloadPending {
  align-items: center;
  background: rgba(32, 191, 255, 0.07);
  border: 1px solid rgba(32, 191, 255, 0.34);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 150px;
  padding: 24px;
  text-align: center;
}

.downloadPending strong {
  color: var(--blue);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.downloadPending span {
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
}

.check {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-family: "Segoe UI", system-ui, sans-serif;
  gap: 10px;
}

.check input {
  min-height: auto;
}

form .button {
  justify-self: end;
}

.success {
  color: var(--blue);
  margin: 0;
}

footer {
  align-items: center;
  border-top: 1px solid rgba(160, 185, 202, 0.18);
  color: var(--muted);
  display: flex;
  gap: 28px;
  padding: 28px clamp(18px, 4vw, 42px);
}

footer span {
  margin-right: auto;
}

.detailHero {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(360px, 0.85fr) minmax(420px, 1.15fr);
  min-height: calc(100vh - 78px);
  padding: clamp(42px, 6vw, 92px) clamp(18px, 4vw, 42px);
}

.detailCopy {
  align-self: center;
}

.detailCopy h1 {
  color: var(--red);
  font-size: clamp(3.2rem, 6.2vw, 6.5rem);
  margin-bottom: 18px;
  text-shadow: 0 0 28px rgba(255, 45, 45, 0.34);
}

.detailCopy p,
.detailSection p {
  color: #d8e1e8;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.62;
}

.backLink {
  color: var(--blue);
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 26px;
  text-transform: uppercase;
}

.detailPrice {
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 26px 0 8px;
}

.detailMedia {
  align-self: center;
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.92), rgba(7, 9, 12, 0.94));
  border: 1px solid rgba(32, 191, 255, 0.28);
  border-radius: var(--radius);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  display: grid;
  min-height: 520px;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px);
  place-items: center;
}

.detailMedia img {
  max-height: 620px;
  max-width: 100%;
  object-fit: contain;
}

.consoleMarketingMedia {
  aspect-ratio: 16 / 9;
  min-height: 0;
  padding: 0;
}

.consoleMarketingMedia img {
  height: 100%;
  max-height: none;
  object-fit: cover;
  width: 100%;
}

.pedalMediaPair {
  align-items: center;
  align-self: center;
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 500px));
  justify-content: center;
  width: 100%;
}

.pedalMediaColumn {
  align-self: center;
  width: 100%;
}

.pedalReferences {
  margin-top: 24px;
  scroll-margin-top: 80px;
}

.pedalReferences h2 {
  font-size: 1.35rem;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.pedalHero {
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: minmax(300px, 0.72fr) minmax(520px, 1.5fr);
  min-height: 0;
}

.pedalHero .detailCopy {
  max-width: 520px;
}

.pedalProductMedia {
  aspect-ratio: 4 / 5;
  min-height: 0;
  padding: 14px;
}

.pedalProductMedia img {
  height: 100%;
  width: 100%;
}

.pedalDemoVideo {
  aspect-ratio: 4 / 5;
  width: 100%;
}

.pedalDemoVideo video {
  aspect-ratio: auto;
  height: 100%;
  object-fit: cover;
}

.doorDemoVideo {
  aspect-ratio: 9 / 16;
  justify-self: center;
  max-width: 400px;
}

.doorDemoVideo video {
  object-fit: contain;
  width: 100%;
}

.detailSection {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  padding: clamp(38px, 5vw, 72px) clamp(18px, 4vw, 42px);
}

.detailSection h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.specGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.specGrid article {
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.92), rgba(7, 9, 12, 0.94));
  border: 1px solid rgba(160, 185, 202, 0.3);
  border-radius: var(--radius);
  padding: 24px;
}

.specGrid h3 {
  color: var(--blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.referenceLinks {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.consoleFeatureHeading {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.consoleFeatureHeading p {
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 760px;
}

.consoleFeatureList {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.consoleFeatureList li {
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.92), rgba(7, 9, 12, 0.94));
  border: 1px solid rgba(160, 185, 202, 0.24);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  padding: 20px;
}

.consoleFeatureList strong {
  color: var(--blue);
  font-size: 1rem;
  text-transform: uppercase;
}

.consoleFeatureList span {
  color: #d8e1e8;
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
}

.detailVideo {
  background: linear-gradient(180deg, rgba(17, 24, 33, 0.92), rgba(7, 9, 12, 0.94));
  border: 1px solid rgba(32, 191, 255, 0.28);
  border-radius: var(--radius);
  overflow: hidden;
}

.detailVideo video {
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
  object-fit: contain;
  width: 100%;
}

.characterVideos {
  padding: 54px 28px 0;
}

.characterIntroVideo {
  margin-top: 22px;
}

.detailVideo.shortVideo {
  justify-self: center;
  max-width: 380px;
  width: 100%;
}

.detailVideo iframe {
  aspect-ratio: 9 / 16;
  border: 0;
  display: block;
  width: 100%;
}

@keyframes scan {
  0% { transform: translateY(-120px); opacity: 0; }
  12% { opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateY(150px); opacity: 0; }
}

@media (max-width: 980px) {
  header {
    gap: 14px;
  }

  nav {
    display: none;
  }

  .hero,
  .quotePanel,
  .detailHero,
  .detailSection,
  .purchaseSection {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .heroMedia {
    min-height: 250px;
    width: 70%;
  }

  .products,
  .featureGrid,
  .specGrid {
    grid-template-columns: 1fr 1fr;
  }

  .detailMedia {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  header {
    height: 58px;
    margin-top: -58px;
  }

  h1 {
    font-size: 3.05rem;
  }

  .heroMedia {
    min-height: 220px;
    width: 100%;
  }

  .products,
  .featureGrid,
  .specGrid,
  form {
    grid-template-columns: 1fr;
  }

  .products {
    margin-top: 0;
  }

  .pedalMediaPair {
    grid-template-columns: minmax(0, 500px);
  }

  .consoleFeatureHeading {
    align-items: flex-start;
    flex-direction: column;
  }

  .consoleFeatureList {
    grid-template-columns: 1fr;
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
  }
}