/* ============================================================================
   LUXWRAP — HUB  (the homepage, rebuilt as a racing-game MAIN MENU)
   A fixed studio render (car + installer + garage) carries the emotion; an
   HTML/CSS HUD is rebuilt on the edges around it — never over the car. No
   "PLAY", no game economy: every panel is a real studio surface.
   Desktop = fixed edge-grid. <=1024 = scroll document. <=560 = stacked + tab bar.
   ========================================================================= */

.hub {
  position: fixed;
  inset: 0;
  height: 100svh;
  width: 100vw;
  overflow: hidden;
  z-index: var(--z-content);
  /* NO isolation + NO backdrop-filter on the clusters below. A backdrop-filter
     inside an isolated fixed container makes Chrome sample the wrong backdrop
     and paint the whole scene BLACK (and thrashes the GPU). The HUD legibility
     comes from opaque gradient fills instead — which the spec recommended. */
}

/* ------------------------------------------------------------------ scene
   The render is a CSS background-image, NOT an <img>. An <img> inside this
   fixed container hits a Chrome compositing bug: a positioned sibling (the
   grid) gets promoted to its own layer and the image behind it paints BLACK.
   A background-image composites correctly. Focal point 50% 46% = between the
   car (left-of-centre) and the installer (right-of-centre). */
.hub__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #04060a url("../../img/hub-scene.jpg") 50% 46% / cover no-repeat;
  overflow: hidden;
  /* the render breathes (slow scale) and drifts toward the cursor (--px/--py set
     by hub.js). transform on this background-image layer is safe — it's the
     <img> element that hit the black-compositing bug, not a transform. Min scale
     stays >1 so the cover never reveals an edge as it drifts. */
  --px: 0px;
  --py: 0px;
  transform: scale(var(--breathe)) translate3d(var(--px), var(--py), 0);
  transform-origin: 54% 52%;
  animation: hub-breathe 22s var(--ease-in-out) infinite alternate;
  transition: --px 0.6s var(--ease-out), --py 0.6s var(--ease-out);
  will-change: transform;
}
@keyframes hub-breathe {
  from {
    --breathe: 1.035;
  }
  to {
    --breathe: 1.075;
  }
}
/* motion off (user switch or OS) → hold a still, edge-safe frame */
.motion-off .hub__scene,
.motion-off .hub__scene:hover {
  animation: none;
  transition: none;
  --px: 0px;
  --py: 0px;
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .hub__scene {
    animation: none;
    transition: none;
    transform: scale(1.04);
  }
}

/* --------------------------------------------------- person neon on hover
   A transparent-frame cutout of the installer, sized + positioned EXACTLY like
   the scene background (so it overlays the rendered person pixel-for-pixel and
   inherits the same breathe/parallax transform, being a child of .hub__scene).
   Hovering the hotspot fades in a soft neon rim (drop-shadow on the alpha edge)
   that drifts cyan -> magenta. Very gentle, very small — glow only, no motion of
   the person itself. */
.hub__person {
  position: absolute;
  inset: 0;
  z-index: 3; /* above the vignette so the rim isn't dimmed */
  background: url("../../img/hub-person.png") 50% 46% / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out);
  /* the neon rim glow (colour), then a conic mask that reveals it from a start
     angle around the silhouette — this is what makes it "draw on". */
  filter: drop-shadow(0 0 2px rgba(44, 233, 255, 0.95)) drop-shadow(0 0 8px rgba(44, 233, 255, 0.55))
    drop-shadow(0 0 3px rgba(255, 61, 139, 0.4));
  -webkit-mask: conic-gradient(from 92deg at 61% 54%, #000 0 var(--reveal), transparent var(--reveal));
  mask: conic-gradient(from 92deg at 61% 54%, #000 0 var(--reveal), transparent var(--reveal));
  will-change: opacity, filter;
}
/* the hover target — a zone over the SUBJECT (the car + the installer), a direct
   child of .hub at z 2: above the scene (z 0), below the grid (z 3). .hub-mid
   over it is pointer-events:none so hover reaches here; the arrows / cards / promo
   (z 3) stay on top and clickable. */
.hub__person-hit {
  position: absolute;
  top: 22%;
  left: 13%;
  right: 17%;
  bottom: 1%;
  z-index: 2;
  cursor: pointer;
}
.hub:has(.hub__person-hit:hover) .hub__person {
  opacity: 1;
  animation: person-draw 4.6s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}
/* the glowing outline DRAWS ON from the person around the whole silhouette
   (--reveal 0 -> 360), holds a beat, then repeats — an After-Effects write-on. */
@keyframes person-draw {
  0% {
    --reveal: 0deg;
  }
  72% {
    --reveal: 360deg;
  }
  100% {
    --reveal: 360deg;
  }
}
/* motion held: still rim, no colour drift */
.motion-off .hub:has(.hub__person-hit:hover) .hub__person {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hub:has(.hub__person-hit:hover) .hub__person {
    animation: none;
  }
}
/* the render already reads dark; these only push the EDGES down so HUD text on
   the corners keeps 4.5:1 without dimming the paint in the middle */
.hub__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 92% at 50% 42%, transparent 46%, rgba(4, 6, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, 0.72) 0%, transparent 20%, transparent 62%, rgba(4, 6, 10, 0.9) 100%),
    linear-gradient(90deg, rgba(4, 6, 10, 0.66) 0%, transparent 26%, transparent 74%, rgba(4, 6, 10, 0.66) 100%);
}
/* faint HUD scanlines + engineering grid, whisper quiet */
.hub__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ------------------------------------------------------------------ grid */
.hub__grid {
  position: relative;
  z-index: 3;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 23%) 1fr minmax(320px, 25%);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "studio util  trust"
    "promo  mid   cards"
    "dock   dock  dock";
  gap: clamp(12px, 1.4vw, 22px);
  padding: clamp(14px, 1.5vw, 26px);
  padding-bottom: clamp(12px, 1.3vw, 20px);
  /* the grid must NOT eat pointer events over its empty centre — the person
     hotspot lives beneath it. Re-enable events on the real clusters, keep the
     centre (.hub-mid, already pointer-events:none) transparent to hover. */
  pointer-events: none;
}
.hub__grid > *:not(.hub-mid) {
  pointer-events: auto;
}

/* a shared local scrim for any cluster that carries text over the photo */
.hub-cluster {
  --scrim: radial-gradient(130% 150% at 0% 0%, rgba(4, 6, 10, 0.82), rgba(4, 6, 10, 0.28) 62%, transparent 82%);
}

/* ============================================================ TOP-LEFT: studio */
.hub-studio {
  grid-area: studio;
  align-self: start;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
}
.hub-studio__crest {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  --cut: 9px;
  clip-path: var(--clip-bevel);
  background: var(--holo);
  background-size: 220% 100%;
  animation: holo-slide 8s linear infinite;
  color: var(--ink-950);
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 800;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.9);
}
.hub-studio__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.hub-studio__id {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  color: var(--text-faint);
  text-transform: uppercase;
}
.hub-studio__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.hub-studio__rank {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hub-studio__stars {
  --star-col: var(--go);
}

/* ============================================================ TOP-CENTER: utility */
.hub-util {
  grid-area: util;
  align-self: start;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  --cut: 12px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(9, 13, 21, 0.9), rgba(6, 9, 15, 0.8));
  box-shadow: inset 0 0 0 1px var(--line);
}
.hub-util__btn {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  width: 62px;
  padding: 8px 4px 6px;
  border-radius: 8px;
  color: var(--text-dim);
  transition: color var(--t-fast), background var(--t-fast);
}
.hub-util__btn svg {
  width: 20px;
  height: 20px;
}
.hub-util__btn small {
  font-family: var(--f-hud);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hub-util__btn:hover,
.hub-util__btn:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.hub-util__btn[aria-current="page"] {
  color: var(--li);
}
.hub-util__btn[aria-current="page"] svg {
  filter: drop-shadow(0 0 8px rgba(255, 200, 40, 0.85));
}
.hub-util__dot {
  position: absolute;
  top: 5px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mg);
  box-shadow: 0 0 8px var(--mg);
}

/* ============================================================ TOP-RIGHT: trust */
.hub-trust {
  grid-area: trust;
  align-self: start;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 8px;
}
.hub-trust__pills {
  display: flex;
  gap: 6px;
}
.hub-trust__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  --cut: 8px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(9, 13, 21, 0.78), rgba(6, 9, 15, 0.62));
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* one accent does the work — all three trust icons are cyan, not a
   rainbow-by-position (the tier chip stays the only second hue on the page) */
.hub-trust__pill svg {
  width: 14px;
  height: 14px;
  color: var(--cy);
}
.hub-trust__pill b {
  color: var(--text);
  font-weight: 700;
}
.hub-trust__pill span {
  color: var(--text-faint);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
}
.hub-trust__rank {
  display: grid;
  gap: 5px;
  width: min(280px, 40vw);
  padding: 9px 13px;
  --cut: 8px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(9, 13, 21, 0.78), rgba(6, 9, 15, 0.62));
  box-shadow: inset 0 0 0 1px var(--line);
}
.hub-trust__rank-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hub-trust__rank-top b {
  color: var(--go);
  font-weight: 700;
}

/* ============================================================ LEFT: promo */
.hub-promo {
  grid-area: promo;
  align-self: center;
  justify-self: start;
  position: relative;
  width: min(300px, 90%);
  padding: 1px;
  --cut: 14px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(150deg, rgba(44, 233, 255, 0.5), rgba(139, 92, 255, 0.28) 55%, rgba(255, 61, 139, 0.4));
  overflow: hidden;
  isolation: isolate;
}
.hub-promo__inner {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  --cut: 14px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(160deg, rgba(14, 20, 32, 0.94), rgba(8, 11, 18, 0.96));
  overflow: hidden;
}
.hub-promo__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  object-fit: cover;
  width: 100%;
  height: 100%;
  mask-image: linear-gradient(200deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 72%);
}
.hub-promo__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--li);
}
.hub-promo__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  rotate: 45deg;
  background: var(--li);
  /* no resting glow — glow marks state (hover/active/featured), not decoration */
}
.hub-promo__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 0.94;
  text-transform: uppercase;
  white-space: pre-line;
}
.hub-promo__sub {
  font-size: var(--fs-sm);
  color: var(--text-soft);
  max-width: 30ch;
}
.hub-promo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 2px;
}
.hub-promo__tag {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  color: var(--text-faint);
}

/* ============================================================ CENTER: spotlight + arrows */
.hub-mid {
  grid-area: mid;
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  pointer-events: none; /* let the car "show"; children re-enable */
}
.hub-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--text-soft);
  background: rgba(6, 9, 15, 0.78);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.hub-arrow svg {
  width: 22px;
  height: 22px;
}
.hub-arrow--prev {
  left: -6%;
}
.hub-arrow--next {
  right: -6%;
}
.hub-arrow--prev svg {
  rotate: 180deg;
}
.hub-arrow:hover,
.hub-arrow:focus-visible {
  color: var(--ink-950);
  background: var(--cy);
  transform: translateY(-50%) scale(1.06);
}

.hub-spot {
  pointer-events: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: clamp(6px, 1vw, 18px);
  text-align: center;
}
.hub-spot__plate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 16px;
  --cut: 10px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(9, 13, 21, 0.82), rgba(6, 9, 15, 0.7));
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.hub-spot__make {
  display: grid;
  gap: 1px;
  text-align: left;
}
.hub-spot__make b {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.hub-spot__make span {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-dim);
}
.hub-spot__div {
  width: 1px;
  height: 30px;
  background: var(--line-strong);
}
.hub-spot__finish {
  display: grid;
  gap: 2px;
  text-align: left;
}
.hub-spot__finish b {
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
}
.hub-spot__finish span {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  color: var(--cy);
}
.hub-spot__view {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color var(--t-fast);
}
.hub-spot__plate:hover .hub-spot__view {
  color: var(--cy);
}
.hub-spot__dots {
  display: flex;
  gap: 7px;
}
.hub-spot__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.hub-spot__dot[aria-current="true"] {
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy);
  transform: scale(1.2);
}

/* animate the plate text on change */
.hub-spot.is-swap .hub-spot__plate {
  opacity: 0;
  transform: translateY(6px);
}
.hub-spot__plate {
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out),
    box-shadow var(--t-fast);
}

/* ============================================================ RIGHT: cards */
.hub-cards {
  grid-area: cards;
  align-self: center;
  justify-self: end;
  display: grid;
  gap: 9px;
  width: min(340px, 100%);
  max-height: 100%;
  overflow: visible;
}
/* text-left + framed-thumbnail-right offer card (the game-ref shop card) */
.hub-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 86px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 8px 8px 8px 13px;
  --cut: 10px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(160deg, rgba(12, 17, 27, 0.92), rgba(7, 10, 17, 0.95));
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  text-align: left;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateX(-4px);
  box-shadow: inset 0 0 0 1px var(--line-hot), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
}
.hub-card__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
/* the framed photo */
.hub-card__media {
  width: 86px;
  height: 54px;
  align-self: center;
  border-radius: 7px;
  background: var(--ink-800) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 4px 12px -6px rgba(0, 0, 0, 0.8);
  position: relative;
}
.hub-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(0, 0, 0, 0.32));
}
.hub-card__eyebrow {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text-faint);
}
.hub-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.hub-card__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: 3px;
}
.hub-card__price {
  font-family: var(--f-hud);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--li);
}
.hub-card__badge {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  color: var(--ink-950);
  background: var(--mg); /* discount = hot magenta, as in the ref */
  white-space: nowrap;
}
.hub-card__badge--go {
  background: var(--li); /* yellow for the non-discount tags */
}
.hub-card__note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* the featured offer — yellow frame + glow, like the highlighted ref card */
.hub-card--featured {
  background: linear-gradient(120deg, rgba(255, 200, 40, 0.12), rgba(9, 13, 21, 0.95) 58%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--li) 55%, transparent),
    0 0 24px -12px var(--li);
}
.hub-card--featured .hub-card__media {
  box-shadow: inset 0 0 0 1px var(--li), 0 4px 12px -6px rgba(0, 0, 0, 0.8);
}

.hub-card--subscribe .hub-card__title {
  color: var(--li);
}

/* the two full-bleed photo tiles (FREE CONSULT / COLOUR SWATCHES) */
.hub-card__rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.hub-card--tile {
  grid-template-columns: 1fr;
  align-content: end;
  gap: 1px;
  min-height: 80px;
  padding: 10px 12px;
  background: var(--ink-800) center / cover no-repeat;
}
.hub-card--tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 10, 0.15) 0%, rgba(4, 6, 10, 0.8) 82%);
}
.hub-card--tile > * {
  position: relative;
  z-index: 1;
}
.hub-card--tile .hub-card__title {
  font-size: 0.82rem;
}
.hub-card--tile .hub-card__note {
  font-size: var(--fs-micro);
}

/* ============================================================ BOTTOM-LEFT: ticker */
.hub-ticker {
  position: absolute;
  left: clamp(14px, 1.5vw, 26px);
  bottom: calc(var(--dock-h) + 16px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px, 42vw);
  padding: 8px 14px;
  --cut: 8px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(9, 13, 21, 0.72), rgba(6, 9, 15, 0.58));
  box-shadow: inset 0 0 0 1px var(--line);
}
.hub-ticker__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--cy);
}
.hub-ticker__icon svg {
  width: 16px;
  height: 16px;
}
.hub-ticker__view {
  overflow: hidden;
  mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8% 92%, transparent);
  flex: 1;
  min-width: 0;
}
.hub-ticker__track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: marquee 40s linear infinite;
}
.hub-ticker:hover .hub-ticker__track {
  animation-play-state: paused;
}
.hub-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-hud);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  white-space: nowrap;
}
.hub-ticker__item::before {
  content: "";
  width: 5px;
  height: 5px;
  rotate: 45deg;
  background: var(--li);
  flex: none;
}

/* ============================================================ BOTTOM: dock nav */
.hub-dock {
  grid-area: dock;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: var(--dock-h);
  padding: 8px;
  --cut: 14px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(180deg, rgba(8, 11, 18, 0.92), rgba(5, 7, 12, 0.96));
  box-shadow: inset 0 0 0 1px var(--line), 0 -20px 50px -30px rgba(0, 0, 0, 0.95);
}
.hub-dock__nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.hub-dock__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  padding: 0 clamp(8px, 1.4vw, 22px);
  /* inactive items are WHITE, the active one is YELLOW (like the game ref's
     bottom bar), not the cyan/dim we used before */
  color: var(--text);
  font-family: var(--f-hud);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
}
.hub-dock__item svg {
  width: 22px;
  height: 22px;
  flex: none;
  transition: transform var(--t) var(--ease-snap);
}
.hub-dock__item::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6px;
  height: 2px;
  background: var(--li);
  box-shadow: 0 0 10px var(--li);
  transform: scaleX(0);
  transition: transform var(--t) var(--ease-out);
}
.hub-dock__item:hover,
.hub-dock__item:focus-visible {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
}
.hub-dock__item:hover svg {
  transform: translateY(-2px);
}
.hub-dock__item[aria-current="page"] {
  color: var(--li);
}
.hub-dock__item[aria-current="page"]::after {
  transform: scaleX(1);
}
.hub-dock__item[aria-current="page"] svg {
  filter: drop-shadow(0 0 8px rgba(255, 200, 40, 0.85));
}
.hub-dock__dot {
  position: absolute;
  top: 12px;
  right: 18%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mg);
  box-shadow: 0 0 8px var(--mg);
}
/* the primary "BOOK" — the yellow PLAY, now our GO-lime chevron button */
.hub-dock__book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: 0 0 auto;
  min-width: clamp(150px, 16vw, 230px);
  padding: 0 clamp(18px, 2vw, 34px);
  --cut: 10px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(120deg, var(--li), #f2b70a 60%, var(--li));
  color: var(--ink-950);
  font-family: var(--f-hud);
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  box-shadow: 0 10px 30px -12px rgba(255, 200, 40, 0.6);
  transition: filter var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.hub-dock__book:hover,
.hub-dock__book:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.hub-dock__book:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink-950), 0 10px 30px -12px rgba(255, 200, 40, 0.7);
}
.hub-dock__book .chevs i {
  background: var(--ink-950);
}

/* ============================================================ PANELS ========
   Nav items open a full-screen panel that slides over the scene and scrolls
   internally, reusing the existing section markup. Plain divs (not native
   <dialog>) so the service / build modals can still stack ABOVE a panel via
   z-index — a native dialog would trap them under its top layer. z: panel 90,
   modal 100. */
.screen {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease-out), visibility var(--t);
}
.screen:not(.is-open) {
  pointer-events: none;
}
.screen.is-open {
  opacity: 1;
  visibility: visible;
}
.screen[hidden] {
  display: none;
}
.screen__scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.74);
  backdrop-filter: blur(9px);
}
.screen__frame {
  --cut: 18px;
  position: relative;
  width: min(1240px, 100%);
  height: min(90svh, 940px);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 1px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(150deg, rgba(44, 233, 255, 0.5), rgba(139, 92, 255, 0.28) 55%, rgba(255, 61, 139, 0.4));
  transform: translateY(26px) scale(0.98);
  transition: transform var(--t-slow) var(--ease-snap);
}
.screen.is-open .screen__frame {
  transform: none;
}
.screen__frame::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: var(--clip-bevel);
  background: linear-gradient(160deg, rgba(10, 14, 23, 0.98), rgba(6, 9, 15, 0.99));
  z-index: -1;
}
.screen__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 14px clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--line);
}
.screen__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.screen__title svg {
  width: 22px;
  height: 22px;
  color: var(--cy);
}
.screen__index {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  color: var(--text-faint);
}
.screen__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  color: var(--text-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color var(--t-fast), background var(--t-fast), rotate var(--t) var(--ease-out);
}
.screen__close svg {
  width: 16px;
  height: 16px;
}
.screen__close:hover,
.screen__close:focus-visible {
  color: #fff;
  background: var(--mg);
  rotate: 90deg;
}
.screen__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* the reused sections were built for a full page; tighten their rhythm in a panel */
.screen__scroll .section {
  min-height: 0;
  padding-block: clamp(30px, 4vw, 60px);
  scroll-margin-top: 0;
}
.screen__scroll .section:first-child {
  padding-top: clamp(20px, 3vw, 38px);
}
/* the section's own ambient glows are provided by the hub scene — kill duplicates */
.screen__scroll .footer-pad,
.screen__scroll .ambience {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .screen__frame {
    transform: none;
    transition: none;
  }
}

/* the noscript fallback (a plain stacked page) only shows if JS never runs */
.noscript-fallback {
  display: none;
}

/* reduced motion / motion-off */
.motion-off .hub-studio__crest,
.motion-off .hub-ticker__track {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hub-studio__crest,
  .hub-ticker__track {
    animation: none;
  }
}

/* ============================================================ RESPONSIVE ==== */

/* -------- tablet: the fixed shell becomes a scroll document -------- */
@media (max-width: 1024px) {
  .hub {
    position: relative;
    height: auto;
    overflow: visible;
  }
  .hub__scene {
    position: relative;
    height: 58svh;
    background-position: 50% 42%;
  }
  .hub__grid {
    height: auto;
    display: block;
    padding: 0;
  }
  /* top clusters overlay the hero; the rest flows below it */
  .hub-studio {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 6;
  }
  .hub-trust {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
  }
  .hub-util {
    position: absolute;
    left: 50%;
    bottom: calc(42% + 8px);
    translate: -50% 0;
    z-index: 6;
  }
  .hub-mid {
    position: absolute;
    inset: 0 0 auto 0;
    height: 58svh;
    z-index: 5;
    align-items: end;
  }
  .hub-promo {
    width: auto;
    margin: 16px;
  }
  .hub-cards {
    width: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 8px;
    margin: 0;
  }
  .hub-card {
    scroll-snap-align: start;
  }
  .hub-ticker {
    position: static;
    max-width: none;
    margin: 4px 16px;
  }
  .hub-dock {
    position: sticky;
    bottom: 0;
    z-index: 20;
    border-radius: 0;
    clip-path: none;
    margin-top: 12px;
  }
  .hub-dock__item small,
  .hub-dock__item {
    font-size: var(--fs-xs);
  }
}

/* -------- phone: stacked, fixed bottom tab bar -------- */
@media (max-width: 560px) {
  .hub__scene {
    height: 44svh;
    background-position: 38% 46%; /* favour the car, crop the person */
  }
  /* the dock is position:fixed on phone, so it no longer reserves flow space —
     pad the scroll document or the fixed tab bar covers the last content */
  .hub__grid {
    padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 12px);
  }
  .hub-util {
    display: none; /* utility links live in the panels / footer on phone */
  }
  .hub-studio__id {
    display: none;
  }
  .hub-arrow {
    display: none; /* swipe + dots drive the carousel on phone */
  }
  .hub-trust__rank {
    display: none;
  }
  .hub-trust__pills {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .hub-promo {
    margin: 12px;
  }
  .hub-cards {
    grid-auto-columns: 82%;
  }
  .hub-dock {
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    gap: 0;
  }
  /* dissolve the nav wrapper so its 5 items + BOOK become 6 EQUAL tab slots
     (otherwise nav and BOOK split the bar 50/50 and the 5 items crush together) */
  .hub-dock__nav {
    display: contents;
  }
  .hub-dock__item {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    font-size: 0.5rem;
    padding: 7px 2px;
  }
  .hub-dock__item svg {
    width: 20px;
    height: 20px;
  }
  .hub-dock__item::after {
    left: 30%;
    right: 30%;
    bottom: 3px;
  }
  /* every destination stays reachable on phone — nothing is hidden behind a
     MORE sheet that doesn't exist */
  .hub-dock__item[data-more-hidden] {
    display: flex;
  }
  .hub-dock__book {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    padding: 6px 2px;
    font-size: 0.52rem;
    clip-path: none;
    border-radius: 8px;
  }
  .hub-dock__book .chevs {
    display: none;
  }
  .hub-dock__book .hub-dock__book-label::after {
    content: "";
  }
}

/* ------------------------------------------------------------------ settings */
.settings__body {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  min-width: min(460px, 86vw);
}
.settings__title {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp-2);
}
.settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.settings__label {
  font-family: var(--f-hud);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--track-hud);
  text-transform: uppercase;
  color: var(--text);
}
.settings__note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  max-width: 42ch;
  margin-top: 2px;
}
.settings__foot {
  font-family: var(--f-hud);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-hud);
  color: var(--text-faint);
}