@font-face {
  font-family: 'BeerMoney';
  src: url('../fonts/BeerMoney.ttf') format('truetype');
}
@font-face {
  font-family: 'ALSSector';
  src: url('../fonts/ALSSector.otf') format('opentype');
  font-weight: 700;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue.ttf') format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'HelveticaNeue';
  src: url('../fonts/HelveticaNeue.ttf') format('truetype');
  font-weight: 700;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, a, .rb-dot, .rb-chip { -webkit-tap-highlight-color: transparent; }

:root {
  --black: #000000;
  --dark: #0a0a0a;
  --dark2: #111111;
  --silver: #c8c8c8;
  --silver-dim: #888888;
  --white: #ffffff;
  --accent: #cc3300;
  --red: #cc3300;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'ALSSector', 'HelveticaNeue', Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 20px 48px;
  background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, transparent 100%);
  backdrop-filter: blur(8px);
}
.nav-links-wrap {
  display: flex;
  justify-content: center;
}
.nav-socials {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
.nav-socials a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.nav-socials a:hover { color: #aa2704; }
.nav-socials svg { width: 20px; height: 20px; fill: currentColor; }
.nav-logo {
  font-family: 'BeerMoney', 'ALSSector', sans-serif !important;
  font-size: 28px;
  color: #aa2704 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
}
.nav-logo:hover { color: #aa2704 !important; }
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  color: var(--silver-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: #aa2704; }




/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.progress-bar {
  position: absolute; bottom: 0; left: 0;
  height: 2px; background: #ffffff;
  width: 0%; z-index: 20; transition: width 5000ms linear;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 140px 48px 80px;
  max-width: 760px;
}
.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  font-family: 'HelveticaNeue', sans-serif;
}
.hero h1 {
  font-size: clamp(52px, 8vw, 110px);
  color: var(--white);
  margin-bottom: 8px;
  text-shadow: 0 0 60px rgba(255,255,255,0.15);
}
.hero h1 .chrome {
  color: #aa2704;
}
.hero-sub {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--silver-dim);
  margin-bottom: 12px;
  font-weight: 400;
}
.hero-location {
  font-size: 14px;
  color: var(--silver-dim);
  letter-spacing: 0.1em;
  margin-bottom: 48px;
}
.hero-location span { color: var(--accent); }
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 460px;
}
.btn-primary, .btn-ghost { width: 100%; justify-content: center; position: relative; }

/* running red beam around each Hero button */
.btn-primary::after, .btn-ghost::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--rbBeamAng),
    transparent 0deg, transparent 250deg,
    rgba(204,51,0,0.12) 290deg,
    #cc3300 335deg, #e84a1a 351deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: rbBeamSpin 4s linear infinite;
  filter: drop-shadow(0 0 5px rgba(204,51,0,0.6));
  pointer-events: none;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--black);
  padding: 16px 36px;
  font-family: 'ALSSector', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,255,255,0.3);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 16px 36px;
  font-family: 'ALSSector', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
}



/* SERVICES */
.services {
  padding: 120px 48px;
  background: var(--dark);
}
.section-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-family: 'HelveticaNeue', sans-serif;
}
.services h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 72px;
  max-width: 600px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #1a1a1a;
}
.service-card {
  background: var(--dark);
  padding: 48px 36px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.service-card:hover { background: #0d0d0d; }
.service-card:hover::before { transform: scaleX(1); }
.service-num {
  font-size: 48px;
  color: #1a1a1a;
  font-family: 'ALSSector', sans-serif;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 24px;
}
.service-icon {
  font-size: 28px;
  margin-bottom: 20px;
  display: block;
}
.service-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--white);
}
.service-card p {
  font-size: 14px;
  color: var(--silver-dim);
  line-height: 1.7;
}
.service-tag {
  display: inline-block;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* FLEET */
.fleet { background: var(--black); overflow: hidden; }

/* ── Picker Strip ── */
.fleet-picker {
  background: #070707;
  border-bottom: 1px solid #181818;
  overflow-x: auto;
  scrollbar-width: none;
}
.fleet-picker::-webkit-scrollbar { display: none; }
.fleet-picker-inner { display: flex; align-items: stretch; }

.fleet-pick-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-right: 1px solid #181818;
  border-bottom: 2px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  flex: 1;
  min-width: 130px;
}
.fleet-pick-card:hover { background: #0f0f0f; }
.fleet-pick-card.active { border-bottom-color: #cc3300; background: #0c0c0c; }
.fleet-pick-card img { width: 54px; height: 36px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.fleet-pick-info { display: flex; flex-direction: column; gap: 2px; }
.fleet-pick-name { font-family: 'ALSSector', sans-serif; font-size: 13px; font-weight: 700; color: var(--white); white-space: nowrap; }
.fleet-pick-class { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-dim); white-space: nowrap; }

/* ── Split Hero ── */
.fleet-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 88vh;
  min-height: 640px;
  background: #080808;
}

/* Left: info panel — constant subtle dark, never changes */
.split-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px;
  background: #090909;
  border-right: 1px solid rgba(255,255,255,0.04);
  overflow-y: auto;
}

.split-info .section-label {
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.split-info h3 {
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.93;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.split-info h3 span { color: #cc3300; }

.fleet-hero-subclass {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}

.fleet-hero-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 20px 0 18px;
}

/* Color picker */
.bike-panel-colors {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}
.panel-color-row { display: flex; align-items: center; gap: 14px; }
.panel-color-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); min-width: 68px; flex-shrink: 0;
}
.panel-color-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.color-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s; flex-shrink: 0;
}
.color-swatch:hover, .color-swatch.active { border-color: #fff; transform: scale(1.3); }

/* Variants */
.bike-panel-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.variant-chip {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 13px; border-radius: 20px;
}

/* Badges */
.fleet-hero-badges {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 5px;
  font-size: 11px;
  color: rgba(255,255,255,0.32);
  margin-bottom: 28px;
}

/* Price + CTA row */
.split-price-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.fleet-hero-from-label {
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.fleet-hero-price {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  color: #cc3300;
}
.fleet-hero-price span {
  display: block;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.fleet-hero-book {
  display: inline-flex;
  align-items: center;
  background: #cc3300;
  color: #fff;
  border: none;
  padding: 16px 32px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.fleet-hero-book:hover { background: #e03700; }

/* Right: 360° viewer */
.split-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(60,40,30,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(18,14,12,1) 0%, #060606 100%);
  cursor: grab;
  overflow: hidden;
  user-select: none;
}
.split-viewer:active { cursor: grabbing; }

.viewer-badge {
  position: absolute;
  top: 28px; right: 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 13px;
  border-radius: 20px;
  pointer-events: none;
}

/* Viewer scene — bike floats above pedestal */
.viewer-scene {
  position: relative;
  width: 85%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.viewer-bike {
  width: 100%;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7));
}

/* Circular pedestal platform */
.viewer-pedestal {
  position: relative;
  width: 82%;
  margin-top: -18px;
  z-index: 1;
}

/* Warm glow radiating from below bike */
.pedestal-glow {
  position: absolute;
  width: 90%;
  left: 5%;
  top: -10px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(204,80,20,0.18) 0%, rgba(180,60,10,0.07) 40%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

/* Top surface of the pedestal — circular disc */
.pedestal-surface {
  width: 100%;
  padding-bottom: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(55,50,45,0.95) 0%,
    rgba(30,26,23,0.98) 45%,
    rgba(12,10,9,1) 100%
  );
  box-shadow:
    0 4px 24px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -2px 8px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.055);
  position: relative;
  z-index: 2;
}

/* Concentric rim ellipses below the surface */
.pedestal-rim {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.pedestal-rim-1 { width: 94%; padding-bottom: 20%; top: 6px; background: rgba(20,17,15,0.9); z-index: 1; }
.pedestal-rim-2 { width: 86%; padding-bottom: 18%; top: 12px; background: rgba(15,13,11,0.95); z-index: 0; }
.pedestal-rim-3 { width: 76%; padding-bottom: 16%; top: 17px; background: rgba(10,8,7,0.98); z-index: -1; border-color: rgba(255,255,255,0.02); }

/* Drag hint */
.viewer-hint {
  position: absolute;
  bottom: 24px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   VARIANT LABELS (shared)
══════════════════════════════════════════ */
.fv2-label-row, .fv3-label-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: #0c0c0c;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
.fv2-variant-tag {
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: #cc3300;
  padding: 3px 10px;
  border-radius: 3px;
}
.fv2-variant-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════
   VARIANT 2 — Dark stage, floating bike
══════════════════════════════════════════ */
.fv2-wrap { background: #070707; }

.fv2-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  height: 88vh;
  min-height: 600px;
  overflow: hidden;
  background: #070707;
}

/* Subtle warm glow behind bike area */
.fv2-glow {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 60%;
  background: radial-gradient(ellipse at 60% 55%, rgba(40,30,20,0.5) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Left info panel ── */
.fv2-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 52px;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.fv2-sup {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
}
.fv2-name {
  font-family: 'ALSSector', sans-serif;
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 6px;
}
.fv2-name em { font-style: normal; color: #cc3300; }
.fv2-class {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0;
}
.fv2-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 22px 0;
}
.fv2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}
.fv2-badge {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 13px;
  border-radius: 20px;
}
.fv2-price-block { margin-bottom: 24px; }
.fv2-from {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.fv2-price {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: clamp(30px, 3.2vw, 48px);
  color: #cc3300;
  line-height: 1;
}
.fv2-price span {
  display: block;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.fv2-ctas { display: flex; flex-direction: column; gap: 10px; }
.fv2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #cc3300;
  color: #fff;
  text-decoration: none;
  padding: 15px 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s;
  justify-content: center;
}
.fv2-cta:hover { background: #e03700; }
.fv2-cta-sec {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  padding: 13px 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  text-align: center;
}
.fv2-cta-sec:hover { border-color: rgba(255,255,255,0.25); color: #fff; }

/* ── Right: floating bike, no box ── */
.fv2-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  overflow: hidden;
  user-select: none;
}
.fv2-stage:active { cursor: grabbing; }

/* Bike image blends into dark background */
.fv2-bike {
  width: 90%;
  max-width: 560px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  transform-origin: center center;
  mix-blend-mode: screen;
  filter: brightness(1.05) contrast(1.05);
}

.fv2-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
  white-space: nowrap;
}

/* ══════════════════════════════════════════
   MAIN HERO BANNER (was Variant 3)
══════════════════════════════════════════ */
.fv3-wrap { background: #0a0a0a; }

.fv3-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  height: 88vh;
  min-height: 640px;
}

/* Photo side — full height, full width, no crop */
.fv3-photo-col {
  position: relative;
  overflow: hidden;
  background: #060606;
}
.fv3-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.fv3-photo-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, #0a0a0a 100%);
  pointer-events: none;
}

/* Info side */
.fv3-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 52px 52px 44px;
  background: #0a0a0a;
  border-left: 1px solid #161616;
}

.fv3-category {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #cc3300;
  margin-bottom: 8px;
}
.fv3-name {
  font-family: 'ALSSector', sans-serif;
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.fv3-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
  margin-bottom: 28px;
}

/* Specs */
.fv3-specs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  background: #111;
  border: 1px solid #1c1c1c;
  padding: 18px 0;
}
.fv3-spec {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fv3-spec-val {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: 28px;
  color: #fff;
  line-height: 1;
}
.fv3-spec-key {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.fv3-spec-div {
  width: 1px;
  height: 36px;
  background: #222;
  flex-shrink: 0;
}

.fv3-divider {
  height: 1px;
  background: #171717;
  margin-bottom: 22px;
}

/* Pricing tiers */
.fv3-pricing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.fv3-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #1c1c1c;
  background: #0d0d0d;
}
.fv3-tier-premium {
  border-color: rgba(204,51,0,0.3);
  background: rgba(204,51,0,0.04);
}
.fv3-tier-name {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.fv3-tier-name em {
  font-style: normal;
  color: #cc3300;
}
.fv3-tier-price {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.fv3-tier-price strong {
  font-family: 'BeerMoney', sans-serif;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
}

/* Benefits */
.fv3-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 28px;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
}

/* CTAs */
.fv3-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fv3-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #cc3300;
  color: #fff;
  text-decoration: none;
  padding: 16px 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s;
  justify-content: center;
}
.fv3-cta-primary:hover { background: #e03700; }
.fv3-cta-secondary {
  background: transparent;
  border: 1px solid #252525;
  color: rgba(255,255,255,0.45);
  padding: 14px 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.fv3-cta-secondary:hover { border-color: #444; color: #fff; }

/* ── Booking Panel ── */
.fleet-booking {
  background: #040404;
  border-top: 1px solid #181818;
  padding: 48px 60px 60px;
  scroll-margin-top: 60px;
}
.fleet-booking-inner { max-width: 1200px; }

/* Header */
.booking-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-left: 14px;
  border-left: 2px solid #cc3300;
}
.booking-header-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.booking-header-sep { color: rgba(255,255,255,0.15); }
.booking-header-bike {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* XMAX tier tabs */
.booking-tier { display: flex; gap: 2px; margin-bottom: 20px; }
.tier-btn {
  background: #0d0d0d;
  border: 1px solid #1e1e1e;
  color: #555;
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 22px;
  cursor: pointer;
  transition: all 0.2s;
}
.tier-btn.active { background: #cc3300; border-color: #cc3300; color: #fff; }
.tier-btn:hover:not(.active) { border-color: #333; color: #aaa; }

/* Booking row: dates | price | button */
.booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
.booking-date-field { display: flex; flex-direction: column; gap: 7px; }
.booking-date-field label {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.booking-date-field input {
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  color: var(--white);
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  color-scheme: dark;
}
.booking-date-field input:focus { border-color: #333; }

.booking-price-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 13px 16px;
  background: #0a0a0a;
  border: 1px solid #1e1e1e;
  height: 100%;
  min-height: 52px;
}
.booking-price-block span:first-child {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
.booking-price-val {
  font-family: 'ALSSector', sans-serif;
  font-size: 22px;
  color: #cc3300;
  line-height: 1.1;
}

.booking-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  height: 52px;
  background: #cc3300;
  color: #fff;
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.booking-wa-btn:hover { background: #e03700; }

/* Contact links */
.booking-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.booking-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #0a0a0a;
  border: 1px solid #181818;
  color: #555;
  text-decoration: none;
  font-size: 13px;
  transition: border-color 0.2s, color 0.2s;
}
.booking-contact-link:hover { border-color: #333; color: #ccc; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .fleet-split { grid-template-columns: 1fr; height: auto; }
  .split-info { padding: 48px 24px; }
  .split-viewer { height: 60vw; min-height: 320px; }
  .split-price-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fleet-hero-book { width: 100%; justify-content: center; }
  .fleet-booking { padding: 40px 20px 56px; }
  .booking-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .booking-wa-btn { grid-column: 1 / -1; height: 48px; }
  .booking-contacts { grid-template-columns: 1fr; }
}


.wash {
  padding: 120px 48px;
  background: var(--dark);
}
.wash h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 16px;
}
.wash-sub {
  color: var(--silver-dim);
  margin-bottom: 64px;
}
.wash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.wash-category h4 {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1a1a1a;
}
.wash-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #0d0d0d;
  font-size: 15px;
}
.wash-item span:last-child {
  color: var(--silver);
  font-family: 'ALSSector', sans-serif;
  font-size: 15px;
}

/* CUSTOM */
.custom {
  position: relative;
  overflow: hidden;
  padding: 120px 48px;
  background: var(--black);
}
.custom-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.custom h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 20px;
}
.custom-desc {
  color: var(--silver-dim);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 40px;
}
.packages-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pkg-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: #0a0a0a;
  border-left: 2px solid transparent;
  transition: all 0.25s;
  cursor: pointer;
}
.pkg-card:hover {
  background: #111;
  border-left-color: var(--accent);
}
.pkg-badge {
  font-family: 'ALSSector', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pkg-s { color: #00d4ff; }
.pkg-r { color: #4488ff; }
.pkg-rs { color: #22cc77; }
.pkg-gtr { color: #ffbb00; }
.pkg-one { color: #ff4444; }
.pkg-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pkg-desc {
  font-size: 12px;
  color: var(--silver-dim);
}
.pkg-price {
  text-align: right;
  font-family: 'ALSSector', sans-serif;
  font-size: 15px;
  color: var(--silver);
  white-space: nowrap;
}
.custom-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 20px;
  font-family: 'ALSSector', sans-serif;
}
.custom-link:hover { text-decoration: underline; }
.custom-left {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 48px; align-self: stretch;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.custom-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  filter: brightness(1.18) saturate(1.05);
}
.custom-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(120deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.35) 100%);
}
.custom-left-content { position: relative; z-index: 2; }
@property --customBeam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.custom-beam {
  position: absolute; inset: 0; border-radius: 16px; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--customBeam),
    transparent 0deg, transparent 250deg, rgba(204,51,0,.12) 290deg,
    #cc3300 335deg, #e84a1a 351deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: customBeamSpin 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(204,51,0,.6));
}
@keyframes customBeamSpin { to { --customBeam: 360deg; } }
@media (max-width: 768px) {
  .custom-left { padding: 32px 24px; }
}

/* ── 360 SHOWCASE ─────────────────────────────────────────── */
.x360 { padding: 120px 48px; background: var(--black); text-align: center; }
.x360-inner { max-width: 1100px; margin: 0 auto; }
.x360-title { font-size: clamp(32px, 5vw, 60px); margin: 8px 0 40px; }
.x360-view { display: flex; align-items: center; justify-content: center; gap: 28px; }
.x360-view .x360-stage { flex: 1; min-width: 0; }
.x360-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  background: radial-gradient(120% 120% at 50% 40%, #1a1a1a 0%, #0d0d0d 70%);
  border-radius: 18px; overflow: hidden; cursor: grab;
  touch-action: pan-y; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.x360-stage:active { cursor: grabbing; }
.x360-track { position: absolute; inset: 0; transition: filter .35s ease; }
.x360-layer { pointer-events: none; }
.x360-glow {
  --neon: #ff2d2d;
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  width: 70%; height: 34%; pointer-events: none;
  background:
    radial-gradient(ellipse 36% 26% at 50% 86%,
      color-mix(in srgb, var(--neon) 96%, transparent) 0%,
      color-mix(in srgb, var(--neon) 50%, transparent) 45%, transparent 72%),
    radial-gradient(ellipse 66% 52% at 50% 78%,
      color-mix(in srgb, var(--neon) 45%, transparent) 0%,
      color-mix(in srgb, var(--neon) 18%, transparent) 50%, transparent 75%);
  filter: blur(20px); mix-blend-mode: multiply;
  animation: x360glowpulse 2.6s ease-in-out infinite alternate;
}
@keyframes x360glowpulse { from { opacity: .55; } to { opacity: 1; } }
.x360-track img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.x360-track img.on { opacity: 1; }
@property --x360beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.x360-beam {
  position: absolute; inset: 0; border-radius: 18px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--x360beam),
    transparent 0deg, transparent 250deg, rgba(204,51,0,.12) 290deg,
    #cc3300 335deg, #e84a1a 351deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: x360beamspin 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(204,51,0,.6));
}
@keyframes x360beamspin { to { --x360beam: 360deg; } }
.x360-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7); background: rgba(0,0,0,.35); padding: 7px 14px;
  border-radius: 999px; backdrop-filter: blur(4px); transition: opacity .4s;
}
.x360-hint.hide { opacity: 0; }
.x360-colors { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.x360-group { display: flex; flex-direction: column; gap: 10px; }
.x360-glabel {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--silver-dim); font-family: 'HelveticaNeue', sans-serif;
}
.x360-row { display: flex; gap: 12px; }
.x360-sw {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 2px solid rgba(255,255,255,.25);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.x360-sw:hover { transform: scale(1.12); }
.x360-sw.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(204,51,0,.5); }
@media (max-width: 768px) {
  .x360 { padding: 80px 20px; }
  .x360-view { flex-direction: column; gap: 20px; }
  .x360-colors { flex-direction: row; gap: 28px; flex-wrap: wrap; }
  .x360-row { flex-wrap: wrap; justify-content: center; }
}

/* ── PRELOADER (running NAMELESS marquee) ─────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 99999; background: #000; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-name {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: clamp(54px, 12vw, 140px); line-height: 1; letter-spacing: .02em;
  display: flex;
}
.pl-name span {
  color: #cc3300; opacity: 0; display: inline-block;
  transform-origin: 30% bottom;
  transform: translateX(60vw) rotate(26deg);
  animation: plRide 1.2s cubic-bezier(.16,.84,.3,1) forwards;   /* plays ONCE, ~1.2s */
  text-shadow: 0 0 24px rgba(204,51,0,.4);
  will-change: transform, opacity;
}
.pl-name span:nth-child(1) { animation-delay: 0s; }
.pl-name span:nth-child(2) { animation-delay: .05s; }
.pl-name span:nth-child(3) { animation-delay: .10s; }
.pl-name span:nth-child(4) { animation-delay: .15s; }
.pl-name span:nth-child(5) { animation-delay: .20s; }
.pl-name span:nth-child(6) { animation-delay: .25s; }
.pl-name span:nth-child(7) { animation-delay: .30s; }
.pl-name span:nth-child(8) { animation-delay: .35s; }
@keyframes plRide {
  0%   { opacity: 0; transform: translateX(60vw) rotate(26deg); }   /* in from right (wheelie) */
  55%  { opacity: 1; transform: translateX(-4px) rotate(10deg); }
  75%  { transform: translateX(0) rotate(-3deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }          /* settles and stays; fade-out handles exit */
}
.pl-bar, .pl-bar > span { display: none; }
/* ® — same red & font as NAMELESS, leaves right after the letters (no linger) */
.pl-tm {
  align-self: flex-start;
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: .3em; line-height: 1; color: #cc3300;
  margin-top: .3em; margin-left: .06em;
  text-shadow: 0 0 24px rgba(204,51,0,.4);
  opacity: 0; animation: plTm 1.2s ease forwards; animation-delay: .3s;
}
@keyframes plTm {
  0%, 45% { opacity: 0; }
  100% { opacity: 1; }
}
.pl-bar {
  width: 200px; height: 3px; background: rgba(255,255,255,.14);
  border-radius: 2px; overflow: hidden;
}
.pl-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #cc3300, #ff7a37); transition: width .25s ease;
}

/* 3-month discount note */
.rb-discount-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.4;
  color: var(--silver-dim); font-family: 'HelveticaNeue', sans-serif;
  /* Full width, centred — sits between the price and the WA/TG/IG row.
     Plain text flow (not flex): a flex gap would detach punctuation from the
     word before it ("10% off , automatic"). */
  display: block; text-align: center;
  transition: color .25s ease;
}
.rb-discount-note strong { color: var(--accent); font-weight: 700; }
.rb-discount-note.active {
  color: #fff;
  background: rgba(204,51,0,.12); border: 1px solid rgba(204,51,0,.4);
  border-radius: 8px; padding: 8px 12px;
}

/* REPAIR */
.repair {
  position: relative;
  overflow: hidden;
  padding: 120px 48px;
  background: var(--dark);
}
.repair-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.repair-info { display: flex; flex-direction: column; }
.repair h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 16px;
}
.repair-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  align-self: end;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.repair-media-el {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.18) saturate(1.05);
  z-index: 0;
}

/* ── Service price board (accordion) ─────────────────────────── */
.svc-list {
  margin: 30px 0 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
@property --svcBeam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.svc-cat {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.svc-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.svc-cat.open::after {
  opacity: 1;
  background: conic-gradient(from var(--svcBeam),
    transparent 0deg, #cc3300 60deg, transparent 130deg, transparent 360deg);
  animation: svcBeamSpin 2.4s linear infinite;
}
@keyframes svcBeamSpin { to { --svcBeam: 360deg; } }

.svc-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 20px 4px;
  text-align: left;
  color: #fff;
}
.svc-idx {
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  color: #cc3300;
  width: 26px;
  flex: none;
}
.svc-name {
  font-family: 'ALSSector', sans-serif;
  font-size: clamp(16px, 4.4vw, 21px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: 1;
  transition: color 0.15s;
}
.svc-from {
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  color: #7c7c7c;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.svc-cat.open .svc-from { opacity: 0; }
.svc-cat.open .svc-name { color: #cc3300; }

.svc-chev { width: 18px; height: 18px; flex: none; position: relative; }
.svc-chev::before, .svc-chev::after {
  content: '';
  position: absolute;
  top: 8px; left: 3px;
  width: 12px; height: 2px;
  background: #cc3300;
  transition: transform 0.25s;
}
.svc-chev::after { transform: rotate(90deg); }
.svc-cat.open .svc-chev::after { transform: rotate(0); }

.svc-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.svc-inner { padding: 0 4px 18px 46px; }

.svc-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: 'ALSSector', sans-serif;
  font-size: 14px;
  color: #c8c8c8;
}
.svc-row:last-child { border-bottom: 0; }
.svc-row span:last-child { color: #fff; white-space: nowrap; }

@media (max-width: 700px) {
  .svc-inner { padding-left: 42px; }
}
.repair-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #1a1a1a;
  margin-bottom: 40px;
}
.repair-cat {
  background: var(--dark);
  padding: 32px 28px;
}
.repair-cat h4 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.repair-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #0d0d0d;
  font-size: 13px;
}
.repair-item span:last-child {
  color: var(--silver-dim);
  font-size: 13px;
  white-space: nowrap;
  margin-left: 12px;
}
.repair-note {
  font-size: 13px;
  color: var(--silver-dim);
  padding: 20px 0 0;
}

/* BOOKING */
.booking {
  padding: 120px 48px;
  background: var(--black);
}
.booking-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.booking h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 16px;
}
.booking-desc {
  color: var(--silver-dim);
  font-size: 16px;
  margin-bottom: 40px;
  line-height: 1.8;
}
.contact-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.contact-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  color: var(--white);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 15px;
}
.contact-btn:hover {
  border-color: var(--accent);
  background: #0d0d0d;
}
.contact-btn-icon {
  font-size: 22px;
  width: 32px;
  text-align: center;
}
.contact-btn-info { flex: 1; }
.contact-btn-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
}
.contact-btn-val {
  font-family: 'ALSSector', sans-serif;
  font-size: 16px;
}
.contact-btn-arrow { color: var(--silver-dim); }

.form-wrap { background: #080808; padding: 48px; }
.form-wrap h3 {
  font-size: 28px;
  margin-bottom: 32px;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  color: var(--white);
  padding: 14px 18px;
  font-family: 'HelveticaNeue', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
}
.form-group select option { background: #111; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-submit {
  width: 100%;
  background: var(--white);
  color: var(--black);
  border: none;
  padding: 18px;
  font-family: 'ALSSector', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.form-submit:hover {
  background: var(--accent);
  box-shadow: 0 8px 32px rgba(255,255,255,0.3);
}

/* FOOTER */
footer {
  background: var(--dark);
  padding: 44px 48px 28px;
  border-top: 1px solid #111;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 28px;
}
.footer-col-contact { text-align: right; }
.footer-logo img {
  height: 60px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 12px rgba(200,200,200,0.2));
}
.footer-tagline {
  font-size: 13px;
  color: var(--silver-dim);
  line-height: 1.7;
}
.footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--silver-dim);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid #111;
}
.footer-copy {
  font-size: 12px;
  color: #444;
}
.footer-socials {
  display: flex;
  gap: 20px;
}
.footer-socials a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-socials a:hover { color: var(--white); }

/* LANG TOGGLE */






/* MOBILE */
@media (max-width: 900px) {
  nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .hero-content { padding: 120px 24px 60px; }
  .services { padding: 80px 24px; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .fleet, .wash, .custom, .repair, .booking { padding: 80px 24px; }
  .bike-hero { grid-template-columns: 1fr; gap: 32px; }
  .wash-grid { grid-template-columns: 1fr; }
  .custom-inner { grid-template-columns: 1fr; gap: 48px; }
  .repair-inner { grid-template-columns: 1fr; gap: 40px; }
  .repair-media { display: none; }   /* mobile: показуємо лише акордеон-прайс, без фото */
  .repair-grid { grid-template-columns: 1fr; }
  .booking-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  
  .gallery-strip div:last-child { display: none; }
  footer { padding: 48px 24px 32px; }
}

.hero h1,
.services h2,
.fleet h2,
.wash h2,
.custom h2,
.repair h2,
.booking h2 {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  letter-spacing: 0.01em;
}

.hero h1,
.services h2,
.fleet h2,
.wash h2,
.custom h2,
.repair h2,
.booking h2,
footer h2 {
  color: #aa2704 !important;
  background: none !important;
  -webkit-text-fill-color: #aa2704 !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.hero h1,
.hero h1 .chrome,
.hero-title {
  color: #aa2704 !important;
  background: none !important;
  -webkit-text-fill-color: #aa2704 !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  background-image: none !important;
  text-shadow: none !important;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-video-wrap video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  filter: brightness(0.85) contrast(1.25) saturate(0.8);
  pointer-events: none;
}
.hero-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.05) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.45) 0%, transparent 55%);
}


.nav-socials a:hover img { filter: invert(20%) sepia(90%) saturate(2000%) hue-rotate(10deg); opacity: 1; }

.nav-socials { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.nav-socials a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; }
.nav-socials a:hover { color: #aa2704; }


.color-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.color-btn.active {
  border-color: #aa2704;
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(170,39,4,0.3);
}
.xmax-tier-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 24px;
  margin-top: 8px;
}
.tier-btn {
  background: #0a0a0a;
  border: 1px solid #222;
  color: #888;
  padding: 10px 28px;
  font-family: 'ALSSector', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.tier-btn.active {
  background: #aa2704;
  border-color: #aa2704;
  color: #fff;
}
.xmax-note {
  margin-top: 20px;
  font-size: 13px;
  color: #555;
  letter-spacing: 0.05em;
  border-left: 2px solid #aa2704;
  padding-left: 12px;
}

.xmax-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 32px;
}
.color-group-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #555;
  font-family: 'ALSSector', sans-serif;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════
   RENTAL BANNER  (.rb-*)
═══════════════════════════════════════════════════════════════ */
.rb {
  display: flex;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 22% 45%, rgba(204,51,0,0.10) 0%, transparent 55%),
    radial-gradient(90% 90% at 100% 0%, rgba(204,51,0,0.05) 0%, transparent 50%),
    #060606;
  overflow: hidden;
  position: relative;
}

/* Cinematic top/bottom film bars + grain */
.rb::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 14%, transparent 86%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 5;
}

/* ── Left panel (video / 360) ─────────────────────────────── */
.rb-left {
  width: 45%;
  min-width: 240px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(204,51,0,0.14) 0%, transparent 70%),
    #040404;
}

/* Showroom spotlight cone from top */
.rb-left.bike-shown::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  height: 90%;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* Floor glow ellipse under the bike */
.rb-left.bike-shown::after {
  content: '';
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 70px;
  background: radial-gradient(ellipse at center, rgba(204,51,0,0.45) 0%, rgba(204,51,0,0.12) 35%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
  z-index: 1;
  animation: rbFloorPulse 4s ease-in-out infinite;
}

@keyframes rbFloorPulse {
  0%, 100% { opacity: 0.7; width: 58%; }
  50%      { opacity: 1;   width: 64%; }
}

.rb-video {
  display: none; /* ambient background video hidden — clean dark panel behind the bike */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 0.5s ease;
}

/* when bike overlay is visible, dim the video further */
.rb-left.bike-shown .rb-video {
  opacity: 0.08;
}

.rb-bike-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 3;
}

.rb-bike-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Photo frame — geometry comes from the shared .rb-bike-video/.rb-frame-beam rule */
.rb-360 {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.85),
    0 0 50px rgba(204,51,0,0.25);
}

.rb-360:active { cursor: grabbing; }

.rb-360-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.rb-drag-hint {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #444;
  margin: 0;
  animation: rbHintFade 3s ease 0.6s both;
}

@keyframes rbHintFade {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; transform: none; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Media frame geometry — ONE source of truth for the three layers that must
   overlap exactly: the bike video, the beam border tracing it, and the photo
   frame. Change them together or the beam drifts off the video.
   Desktop keeps the original centred 84%/76%; mobile overrides with fixed
   insets (see the 768px block). */
.rb-bike-video,
.rb-frame-beam,
.rb-360 {
  top: 50%;
  left: 50%;
  width: 84%;
  height: 76%;
}

.rb-bike-video {
  position: absolute;
  object-fit: cover;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s ease;
  z-index: 3;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.85),
    0 0 50px rgba(204,51,0,0.25);
}

.rb-bike-video.visible {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Animated beam tracing the media frame border */
@property --rbBeamAng {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.rb-frame-beam {
  position: absolute;
  /* geometry (top/left/width/height) comes from the shared rule above */
  transform: translate(-50%, -50%);
  border-radius: 14px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rb-left.bike-shown .rb-frame-beam { opacity: 1; }

.rb-frame-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  padding: 2px;
  background: conic-gradient(from var(--rbBeamAng),
    transparent 0deg,
    transparent 240deg,
    color-mix(in srgb, var(--rbBeamColor, #cc3300) 12%, transparent) 285deg,
    var(--rbBeamColor, #cc3300) 330deg,
    color-mix(in srgb, var(--rbBeamColor, #cc3300) 65%, #fff) 348deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: rbBeamSpin 4s linear infinite;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rbBeamColor, #cc3300) 70%, transparent));
}

@keyframes rbBeamSpin {
  to { --rbBeamAng: 360deg; }
}

.rb-left-vignette {
  position: absolute;
  top: 0; right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, transparent, #0a0a0a);
  pointer-events: none;
}

/* ── Right panel ──────────────────────────────────────────── */
.rb-right {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(20,20,20,0.6) 0%, rgba(8,8,8,0.85) 100%);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  border-left: 1px solid rgba(204,51,0,0.25);
  box-shadow: -1px 0 40px rgba(204,51,0,0.08);
}

/* glowing seam line on the divider */
.rb-right::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(204,51,0,0.7), transparent);
  animation: rbSeam 5s ease-in-out infinite;
}

@keyframes rbSeam {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.rb-panel {
  padding: 44px 52px 56px;
  max-width: 640px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.rb-sup {
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #cc3300;
  margin: 0 0 8px;
}

/* "Rental" title above the calendar (mobile only — desktop uses .rb-headline) */
.rb-rental-title {
  display: none;
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #cc3300;
  margin: 0 0 18px;
}

/* Cinematic headline above the form */
.rb-headline {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 0.96;
  color: #fff;
  margin: 0 0 30px;
  letter-spacing: 0.01em;
  text-shadow: 0 0 40px rgba(204,51,0,0.25);
}

.rb-headline em {
  font-style: normal;
  color: #cc3300;
  text-shadow: 0 0 24px rgba(204,51,0,0.6);
}

/* ── Dates ────────────────────────────────────────────────── */
.rb-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.rb-date-wrap {
  position: relative;
  flex: 1;
}

.rb-date-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #141414;
  border: 1px solid #252525;
  border-radius: 8px;
  padding: 12px 18px 13px;
  cursor: pointer;
  transition: border-color 0.2s;
  user-select: none;
}

.rb-date-box:hover,
.rb-date-wrap.open .rb-date-box {
  border-color: #cc3300;
}

.rb-date-lbl {
  font-family: 'ALSSector', sans-serif;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #444;
}

.rb-date-val {
  font-family: 'ALSSector', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.03em;
}

.rb-date-val.placeholder { color: #3a3a3a; }

.rb-date-dash {
  color: #2a2a2a;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.rb-nights-badge {
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #cc3300;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
  text-align: right;
}

/* ── Calendar dropdown ────────────────────────────────────── */
.rb-cal {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  background: #141414;
  border: 1px solid #252525;
  border-radius: 12px;
  padding: 16px;
  width: 258px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.85);
}

.rb-date-wrap.open .rb-cal { display: block; }

.rb-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rb-cal-nav-btn {
  background: none;
  border: none;
  color: #555;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.rb-cal-nav-btn:hover { color: #fff; background: #1f1f1f; }

.rb-cal-month {
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}

.rb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.rb-cal-dow {
  font-family: 'ALSSector', sans-serif;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-align: center;
  color: #3a3a3a;
  padding: 4px 0 7px;
  text-transform: uppercase;
}

.rb-cal-day {
  aspect-ratio: 1;
  background: none;
  border: none;
  border-radius: 50%;
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}

.rb-cal-day:hover:not(:disabled) {
  background: #222;
  color: #fff;
}

.rb-cal-day.selected {
  background: #cc3300;
  color: #fff;
}

.rb-cal-day.in-range {
  background: rgba(204,51,0,0.12);
  border-radius: 0;
  color: #ddd;
}

.rb-cal-day.today { outline: 1px solid #303030; }

.rb-cal-day:disabled {
  color: #222;
  cursor: not-allowed;
}

/* ── Group blocks ─────────────────────────────────────────── */
.rb-group {
  margin-bottom: 26px;
}

.rb-group-label {
  font-family: 'ALSSector', sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #444;
  margin: 0 0 10px;
}

/* ── Chips (bike / tier tabs) ─────────────────────────────── */
.rb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rb-chip {
  background: #141414;
  border: 1px solid #222;
  border-radius: 6px;
  height: 33px;                 /* fixed row height — padding stays horizontal only */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.07em;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.rb-chip:hover:not(:disabled):not(.unavail) {
  border-color: #3a3a3a;
  color: #bbb;
}

.rb-chip.active {
  background: #cc3300;
  border-color: #cc3300;
  color: #fff;
}

/* ── Quick period selector (same pill look as .rb-chip) ────── */
.rb-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 26px;
}
.rb-quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;                 /* space between the number and the unit */
  background: #141414;
  border: 1px solid #222;
  border-radius: 6px;
  height: 33px;             /* same fixed row height as .rb-chip */
  padding: 0 16px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #555;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.rb-quick-btn span {
  font-size: 12px;
  line-height: 1;
  color: inherit;
  letter-spacing: 0.07em;
}
.rb-quick-btn:hover {
  border-color: #3a3a3a;
  color: #bbb;
}
.rb-quick-btn.active {
  background: #cc3300;
  border-color: #cc3300;
  color: #fff;
}
.rb-quick-btn.active span { color: #fff; }
@media (max-width: 768px) {
  /* All 5 periods stay on ONE row: equal-width, shrink-to-fit */
  .rb-quick { order: -2; padding: 0 18px; margin: 0 0 16px; gap: 5px; flex-wrap: nowrap; }
  .rb-quick-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .rb-quick-btn span { font-size: 10px; letter-spacing: 0.03em; }
}

.rb-chip.unavail {
  opacity: 0.22;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Color dots ───────────────────────────────────────────── */
.rb-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rb-dot {
  width: 24px;
  height: 35px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.rb-dot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: none;
  transition: transform 0.14s;
}

.rb-dot:hover:not(.unavail) {
  transform: scale(1.15);
}

.rb-dot.active {
  transform: scale(1.22);
}

/* colors without a real photo yet — shown as a coloured "?" (preview coming),
   dimmed a bit and non-clickable */
.rb-dot.unavail {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.rb-dot.unavail img {
  filter: none;
  opacity: 0.85;
}

/* ── Price ────────────────────────────────────────────────── */
.rb-price-block {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 8px 0 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(204,51,0,0.10), rgba(204,51,0,0.02));
  border: 1px solid rgba(204,51,0,0.22);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.rb-price-block::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: skewX(-20deg);
  animation: rbPriceShine 5.5s ease-in-out infinite;
}

@keyframes rbPriceShine {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

.rb-price-from-lbl {
  font-family: 'ALSSector', sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #444;
}

.rb-price-amt {
  font-family: 'ALSSector', sans-serif;
  font-size: 40px;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 0 30px rgba(204,51,0,0.5);
  position: relative;
  z-index: 1;
}

.rb-price-idr {
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #444;
}

.rb-price-per {
  font-family: 'ALSSector', sans-serif;
  font-size: 11px;
  color: #444;
  letter-spacing: 0.06em;
}

/* ── CTA buttons ──────────────────────────────────────────── */
.rb-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.rb-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 10px;
  border-radius: 9px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.2s, border-color 0.2s, transform 0.14s, box-shadow 0.2s;
  white-space: nowrap;
}

.rb-btn svg,
.rb-btn img { width: 16px; height: 16px; }

.rb-btn:hover {
  transform: translateY(-2px);
  background: #cc3300;
  border-color: #cc3300;
  box-shadow: 0 6px 22px rgba(204,51,0,0.45);
}

/* unified brand styling — no per-network brand colors */
.rb-btn-wa,
.rb-btn-tg,
.rb-btn-ig { background: rgba(255,255,255,0.04); color: #fff; }

/* ── Notify form ──────────────────────────────────────────── */
.rb-notify {
  display: none;
  background: rgba(204,51,0,0.07);
  border: 1px solid rgba(204,51,0,0.18);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 4px;
}

.rb-notify.visible { display: block; }

.rb-notify-msg {
  font-family: 'ALSSector', sans-serif;
  font-size: 13px;
  color: #aaa;
  line-height: 1.65;
  margin: 0 0 18px;
}

.rb-notify-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rb-input {
  background: #0d0d0d;
  border: 1px solid #252525;
  border-radius: 6px;
  padding: 11px 15px;
  font-family: 'ALSSector', sans-serif;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color 0.18s;
}

.rb-input:focus { border-color: #cc3300; }
.rb-input::placeholder { color: #333; }

.rb-notify-submit {
  background: #cc3300;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-family: 'ALSSector', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.18s;
}

.rb-notify-submit:hover { background: #e03800; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq {
  padding: 96px 48px;
  background: var(--dark, #0a0a0a);
}
.faq .section-label { max-width: 1280px; margin-left: auto; margin-right: auto; }
.faq-title {
  font-family: 'BeerMoney', 'ALSSector', sans-serif;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 0.98;
  color: #cc3300;
  letter-spacing: 0.01em;
  text-shadow: 0 0 30px rgba(204,51,0,0.3);
  max-width: 1280px;
  margin: 0 auto 40px;
}
.faq-inner {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
}
.faq-main { flex: 1; min-width: 0; }
.faq-list {
  max-width: 760px;
}
.faq-media {
  flex: 0 0 44%;
}
.faq-frame {
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 16px;
}
.faq-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 50px rgba(204,51,0,0.18);
}
/* Brand red running line around the FAQ video */
.faq-beam {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
}
.faq-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 2px;
  background: conic-gradient(from var(--rbBeamAng),
    transparent 0deg,
    transparent 240deg,
    rgba(204,51,0,0.12) 285deg,
    #cc3300 330deg,
    #e84a1a 348deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: rbBeamSpin 4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(204,51,0,0.65));
}
@media (max-width: 900px) {
  .faq-inner { flex-direction: column; gap: 36px; }
  .faq-media { width: 100%; flex-basis: auto; position: static; }
  .faq-frame { min-height: 0; height: 320px; max-height: none; }
}
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: 'ALSSector', sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
  color: #cc3300;
  transition: transform 0.25s;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: #cc3300; }
.faq-item p {
  margin: 0;
  padding: 0 40px 26px 0;
  color: #9a9a9a;
  font-size: 15px;
  line-height: 1.7;
  max-width: 760px;
}

/* ── Floating WhatsApp ───────────────────────────────────────── */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 0 0 0 rgba(37,211,102,0.5);
  transition: transform 0.18s, box-shadow 0.2s;
}
.wa-float svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 34px rgba(0,0,0,0.5); }
.wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: waPulse 2.4s ease-out infinite;
  z-index: 0;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 700px) {
  .wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .wa-float svg { width: 28px; height: 28px; }
  .faq { padding: 80px 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ADAPTATION
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* NAV — keep logo + socials, drop text links (jump anchors) */
  nav { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; }
  .nav-links { display: none; }
  .nav-socials { gap: 16px; justify-content: flex-end; }

  /* HERO */
  .hero { justify-content: center; }
  /* drop decorative / leftover siblings so they don't squeeze hero-content (and hide the stray black SVG) */
  .hero-ring { display: none; }
  .hero > span { display: none; }
  .hero-content { padding: 0 22px; width: 100%; max-width: 100%; }
  .hero h1 { font-size: clamp(34px, 11vw, 56px); line-height: 1.02; }
  .hero-sub { font-size: 15px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 0.16em; }
  /* CTAs centered on the banner with equal side gutters */
  .hero-ctas { flex-wrap: wrap; gap: 12px; max-width: none; width: 100%; margin: 0 auto; }
  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }

  /* SERVICES — keep a grid like desktop (2 across) */
  .services { padding: 70px 20px; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .service-card { padding: 22px 16px; }
  .service-card h3 { font-size: 18px; }
  .service-card p { font-size: 12px; }
  .services h2, .custom h2 { margin-bottom: 32px; }

  /* ── RENTAL BANNER → single column per mobile mockup ── */
  .rb { flex-direction: column; min-height: 0; overflow: visible; }
  /* promote panel children to direct flex items so we can reorder them */
  .rb-right, .rb-panel { display: contents; }
  .rb-right::before { display: none; }

  /* hide marketing headline (mockup starts with the dates) */
  .rb-sup, .rb-headline { display: none; }
  /* "Rental" title sits above the calendar */
  .rb-rental-title { display: block; order: -3; width: 100%; padding: 18px 18px 0; margin: 0; }

  /* 1 · dates on top, side by side */
  .rb-date-row {
    order: -2;
    width: 100%;
    padding: 18px 18px 0;
    margin: 0 0 14px;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }
  .rb-date-wrap { flex: 1; }
  .rb-date-dash, .rb-nights-badge { display: none; }

  /* 2 · video full width */
  /* margin-bottom mirrors .rb-quick's 16px above, so the gap to MODEL below the
     video matches the gap above it (21px each: 16 margin + 5 media inset) */
  .rb-left { order: -1; width: 100%; height: 52vh; min-height: 320px; margin-bottom: 16px; }

  /* 3-5 · model / package / color groups */
  .rb-group { padding: 0 18px; margin-bottom: 18px; }
  .rb-group-label { font-size: 10px; margin-bottom: 9px; }
  .rb-chips { flex-wrap: wrap; gap: 7px; }
  .rb-chip { padding: 0 12px; font-size: 11px; }
  /* Bike models + sub-categories: one row each, equal width */
  #rbBikeChips, #rbTierChips { flex-wrap: nowrap; gap: 5px; }
  #rbBikeChips .rb-chip, #rbTierChips .rb-chip {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 2px;
    font-size: 9px;
    letter-spacing: 0.02em;
  }
  /* Media frame: fixed insets instead of the desktop 84%/76%.
     X = 18px so the video's edges line up with the MODEL / COLOR / period
     labels below it; Y = 5px. All three layers share these so the beam
     border stays exactly on the video. */
  .rb-left { --rbMediaInsetX: 18px; --rbMediaInsetY: 5px; }
  .rb-bike-video,
  .rb-frame-beam,
  .rb-360 {
    top: var(--rbMediaInsetY);
    left: var(--rbMediaInsetX);
    width: calc(100% - var(--rbMediaInsetX) * 2);
    height: calc(100% - var(--rbMediaInsetY) * 2);
    transform: none;
  }
  .rb-bike-video { transform: scale(0.96); }
  .rb-bike-video.visible { transform: scale(1); }

  .rb-dots { gap: 7px; }
  .rb-dot { width: 26px; height: 35px; }

  /* 6 · bottom: знижка → бокс ЦІНИ на всю ширину → Telegram | WhatsApp */
  .rb-bottom {
    order: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 18px 40px;
  }
  .rb-discount-note {
    order: 1;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }
  /* ЦІНА — рівноцінний бокс на всю ширину */
  .rb-price-block {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 7px;
    overflow: hidden;
  }
  .rb-price-amt { font-size: 30px; white-space: nowrap; line-height: 1.05; }
  .rb-price-idr, .rb-price-per, .rb-price-from-lbl { font-size: 11px; white-space: nowrap; }
  /* Telegram (зліва) + WhatsApp (справа) — дві однакові кнопки з підписами */
  .rb-actions {
    order: 3;
    width: 100%;
    margin: 0;
    flex-direction: row;
    gap: 10px;
  }
  .rb-btn { flex: 1 1 0; width: auto; padding: 0 10px; font-size: 12px; letter-spacing: 0.09em; }
  .rb-btn svg, .rb-btn img { width: 18px; height: 18px; }
  .rb-btn-tg { order: 1; }   /* Telegram — зліва */
  .rb-btn-wa { order: 2; }   /* WhatsApp — справа */
  .rb-btn-ig { display: none; }
  /* kill tap/focus black box under the "?" swatches */
  .rb-dot,
  .rb-dot:focus,
  .rb-dot:active,
  .rb-dot:focus-visible {
    background: transparent;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* date fields — always-on brand-red glow so they stand out */
  .rb-date-box {
    border-color: #cc3300;
    box-shadow: 0 0 0 1px rgba(204,51,0,0.30), 0 0 14px rgba(204,51,0,0.40);
  }
  .rb-date-wrap.open .rb-date-box {
    box-shadow: 0 0 0 1px rgba(204,51,0,0.55), 0 0 20px rgba(204,51,0,0.6);
  }

  /* calendar — static brand-red highlight (border + glow) */
  .rb-cal {
    width: 100%;
    background: #161616;
    border: 1.5px solid #cc3300;
    box-shadow: 0 24px 64px rgba(0,0,0,0.9),
                0 0 0 1px rgba(204,51,0,0.35),
                0 0 18px rgba(204,51,0,0.45);
  }
  /* month label — smaller, single line (was wrapping "SEPTEMBER / 2026") */
  .rb-cal-month {
    font-size: 11px;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  /* ── CUSTOM ── */
  .custom { padding: 70px 20px; }
  .custom-inner { grid-template-columns: 1fr; gap: 36px; }
  .packages-grid { grid-template-columns: 1fr; }

  /* ── SERVICE & REPAIR (hotspots) ── */
  .repair { padding: 70px 20px; }
  .svc-stage { border-radius: 12px; }
  .svc-dot { width: 24px; height: 24px; }
  .svc-num { font-size: 12px; line-height: 20px; }

  /* ── FAQ ── */
  .faq { padding: 70px 20px; }
  .faq-title { font-size: clamp(30px, 9vw, 44px); }
  .faq-item summary { padding: 18px 36px 18px 0; font-size: 16px; }

  /* sections general */
  .repair h2, .custom h2, .services h2 { font-size: clamp(28px, 8vw, 44px); }
}

/* Narrowest phones (iPhone SE): tighten so "Kawasaki" still fits on the row */
@media (max-width: 360px) {
  #rbBikeChips { gap: 4px; }
  #rbBikeChips .rb-chip { font-size: 8px; letter-spacing: 0; padding: 0 1px; }
}

@media (max-width: 420px) {
  .rb-btn span { font-size: 10px; }
  .rb-left { height: 56vh; }
  .hero-eyebrow { font-size: 11px; }
}