:root {
  --black: #0a0a0f;
  --magenta: #ff1493;
  --blue: #00e5ff;
  --yellow: #ffe600;
  --white: #f5f5f7;
  --muted: rgba(245,245,247,.68);
  --line: rgba(255,255,255,.14);
  color: var(--white);
  background: var(--black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,20,147,.24), transparent 30%),
    radial-gradient(circle at 90% 4%, rgba(0,229,255,.20), transparent 28%),
    linear-gradient(180deg, #050509, #0a0a0f 42%, #080812);
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(255,20,147,.28);
  border-radius: 8px;
  background: rgba(10,10,15,.78);
  backdrop-filter: blur(18px);
}
header img, footer img { width: 58px; filter: drop-shadow(0 0 18px rgba(255,20,147,.6)); }
header a:first-child, footer { display: flex; align-items: center; gap: 12px; font-weight: 900; text-transform: uppercase; }
nav { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
nav a:hover { color: var(--yellow); text-shadow: 0 0 16px rgba(255,230,0,.55); }

.hero {
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1fr);
  gap: 28px;
  align-items: center;
  padding: 48px clamp(20px, 5vw, 72px);
}
.hero p, .section-head p {
  color: var(--yellow);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
h1 { max-width: 940px; font-size: clamp(3.8rem, 11vw, 10rem); line-height: .82; }
h2 { font-size: clamp(2.4rem, 7vw, 6.6rem); line-height: .88; }
.hero span { display: block; max-width: 720px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.4rem); line-height: 1.5; }
.actions, .section-head { margin-top: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.btn.primary { border-color: rgba(255,20,147,.72); background: rgba(255,20,147,.18); box-shadow: 0 0 34px rgba(255,20,147,.28); }
.btn.secondary { border-color: rgba(0,229,255,.42); color: var(--blue); }
.wide { grid-column: 1 / -1; width: 100%; }

.section { padding: 56px clamp(20px, 5vw, 72px); }
.section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 24px; }
.section-head p { max-width: 520px; color: var(--muted); line-height: 1.5; }
.fleet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.car-card {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow: 0 0 34px rgba(0,229,255,.12);
}
.car-card:hover { box-shadow: 0 0 52px rgba(255,20,147,.28); }
.car-card h3 { margin-top: 18px; font-size: clamp(1.6rem, 4vw, 3rem); }
.car-card p, .car-card small { color: var(--muted); line-height: 1.5; }
.car-card span { display: block; color: var(--yellow); font-family: ui-monospace, monospace; font-size: 1.2rem; margin: 10px 0; }

.vehicle-stage {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(0,229,255,.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 58%, rgba(0,229,255,.28), transparent 30%),
    radial-gradient(circle at 20% 10%, rgba(255,20,147,.22), transparent 28%),
    #071018;
  perspective: 900px;
}
.vehicle-stage[data-accent="magenta"] { border-color: rgba(255,20,147,.34); }
.road { position: absolute; left: 10%; right: 10%; bottom: 12%; height: 18%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255,230,0,.55), transparent); filter: blur(13px); }
.vehicle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  height: 36%;
  transform: translate(-50%, -48%) rotateY(-10deg);
  transform-style: preserve-3d;
  animation: carSpin 4.6s ease-in-out infinite;
  filter: drop-shadow(0 0 22px rgba(0,229,255,.55));
}
.car-card:hover .vehicle, .hero .vehicle { animation-duration: 2.8s; }
.body, .hood, .cabin, .pushbar, .rollbar, .spoiler, .wheel, .tire { position: absolute; display: block; }
.body { left: 11%; right: 8%; bottom: 26%; height: 34%; border-radius: 22px 28px 12px 12px; background: linear-gradient(135deg, #16bfff, #095d94); border: 2px solid rgba(255,255,255,.5); }
.hood { right: 8%; bottom: 42%; width: 24%; height: 18%; border-radius: 24px 12px 0 0; background: #56dcff; }
.cabin { left: 34%; bottom: 58%; width: 28%; height: 30%; border-radius: 18px 18px 4px 4px; background: linear-gradient(135deg, rgba(196,244,255,.92), rgba(41,149,196,.9)); border: 2px solid rgba(255,255,255,.55); }
.pushbar { right: 3%; bottom: 30%; width: 5%; height: 42%; border: 3px solid #111; border-left: 0; border-radius: 0 18px 18px 0; }
.rollbar { left: 28%; bottom: 52%; width: 42%; height: 42%; border: 4px solid rgba(10,10,15,.78); border-bottom: 0; border-radius: 24px 24px 0 0; }
.spoiler { left: 16%; bottom: 60%; width: 22%; height: 5px; background: #073a66; border-radius: 999px; }
.wheel { bottom: 14%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111 32%, #2c2c36 33% 56%, #050506 57%); border: 5px solid #020204; }
.wheel-a { left: 18%; }
.wheel-b { right: 14%; }
.tire { bottom: 8%; width: 24%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(8px); }
.tire-a { left: 16%; }
.tire-b { right: 12%; }
.is-sonic .vehicle { width: 62%; height: 30%; }
.is-sonic .body { border-radius: 42px 48px 16px 16px; }
.is-sonic .cabin { left: 38%; width: 24%; height: 24%; }

.calendar {
  border: 1px solid rgba(0,229,255,.24);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255,255,255,.04);
}
.calendar > strong { display: block; margin-bottom: 12px; color: var(--yellow); font-family: ui-monospace, monospace; text-transform: uppercase; }
.calendar > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendar em, .calendar article { min-height: 84px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px; background: rgba(0,0,0,.2); }
.calendar em { min-height: auto; color: var(--muted); font-style: normal; text-align: center; }
.calendar b { display: block; font-family: ui-monospace, monospace; }
.calendar span { display: block; margin-top: 6px; padding: 5px 6px; border-radius: 999px; background: rgba(0,229,255,.13); color: var(--blue); font-size: .68rem; }
.calendar span.local { background: rgba(255,230,0,.14); color: var(--yellow); }
.calendar article.booked { border-color: rgba(255,20,147,.38); box-shadow: inset 0 0 18px rgba(255,20,147,.08); }

form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border: 1px solid rgba(255,20,147,.28);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255,255,255,.045);
}
label { display: grid; gap: 8px; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
input, select {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(0,0,0,.35);
  color: var(--white);
}
.addon { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.12); padding: 14px; border-radius: 8px; }
.addon input { width: 22px; min-height: 22px; }
.insurance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.insurance label { padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: rgba(0,0,0,.2); }
.insurance input { width: 18px; min-height: 18px; }
.insurance strong { color: var(--white); }
.insurance p { margin: 0; color: var(--muted); line-height: 1.45; }
.summary { border: 1px solid rgba(255,230,0,.36); border-radius: 8px; padding: 16px; background: rgba(255,230,0,.06); }
.summary b { color: var(--yellow); }
.hidden { display: none; }
footer { justify-content: space-between; margin: 40px clamp(20px, 5vw, 72px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }

@keyframes carSpin {
  0%, 100% { transform: translate(-50%, -48%) rotateY(-12deg) rotateX(2deg); }
  50% { transform: translate(-50%, -52%) rotateY(14deg) rotateX(-1deg); }
}

@media (max-width: 820px) {
  header { align-items: flex-start; }
  nav { justify-content: flex-end; }
  .hero, .fleet, form { grid-template-columns: 1fr; }
  .hero { padding-top: 26px; }
  .section-head { display: block; }
  .insurance { grid-template-columns: 1fr; }
  .calendar > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar em { display: none; }
}