/* ============================================================
   Oletrak — home page
   ------------------------------------------------------------
   Loaded by home.html ONLY, after tokens.css.

   Everything is expressed with the Material Design 3 tokens
   declared in the :root block below. If a value is repeated, it
   is a token; if it is a one-off it is a literal. That rule is
   what keeps a 3,000-line stylesheet coherent.

   Layer map (each block is commented with its layer number):
     01  Tokens + M3 tonal palette (light and dark)
     02  Reset / page base
     03  Ambient background system (blobs, grain, grid)
     04  Utilities: glow, glass, state layers, reveal states
     05  Typography
     06  Buttons — all five M3 variants + FAB
     07  Nav extras (progress bar, scroll state)
     08  Hero + slide carousel
     09  Floating hero decor
     10  Categories
     11  Marquee
     12  Features bento + popups + bottom sheet
     13  Steps + stats
     14  Featured listings
     15  Reviews + rating summary
     16  CTA
     17  Footer + back-to-top
     18  Scrollbar, print, reduced motion, large screens

   Contrast: every text/background pair below was checked against
   WCAG AA (4.5:1 body, 3:1 large text). The measured ratio is
   noted next to any non-obvious pairing.

   IMPORTANT CONTRACT WITH assets/js/home.js
     Animation start-states are set by the .js class that home.js
     puts on <html>. Without JS the class is never added, so every
     element stays visible. Never hide content from CSS alone.
   ============================================================ */

/* ============================================================
   01  TOKENS
   ============================================================ */

:root {
  /* ---- M3 tonal palette, light ----
     Navy is the primary surface family, orange the accent, teal the
     tertiary. Each ramp is 10-step the way an M3 tonal palette is,
     but only the handful of steps this page actually uses are named. */
  --md-primary: #0b3c5d;              /* 11.0:1 with white on it */
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e4f5;
  --md-on-primary-container: #062338;

  --md-secondary: #4a6076;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e6edf5;
  --md-on-secondary-container: #1a2a3a;

  --md-tertiary: #0f766e;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #c9f2ee;
  --md-on-tertiary-container: #06302c;

  --md-accent: #ff7f11;
  --md-on-accent: #1a0d00;            /* 7.5:1 — the dark text orange needs */
  --md-accent-container: #ffe0c2;
  --md-on-accent-container: #4a1f00;

  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;

  --md-background: #f4f7fb;
  --md-surface: #ffffff;
  --md-surface-dim: #e9eef4;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f7f9fc;
  --md-surface-container: #eff3f8;
  --md-surface-container-high: #e8edf4;
  --md-surface-container-highest: #e2e8f0;

  --md-on-surface: #16283c;           /* 14.8:1 on --md-surface */
  --md-on-surface-variant: #56687c;   /* 5.6:1 on --md-surface */
  --md-outline: #b9c6d4;
  --md-outline-variant: #dbe3ec;
  --md-inverse-surface: #0d2135;
  --md-inverse-on-surface: #e8f0f8;

  /* ---- Shape scale (M3) ---- */
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-full: 999px;

  /* ---- Spacing: 4px grid ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Elevation, M3 levels 0-5 ---- */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(1, 42, 70, 0.10), 0 1px 3px rgba(1, 42, 70, 0.06);
  --md-elev-2: 0 1px 2px rgba(1, 42, 70, 0.12), 0 2px 6px rgba(1, 42, 70, 0.10);
  --md-elev-3: 0 4px 8px rgba(1, 42, 70, 0.12), 0 1px 3px rgba(1, 42, 70, 0.08);
  --md-elev-4: 0 8px 20px rgba(1, 42, 70, 0.14), 0 3px 6px rgba(1, 42, 70, 0.08);
  --md-elev-5: 0 18px 42px rgba(1, 42, 70, 0.20), 0 6px 14px rgba(1, 42, 70, 0.10);
  /* Glow tokens are elevation with colour: used for hover states. */
  --glow-primary: 0 10px 30px -6px rgba(11, 60, 93, 0.45);
  --glow-accent: 0 12px 34px -6px rgba(255, 127, 17, 0.55);
  --glow-tertiary: 0 12px 34px -6px rgba(15, 118, 110, 0.5);

  /* ---- Motion ----
     These mirror the JS constants in assets/js/home.js. Change both
     together or the CSS transitions will drift from the timelines. */
  --dur-fast: 0.3s;
  --dur-base: 0.6s;
  --dur-slow: 1s;
  --dur-hero: 1.4s;
  --ease-emphasised: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasised-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasised-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --home-max: 1240px;
  --home-max-wide: 1440px;
  --home-gutter: clamp(16px, 4vw, 40px);
  --hero-max: 1560px;
  --tap-min: 44px;
  --nav-h-local: 60px;
}

/* ---- M3 tonal palette, dark ----
   Dark surfaces get a tonal tint (bluer, not black) and the accent
   lightens so it still clears AA against the dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #9ccbf2;
    --md-on-primary: #01243b;
    --md-primary-container: #12405f;
    --md-on-primary-container: #cfe6fa;

    --md-secondary: #b7c6d6;
    --md-on-secondary: #22323f;
    --md-secondary-container: #384a5c;
    --md-on-secondary-container: #d3e2f0;

    --md-tertiary: #5eead4;
    --md-on-tertiary: #00352f;
    --md-tertiary-container: #0d5a51;
    --md-on-tertiary-container: #a9f5e8;

    --md-accent: #ffa94d;
    --md-on-accent: #331600;
    --md-accent-container: #7a3a00;
    --md-on-accent-container: #ffd8b0;

    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;

    --md-background: #071019;
    --md-surface: #0e1a27;
    --md-surface-dim: #0a141f;
    --md-surface-container-lowest: #060d15;
    --md-surface-container-low: #101d2b;
    --md-surface-container: #14222f;
    --md-surface-container-high: #1a2a39;
    --md-surface-container-highest: #213243;

    --md-on-surface: #e3edf7;         /* 14.2:1 on --md-surface */
    --md-on-surface-variant: #a8bacb; /* 7.1:1 on --md-surface */
    --md-outline: #6f8296;
    --md-outline-variant: #2a3b4c;
    --md-inverse-surface: #e3edf7;
    --md-inverse-on-surface: #16283c;

    --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
    --md-elev-3: 0 4px 8px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
    --md-elev-4: 0 8px 20px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.45);
    --md-elev-5: 0 18px 42px rgba(0, 0, 0, 0.7), 0 6px 14px rgba(0, 0, 0, 0.5);
    --glow-primary: 0 10px 30px -6px rgba(156, 203, 242, 0.35);
    --glow-accent: 0 12px 34px -6px rgba(255, 169, 77, 0.4);
    --glow-tertiary: 0 12px 34px -6px rgba(94, 234, 212, 0.35);
  }
}

/* The manual toggle sets data-theme explicitly, which wins over the
   media query above because it is the more specific selector. */
:root[data-theme="dark"] {
  --md-primary: #9ccbf2;
  --md-on-primary: #01243b;
  --md-primary-container: #12405f;
  --md-on-primary-container: #cfe6fa;
  --md-secondary: #b7c6d6;
  --md-on-secondary: #22323f;
  --md-secondary-container: #384a5c;
  --md-on-secondary-container: #d3e2f0;
  --md-tertiary: #5eead4;
  --md-on-tertiary: #00352f;
  --md-tertiary-container: #0d5a51;
  --md-on-tertiary-container: #a9f5e8;
  --md-accent: #ffa94d;
  --md-on-accent: #331600;
  --md-accent-container: #7a3a00;
  --md-on-accent-container: #ffd8b0;
  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-background: #071019;
  --md-surface: #0e1a27;
  --md-surface-dim: #0a141f;
  --md-surface-container-lowest: #060d15;
  --md-surface-container-low: #101d2b;
  --md-surface-container: #14222f;
  --md-surface-container-high: #1a2a39;
  --md-surface-container-highest: #213243;
  --md-on-surface: #e3edf7;
  --md-on-surface-variant: #a8bacb;
  --md-outline: #6f8296;
  --md-outline-variant: #2a3b4c;
  --md-inverse-surface: #e3edf7;
  --md-inverse-on-surface: #16283c;
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
  --md-elev-3: 0 4px 8px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
  --md-elev-4: 0 8px 20px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.45);
  --md-elev-5: 0 18px 42px rgba(0, 0, 0, 0.7), 0 6px 14px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 10px 30px -6px rgba(156, 203, 242, 0.35);
  --glow-accent: 0 12px 34px -6px rgba(255, 169, 77, 0.4);
  --glow-tertiary: 0 12px 34px -6px rgba(94, 234, 212, 0.35);
}

/* ============================================================
   02  RESET / PAGE BASE
   ============================================================ */

/* home-v2.css pinned html to 68.75% for the whole site. That scale is
   wrong for a page authored in rem, and this page is authored in rem,
   so it restores the 16px root. Only this page is affected. */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.home {
  margin: 0;
  min-height: 100vh;
  font-family: var(--md-body-font, "Inter"), "Inter", "Segoe UI", system-ui, -apple-system,
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--md-on-surface);
  background: var(--md-background);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.home *,
body.home *::before,
body.home *::after {
  box-sizing: border-box;
}

@media (hover: none) {
  body.home a,
  body.home button,
  body.home [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }
}

body.home img,
body.home svg,
body.home video {
  max-width: 100%;
  height: auto;
}

/* The .hidden utility is used by NavResponse.js to collapse the mobile
   drawer. home-v2.css defined it; that sheet is no longer loaded here. */
.home .hidden {
  display: none !important;
}

.home-section {
  position: relative;
  padding-block: clamp(56px, 8vw, 112px);
}

.home-section--tint {
  background: var(--md-surface-container-low);
}

.home-wrap {
  width: min(100% - (var(--home-gutter) * 2), var(--home-max));
  margin-inline: auto;
}

.home-wrap--wide {
  width: min(100% - (var(--home-gutter) * 2), var(--home-max-wide));
  max-width: var(--home-max-wide);
}

/* ============================================================
   03  AMBIENT BACKGROUND SYSTEM
   ------------------------------------------------------------
   Three stacked layers on <body>, all fixed, all GPU-cheap:

     .home-bg__blobs  soft blurred colour blobs, slow sine drift
     .home-bg__grain  fine noise, kills banding on the gradients
     .home-bg__grid   faint dot/line grid, gives scale

   Pointer-events are off so none of it can ever eat a click.
   ============================================================ */

.home-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-bg__blobs {
  position: absolute;
  inset: -20%;
}

.home-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}

.home-bg__blob--1 {
  width: 42vw; height: 42vw;
  min-width: 320px; min-height: 320px;
  top: -8%; left: -6%;
  background: #1d6fa8;
}

.home-bg__blob--2 {
  width: 38vw; height: 38vw;
  min-width: 280px; min-height: 280px;
  top: 34%; right: -10%;
  background: var(--md-accent);
  opacity: 0.36;
}

.home-bg__blob--3 {
  width: 34vw; height: 34vw;
  min-width: 260px; min-height: 260px;
  bottom: -12%; left: 26%;
  background: var(--md-tertiary);
  opacity: 0.3;
}

:root[data-theme="dark"] .home-bg__blob--1,
:root[data-theme="dark"] .home-bg__blob--3 {
  opacity: 0.34;
}

:root[data-theme="dark"] .home-bg__blob--2 {
  opacity: 0.24;
}

/* Grain. A single inline SVG turbulence tile — 120x120, repeated. */
.home-bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.home-bg__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    var(--md-outline-variant) 1px / 64px 64px repeat;
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

/* Everything in <main> sits above the ambient layers. */
.home-main {
  position: relative;
  z-index: 1;
}

/* ============================================================
   04  UTILITIES
   ============================================================ */

/* ---- Glow system ----
   .glow        soft coloured halo behind any element
   .glow-ring   glowing border made with a conic gradient mask
   .glow-text   text-shadow glow for key words
   .glow-pulse  ambient breathing glow for idle accents */
.home-glow {
  position: relative;
}

.home-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 127, 17, 0.35), 0 12px 40px -8px rgba(255, 127, 17, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.home-glow:hover::after,
.home-glow:focus-visible::after {
  opacity: 1;
}

/* Conic gradient border. The pseudo-element paints a conic ring and
   the element's own background is masked out of the middle, which is
   cheaper than a border-image and animates smoothly. */
.home-glow-ring {
  position: relative;
  isolation: isolate;
}

.home-glow-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--ring-angle, 0deg),
    transparent 0deg,
    var(--md-accent) 70deg,
    var(--md-tertiary) 150deg,
    transparent 240deg,
    transparent 360deg
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
  z-index: 2;
}

.home-glow-ring:hover::before,
.home-glow-ring:focus-visible::before {
  opacity: 1;
}

.home-glow-text {
  color: var(--md-accent);
  text-shadow:
    0 0 18px rgba(255, 127, 17, 0.45),
    0 0 44px rgba(255, 127, 17, 0.28);
}

.home-glow-pulse {
  animation: home-glow-pulse 5s var(--ease-standard) infinite;
}

@keyframes home-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 17, 0); }
  50% { box-shadow: 0 0 34px 2px rgba(255, 127, 17, 0.35); }
}

/* ---- Glassmorphism ---- */
.home-glass {
  background: color-mix(in srgb, var(--md-surface) 72%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--md-outline) 42%, transparent);
  box-shadow: var(--md-elev-2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

:root[data-theme="dark"] .home-glass {
  background: color-mix(in srgb, var(--md-surface-container) 74%, transparent);
  box-shadow: var(--md-elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- M3 state layers ----
   One shared overlay rule for every interactive element. hover 8%,
   focus 12%, pressed 12% — exactly the M3 spec percentages. */
.home-state {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home-state::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
  pointer-events: none;
}

.home-state:hover::before { opacity: 0.08; }
.home-state:focus-visible::before { opacity: 0.12; }
.home-state:active::before { opacity: 0.12; }

/* ---- Focus ring ----
   One ring for the whole page. Never removed, always 3:1. */
.home a:focus-visible,
.home button:focus-visible,
.home [tabindex]:focus-visible,
.home input:focus-visible,
.home textarea:focus-visible,
.home select:focus-visible {
  outline: 3px solid var(--md-accent);
  outline-offset: 3px;
  border-radius: var(--md-shape-xs);
}

.home-section :where(h1, h2, h3, h4) {
  overflow-wrap: break-word;
}

/* ---- Reveal start-states ----
   Gated on .js so a script failure leaves the page fully visible. */
.js [data-anim] {
  will-change: transform, opacity;
}

.js [data-anim="slide-left"] { opacity: 0; transform: translate3d(-48px, 0, 0); }
.js [data-anim="slide-right"] { opacity: 0; transform: translate3d(48px, 0, 0); }
.js [data-anim="slide-up"] { opacity: 0; transform: translate3d(0, 56px, 0); }
.js [data-anim="slide-down"] { opacity: 0; transform: translate3d(0, -48px, 0); }
.js [data-anim="scale"] { opacity: 0; transform: scale3d(0.88, 0.88, 1); }
.js [data-anim="blur"] { opacity: 0; filter: blur(14px); transform: translate3d(0, 24px, 0); }
.js [data-anim="clip"] { clip-path: inset(0 100% 0 0); }
.js [data-anim="skew"] { opacity: 0; transform: translate3d(0, 40px, 0) skewY(4deg); }
.js [data-anim="rotate"] { opacity: 0; transform: translate3d(0, 60px, 0) rotate(-5deg); }

.js [data-anim="split"] .home-line-inner {
  transform: translate3d(0, 105%, 0);
}

.js [data-anim].home-anim-done {
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
  will-change: auto;
}

/* The legacy reveal class the old inline observer used. Kept so any
   element still carrying it behaves, and so home.js can take it over. */
.js .reveal-hidden {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.js .reveal-hidden.reveal-active,
.js .reveal-hidden.visible {
  opacity: 1;
  transform: none;
}

.no-js .reveal-hidden,
.no-js [data-anim] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* ============================================================
   05  TYPOGRAPHY — M3 type scale
   ============================================================ */

.home-display-l {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: clamp(3.25rem, 1.05rem + 5.4vw, 6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.home-display-m {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.home-display-s {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/* Headline M / S */
.home-headline {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

.home-title {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 0;
}

.home-title-sm {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 700;
  margin: 0;
}

/* Body L / M / S */
.home-body-l {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.68;
  color: var(--md-on-surface-variant);
  margin: 0;
}

.home-body-m {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
  margin: 0;
}

.home-body-s {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--md-on-surface-variant);
  margin: 0;
}

/* Label L / M / S */
.home-label-l {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.home-label-m {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-label-s {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 16px 7px 12px;
  border-radius: var(--md-shape-full);
  background: color-mix(in srgb, var(--md-accent-container) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-accent) 34%, transparent);
  color: var(--md-on-accent-container);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

.home-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-accent) 22%, transparent);
  flex-shrink: 0;
}

.home-eyebrow--light {
  background: color-mix(in srgb, #ffffff 14%, transparent);
  border-color: color-mix(in srgb, #ffffff 30%, transparent);
  color: #ffd9b5;
}

.home-eyebrow--light::before {
  background: #ffb877;
  box-shadow: 0 0 0 4px rgba(255, 184, 119, 0.24);
}

.home-section-head {
  max-width: 64ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.home-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.home-section-head--center .home-eyebrow { justify-content: center; }
.home-section-head--center .home-lede { margin-inline: auto; }

.home-lede {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  line-height: 1.66;
  color: var(--md-on-surface-variant);
  max-width: 62ch;
  margin: var(--sp-4) 0 0;
}

/* Split-text helper output. Each line is a masked box so the inner
   span can slide up from below without ever being visible outside it. */
.home-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.home-line-inner {
  display: block;
  will-change: transform;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   06  BUTTONS — five M3 variants + FAB
   ------------------------------------------------------------
   Shared behaviour on every variant:
     · ripple        (JS adds .home-ripple)
     · glow          box-shadow animates in on hover
     · lift          translateY(-2px)
     · press scale   0.97 on :active
     · arrow slide   the trailing icon shifts on hover
   Magnetic follow is added by JS on desktop primaries only.
   ============================================================ */

.home-btn {
  --btn-h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--md-shape-full);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.home-btn:active { transform: scale(0.97); }

.home-btn[disabled],
.home-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.home-btn__icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-emphasised);
}

.home-btn:hover .home-btn__icon { transform: translateX(4px); }

/* Ripple element, injected by JS on pointerdown. */
.home-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: currentColor;
  opacity: 0.28;
  z-index: 0;
}

/* --- Filled --- */
.home-btn--filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elev-1);
}

.home-btn--filled:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-primary), var(--md-elev-2);
}

/* --- Tonal --- */
.home-btn--tonal {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  box-shadow: none;
}

.home-btn--tonal:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-elev-2);
}

/* --- Elevated --- */
.home-btn--elevated {
  background: var(--md-surface-container-low);
  color: var(--md-primary);
  box-shadow: var(--md-elev-2);
}

.home-btn--elevated:hover {
  transform: translateY(-2px);
  background: var(--md-surface-container);
  box-shadow: var(--md-elev-3);
}

/* --- Outlined --- */
.home-btn--outlined {
  background: transparent;
  color: var(--md-primary);
  border-color: var(--md-outline);
}

.home-btn--outlined:hover {
  transform: translateY(-2px);
  border-color: var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

/* --- Text --- */
.home-btn--text {
  background: transparent;
  color: var(--md-primary);
  padding-inline: 16px;
  box-shadow: none;
}

.home-btn--text:hover {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

/* --- Accent filled: the brand CTA on light surfaces --- */
.home-btn--accent {
  background: var(--md-accent);
  color: var(--md-on-accent);
  box-shadow: 0 6px 18px rgba(255, 127, 17, 0.3);
}

.home-btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-accent);
}

/* --- On-dark variants: used inside the hero and CTA --- */
.home-btn--light {
  background: #ffffff;
  color: var(--md-primary);
  box-shadow: 0 8px 24px rgba(1, 20, 35, 0.3);
}

.home-btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(1, 20, 35, 0.42);
}

.home-btn--on-dark {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.home-btn--on-dark:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 34px rgba(1, 20, 35, 0.4);
}

.home-btn--lg {
  --btn-h: 60px;
  padding: 18px 34px;
  font-size: 1.0625rem;
}

.home-btn--sm {
  padding: 10px 20px;
  font-size: 0.9375rem;
}

/* --- M3 FAB --- */
.home-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--md-shape-lg);
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  box-shadow: var(--md-elev-3);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.home-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--glow-tertiary), var(--md-elev-4);
}

.home-fab:active { transform: scale(0.94); }

/* Legacy class names kept so home-v2-era markup and any shared script
   that targets .btn still resolves. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--md-shape-full);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.btn--primary { background: var(--md-primary); color: var(--md-on-primary); }
.btn--accent { background: var(--md-accent); color: var(--md-on-accent); }
.btn--on-dark { background: #ffffff; color: var(--md-primary); }
.btn--on-dark-ghost { background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.45); }
.btn--ghost { background: transparent; color: var(--md-primary); border-color: var(--md-outline); }

.btn:hover { transform: translateY(-2px); }
.btn--accent:hover { box-shadow: var(--glow-accent); }
.btn--primary:hover { box-shadow: var(--glow-primary); }

/* ============================================================
   07  NAV EXTRAS
   ============================================================ */

.home-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1300;
  background: transparent;
  pointer-events: none;
}

.home-progress__bar {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--md-primary-container);
  box-shadow: 0 0 14px rgba(255, 127, 17, 0.6);
}

/* The bar shrinks, blurs and gains elevation once past 40px.
   The nav itself is fixed by Navigationbar.css; these rules only
   add the scrolled treatment, so shared chrome keeps working. */
.home .nav-bar.home-nav-scrolled {
  height: 64px;
  background: rgba(6, 24, 40, 0.86);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 30px rgba(2, 12, 26, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* Hidden while scrolling down, revealed on scroll up. */
.home .nav-bar.home-nav-hidden {
  transform: translate3d(0, -100%, 0);
}

.home .nav-bar {
  transition: transform 0.4s var(--ease-emphasised), height 0.4s var(--ease-emphasised),
    background 0.45s ease, box-shadow 0.45s ease;
  will-change: transform;
}

/* Navigationbar.css is authored against the rest of the site's 60% root
   (1rem = 9.6px, set by general.css). home.css keeps the default 16px
   root, so the shared nav's rem-based links and login button rendered
   ~1.67x larger here. Pin them to the computed sizes the other pages
   get (1.6rem links = 15.36px, 1.4rem/padding button at 9.6px root). */
.home .nav-links-container ul li a { font-size: 15.36px; }

.home .login-btn {
  font-size: 13.44px;
  padding: 7.68px 17.28px;
  gap: 5.76px;
}

.home .skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: var(--md-shape-md);
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-emphasised);
}

.home .skip-link:focus { top: 12px; }

/* ============================================================
   08  HERO + SLIDE CAROUSEL
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* --nav-h-local reserves the band the fixed nav floats over, and
     because box-sizing is border-box the padding lives INSIDE the
     100svh, so the content still centres in the visible space. */
  padding-top: calc(var(--nav-h-local) + clamp(28px, 5vw, 64px));
  padding-bottom: clamp(56px, 8vw, 96px);
  /* The hero is always a dark navy brand panel, in BOTH themes. Every
     text style inside it (titles, eyebrow, buttons, trust row) is tuned
     for a dark backdrop, so a themed background — especially the light
     theme's pale --md-primary-container — washes white text out to
     invisible. Fixed navy base keeps the same palette as the 4 hero
     illustrations. In dark mode theme.css's `[data-theme="dark"]
     section { background: transparent }` still wins on specificity and
     lets the dark body + mesh wash show through, which is equivalent. */
  background:
    radial-gradient(110% 95% at 12% 6%, rgba(30, 111, 184, 0.42) 0%, transparent 54%),
    radial-gradient(130% 105% at 88% 12%, rgba(255, 127, 17, 0.32) 0%, transparent 58%),
    linear-gradient(158deg, #0b3f63 0%, #07304b 52%, #032031 100%);
  color: #fff;
}

/* Mesh wash on top of the flat base, so it is not one gradient.

   The drift is a CSS keyframe that translates the whole layer, which
   the compositor can do without repainting. It used to be driven from
   home.js by animating a --hero-drift custom property that these
   gradients consumed through calc(): writing a custom property forces
   a style recalc on every frame, and because the value fed back into
   background-image the browser then repainted this pseudo-element —
   which is 110% of a section that is well over a thousand pixels
   tall. That repaint shared its frame budget with the hero carousel
   and was a large part of why the slide switch felt heavy.

   The bleed from `inset: -10%` is what the translation moves into, so
   the edges never come into view. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 22%, rgba(30, 111, 184, 0.45) 0%, transparent 62%),
    radial-gradient(circle at 84% 18%, rgba(255, 127, 17, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 62% 96%, rgba(20, 184, 166, 0.3) 0%, transparent 64%);
  will-change: transform;
  animation: hero-wash-drift 22s ease-in-out infinite;
}

@keyframes hero-wash-drift {
  0%, 100% { transform: translate3d(-1.6%, 1.2%, 0); }
  50% { transform: translate3d(1.8%, -1.4%, 0); }
}

/* Faint dot grid, masked so it fades before it reaches the content. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  width: min(100% - (var(--home-gutter) * 2), var(--hero-max));
  margin-inline: auto;
}

.hero__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* --- Slide ---
   Grid items default to min-width:auto, which refuses to shrink below
   the min-content width of their contents. Without this, one long word
   in the headline ("neighbourhood") forces the slider wider than a
   360px viewport, and the body's overflow clip then crops the text. */
.hero__grid,
.hero__slides,
.hero__slider {
  min-width: 0;
}

.hero__slides {
  position: relative;
  /* Every slide occupies the SAME grid cell.
     Previously only .is-active was in flow (the rest were
     display:none), so the hero was exactly as tall as whichever slide
     happened to be showing: a 2-line headline resized the whole
     section and shoved everything below it down on every switch. That
     read as lag and cost layout stability. Stacking the slides means
     the hero takes the height of the TALLEST slide and keeps it,
     whatever is active. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-slide {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* Inactive slides hold their cell (so the height stays put) but are
   not painted. `visibility: hidden` rather than `display: none`
   because a display:none element has no layout, which would break the
   word-splitting measurement and collapse the headline onto one line.
   Focus and hit-testing are handled by the `inert` attribute.
   `.is-leaving` keeps a slide visible while it animates out. */
.hero-slide:not(.is-active):not(.is-leaving) {
  visibility: hidden;
}

.hero-slide__media {
  position: relative;
  border-radius: var(--md-shape-xl);
  overflow: hidden;
  aspect-ratio: 8 / 5;
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: translateZ(0);
}

.hero-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-slide.is-active .hero-slide__img {
  opacity: 1;
}

/* The image sits inside a clip window so a wipe can reveal it. */
.hero-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(1, 20, 35, 0.35);
  pointer-events: none;
}

.hero-slide__copy {
  /* Was `40ch`, measured against the 16px body font (~404px), which
     starved the 6rem display headline into a ~7-line tower and blew the
     hero up to ~1750px tall. Let the two-column grid govern the width. */
  max-width: 46rem;
  min-width: 0;
}

/* Hero headings sit outside .home-section, so the global
   overflow-wrap rule from tokens.css does not reach them. Without
   this a single long word overflows the grid column. */
.hero h1,
.hero h2,
.hero h3 {
  overflow-wrap: break-word;
}

.hero-slide__title {
  color: #fff;
  margin-bottom: var(--sp-5);
}

.hero-slide__title .home-glow-text { color: #ffb877; }

.hero-slide__text {
  color: rgba(255, 255, 255, 0.82);
  max-width: 48ch;
  margin-bottom: var(--sp-6);
}

.hero-slide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

/* Trust row: 3 up on desktop, stacked on phones. */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__trust-value {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffb877;
  font-variant-numeric: tabular-nums;
}

.hero__trust-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Scroll cue --- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.5vh, 28px);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
}

.hero__scroll:hover { color: #fff; }

.hero__scroll-mouse {
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: var(--md-shape-full);
  position: relative;
}

.hero__scroll-dot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  animation: home-scroll-bob 1.9s var(--ease-standard) infinite;
}

@keyframes home-scroll-bob {
  0% { transform: translate(-50%, 0); opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, 12px); opacity: 0; }
}

/* --- Carousel controls --- */
.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.hero__dots {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Clickable progress pill with an animated fill for time-to-next. */
.hero__dot {
  position: relative;
  display: block;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.hero__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: var(--md-shape-full);
  background: rgba(255, 255, 255, 0.26);
  transition: background-color var(--dur-fast) var(--ease-standard),
    height var(--dur-fast) var(--ease-emphasised);
}

/* The fill is driven by GSAP (scaleX 0 -> 1 over the slide duration),
   so it must use `transform`, not the standalone `scale` property —
   otherwise the two would fight over the same visual result. */
.hero__dot-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 4px;
  width: 100%;
  border-radius: var(--md-shape-full);
  background: linear-gradient(90deg, #ffb877, #ff7f11);
  transform: translateY(-50%) scaleX(0);
  transform-origin: 0 50%;
}

.hero__dot[aria-selected="true"]::before { height: 6px; background: rgba(255, 255, 255, 0.34); }
.hero__dot:hover::before { height: 6px; }
.hero__dot:focus-visible { outline: 3px solid #ffb877; outline-offset: 2px; border-radius: var(--md-shape-sm); }

.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-emphasised),
    border-color var(--dur-fast) var(--ease-standard);
}

.hero__arrow:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.hero__arrow:active { transform: scale(0.92); }

.hero__pause {
  width: 38px;
  height: 38px;
}

.hero__pause .home-icon-play { display: none; }
.hero__pause[aria-pressed="true"] .home-icon-play { display: block; }
.hero__pause[aria-pressed="true"] .home-icon-pause { display: none; }

/* Screen-reader-only live region for slide announcements. */
.hero__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   09  FLOATING HERO DECOR
   ============================================================ */

.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border-radius: var(--md-shape-full);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(1, 20, 35, 0.4);
  white-space: nowrap;
  will-change: transform;
}

.hero-chip--product { top: 8%; right: 2%; }
.hero-chip--rating { bottom: 26%; right: -1%; }
.hero-chip--sold { top: 34%; left: -2%; }
.hero-chip--secure { bottom: 12%; right: 18%; }

.hero-chip__icon {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--md-accent);
  color: var(--md-on-accent);
  flex-shrink: 0;
}

.hero-chip--secure .hero-chip__icon { background: var(--md-tertiary); color: #fff; }
.hero-chip--rating .hero-chip__icon { background: var(--md-accent); }

/* Floating product card mock, sitting over the media panel. */
.hero__float-card {
  position: absolute;
  width: 190px;
  padding: 14px;
  border-radius: var(--md-shape-lg);
  background: rgba(255, 255, 255, 0.95);
  color: var(--md-on-surface);
  box-shadow: 0 24px 60px rgba(1, 20, 35, 0.5);
  z-index: 4;
  will-change: transform;
}

.hero__float-card--a { bottom: -22px; left: -28px; }
.hero__float-card--b { top: -22px; right: -18px; }

.hero__float-thumb {
  height: 76px;
  border-radius: var(--md-shape-md);
  margin-bottom: 10px;
  background: var(--md-primary-container);
}

.hero__float-card .home-label-s { color: var(--md-on-surface-variant); }
.hero__float-price {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--md-accent);
  margin-top: 4px;
}

/* ============================================================
   10  CATEGORIES
   ============================================================ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-card {
  --cat-color: var(--md-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--md-shape-xl);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.cat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--cat-color);
  z-index: 2;
}

.cat-card:hover,
.cat-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--cat-color);
  box-shadow: var(--md-elev-4), 0 0 34px -10px var(--cat-color);
}

.cat-card__art {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--md-shape-lg);
  overflow: hidden;
  margin-bottom: var(--sp-1);
}

.cat-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-emphasised);
}

.cat-card:hover .cat-card__art img { transform: scale(1.08); }

.cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--md-shape-md);
  background: color-mix(in srgb, var(--cat-color) 14%, transparent);
  color: var(--cat-color);
}

.cat-card__icon svg { width: 26px; height: 26px; }

.cat-card__title {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.cat-card__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--md-on-surface-variant);
}

.cat-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--md-primary);
}

.cat-card__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-emphasised);
}

.cat-card:hover .cat-card__more svg { transform: translateX(5px); }

/* ============================================================
   11  MARQUEE
   ============================================================ */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-4);
  /* Soft fade masks on both edges so items enter and leave. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee + .marquee { margin-top: var(--sp-4); }

/* The spacing between items MUST be a margin, not a flex `gap`.

   A duplicated track is item*N + gap*(2N-1), so half its width falls
   short of one true copy period by exactly gap/2. Every loop therefore
   drifts and a seam opens where the right edge hands over to the left.
   With a trailing margin on every item the track is exactly K*period
   for K copies, so shifting by one period lands pixel-perfect. */
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__track > .marquee__item {
  margin-inline-end: var(--sp-4);
}

.marquee__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 22px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  text-decoration: none;
  color: var(--md-on-surface);
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}

.marquee__item:hover {
  transform: translateY(-4px);
  border-color: var(--md-accent);
  box-shadow: var(--md-elev-3), 0 0 28px -8px var(--md-accent);
}

.marquee__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--md-shape-md);
  background: var(--marquee-tint, var(--md-primary-container));
  /* The tints are fixed light pastels in both themes, so the glyph must
     stay dark on them. --md-on-primary-container flips to a light colour
     in dark mode, which hid the icon (light-on-light). */
  color: #062338;
  flex-shrink: 0;
}

/* In dark mode the pastel blocks glare against the dark chips; tint them
   toward the surface and light the glyph so the chip keeps its colour and
   the icon stays visible. theme.js always sets data-theme, so this rule
   alone covers dark mode. */
:root[data-theme="dark"] .marquee__icon {
  background: color-mix(in srgb, var(--marquee-tint, #12405f) 26%, var(--md-surface));
  color: var(--marquee-tint, #cfe6fa);
}

.marquee__icon svg { width: 22px; height: 22px; }

.marquee__meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--md-on-surface-variant);
}

.marquee-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* ============================================================
   12  FEATURES BENTO + POPUPS
   ============================================================ */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    opacity var(--dur-base) var(--ease-standard),
    filter var(--dur-base) var(--ease-standard);
}

/* Cursor-following radial highlight. --mx/--my are written by JS. */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--md-accent) 14%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
  pointer-events: none;
}

.feature-card:hover::after,
.feature-card:focus-visible::after { opacity: 1; }

.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--md-elev-4);
}

/* When one card is open the rest recede. */
.feature-grid.is-dimmed .feature-card:not(.is-active) {
  opacity: 0.55;
  filter: blur(1.5px);
}

.feature-card__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: var(--md-shape-md);
  background: var(--md-primary-container);
  color: var(--md-primary);
  transition: transform var(--dur-base) var(--ease-overshoot),
    box-shadow var(--dur-base) var(--ease-standard);
}

.feature-card__icon svg { width: 28px; height: 28px; }

.feature-card:hover .feature-card__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  box-shadow: var(--glow-tertiary);
}

.feature-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.1875rem;
  font-weight: 700;
  margin: 0;
}

.feature-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--md-on-surface-variant);
}

.feature-card__more {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--md-primary);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-emphasised);
}

.feature-card:hover .feature-card__more,
.feature-card:focus-visible .feature-card__more { opacity: 1; transform: none; }

/* --- Hover popup (desktop) --- */
.feature-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1400;
  width: min(400px, calc(100vw - 32px));
  border-radius: var(--md-shape-lg);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-5);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.feature-popup.is-open {
  visibility: visible;
}

.feature-popup__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--md-surface-container);
}

.feature-popup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-popup__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }

.feature-popup__title {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.feature-popup__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.58;
  color: var(--md-on-surface-variant);
}

/* --- Bottom sheet (touch) --- */
.feature-scrim {
  position: fixed;
  inset: 0;
  z-index: 1450;
  background: rgba(4, 14, 24, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard), visibility var(--dur-base);
}

.feature-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.feature-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1500;
  width: min(560px, 100%);
  margin-inline: auto;
  border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0;
  background: var(--md-surface);
  box-shadow: var(--md-elev-5);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  will-change: transform;
}

.feature-sheet.is-open { visibility: visible; }

.feature-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline);
  margin: var(--sp-3) auto var(--sp-2);
}

.feature-sheet__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.feature-sheet__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature-sheet__body { padding: var(--sp-4) var(--sp-5); }

.feature-sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 22, 36, 0.6);
  color: #fff;
  cursor: pointer;
}

/* ============================================================
   13  STEPS + STATS
   ============================================================ */

.steps {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps__item {
  position: relative;
  padding-left: 68px;
}

.steps__num {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--md-shape-md);
  background: var(--md-accent);
  color: var(--md-on-accent);
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 8px 22px -6px rgba(255, 127, 17, 0.55);
  transition: transform var(--dur-base) var(--ease-overshoot),
    box-shadow var(--dur-base) var(--ease-standard);
}

.steps__item.is-lit .steps__num {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 14px 34px -6px rgba(255, 127, 17, 0.75);
}

.steps__title { margin: 0 0 6px; }

.steps__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--md-on-surface-variant);
}

/* Connector between steps. The accent segment is a real child
   element (GSAP cannot target a pseudo-element) that home.js scales
   from 0 with a ScrollTrigger scrub. */
.steps__line {
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: -24px;
  width: 2px;
  border-radius: var(--md-shape-full);
  background: var(--md-outline-variant);
  overflow: hidden;
  pointer-events: none;
}

.steps__item:last-child .steps__line { display: none; }

.steps__line-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--md-accent);
  box-shadow: 0 0 10px rgba(255, 127, 17, 0.55);
  transform: scaleY(0);
  transform-origin: 50% 0;
}

/* --- Stats --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  text-align: center;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard);
}

.stat:hover { transform: translateY(-4px); box-shadow: var(--md-elev-3); }

.stat__value {
  display: block;
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--md-primary);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--md-on-surface-variant);
}

/* ============================================================
   14  FEATURED LISTINGS
   ============================================================ */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.listing {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--md-shape-lg);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard);
}

.listing:hover,
.listing:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--md-elev-4), 0 0 34px -12px var(--md-accent);
}

.listing__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--md-surface-container);
}

.listing__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-emphasised);
}

.listing:hover .listing__media img { transform: scale(1.09); }

/* Quick actions slide up from the bottom of the media. */
.listing__actions {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-emphasised);
}

.listing:hover .listing__actions,
.listing:focus-within .listing__actions { opacity: 1; transform: none; }

.listing__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border: 0;
  border-radius: var(--md-shape-full);
  background: rgba(255, 255, 255, 0.94);
  color: var(--md-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-emphasised),
    background-color var(--dur-fast) var(--ease-standard);
}

.listing__action:hover { background: #fff; transform: translateY(-2px); }

/* Wishlist heart. The burst is a pseudo-element on .is-burst, added by JS. */
.listing__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--md-primary);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-overshoot),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.listing__wish:hover { transform: scale(1.12); background: #fff; }
.listing__wish[aria-pressed="true"] { color: var(--md-error); }

.listing__wish::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--md-error);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.listing__wish.is-burst::after { animation: home-burst 0.55s var(--ease-emphasised); }

@keyframes home-burst {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.1); }
}

.listing__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: var(--md-shape-full);
  background: var(--md-accent);
  color: var(--md-on-accent);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.listing__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 6px; }
.listing__title { font-size: 1rem; font-weight: 700; margin: 0; }
.listing__seller { font-size: 0.8125rem; color: var(--md-on-surface-variant); margin: 0; }

/* Price tag with a shimmer sweep on hover. */
.listing__price {
  position: relative;
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: var(--md-shape-md);
  background: var(--md-accent);
  color: var(--md-on-accent-container);
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 800;
  overflow: hidden;
}

.listing__price::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-accent);
  transform: translateX(-100%);
  pointer-events: none;
}

.listing:hover .listing__price::after {
  animation: home-shimmer 0.9s var(--ease-standard);
}

@keyframes home-shimmer {
  to { transform: translateX(100%); }
}

/* ============================================================
   15  REVIEWS
   ============================================================ */

.rating-summary {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-radius: var(--md-shape-xl);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
}

.rating-summary__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rating-summary__value {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--md-primary);
  font-variant-numeric: tabular-nums;
}

.rating-summary__outof { font-size: 1rem; color: var(--md-on-surface-variant); }

.rating-summary__bars { display: grid; gap: 8px; }

.rating-bar {
  display: grid;
  grid-template-columns: 44px 1fr 56px;
  align-items: center;
  gap: var(--sp-3);
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.rating-bar__track {
  height: 8px;
  border-radius: var(--md-shape-full);
  background: var(--md-surface-container-high);
  overflow: hidden;
}

.rating-bar__fill {
  height: 100%;
  width: 0;
  border-radius: var(--md-shape-full);
  background: var(--md-accent);
}

/* Asymmetric masonry: three columns of different widths, each
   column offset vertically. --rot gives the 1-3deg lean. */
.review-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-card {
  --rot: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--md-shape-lg);
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
  rotate: var(--rot);
  z-index: 1;
  transition:
    transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    rotate var(--dur-base) var(--ease-emphasised),
    opacity var(--dur-base) var(--ease-standard);
}

.review-card--tall { padding-block: var(--sp-6); }

/* The featured quote spans two columns, but only once there ARE two
   columns. On a single-column grid `span 2` would create an implicit
   second column and push the card wider than the viewport. */
.review-card--featured {
  /* Same navy brand panel as the hero/CTA. The quote is white-tuned, so
     the light theme's pale --md-primary-container made it unreadable. */
  background: linear-gradient(150deg, #0b3f63 0%, #06304b 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--md-elev-4);
}
.review-card--featured .review-text,
.review-card--featured .review-role { color: rgba(255, 255, 255, 0.82); }
.review-card--featured .review-name { color: #fff; }

.review-card:hover {
  transform: translateY(-8px) scale(1.015);
  rotate: 0deg;
  z-index: 3;
  box-shadow: var(--md-elev-5), 0 0 40px -12px var(--md-accent);
}

.review-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--md-primary-container);
  color: var(--md-primary);
  font-weight: 700;
}

.review-avatar img { width: 100%; height: 100%; object-fit: cover; }

.review-name { margin: 0; font-size: 1rem; font-weight: 700; }
.review-role { font-size: 0.8125rem; margin: 0; color: var(--md-on-surface-variant); }

/* Stars. Each is a span so JS can scale them in one at a time. */
.review-rating {
  display: inline-flex;
  gap: 3px;
  margin: 0;
  color: var(--md-accent);
}

.review-star {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: inherit;
  transform-origin: 50% 50%;
}

.review-star svg { width: 100%; height: 100%; }
.review-star.is-empty { color: var(--md-outline); }

.review-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.66;
  color: var(--md-on-surface);
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 12px;
  border-radius: var(--md-shape-full);
  background: color-mix(in srgb, var(--md-tertiary) 16%, transparent);
  color: var(--md-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
}

.review-verified svg { width: 14px; height: 14px; }

.review-card--featured .review-verified {
  background: rgba(255, 255, 255, 0.18);
  color: #b8f5ec;
}

/* ============================================================
   16  CTA
   ============================================================ */

.cta-section { padding-block: clamp(40px, 5vw, 80px); }

.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--md-shape-xl);
  /* Fixed navy brand panel in BOTH themes, like the hero. Its text is
     white/accent-tuned, so the light theme's pale --md-primary-container
     washed it out to invisible. theme.css still repaints this banner in
     dark mode. */
  background: linear-gradient(150deg, #0b3f63 0%, #07304b 55%, #032031 100%);
  color: #fff;
  box-shadow: var(--md-elev-5);
  text-align: center;
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 127, 17, 0.4) 0%, transparent 62%),
    radial-gradient(circle at 86% 26%, rgba(139, 92, 246, 0.36) 0%, transparent 62%),
    radial-gradient(circle at 60% 104%, rgba(20, 184, 166, 0.32) 0%, transparent 62%);
  will-change: transform;
}

.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(90% 80% at 50% 50%, #000, transparent 76%);
  pointer-events: none;
}

/* Rotating glowing orbs. */
.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

.cta-orb--1 { width: 220px; height: 220px; top: -60px; left: 8%; background: rgba(255, 127, 17, 0.5); }
.cta-orb--2 { width: 180px; height: 180px; bottom: -50px; right: 10%; background: rgba(139, 92, 246, 0.45); }
.cta-orb--3 { width: 140px; height: 140px; top: 44%; left: 46%; background: rgba(20, 184, 166, 0.4); }

.cta-head-sm { color: #ffb877; margin-bottom: var(--sp-3); }

.cta-title {
  color: #fff;
  margin: 0 auto;
  max-width: 20ch;
}

.cta-title .home-glow-text { color: #ffb877; }

.cta-sub {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: var(--sp-4) auto 0;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.cta-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.cta-features li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.86);
}

.cta-features svg { width: 18px; height: 18px; color: #ffb877; flex-shrink: 0; }

.cta-trust {
  margin: var(--sp-5) 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   17  FOOTER + BACK TO TOP
   ============================================================ */

.home footer {
  position: relative;
  z-index: 1;
  background: var(--md-surface-container-lowest);
  border-top: 1px solid var(--md-outline-variant);
  padding: clamp(40px, 6vw, 72px) var(--home-gutter) var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-7);
  color: var(--md-on-surface);
  min-height: 0;
  height: auto;
}

.home footer .footer-col h3 {
  font-family: var(--md-display-font, "Plus Jakarta Sans"), var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-primary);
  margin: 0 0 var(--sp-4);
  pointer-events: none;
}

.home footer .footer-col p {
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--md-on-surface-variant);
  margin: 0;
  pointer-events: none;
}

.home footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.home footer .footer-col ul li { margin: 0; }

.home footer .footer-col ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--md-on-surface-variant);
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-emphasised);
}

.home footer .footer-col ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  border-radius: var(--md-shape-full);
  background: var(--md-accent);
  transition: width var(--dur-base) var(--ease-standard);
}

.home footer .footer-col ul li a:hover {
  color: var(--md-accent);
  transform: translateX(4px);
}

.home footer .footer-col ul li a:hover::after { width: 100%; }

.home footer .social-icons { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }

.home footer .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--md-surface-container);
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.home footer .social-icons a:hover {
  transform: translateY(-4px);
  color: var(--md-on-accent);
  background: var(--md-accent);
  box-shadow: var(--glow-accent);
}

.home footer .footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--md-outline-variant);
}

.home footer .footer-contact a {
  font-size: 0.9375rem;
  color: var(--md-on-surface-variant);
  text-decoration: none;
  word-break: break-word;
  transition: color var(--dur-fast) var(--ease-standard);
}

.home footer .footer-contact a:hover { color: var(--md-accent); }

.home footer .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--md-outline-variant);
  font-size: 0.8125rem;
  color: var(--md-on-surface-variant);
}

.home footer .footer-story-link {
  color: var(--md-primary);
  font-weight: 700;
  text-decoration: none;
}

.home footer .footer-story-link:hover { color: var(--md-accent); }

.home-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1250;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elev-4);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 16px, 0) scale(0.85);
  transition: opacity var(--dur-base) var(--ease-standard),
    visibility var(--dur-base),
    transform var(--dur-base) var(--ease-emphasised),
    box-shadow var(--dur-base) var(--ease-standard);
}

.home-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.home-to-top:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-primary), var(--md-elev-5);
}

.home-to-top:active { transform: scale(0.92); }

/* ============================================================
   18  SCROLLBAR / PRINT / REDUCED MOTION / LARGE SCREENS
   ============================================================ */

/* Desktop two-column hero + asymmetric reviews. */
@media (min-width: 900px) {
  /* Applies to EVERY slide, not just the active one. The slides now
     all share one grid cell, so the tallest one sets the height — and
     an inactive slide left in the single-column mobile layout would
     be far taller than the visible two-column slide, which would move
     the whole page on the first switch. */
  .hero-slide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .hero__inner { max-width: var(--hero-max); }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5) var(--sp-6);
  }

  .steps__item { padding-left: 0; padding-top: 68px; }

  .steps__num { left: 0; top: 0; }

  /* Horizontal connector between the numbers on the same row. */
  .steps__line {
    left: 48px;
    right: -24px;
    top: 23px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .steps__item:last-child .steps__line { display: none; }

  .steps__line-fill {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  .rating-summary {
    grid-template-columns: auto 1fr;
    justify-items: start;
  }
}

/* Review masonry offsets — only once there is room for columns. */
@media (min-width: 1080px) {
  .review-container {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .review-card--featured { grid-column: span 2; }

  .review-card:nth-child(3n + 1) { margin-top: 0; }
  .review-card:nth-child(3n + 2) { margin-top: 40px; }
  .review-card:nth-child(3n + 3) { margin-top: 84px; }

  .review-card:nth-child(1) { --rot: -1.6deg; }
  .review-card:nth-child(2) { --rot: 1.2deg; }
  .review-card:nth-child(4) { --rot: 2.2deg; }
  .review-card:nth-child(5) { --rot: -2deg; }
  .review-card:nth-child(6) { --rot: 1.5deg; }
}

/* Very large screens: hold the measure, scale the type, add air.
   Left unconstrained, a 2560px viewport would stretch the hero
   headline across 2400px and the side padding would read as slack. */
@media (min-width: 1920px) {
  :root {
    --home-max: 1440px;
    --home-max-wide: 1680px;
    --hero-max: 1760px;
  }

  .hero {
    padding-top: calc(var(--nav-h-local) + clamp(48px, 4vw, 96px));
  }

  .hero-slide__copy { max-width: 46rem; }
  .home-display-l { font-size: clamp(4rem, 3.6vw, 6.25rem); }
  .home-display-m { font-size: clamp(3.4rem, 3vw, 5.25rem); }
  .home-lede { font-size: 1.25rem; }
  .home-slide__text { font-size: 1.1875rem; }

  .cat-grid { gap: var(--sp-6); }
  .feature-grid { gap: var(--sp-5); }
  .review-container { gap: var(--sp-6); }
  .listing-grid { gap: var(--sp-6); }

  /* Ambient blobs scale with the viewport so they still read as
     colour fields rather than small dots on a huge canvas. */
  .home-bg__blob--1 { width: 46vw; height: 46vw; }
  .home-bg__blob--2 { width: 42vw; height: 42vw; }
  .home-bg__blob--3 { width: 38vw; height: 38vw; }
  .home-bg__grid { background-size: 88px 88px; }
}

@media (min-width: 2560px) {
  :root {
    --home-max: 1600px;
    --home-max-wide: 1840px;
    --hero-max: 1980px;
  }

  .home-display-l { font-size: 6.6rem; }
  .hero-slide__copy { max-width: 50ch; }
}

/* --- Print --- */
@media print {
  .home-bg,
  .home-progress,
  .hero__decor,
  .home-to-top,
  .feature-popup,
  .feature-scrim,
  .feature-sheet,
  .hero__controls,
  .hero__scroll {
    display: none !important;
  }

  .hero,
  .cta-banner {
    background: none !important;
    color: #000;
    min-height: 0;
  }

  [data-anim],
  .reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

/* --- Reduced motion ---
   Movement is removed, but nothing that reports state is: reveals
   jump to their final state, the carousel stops auto-advancing, the
   marquee parks, and hover feedback stays as colour changes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .home .home-btn,
  .home .cat-card,
  .home .feature-card,
  .home .listing,
  .home .marquee__item,
  .home .stat,
  .home .review-card {
    transition-duration: 0.12s !important;
  }

  .home .home-btn:hover,
  .home .cat-card:hover,
  .home .listing:hover,
  .home .stat:hover,
  .home .review-card:hover {
    transform: none !important;
    rotate: 0deg !important;
  }

  .home-bg__blob,
  .cta-orb,
  .hero::before,
  .cta-banner::before {
    animation: none !important;
    will-change: auto;
  }

  .hero__scroll-dot { animation: none; opacity: 1; }

  /* These two fade in on hover. Under reduced motion the hover still
     works, but a permanently-0 opacity means the text is invisible to
     anyone not using a pointer — so it is simply shown. */
  .feature-card__more {
    opacity: 1;
    transform: none;
  }

  .listing__actions {
    opacity: 1;
    transform: none;
  }

  [data-anim],
  .reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  [data-anim="split"] .home-line-inner { transform: none !important; }
}