/* ==========================================================================
   Simodi Gold — site styles
   Black & beige luxury theme: warm black ground, beige type, champagne accent.
   ========================================================================== */

:root {
  /* Warm black */
  --bg: #0b0a09;
  --bg-2: #0b0a09;
  --surface: #14130f;
  --surface-2: #1b1915;
  --tile: #efe8dc;

  /* Beige text on black */
  --text: #efe8dc;
  --muted: #a69d8d;
  --dim: #6f685d;
  --ink-rgb: 239 232 220;
  --line: rgb(var(--ink-rgb) / 0.09);
  --line-2: rgb(var(--ink-rgb) / 0.16);

  /* Champagne-beige accent */
  --accent: #d6c4a2;
  --accent-rgb: 214 196 162;
  --accent-grad: linear-gradient(135deg, #f4ebdb 0%, #d6c4a2 50%, #ae9873 100%);
  --accent-soft: rgb(var(--accent-rgb) / 0.12);
  --on-accent: #14110c;

  /* Logo gold — used for buttons and highlighted text only */
  --gold: #d3a84c;
  --gold-text-grad: linear-gradient(135deg, #e5c879 0%, #d3a84c 50%, #bb903d 100%);
  --gold-btn: linear-gradient(135deg, #e5c879 0%, #d3a84c 50%, #bb903d 100%);
  --gold-solid: #d3a84c;
  --gold-btn-hover: #e5c879;
  --on-gold: #1a1205;

  --green: #9fd6a8;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --max: 1200px;
  --gutter: 24px;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Beige sections: the same components, re-inked for a light ground */
.section--alt {
  --bg: #e9e1d2;
  --bg-2: #e9e1d2;
  --surface: #f3eee5;
  --surface-2: #e2d8c6;
  --tile: #fbf8f2;
  --text: #15120d;
  --muted: #5e564a;
  --dim: #8b8274;
  --ink-rgb: 21 18 13;
  --line: rgb(var(--ink-rgb) / 0.12);
  --line-2: rgb(var(--ink-rgb) / 0.2);
  --accent: #7a6245;
  --accent-rgb: 122 98 69;
  --accent-grad: linear-gradient(135deg, #9b8160 0%, #6f583c 55%, #4f3e29 100%);
  --accent-soft: rgb(var(--accent-rgb) / 0.12);
  --on-accent: #f7f1e7;
  --gold: #bb903d;
  --gold-text-grad: linear-gradient(135deg, #d3a84c 0%, #bb903d 100%);
  --green: #3f7a4b;
  color: var(--text);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(42px, 6.8vw, 88px); letter-spacing: -0.04em; line-height: 1.02; }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.3; }
p { margin: 0; }

.accent {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
  background: var(--gold-text-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }

.lead { font-size: 18px; color: var(--muted); max-width: 640px; }
.muted { color: var(--muted); }

.section { padding: 128px 0; position: relative; }
.section--tight { padding: 96px 0; }
.section--alt { background: var(--bg-2); border: 0; }

.section-head { display: grid; gap: 18px; margin-bottom: 64px; }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .lead { margin: 0 auto; }
.section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px 64px; }
.section-head--split > div { display: grid; gap: 18px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .store:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn svg { width: 16px; height: 16px; }
.btn--light { background: var(--gold-solid); color: var(--on-gold); font-weight: 600; }
.btn--light:hover { background: var(--gold-btn-hover); }
.btn--accent { background: var(--gold-btn); color: var(--on-gold); font-weight: 600; }
.btn--accent:hover { filter: brightness(1.08); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: rgb(var(--ink-rgb) / 0.02); }
.btn--ghost:hover { border-color: rgb(var(--ink-rgb) / 0.3); background: rgb(var(--ink-rgb) / 0.05); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 18px 0 14px;
  border-radius: 14px;
  background: #000;
  border: 1px solid var(--line-2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.store:hover { border-color: rgb(var(--ink-rgb) / 0.35); transform: translateY(-1px); }
.store svg { width: 22px; height: 22px; flex: none; }
.store span { display: grid; line-height: 1.1; }
.store small { font-size: 10px; color: var(--muted); letter-spacing: 0.02em; }
.store strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgb(var(--ink-rgb) / 0.03);
  font-size: 13px;
  color: var(--muted);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled, .nav.is-open {
  background: rgba(11, 10, 9, 0.8);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); background: rgb(var(--ink-rgb) / 0.05); }
.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  position: relative;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 120px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}

/* Full-bleed background video */
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Warm the light studio footage toward beige and pull it down to sit under the overlay */
  filter: sepia(0.3) saturate(1.1) brightness(0.95) contrast(1.05);
}
/* Dark gradient: heavy at the top for the nav, softer in the middle so the phones show,
   and fading into the page colour at the bottom */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(11, 10, 9, 0.4) 0%, rgba(11, 10, 9, 0) 65%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0.7) 0%,
      rgba(11, 10, 9, 0.32) 28%,
      rgba(11, 10, 9, 0.28) 55%,
      rgba(11, 10, 9, 0.62) 82%,
      var(--bg) 100%);
}

.hero__content { display: grid; justify-items: center; gap: 28px; position: relative; }
.hero h1 { max-width: 900px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 0, 0, 0.35); }
.hero .lead { max-width: 620px; font-size: 19px; color: #ece4d6; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6); }
.hero .accent { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55)); }
.hero .pill { background: rgba(11, 10, 9, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero .btn--ghost { background: rgba(11, 10, 9, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__stores { margin-top: 4px; justify-content: center; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.hero__scroll:hover { color: var(--text); }
.hero__scroll svg { width: 16px; height: 16px; animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.hero__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(11, 10, 9, 0.5);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hero__toggle:hover { opacity: 1; border-color: rgb(var(--ink-rgb) / 0.3); }
.hero__toggle svg { width: 16px; height: 16px; }
.hero__toggle .icon-play { display: none; }
.hero__toggle[aria-pressed="true"] .icon-play { display: block; }
.hero__toggle[aria-pressed="true"] .icon-pause { display: none; }

.stats-band { background: var(--bg); }

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 6;
  background: var(--bg);
}
.stat { padding: 32px 24px; text-align: left; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__value { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.stat__label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Cards (general) ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.card:hover { border-color: var(--line-2); }

.icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgb(var(--accent-rgb) / 0.22);
  flex: none;
}
.icon svg { width: 20px; height: 20px; stroke-width: 1.75; }

.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Bento features ---------- */

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .card { grid-column: span 2; display: flex; flex-direction: column; }
.bento .card--wide { grid-column: span 3; }
.bento__visual {
  position: relative;
  height: 240px;
  margin: 10px 10px 0;
  border-radius: 20px;
  background:
    radial-gradient(80% 90% at 50% 0%, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0) 70%),
    var(--surface-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bento__body { padding: 26px 28px 30px; display: grid; gap: 10px; }
.bento__body p { color: var(--muted); font-size: 15px; }

.widget {
  background: rgba(20, 19, 15, 0.94);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
  font-size: 14px;
  line-height: 1.3;
  min-width: 220px;
}
.widget small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.widget strong { font-weight: 600; }
.widget .icon { width: 36px; height: 36px; border-radius: 10px; }
.widget .icon svg { width: 18px; height: 18px; }
.widget-stack { display: grid; gap: 10px; justify-items: center; }
.widget-stack .widget:nth-child(2) { transform: translateX(28px); }
.icon--green { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.25); color: var(--green); }
.up { color: var(--green); font-weight: 600; }

.spark { width: 88%; max-width: 420px; }
.spark__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.spark__top strong { color: var(--text); font-size: 15px; }
.spark svg { width: 100%; height: 120px; display: block; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--green); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.portfolio { width: 82%; }
.portfolio__value { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.portfolio__bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 16px; }
.portfolio__bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgb(var(--accent-rgb) / 0.25), rgb(var(--accent-rgb) / 0.8)); }

.points { text-align: center; display: grid; gap: 12px; justify-items: center; }
.points__big { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.points__big span { background: var(--gold-text-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Showcase (watermark + mockup) ---------- */

.showcase { position: relative; overflow: hidden; padding: 128px 0 0; text-align: center; }
.showcase__mark {
  position: absolute;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(120px, 24vw, 360px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.8;
  white-space: nowrap;
  background: linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.07), rgb(var(--ink-rgb) / 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.showcase .container { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; }
.showcase h2 { max-width: 880px; }
.showcase__img { position: relative; z-index: 1; width: min(880px, 100%); margin: 40px auto 0; }
.showcase__img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(11, 10, 9, 0), var(--bg));
}

/* ---------- Steps ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { display: flex; flex-direction: column; }
.step__img {
  aspect-ratio: 5 / 4;
  margin: 10px 10px 0;
  border-radius: 20px;
  background: radial-gradient(80% 80% at 50% 10%, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0) 70%), var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.step__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.25); transform-origin: center top; }
.step__body { padding: 24px 24px 28px; display: grid; gap: 8px; }
.step__num { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.step__num b { font-size: 13px; font-weight: 600; color: var(--gold); letter-spacing: 0.08em; }
.step__num span { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.14em; }
.step p { color: var(--muted); font-size: 15px; }

/* ---------- Feature grid ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.feature { padding: 32px; display: grid; gap: 14px; align-content: start; }
.feature p { color: var(--muted); font-size: 15px; }
.feature__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* hairline grid variant */
.lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
  gap: 1px;
}
.lines > * { background: var(--bg); padding: 36px 32px; display: grid; gap: 12px; align-content: start; }
.section--alt .lines > * { background: var(--bg-2); }
.lines p { color: var(--muted); font-size: 15px; }
.lines .icon { margin-bottom: 8px; }

/* ---------- Services list ---------- */

.split { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.split__sticky { position: sticky; top: 120px; display: grid; gap: 18px; }
.services { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.services li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 16px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s ease;
}
.services li:hover { padding-left: 8px; }
.services b { font-size: 14px; font-weight: 500; color: var(--gold); padding-top: 3px; font-variant-numeric: tabular-nums; }
.services h3 { font-size: 22px; }
.services p { grid-column: 2; color: var(--muted); font-size: 15px; max-width: 560px; }

/* ---------- Products ---------- */

.product { display: flex; flex-direction: column; }
.product__img { aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; border-radius: 20px; }
.product__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.product:hover .product__img img { transform: scale(1.04); }
.product__body { padding: 26px 28px 30px; display: grid; gap: 10px; }
.product__body p { color: var(--muted); font-size: 15px; }

/* ---------- Trust & partners ---------- */

.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.trust__text { display: grid; gap: 20px; }
.trust__text p { color: var(--muted); }
.partners { display: grid; gap: 28px; }
.partners__group h4 { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 14px; }
.logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.logo-tile {
  height: 104px;
  border-radius: 16px;
  background: var(--tile);
  display: grid;
  place-items: center;
  padding: 18px 22px;
  position: relative;
}
.logo-tile img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.82; transition: filter 0.3s ease, opacity 0.3s ease; }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-tile figcaption { position: absolute; inset: auto 0 -26px 0; text-align: center; font-size: 12px; color: var(--dim); }
.logos { margin-bottom: 26px; }
.standards { display: flex; flex-wrap: wrap; gap: 8px; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; border: 1px solid rgb(var(--accent-rgb) / 0.25); background: var(--accent-soft); color: var(--text); font-size: 15px; }
.note svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 2px; }

/* ---------- Comparison ---------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare .card { padding: 36px; }
.compare h3 { display: flex; align-items: center; justify-content: space-between; font-size: 22px; margin-bottom: 24px; }
.compare ul { list-style: none; margin: 0; padding: 0; display: grid; }
.compare li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 15px; }
.compare li svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.compare--them li { color: var(--muted); }
.compare--them li svg { color: var(--dim); }
.compare--us { border-color: rgb(var(--accent-rgb) / 0.35); background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.08), rgb(var(--accent-rgb) / 0) 60%), var(--surface); }
.compare--us li svg { color: var(--accent); }
.compare__logo { height: 22px; width: auto; }

/* comparison table (About) */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: left; padding: 22px 28px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
thead th { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--surface); }
thead th:last-child { color: var(--gold); }
tbody th { font-weight: 600; width: 22%; }
tbody td { color: var(--muted); }
tbody td:last-child { color: var(--text); background: rgb(var(--accent-rgb) / 0.05); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- Quote band ---------- */

.quote { text-align: center; display: grid; justify-items: center; gap: 28px; }
.quote blockquote {
  margin: 0;
  max-width: 920px;
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.quote blockquote em { font-style: italic; font-weight: 500; color: var(--gold); }

/* ---------- Audience ---------- */

.audience { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.audience__list { padding: 36px; display: grid; gap: 22px; align-content: start; }
.audience__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.audience__list li { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; background: rgb(var(--ink-rgb) / 0.02); }
.eligibility { padding: 36px; display: grid; gap: 16px; align-content: start; background: linear-gradient(160deg, rgb(var(--accent-rgb) / 0.12), rgb(var(--accent-rgb) / 0) 60%), var(--surface); }
.eligibility ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eligibility li { display: flex; gap: 12px; color: var(--muted); font-size: 15px; }
.eligibility li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }

/* ---------- Digital vs physical ---------- */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.versus .card { padding: 32px; display: grid; gap: 14px; align-content: start; }
.versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.versus li { display: flex; gap: 10px; font-size: 15px; color: var(--muted); }
.versus li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--dim); }
.versus .card--gold { border-color: rgb(var(--accent-rgb) / 0.35); }
.versus .card--gold li { color: var(--text); }
.versus .card--gold li svg { color: var(--accent); }

/* ---------- Testimonials ---------- */

.testimonial { padding: 32px; display: flex; flex-direction: column; gap: 28px; justify-content: space-between; }
.testimonial blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--text); }
.testimonial blockquote::before { content: "\201C"; display: block; font-size: 56px; font-weight: 700; line-height: 0.6; color: var(--gold); margin-bottom: 18px; }
.person { display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-grad); color: var(--on-accent); font-size: 14px; font-weight: 600; }
.person strong { display: block; font-size: 15px; font-weight: 600; }
.person small { color: var(--muted); font-size: 13px; }

/* ---------- Blog ---------- */

.post { display: grid; grid-template-columns: 1fr; }
.post__img { aspect-ratio: 16 / 9; overflow: hidden; margin: 10px 10px 0; border-radius: 20px; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.post:hover .post__img img { transform: scale(1.04); }
.post__body { padding: 26px 28px 30px; display: grid; gap: 12px; }
.post__meta { display: flex; gap: 8px; }
.post__meta span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.post h3 { font-size: 24px; }
.post p { color: var(--muted); font-size: 15px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--gold); margin-top: 6px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.post:hover .link-arrow svg, .link-arrow:hover svg { transform: translateX(3px); }

/* ---------- FAQ ---------- */

.faq { max-width: 860px; margin: 0 auto; }
.tabs { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); margin: 0 auto 40px; }
.tabs-wrap { text-align: center; }
.tab {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tab[aria-selected="true"] { background: var(--gold-btn); color: var(--on-gold); }
.tab-panel[hidden] { display: none; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.qa summary i::before, .qa summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
}
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.3s ease; }
.qa[open] summary i { border-color: var(--accent); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa p { padding: 0 60px 26px 4px; color: var(--muted); font-size: 16px; }

/* ---------- CTA banner ---------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  padding: 88px 40px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
  background:
    radial-gradient(70% 90% at 50% 0%, rgb(var(--accent-rgb) / 0.28), rgb(var(--accent-rgb) / 0) 70%),
    var(--surface);
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { max-width: 760px; }
.cta .store-row { justify-content: center; }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.contact__info { display: grid; gap: 28px; }
.contact__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.contact__list li a, .contact__list li > div {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact__list li:first-child a, .contact__list li:first-child > div { border-top: 1px solid var(--line); }
.contact__list small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 2px; }
.contact__list .icon { width: 40px; height: 40px; }
.socials { display: flex; gap: 10px; }

.form { padding: 36px; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a19d95' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field textarea { height: 140px; padding: 14px 16px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.form__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form__foot p { font-size: 13px; color: var(--dim); max-width: 340px; }
.form__foot a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.form__status { font-size: 14px; color: var(--green); min-height: 1em; }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); padding: 80px 0 40px; background: var(--bg); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer__brand { display: grid; gap: 18px; align-content: start; max-width: 340px; }
.footer__brand img { height: 36px; width: auto; }
.footer__brand p, .footer__brand address { color: var(--muted); font-size: 14px; font-style: normal; line-height: 1.7; }
.footer h4 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { color: var(--muted); font-size: 14px; transition: color 0.2s ease; }
.footer ul a:hover { color: var(--text); }
.footer .store { height: 46px; }
.footer .store-row { flex-direction: column; align-items: flex-start; }
.footer__bottom {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--dim);
}
.footer__bottom nav { display: flex; gap: 20px; }
.footer__bottom a:hover { color: var(--text); }

/* ---------- About page ---------- */

.page-hero { padding: 180px 0 96px; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 60% at 20% 0%, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0) 70%);
}
.page-hero .container { display: grid; gap: 28px; }
.page-hero h1 { font-size: clamp(42px, 6.4vw, 84px); max-width: 1000px; }

.story { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; }
.story__text { display: grid; gap: 22px; color: var(--muted); font-size: 17px; }
.story__text p:first-child { color: var(--text); font-size: 20px; line-height: 1.55; letter-spacing: -0.01em; }

.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mv .card { padding: 44px; display: grid; gap: 18px; min-height: 280px; align-content: space-between; }
.mv p { font-size: 22px; line-height: 1.45; letter-spacing: -0.015em; }

.standard { padding: 36px; display: grid; gap: 14px; align-content: start; }
.standard b { font-size: 14px; color: var(--gold); font-weight: 500; }
.standard p { color: var(--muted); font-size: 15px; }

.location { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.location .card { padding: 40px; display: grid; gap: 18px; align-content: start; }
.location__map {
  min-height: 320px;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgb(var(--accent-rgb) / 0.35) 0 6px, rgb(var(--accent-rgb) / 0.12) 7px 40px, transparent 41px),
    radial-gradient(circle at 50% 50%, transparent 0 90px, rgb(var(--accent-rgb) / 0.12) 91px 92px, transparent 93px),
    radial-gradient(circle at 50% 50%, transparent 0 150px, rgb(var(--accent-rgb) / 0.08) 151px 152px, transparent 153px),
    linear-gradient(to right, rgb(var(--ink-rgb) / 0.04) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(to bottom, rgb(var(--ink-rgb) / 0.04) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--surface) !important;
  display: grid !important;
  place-items: end start;
}
.location__map span { margin: 24px; }

/* ---------- Reveal animation ---------- */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .live::before, .hero__scroll svg { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .nav__links a { padding: 8px 10px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .nav__links, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    padding: 12px var(--gutter) 24px;
    background: rgba(11, 10, 9, 0.97);
    border-bottom: 1px solid var(--line);
    gap: 2px;
  }
  .nav.is-open .nav__links a { padding: 14px 12px; font-size: 16px; border-radius: 12px; }

  .section { padding: 96px 0; }
  .section-head { margin-bottom: 44px; }
  .section-head--split, .split, .trust, .contact, .story, .audience, .compare, .versus, .mv, .location { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .split__sticky { position: static; }
  .trust, .contact, .story { gap: 48px; }

  .bento .card, .bento .card--wide { grid-column: span 6; }
  .grid-3, .lines { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .hero .lead, .lead { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 24px 16px; }
  .stat:nth-child(n) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(-n + 2) { border-top: 0; }
  .stat:last-child { grid-column: 1 / -1; }

  .section { padding: 80px 0; }
  .steps, .grid-3, .grid-2, .grid-4, .lines { grid-template-columns: 1fr; }
  .bento__visual { height: 210px; }
  .widget { min-width: 0; }
  .widget-stack .widget:nth-child(2) { transform: translateX(12px); }
  .feature, .standard, .testimonial, .audience__list, .eligibility, .compare .card, .versus .card, .mv .card, .location .card { padding: 26px; }
  .form { padding: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  .qa summary { font-size: 16px; padding: 20px 0; }
  .qa p { padding-right: 0; }
  .cta { padding: 64px 22px; border-radius: 28px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; }
  .showcase { padding-top: 96px; }
  .showcase__mark { top: 170px; }
  .services li { grid-template-columns: 40px 1fr; }
  .services h3 { font-size: 19px; }
  th, td { padding: 16px 18px; }
}

/* ---------- Hero: centred cinematic layout ----------
   Small uppercase nav, outlined eyebrow pill, two-line bold headline, rounded-rectangle
   buttons, compact store badges, and a three-stop scrim plus edge vignette over the video. */
.nav__links a {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 0.78);
}
.btn--nav {
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn--nav:hover { background: var(--gold-solid); border-color: var(--gold-solid); color: var(--on-gold); }

.hero { padding: 132px 0 120px; }
.hero__bg::after { background: 
    radial-gradient(ellipse 75% 70% at 50% 50%, rgba(11, 10, 9, 0) 35%, rgba(11, 10, 9, 0.55) 100%),
    radial-gradient(ellipse 45% 35% at 50% 48%, rgba(11, 10, 9, 0.3) 0%, rgba(11, 10, 9, 0) 100%),
    linear-gradient(180deg, rgba(11, 10, 9, 0.6) 0%, rgba(11, 10, 9, 0.32) 45%, rgba(11, 10, 9, 0.82) 90%, var(--bg) 100%); }
.hero__content { gap: 0; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  margin-bottom: 26px;
  border-radius: 999px;
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  background: rgba(11, 10, 9, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.hero h1 { font-size: clamp(40px, 5.6vw, 80px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 820px; }
.hero h1 .accent { font-style: normal; font-weight: 700; letter-spacing: -0.02em; }
.hero .lead { margin-top: 22px; font-size: 18px; line-height: 1.6; max-width: 600px; color: rgb(var(--ink-rgb) / 0.82); }
.hero__actions { margin-top: 34px; gap: 12px; }
.btn--hero { height: 54px; padding: 0 26px; border-radius: 20px; font-size: 15px; font-weight: 600; }
.btn--hero-primary { background: var(--gold-btn); color: var(--on-gold); }
.btn--hero-primary:hover { filter: brightness(1.08); }
.btn--hero-secondary {
  background: rgb(var(--ink-rgb) / 0.05);
  border-color: rgb(var(--ink-rgb) / 0.12);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--hero-secondary:hover { background: rgb(var(--ink-rgb) / 0.1); border-color: rgb(var(--ink-rgb) / 0.22); }
.hero__stores { margin-top: 22px; gap: 14px; }
.hero .store { width: 150px; height: 48px; justify-content: center; padding: 0 14px; border-radius: 12px; border: 0; background: #f4efe6; color: #0b0a09; }
.hero .store small { color: rgba(11, 10, 9, 0.7); }
.hero .store strong { font-size: 15px; white-space: nowrap; }
.hero__scroll { font-size: 10.5px; letter-spacing: 0.24em; }

/* ---------- Partner logo strip ----------
   Two identical lists side by side; the track slides left by exactly one list (-50%)
   and loops, so the motion is seamless. Logos are shown as single-tone grey marks. */
.logo-strip { padding: 44px 0 52px; background: var(--bg); overflow: hidden; }
.logo-strip__label {
  margin-bottom: 30px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo-strip__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logo-strip__track { display: flex; width: max-content; animation: logo-scroll 50s linear infinite; }
.logo-strip__viewport:hover .logo-strip__track { animation-play-state: paused; }
.logo-strip__list { display: flex; align-items: center; gap: 72px; margin: 0; padding: 0 72px 0 0; list-style: none; }
.logo-strip__list li { flex: none; display: flex; align-items: center; height: 56px; }
.logo-strip__list img {
  height: var(--h, 44px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.logo-strip__list img:hover { opacity: 0.95; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .logo-strip { padding: 36px 0 40px; }
  .logo-strip__label { margin-bottom: 22px; }
  .logo-strip__list { gap: 48px; padding-right: 48px; }
  .logo-strip__list li { height: 44px; }
  .logo-strip__list img { height: calc(var(--h, 44px) * 0.75); max-width: 120px; }
  .logo-strip__track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
  .logo-strip__viewport { overflow-x: auto; }
}

/* ---------- How it works: animated steps ----------
   Desktop recreates the step artwork as a 16:9 canvas: phones and labels are placed by
   percentage, so the composition scales as one piece. On scroll the dashed path draws
   itself and each step lights up as the path reaches it; phones float gently and drift
   with a little parallax. Phones stack vertically on small screens. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.flow-section { position: relative; padding: 128px 0 0; overflow: hidden; background: var(--bg); }
.flow-section .section-head { margin-bottom: 24px; }

.flow {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  aspect-ratio: 2000 / 1125;
  container-type: inline-size;
}
.flow__steps { list-style: none; margin: 0; padding: 0; }
.flow__step { display: contents; }

.flow__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow__path-line { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 14 13; opacity: 0.85; }
.flow__path-mask { fill: none; stroke: #fff; stroke-width: 30; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

.flow__phone {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: var(--pw);
  z-index: 2;
  will-change: transform;
}
.flow__phone img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) brightness(0.72);
  animation: phone-float var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  transition: filter 0.8s ease;
}
.flow__step.is-active .flow__phone img { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) brightness(1); }
@keyframes phone-float {
  0%, 100% { transform: translateY(-1.6cqw); }
  50% { transform: translateY(1.6cqw); }
}

.flow__label {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 1.2cqw;
  text-align: center;
  white-space: nowrap;
}
.flow__num {
  display: grid;
  place-items: center;
  width: 3.3cqw;
  height: 3.3cqw;
  border-radius: 50%;
  background: var(--gold-btn);
  color: var(--on-gold);
  font-size: 1.9cqw;
  font-weight: 700;
  line-height: 1;
  opacity: 0.4;
  transform: scale(0.72);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.6s ease, box-shadow 0.6s ease;
}
.flow__label h3 {
  font-size: 1.55cqw;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  opacity: 0.45;
  transition: opacity 0.6s ease;
}
.flow__step.is-active .flow__num {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 0.5cqw rgb(211 168 76 / 0.16), 0 0 2.4cqw rgb(211 168 76 / 0.45);
}
.flow__step.is-active .flow__label h3 { opacity: 1; }

/* entrance */
.js .flow__phone, .js .flow__label { opacity: 0; translate: 0 48px; transition: opacity 0.9s ease, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 140ms); }
.js .flow__label { transition-delay: calc(var(--i, 0) * 140ms + 120ms); }
.flow.is-in .flow__phone, .flow.is-in .flow__label { opacity: 1; translate: 0 0; }

/* wave lines */
.flow__waves {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: clamp(180px, 24vw, 400px);
  fill: none;
  stroke: var(--gold-solid);
  stroke-width: 1.2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}
.flow__waves path { vector-effect: non-scaling-stroke; }
.flow__waves g { animation: wave-drift 10s ease-in-out infinite; }
@keyframes wave-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* phones stacked on small screens */
@media (max-width: 760px) {
  .flow-section { padding-top: 88px; }
  .flow { aspect-ratio: auto; container-type: normal; max-width: 420px; padding: 24px 24px 120px; }
  .flow__path { display: none; }
  .flow__step { display: flex; flex-direction: column; align-items: center; position: relative; padding-bottom: 72px; }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    height: 48px;
    border-left: 2px dashed var(--gold);
    opacity: 0.6;
  }
  .flow__phone { position: relative; left: auto; top: auto; width: 64%; transform: none !important; }
  .flow__step:last-child .flow__phone { width: 86%; }
  .flow__phone img { animation-name: phone-float-sm; }
  @keyframes phone-float-sm { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
  .flow__label { position: static; order: -1; transform: none; margin-bottom: 22px; gap: 12px; white-space: normal; }
  .flow__num { width: 44px; height: 44px; font-size: 20px; }
  .flow__label h3 { font-size: 19px; }
  .flow__step.is-active .flow__num { box-shadow: 0 0 0 6px rgb(211 168 76 / 0.16), 0 0 24px rgb(211 168 76 / 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .flow__phone img, .flow__waves g { animation: none; }
  .js .flow__phone, .js .flow__label { opacity: 1; translate: none; transition: none; }
}

/* ---------- Mobile hero ----------
   The video fills the whole hero on phones too, centre-cropped like on desktop.
   Phones load a portrait cut of the video (608x1080), so the crop stays sharp
   and the download stays small. */
@media (max-width: 700px) {
  .hero { padding: 120px 0 104px; }
  .hero__bg video { object-position: 50% 50%; }
  .hero__toggle { bottom: 24px; width: 36px; height: 36px; }
  .hero__scroll { bottom: 28px; }
}

@media (max-width: 700px) {
  .hero__eyebrow { margin-bottom: 20px; height: 30px; font-size: 11px; }
  .hero .lead { margin-top: 18px; font-size: 16px; }
  .hero__actions { margin-top: 28px; }
  .btn--hero { height: 50px; padding: 0 22px; border-radius: 18px; }
  .hero .store { width: auto; min-width: 140px; height: 46px; padding: 0 14px; }
  .hero .store strong { font-size: 14px; }
}