/* ============================================================================
   Pacific Vend - redesign take A: "liquid glass"
   Dark aurora ground, refractive frosted panels, live data from the PVD DB.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root {
  --ink:        #04060c;
  --ink-2:      #080d18;
  --ink-3:      #0d1424;

  --mint:       #00dcb1;   /* existing PV brand green  */
  --cyan:       #01a5d4;   /* existing PV brand blue   */
  --violet:     #7b5cff;
  --amber:      #ffb648;

  --text:       #f2f6ff;
  --muted:      rgba(233, 240, 255, 0.62);
  --faint:      rgba(233, 240, 255, 0.38);

  --glass:      rgba(255, 255, 255, 0.055);
  --glass-hi:   rgba(255, 255, 255, 0.10);
  --edge:       rgba(255, 255, 255, 0.14);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;

  --shell: min(1240px, 92vw);
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Space Grotesk", "Poppins", system-ui, sans-serif;
  --font-body:    "Inter", "Open Sans", system-ui, -apple-system, sans-serif;
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}

::selection { background: var(--mint); color: #04060c; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------- aurora bg */
/* Three slow-drifting colour fields behind everything. Fixed, so the glass
   panels always have something worth refracting as the page scrolls.        */
.aurora {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -2;
  pointer-events: none;
  filter: blur(90px) saturate(140%);
  opacity: 0.85;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 58vw; height: 58vw; left: -8vw; top: 2vh;
  background: radial-gradient(circle at 30% 30%, rgba(0, 220, 177, 0.85), transparent 62%);
  animation: drift-a 26s var(--ease) infinite alternate;
}
.aurora span:nth-child(2) {
  width: 52vw; height: 52vw; right: -6vw; top: 22vh;
  background: radial-gradient(circle at 60% 40%, rgba(1, 165, 212, 0.80), transparent 62%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.aurora span:nth-child(3) {
  width: 46vw; height: 46vw; left: 26vw; top: 58vh;
  background: radial-gradient(circle at 50% 50%, rgba(123, 92, 255, 0.62), transparent 64%);
  animation: drift-c 38s var(--ease) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(14vw, 18vh, 0) scale(1.18); } }
@keyframes drift-b { to { transform: translate3d(-16vw, -12vh, 0) scale(0.86); } }
@keyframes drift-c { to { transform: translate3d(8vw, -22vh, 0) scale(1.24); } }

/* Fine grain keeps the big gradients from banding on cheap panels. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* A vignette so text always wins against the aurora. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(4, 6, 12, 0.72) 100%),
    linear-gradient(180deg, rgba(4, 6, 12, 0.55), transparent 26%, transparent 72%, rgba(4, 6, 12, 0.86));
}

/* ------------------------------------------------------------- glass panel */
/*
   The panel look is three stacked ideas:
     1. a blurred, saturated backdrop           -> the "glass"
     2. a gradient hairline drawn with a mask   -> the polished edge
     3. a moving specular sheen keyed to the
        pointer via --mx / --my                 -> the "liquid"
*/
.glass {
  position: relative;
  background: linear-gradient(160deg, var(--glass-hi), var(--glass) 46%, rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.85),
    0 2px 10px -4px rgba(0, 0, 0, 0.5);
  isolation: isolate;
}

/* Gradient hairline: a 1px ring that catches light at the top-left. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.06) 32%,
    rgba(255, 255, 255, 0.02) 62%,
    rgba(0, 220, 177, 0.30));
  -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;
  pointer-events: none;
  z-index: 2;
}

/* Pointer-tracked specular blob. Sits under content, above the backdrop. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.16),
    rgba(0, 220, 177, 0.07) 32%,
    transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 1;
}
.glass:hover::after,
.glass:focus-within::after { opacity: 1; }

.glass > * { position: relative; z-index: 3; }

/* Progressive enhancement: real refraction where the browser allows an SVG
   displacement filter in backdrop-filter. Everything above already stands on
   its own, so unsupported browsers lose nothing but the wobble.             */
@supports (backdrop-filter: url(#pv-liquid)) {
  .glass--refract {
    backdrop-filter: blur(20px) saturate(180%) url(#pv-liquid);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
}

/* -------------------------------------------------------------- primitives */
.shell {
  width: var(--shell);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint));
}

.lede {
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  max-width: 62ch;
}

.gradient-text {
  background: linear-gradient(104deg, #ffffff 8%, var(--mint) 44%, var(--cyan) 70%, #ffffff 96%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: sheen 9s linear infinite;
}
@keyframes sheen { to { background-position: 260% 0; } }

/* buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1px solid var(--edge);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  background: var(--glass-hi);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary {
  background: linear-gradient(120deg, var(--mint), var(--cyan));
  color: #03121a;
  border-color: transparent;
  box-shadow: 0 14px 40px -16px rgba(0, 220, 177, 0.75);
}
.btn--primary:hover {
  background: linear-gradient(120deg, var(--mint), var(--cyan));
  box-shadow: 0 20px 50px -16px rgba(0, 220, 177, 0.9);
}

/* ------------------------------------------------------------------ navbar */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: var(--shell);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px 10px 20px;
  border-radius: 100px;
  transition: padding 0.4s var(--ease), top 0.4s var(--ease);
}
.nav.is-stuck { top: 8px; }

.nav__logo img { height: 34px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto 0 8px;
  padding: 0;
  list-style: none;
}
.nav__links a {
  display: block;
  padding: 9px 15px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.nav__links .is-external::after {
  content: "↗";
  font-size: 11px;
  opacity: 0.55;
  margin-left: 4px;
}

.nav__cta { padding: 11px 22px; font-size: 14px; }

.nav__burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--glass);
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 12px;
  width: 16px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.nav__burger span:nth-child(1) { top: 16px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 26px; }
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 132px 0 72px;
}

.hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  border-radius: 0;
  mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 78%);
}
.hero__video video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: saturate(120%) contrast(108%);
}

.hero__intro { max-width: min(100%, 940px); }

.hero h1 {
  font-size: clamp(30px, 5vw, 64px);
  margin-bottom: 24px;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: block;
  transform: translateY(105%);
  animation: rise 1s var(--ease) forwards;
}
.hero__intro .lede { max-width: 58ch; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.09s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.18s; }
@keyframes rise { to { transform: translateY(0); } }

/* the four doors ----------------------------------------------------------- */
/*
   The hero's payload. Four equal cards, one per line of business, so the first
   screen answers "what do you sell" rather than "how big are you". Each card
   is a single <a>: the whole panel is the hit target, not just the label.

   --accent is an unwrapped "r, g, b" triplet rather than a colour so the same
   token can drive an opaque icon, a tinted ground and a shadow without three
   variables per door.
*/
.doors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 14px);
  margin-top: clamp(34px, 4.5vw, 56px);
}

.door {
  --accent: 0, 220, 177;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(9px, 0.9vw, 12px);
  padding: clamp(19px, 1.9vw, 26px) clamp(17px, 1.7vw, 24px) clamp(18px, 1.8vw, 24px);
  border-radius: var(--r-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.door--games  { --accent: 1, 165, 212; }
.door--league { --accent: 255, 182, 72; }
.door--beebop { --accent: 123, 92, 255; }

.door:hover,
.door:focus-visible {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.16) inset,
    0 34px 60px -30px rgba(0, 0, 0, 0.9),
    0 12px 40px -22px rgba(var(--accent), 0.7);
}
/* Warm the panel's own hairline to the door's accent on hover. */
.door:hover::before {
  background: linear-gradient(150deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.06) 34%,
    rgba(var(--accent), 0.55));
}

.door__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  color: rgb(var(--accent));
  background: rgba(var(--accent), 0.12);
  border: 1px solid rgba(var(--accent), 0.3);
  margin-bottom: 2px;
}
.door__icon svg { width: 21px; height: 21px; }

.door__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.14;
  letter-spacing: -0.03em;
}
.door__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.door__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(var(--accent));
}
.door__go svg {
  width: 15px; height: 15px;
  transition: transform 0.35s var(--ease);
}
.door:hover .door__go svg { transform: translateX(4px); }

.data-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 22px;
}
.data-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(0, 220, 177, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
.data-badge[data-source="fallback"] .dot { background: var(--amber); animation: none; }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(0, 220, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 220, 177, 0); }
}

/* ------------------------------------------------------------------ section */
.section {
  padding: clamp(80px, 11vw, 150px) 0;
  position: relative;
  scroll-margin-top: 96px; /* clears the fixed nav pill */
}
[id] { scroll-margin-top: 96px; }
.section__head { max-width: 780px; margin-bottom: 54px; }
.section h2 { font-size: clamp(32px, 4.6vw, 58px); margin-bottom: 18px; }

/* ------------------------------------------------------------- live console */
.console {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-xl);
}
.metric {
  padding: 24px 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, #fff, var(--mint));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.metric__label { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* The route publishes one figure, so it sits inside the panel beside the map
   rather than heading a row of tiles. */
.metric--solo {
  background: none;
  border: 0;
  padding: 0;
  /* The tile's clipping exists to keep a background inside its corners. With
     no background and no padding it would only shave the side bearings off
     the first glyph of each line. */
  overflow: visible;
  margin-bottom: 26px;
}
.metric--solo .metric__value { font-size: clamp(38px, 4.4vw, 54px); line-height: 1.05; }
.metric--solo .metric__label { max-width: 36ch; margin-top: 12px; }

.console__viz {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.viz {
  padding: 24px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.viz h4 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.viz p.viz__note { font-size: 12px; color: var(--faint); margin: 0 0 18px; }

/* coverage map */
.map {
  width: 100%;
  height: auto;
  max-height: 360px;
  display: block;
  overflow: visible;
}
.map__land {
  fill: rgba(255, 255, 255, 0.05);
  stroke: rgba(255, 255, 255, 0.30);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map__land[data-province="SK"] { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.15); }

.map__halo {
  fill: var(--mint);
  opacity: 0.10;
  transition: opacity 0.35s var(--ease);
}
.map__dot {
  fill: var(--mint);
  fill-opacity: 0.55;
  stroke: var(--mint);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 0.3s var(--ease);
}
/* Pins draw in from nothing once the panel is on screen. */
.map__pin { transform-box: fill-box; transform-origin: center; }
.is-visible .map__pin {
  animation: pin-in 0.6s var(--ease) backwards;
}
.map__pin:nth-child(4n)   { animation-delay: 0.05s; }
.map__pin:nth-child(4n+1) { animation-delay: 0.12s; }
.map__pin:nth-child(4n+2) { animation-delay: 0.19s; }
.map__pin:nth-child(4n+3) { animation-delay: 0.26s; }
@keyframes pin-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }

.map__pin:hover .map__dot,
.map__pin:focus-visible .map__dot { fill-opacity: 0.9; }
.map__pin:hover .map__halo,
.map__pin:focus-visible .map__halo { opacity: 0.26; }
.map__pin:focus-visible { outline: none; }

.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--muted);
}
.map__legend li { display: flex; align-items: center; gap: 8px; }
.map__legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.legend__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mint);
  opacity: 0.75;
}
.legend__dot[data-province="SK"] { opacity: 0.4; }

/* partner venues */
.venues { list-style: none; margin: 0; padding: 0; }
.venues li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.venues li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.venues__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.02em;
  min-width: 0;
}
.venues__city {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  opacity: 0.7;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ pillars */
.pillars {
  display: grid;
  /* minmax(0,…) so the horizontally scrolling product rail cannot
     stretch the track to its intrinsic width and overflow the page. */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.pillar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(26px, 3.6vw, 52px);
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* Media side alternates down the page. Flagged explicitly rather than by
   nth-child: each pillar now sits in its own <section>, so DOM position no
   longer tracks position on the page. */
.pillar--flip .pillar__media { order: -1; }

.pillar__index {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--faint);
  margin-bottom: 18px;
  display: block;
}
.pillar h2,
.pillar h3 {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-bottom: 16px;
}
.pillar p { color: var(--muted); margin: 0 0 22px; }

/* An affiliate's own mark, above the heading. PV Pool League and Beebop are
   distinct brands - one of them a separate company - so each is introduced by
   its logo and a line saying how it relates to Pacific Vend. */
.pillar__brand {
  width: auto;
  max-width: min(72%, 230px);
  max-height: 88px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
}
/* The Beebop mark ships on its own near-black ground; screen blending drops
   that ground against the panel and keeps only the gold. */
.pillar__brand--screen { mix-blend-mode: screen; max-height: 54px; }

.pillar__rel {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px !important;
}
/* Beebop is a separate company; the warmer label makes that read as a
   distinction rather than a subtitle. */
.pillar__rel--partner { color: rgba(255, 182, 72, 0.85); }

.pillar__points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 11px;
  font-size: 14.5px;
}
.pillar__points li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  color: var(--muted);
}
.pillar__points li::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background:
    linear-gradient(120deg, var(--mint), var(--cyan));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px no-repeat;
}

.pillar__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-3);
}
.pillar__media img,
.pillar__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.pillar:hover .pillar__media img,
.pillar:hover .pillar__media video { transform: scale(1.08); }

.pillar__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 40%, rgba(4, 6, 12, 0.55));
  pointer-events: none;
}

/* floating figure chip over media */
.chip {
  position: absolute;
  z-index: 2;
  bottom: 18px; left: 18px;
  padding: 12px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(8, 12, 22, 0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--edge);
}
.chip b {
  font-family: var(--font-display);
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- catalogue rail */
.rail {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(300px, 74vw);
  gap: 16px;
  overflow-x: auto;
  padding: 6px 2px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 99px; }

.product {
  scroll-snap-align: start;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease);
}
.product:hover { transform: translateY(-6px); }
.product__img {
  aspect-ratio: 5 / 4;
  background: var(--ink-3);
  overflow: hidden;
}
.product__img img { width: 100%; height: 100%; object-fit: cover; }
.product__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product__cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
}
.product__name { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.02em; }
.product__desc {
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__price {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.product__price small { font-size: 13px; font-weight: 500; color: var(--faint); letter-spacing: 0; }

/* --------------------------------------------------------------------- cta */
.cta {
  padding: clamp(34px, 5vw, 74px);
  border-radius: var(--r-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta h2 { font-size: clamp(30px, 4.6vw, 56px); margin-bottom: 18px; }
.cta .lede { margin: 0 auto 34px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------------ footer */
.footer { padding: 70px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 46px;
}
.footer h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 14px;
}
.footer p, .footer li { color: var(--muted); font-size: 14px; margin: 0 0 7px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer a:hover { color: var(--text); }
.footer__logo img { height: 42px; margin-bottom: 16px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--faint);
}

/* --------------------------------------------------------- reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 1080px) {
  /* Below this the row cannot hold four readable cards. Two rows push half the
     offer under the fold, so the hero drops its 100svh floor at 900px and the
     doors are simply scrolled to. */
  .doors         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console__viz  { grid-template-columns: minmax(0, 1fr); }
  .footer__grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav__links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px;
    border-radius: var(--r-md);
    background: rgba(8, 12, 22, 0.86);
    backdrop-filter: blur(26px) saturate(170%);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid var(--edge);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__burger { display: block; margin-left: auto; }
  .nav__cta { display: none; }

  .hero         { min-height: 0; padding: 118px 0 64px; }
  .pillar       { grid-template-columns: minmax(0, 1fr); }
  .pillar--flip .pillar__media { order: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .footer__grid  { grid-template-columns: 1fr; }
  .doors         { grid-template-columns: minmax(0, 1fr); }
}

/* Respect people who would rather the page held still. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
}

/* ============================================================================
   Catalogue page
   ========================================================================= */

.catalogue { padding: 150px 0 90px; }
.catalogue__head { max-width: 760px; margin-bottom: 34px; }
.catalogue__head h1 { font-size: clamp(38px, 5.6vw, 68px); margin-bottom: 18px; }

/* toolbar --------------------------------------------------------------- */
.toolbar {
  padding: 18px;
  border-radius: var(--r-lg);
  display: grid;
  gap: 16px;
  margin-bottom: 26px;
}

.toolbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 14px;
  border-radius: 100px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.05);
}
.toolbar__search svg { width: 18px; height: 18px; flex: none; color: var(--faint); }
.toolbar__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 15.5px;
  padding: 12px 0;
  outline: none;
}
.toolbar__search input::placeholder { color: var(--faint); }
/* Safari draws its own clear affordance on type=search; ours is consistent. */
.toolbar__search input::-webkit-search-cancel-button { display: none; }

.toolbar__clear {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.toolbar__clear:hover { color: var(--text); background: rgba(255, 255, 255, 0.14); }

.toolbar__facets { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 100px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.chip-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.chip-btn b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.chip-btn.is-on {
  background: linear-gradient(120deg, var(--mint), var(--cyan));
  border-color: transparent;
  color: #03121a;
}
.chip-btn.is-on b { color: rgba(3, 18, 26, 0.65); }

.catalogue__count {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
}

/* grid ------------------------------------------------------------------- */
.catalogue__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap: 16px;
}
.catalogue__grid .product { scroll-snap-align: none; }

.product__flag {
  position: absolute;
  z-index: 4;
  top: 12px; left: 12px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(120deg, var(--amber), #ff8a3d);
  color: #2a1400;
}
.product__meta {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

/* skeletons -------------------------------------------------------------- */
.product--skeleton .product__img { background: rgba(255, 255, 255, 0.05); }
.sk {
  display: block;
  height: 11px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
  background-size: 220% 100%;
  animation: sk 1.4s linear infinite;
}
.sk--sm { width: 38%; }
.sk--lg { width: 76%; height: 16px; }
@keyframes sk { to { background-position: -220% 0; } }

/* empty + pager ---------------------------------------------------------- */
.catalogue__empty {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-lg);
  text-align: center;
  margin-top: 8px;
}
.catalogue__empty h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 10px; }
.catalogue__empty p { color: var(--muted); margin: 0 auto 22px; max-width: 52ch; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}
.pager__status {
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 12ch;
  text-align: center;
}
.pager .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.pager .btn:disabled:hover { background: var(--glass); border-color: var(--edge); box-shadow: none; }

@media (max-width: 620px) {
  .catalogue { padding: 120px 0 70px; }
  .pager { gap: 10px; }
  .pager .btn { padding: 12px 16px; font-size: 14px; }
}