/* ==========================================================================
   One to One - landing page styles
   Brand palette from the brand board; structure and atmosphere inspired by
   wope.com (dark canvas, spotlight glow, perspective grid, hairline panels,
   pill controls, accordion FAQ, glowing CTA card).
   Type: Jost (display, wordmark, labels) + Geist (body, UI).
   Radius rule: interactive = pill, containers = 20px, phone = 40px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* palette */
  --bg: #0B0712;            /* cosmic black */
  --bg-2: #0F0819;
  --plum: #170226;          /* midnight plum */
  --violet: #2C1248;        /* deep violet */
  --aubergine: #4A1D6B;     /* royal aubergine */
  --uv: #7950A8;            /* ultraviolet */
  --lavender: #BDA6D8;      /* moonlit lavender */
  --opal: #F0EAF5;          /* pale opal */

  --ink: #F0EAF5;
  --body: #CFC4DD;
  --muted: #9A8DB0;
  --error: #E8B4C3;

  /* aurora (hero background). Two overlay tints plus the pulse cycle; the
     drifting blobs below read from --uv / --aubergine / --lavender. */
  --aurora-1: rgba(121, 80, 168, 0.22);
  --aurora-2: rgba(189, 166, 216, 0.13);
  --aurora-pulse: 10s;

  --line: rgba(189, 166, 216, 0.14);
  --line-strong: rgba(189, 166, 216, 0.28);
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);

  /* type */
  --font-display: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* shape */
  --r-card: 20px;
  --r-pill: 999px;
  --r-phone: 40px;

  /* layout */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
strong, b { font-weight: 600; }
::selection { background: rgba(121, 80, 168, 0.5); color: var(--opal); }

/* faint star field, fixed and cheap */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(240, 234, 245, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 68% 8%, rgba(240, 234, 245, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 42%, rgba(189, 166, 216, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 66%, rgba(240, 234, 245, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 88%, rgba(240, 234, 245, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(189, 166, 216, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 74%, rgba(240, 234, 245, 0.3) 50%, transparent 51%);
  background-size: 1100px 900px;
}

/* --------------------------------------------------------------- type */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.2vw, 4.75rem); letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; }
h4 { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--ink); letter-spacing: 0.01em; }

p { text-wrap: pretty; }
.lede { font-size: 1.125rem; color: var(--body); max-width: 56ch; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lavender);
}
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 28ch;
  margin-top: 64px;
  text-wrap: balance;
}
.statement--inline { margin-top: 32px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.smallprint { font-size: 0.9rem; color: var(--muted); max-width: 64ch; margin-top: 32px; }

/* --------------------------------------------------------------- layout */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 9vw, 120px) 0; }
.section__head { max-width: 720px; display: grid; gap: 18px; }
.section__head--center { margin: 0 auto; text-align: center; justify-items: center; }
.section__head--center .lede { max-width: 48ch; }

/* --------------------------------------------------------------- components */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: var(--r-pill);
  font: 500 0.9375rem/1 var(--font-body);
  letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: opacity 0.2s ease, transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--opal); color: var(--bg);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.btn--primary:hover { opacity: 0.86; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; }
.btn--sm { height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn--lg { height: 52px; padding: 0 28px; font-size: 1rem; }
.btn__busy { display: none; }
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.btn.is-busy .btn__label { display: none; }
.btn.is-busy .btn__busy { display: inline; }
.btn.is-busy .btn__busy::after { content: "…"; }

.pill {
  display: inline-block; padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lavender);
}

.panel {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.panel__label {
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lavender);
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--lavender); text-decoration: none; font-weight: 500; font-size: 0.9375rem;
  margin-top: 40px;
  transition: color 0.2s ease, gap 0.25s var(--ease);
}
.link-arrow:hover { color: var(--ink); gap: 12px; }
.link-arrow i { font-size: 1.1em; }

.glyph { color: var(--lavender); }

/* --------------------------------------------------------------- stellar buttons
   Dark glass pill. A cursor-tracked highlight rides the 1px border (transparent
   border + padding-box fill + border-box gradient) and a field of small
   four-point stars twinkles inside, masked to a circle around the pointer.
   Always on: with nobody hovering, the highlight centre (--ax/--ay) orbits the
   pill on a CSS animation. On hover or keyboard focus (.is-lit) the centre
   switches to --mx / --my, written by main.js in px (50% defaults centre it
   for focus). --cx / --cy is whichever pair is active. */
@property --ax { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --ay { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.btn--stellar {
  --mx: 50%;
  --my: 50%;
  --cx: var(--ax);
  --cy: var(--ay);
  position: relative;
  isolation: isolate;
  color: var(--ink);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(rgba(189, 166, 216, 0.18), rgba(189, 166, 216, 0.18)) border-box;
  animation: stellar-orbit 7s linear infinite;
}
.btn--stellar.btn--sm { animation-delay: -3.5s; }
.btn--stellar.is-lit { --cx: var(--mx); --cy: var(--my); }
.btn--stellar::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
    linear-gradient(var(--bg), var(--bg)) padding-box,
    radial-gradient(120px circle at var(--cx) var(--cy),
      rgba(240, 234, 245, 0.95), rgba(189, 166, 216, 0.35) 45%, rgba(189, 166, 216, 0.14) 100%) border-box;
  opacity: 0.85;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.btn--stellar.is-lit::before { opacity: 1; transition-duration: 0.18s; }

.btn__stars {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.32s ease;
  -webkit-mask-image: radial-gradient(90px circle at var(--cx) var(--cy), #000 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(90px circle at var(--cx) var(--cy), #000 0%, #000 40%, transparent 100%);
}
.btn--stellar.is-lit .btn__stars { opacity: 1; transition-duration: 0.18s; }
.btn__stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0EAF5' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(0);
  animation: twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: transform, opacity;
}
.btn__stars i.is-lavender {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23BDA6D8' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E");
}
@keyframes stellar-orbit {
  0%    { --ax: 0%;   --ay: 50%; }
  12.5% { --ax: 15%;  --ay: 0%; }
  25%   { --ax: 50%;  --ay: 0%; }
  37.5% { --ax: 85%;  --ay: 0%; }
  50%   { --ax: 100%; --ay: 50%; }
  62.5% { --ax: 85%;  --ay: 100%; }
  75%   { --ax: 50%;  --ay: 100%; }
  87.5% { --ax: 15%;  --ay: 100%; }
  100%  { --ax: 0%;   --ay: 50%; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: rotate(var(--rot)) scale(0); }
  50% { opacity: 1; transform: rotate(calc(var(--rot) + 30deg)) scale(1); }
}

/* --------------------------------------------------------------- nav */
.scroll-sentinel { position: absolute; top: 48px; height: 1px; width: 1px; }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(11, 7, 18, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 36px; height: auto; }
.brand__word {
  font-family: var(--font-display); font-weight: 400; font-size: 0.875rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--opal);
  transform: translateY(1px);
}
.nav__links { display: flex; gap: 32px; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__toggle {
  display: none; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink); font-size: 1.25rem;
  place-items: center;
}
.nav__mobile {
  display: grid;
  background: rgba(11, 7, 18, 0.94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 16px;
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { padding: 14px 4px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; border-bottom: 1px solid var(--line); }
.nav__mobile a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(100dvh, 960px);
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + 48px) 0 56px;
  overflow: hidden;
  isolation: isolate;
}
/* aurora: two tinted radial washes that pulse together, plus three colour
   fields drifting on long mirrored cycles, all in brand ultraviolet,
   aubergine and lavender. The fields are radial gradients rather than
   blurred solids, so their soft edges cost nothing to composite and only
   transform animates. This is the deepest hero layer, under the grid. */
.hero__aurora {
  position: absolute; inset: 0; z-index: -3;
  pointer-events: none; overflow: hidden;
}
.hero__aurora-pulse {
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 36% 32%, var(--aurora-1) 0%, transparent 62%),
    radial-gradient(circle at 66% 60%, var(--aurora-2) 0%, transparent 66%);
  opacity: 0.55;
  animation: aurora-pulse var(--aurora-pulse) ease-in-out infinite;
}
.hero__blob {
  position: absolute;
  width: 62%; height: 62%;
  border-radius: 50%;
  /* closest-side keeps the fade inside the box, so the field never meets its
     own edge and no seam shows against the canvas */
  background: radial-gradient(circle closest-side, var(--c) 0%, transparent 100%);
  opacity: 0.42;
  will-change: transform;
}
.hero__blob--uv {
  --c: rgba(121, 80, 168, 0.72);
  top: -24%; left: -20%;
  animation: aurora-drift-a 30s var(--ease) infinite alternate;
}
.hero__blob--aubergine {
  --c: rgba(74, 29, 107, 0.85);
  bottom: -26%; right: -20%;
  width: 66%; height: 66%;
  animation: aurora-drift-b 40s var(--ease) infinite alternate;
}
.hero__blob--lavender {
  --c: rgba(189, 166, 216, 0.3);
  top: 24%; left: 30%;
  width: 40%; height: 40%;
  opacity: 0.32;
  animation: aurora-drift-c 50s var(--ease) infinite alternate;
}
@keyframes aurora-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.68; transform: scale(1.06); }
}
@keyframes aurora-drift-a {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to { transform: translate3d(6%, 4%, 0) scale(1.18); }
}
@keyframes aurora-drift-b {
  from { transform: translate3d(5%, 3%, 0) scale(1); }
  to { transform: translate3d(-6%, -4%, 0) scale(1.24); }
}
@keyframes aurora-drift-c {
  from { transform: translate3d(3%, -5%, 0) scale(0.92); }
  to { transform: translate3d(-4%, 6%, 0) scale(1.12); }
}

/* twinkling stars, injected by main.js into any .starfield. Each layer sets
   its own mask and stacking; the dots themselves are shared. The hero fades
   out before the section seam so nothing sparkles on the edge of the trust
   strip. Dots sit above the glow, behind the copy. */
.starfield {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.starfield i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%; background: var(--c);
  opacity: 0; transform: scale(0.5);
  animation: star-twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: opacity, transform;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: var(--peak); transform: scale(1); }
}
.hero__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 94%);
}

.hero__grid {
  position: absolute; inset: 0; z-index: -2;
  pointer-events: none; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(70% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 92%);
  mask-image: radial-gradient(70% 88% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 92%);
}
.hero__grid::before {
  content: "";
  position: absolute; left: -40%; right: -40%; top: 0; bottom: -20%;
  background-image:
    linear-gradient(rgba(189, 166, 216, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 166, 216, 0.13) 1px, transparent 1px);
  background-size: 120px 120px;
  transform-origin: 50% 0%;
  transform: rotateX(56deg);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 36%, rgba(121, 80, 168, 0.46), transparent 70%),
    radial-gradient(68% 46% at 50% 44%, rgba(74, 29, 107, 0.36), transparent 72%),
    linear-gradient(180deg, transparent 60%, var(--bg) 100%);
}
.hero__inner { text-align: center; display: grid; justify-items: center; }

.hero__mark { position: relative; width: 150px; height: 180px; margin-bottom: 20px; }
.hero__half {
  position: absolute; inset: 0;
  background: url("assets/mark-900.png") center / contain no-repeat;
  filter: drop-shadow(0 0 24px rgba(189, 166, 216, 0.35));
}
.hero__half--l { clip-path: inset(0 50% 0 0); }
.hero__half--r { clip-path: inset(0 0 0 50%); }
.hero__core {
  position: absolute; left: 50%; top: 50%; width: 70%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(189, 166, 216, 0.55) 22%, transparent 60%);
  filter: blur(8px);
}

.hero__eyebrow { margin-bottom: 22px; }
.hero__title { max-width: 22ch; }
.hero__lede { margin-top: 26px; max-width: 58ch; font-size: 1.125rem; color: var(--body); }
.hero__cta { margin-top: 36px; }
.hero__meta {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0;
  font-size: 0.875rem; color: var(--muted);
}
.hero__meta strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hero__meta span + span { padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line-strong); }

/* --------------------------------------------------------------- trust strip
   The four USPs. Each cell carries a matching icon and, on hover, a cursor-
   following spotlight (--mx/--my written by main.js), a lifted glowing icon
   with a one-shot ring pulse, and brighter text. */
.trust { padding: 8px 0 0; }
.trust__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust__item {
  --mx: 50%;
  --my: 50%;
  position: relative; overflow: hidden;
  padding: 34px 28px 36px;
  display: grid; gap: 8px; align-content: start;
  border-left: 1px solid var(--line);
  transition: background 0.35s ease;
}
.trust__item:first-child { border-left: 0; }
.trust__item::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(121, 80, 168, 0.30), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.trust__item::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(189, 166, 216, 0.7), transparent);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease);
}
.trust__item:hover { background: rgba(255, 255, 255, 0.02); }
.trust__item:hover::before { opacity: 1; }
.trust__item:hover::after { transform: scaleX(1); }

.trust__icon {
  position: relative;
  width: 48px; height: 48px; margin-bottom: 12px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--lavender); font-size: 1.45rem;
  transition: transform 0.4s var(--ease), border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.trust__icon::after {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(189, 166, 216, 0.7);
  opacity: 0;
}
.trust__item:hover .trust__icon {
  transform: translateY(-4px);
  color: var(--opal);
  border-color: rgba(189, 166, 216, 0.65);
  background: rgba(121, 80, 168, 0.28);
  box-shadow: 0 10px 30px -12px rgba(121, 80, 168, 0.8);
}
.trust__item:hover .trust__icon::after { animation: trust-ping 0.9s var(--ease) both; }
.trust__item:hover .trust__icon i { animation: trust-breathe 2.4s ease-in-out infinite; }
@keyframes trust-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
@keyframes trust-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.trust__item strong {
  position: relative;
  font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--ink);
  letter-spacing: -0.01em;
}
.trust__desc { position: relative; color: var(--muted); font-size: 0.9375rem; transition: color 0.3s ease; }
.trust__item:hover .trust__desc { color: var(--body); }

/* --------------------------------------------------------------- ratio */
.ratio__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.ratio__copy { display: grid; gap: 20px; }
.ratio__copy h2 { max-width: 16ch; margin-bottom: 10px; }
.ratio__copy strong { color: var(--ink); font-weight: 500; }
.ratio__pairs { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }

.ratio__panel { padding: 36px 36px 32px; overflow: hidden; }
.ratio__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 110%, rgba(121, 80, 168, 0.28), transparent 70%);
}
.ratio__counters {
  position: relative;
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.counter { display: grid; gap: 2px; }
.counter:last-child { text-align: right; }
.counter__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.75rem, 4.6vw, 4rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.counter__lbl { color: var(--muted); font-size: 0.9375rem; }
.ratio__lock { display: grid; justify-items: center; gap: 10px; color: var(--lavender); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.1em; }
.ratio__lock i {
  width: 52px; height: 52px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 1.35rem;
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.ratio__bar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 6px; margin-top: 30px; }
.ratio__bar span { border-radius: var(--r-pill); background: linear-gradient(90deg, var(--uv), var(--lavender)); transform-origin: right center; }
.ratio__bar span:last-child { background: linear-gradient(90deg, var(--lavender), var(--uv)); transform-origin: left center; }
.ratio__note { position: relative; margin-top: 18px; font-size: 0.875rem; color: var(--muted); text-align: center; font-style: italic; }

/* --------------------------------------------------------------- verify */
.verify__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.verify__step { padding: 28px 32px 36px; display: grid; gap: 14px; align-content: start; }
.verify__step h3 span { color: var(--lavender); }
.verify__step p { color: var(--body); }
.verify__ui {
  height: 150px; margin-bottom: 14px;
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(44, 18, 72, 0.5), rgba(23, 2, 38, 0.3));
  display: grid; align-content: center; gap: 10px; padding: 18px;
  overflow: hidden;
}
.verify__ui--id { display: flex; align-items: center; justify-content: center; gap: 18px; }

.mini-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.mini-row--faded { opacity: 0.55; }
.mini-avatar { width: 32px; height: 32px; border-radius: var(--r-pill); flex: none; background: linear-gradient(135deg, var(--aubergine), var(--uv)); }
.mini-avatar--lg { width: 44px; height: 44px; }
.mini-lines { flex: 1; display: grid; gap: 6px; }
.mini-lines i { display: block; height: 6px; border-radius: var(--r-pill); background: rgba(189, 166, 216, 0.25); }
.mini-lines i:last-child { width: 60%; }
.mini-stamp { font-size: 0.72rem; font-weight: 500; color: var(--bg); background: var(--opal); padding: 4px 10px; border-radius: var(--r-pill); }
.mini-stamp--pending { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.mini-doc {
  width: 92px; height: 62px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center; font-size: 1.7rem; color: var(--lavender);
}
.mini-doc--selfie { width: 62px; border-radius: var(--r-pill); }
.mini-match { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--opal); color: var(--bg); display: grid; place-items: center; font-size: 0.95rem; flex: none; }

.verify__result { margin-top: 56px; max-width: 720px; display: grid; gap: 8px; }
.verify__result > p:first-child { font-size: 1.125rem; }

.ledger { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger__col { padding: 28px 28px; border-left: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.ledger__col:first-child { border-left: 0; padding-left: 0; }
.ledger__col ul { display: grid; gap: 8px; }
.ledger__col li, .ledger__col p { font-size: 0.9375rem; color: var(--muted); }

/* --------------------------------------------------------------- the case */
.case { position: relative; }
.case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
}
.case__inner { max-width: 760px; display: grid; gap: 22px; }
.case__inner h2 { max-width: 22ch; margin-bottom: 12px; }
.case__inner p { font-size: 1.125rem; }

/* --------------------------------------------------------------- interest bento */
.bento { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 48px; }
.bento__cell { padding: 28px 32px 36px; display: grid; gap: 14px; align-content: start; }
.bento__cell h3 .glyph { margin-right: 4px; }
.bento__cell--super { background: linear-gradient(180deg, rgba(121, 80, 168, 0.22), rgba(255, 255, 255, 0.01)); }
/* the Super Interest corner glow. It used to be a ::before on the card, but
   .starcard owns that pseudo now, so it lives in its own clipped layer and
   the card no longer needs overflow: hidden (which cut off the border light). */
.bento__glow {
  position: absolute; inset: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
}
.bento__glow::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(189, 166, 216, 0.28), transparent 65%);
}
.interest__ui { position: relative; margin-bottom: 14px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(11, 7, 18, 0.45); }
.mini-profile { display: flex; align-items: center; gap: 14px; }
.mini-profile__meta { display: grid; gap: 2px; flex: 1; }
.mini-profile__meta b { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.mini-profile__meta em { font-style: normal; font-size: 0.78rem; color: var(--lavender); display: inline-flex; gap: 5px; align-items: center; }
.chip { border-radius: var(--r-pill); padding: 8px 14px; font-size: 0.8rem; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface-2); white-space: nowrap; }
.mini-mutual { margin-top: 14px; display: flex; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--lavender); }
.mini-mutual__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--lavender); box-shadow: 0 0 0 4px rgba(189, 166, 216, 0.18); }
.mini-stack { position: relative; height: 112px; }
.mini-stack__card { position: absolute; left: 0; right: 0; height: 56px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.mini-stack__card:nth-child(2) { top: 24px; transform: scale(0.94); opacity: 0.6; }
.mini-stack__card:nth-child(3) { top: 48px; transform: scale(0.88); opacity: 0.3; }
.mini-stack__card--top {
  top: 0; z-index: 1;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: linear-gradient(90deg, rgba(121, 80, 168, 0.5), rgba(44, 18, 72, 0.75));
  border-color: rgba(189, 166, 216, 0.4); color: var(--ink); font-size: 0.85rem;
}

/* --------------------------------------------------------------- inside (phones) */
.inside__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.screen figcaption { margin-top: 22px; font-size: 0.9375rem; color: var(--muted); line-height: 1.55; }
.screen figcaption strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px; }

.phone {
  border-radius: var(--r-phone);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #140B20;
  padding: 10px;
  aspect-ratio: 9 / 19.2;
  box-shadow: 0 50px 90px -50px rgba(10, 1, 24, 0.95), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.phone__screen {
  height: 100%;
  border-radius: calc(var(--r-phone) - 9px);
  overflow: hidden;
  background: linear-gradient(180deg, #170226 0%, #0B0712 100%);
  display: flex; flex-direction: column;
  font-size: 12px; line-height: 1.4; color: var(--body);
}
.app__topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px; color: var(--lavender); font-size: 16px; }
.app__mark { width: 18px; }
.app__topbar--title { color: var(--ink); }
.app__topbar--title b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.app__count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); display: grid; place-items: center; font-size: 11px; color: var(--ink); }

.app__photo {
  flex: 1; min-height: 0; margin: 0 10px; border-radius: 18px; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(189, 166, 216, 0.35), transparent 70%),
    linear-gradient(160deg, #4A1D6B 0%, #2C1248 45%, #170226 100%);
}
.app__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 7, 18, 0.9), transparent 55%); }
.app__photo-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; color: var(--ink); font-size: 11px; }
.app__photo-meta b { font-family: var(--font-display); font-weight: 400; font-size: 19px; width: 100%; }
.app__photo-meta span { display: inline-flex; gap: 4px; align-items: center; color: var(--lavender); }
.app__body { padding: 12px 14px 4px; display: grid; gap: 8px; }
.app__label { font-size: 11px; color: var(--muted); }
.app__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.app__tags span { font-size: 10.5px; padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink); }
.app__prompt { font-family: var(--font-display); font-size: 12.5px; color: var(--ink); font-style: italic; }
.app__actions { display: flex; gap: 8px; padding: 10px 14px 16px; margin-top: auto; }
.app__actions--stack { flex-direction: column; width: 100%; padding: 0; margin-top: 0; }
.app__btn { flex: 1; height: 36px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: 11.5px; font-weight: 500; }
.app__btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.app__btn--fill { background: var(--opal); color: var(--bg); }

.app__list { padding: 6px 12px; display: grid; gap: 8px; }
.app__card { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.app__card b { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: 12px; font-weight: 500; }
.app__card b i { color: var(--lavender); }
.app__card p { margin: 2px 0 0; font-size: 10.5px; color: var(--muted); }
.app__card--super { background: linear-gradient(90deg, rgba(121, 80, 168, 0.38), rgba(44, 18, 72, 0.55)); border-color: rgba(189, 166, 216, 0.38); }
.app__card--super p { color: var(--body); }
.app__card-glyph { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--opal); color: var(--bg); display: grid; place-items: center; flex: none; font-size: 13px; }
.app__card--faded { opacity: 0.5; }
.app__avatar { width: 34px; height: 34px; border-radius: var(--r-pill); flex: none; background: linear-gradient(135deg, var(--uv), var(--violet)); }
.app__avatar--b { background: linear-gradient(135deg, var(--aubergine), var(--lavender)); }
.app__avatar--c { background: linear-gradient(135deg, var(--violet), var(--uv)); }
.app__avatar--d { background: linear-gradient(135deg, var(--lavender), var(--aubergine)); }
.app__avatar--e { background: radial-gradient(circle at 30% 30%, var(--lavender), var(--aubergine) 70%); }
.app__avatar--lg { width: 72px; height: 72px; }
.app__empty { margin: auto 16px 16px; font-size: 10.5px; color: var(--muted); text-align: center; }

.app--align { align-items: center; justify-content: center; text-align: center; padding: 24px 18px; position: relative; }
.app__align-glow { position: absolute; inset: 0; background: radial-gradient(55% 38% at 50% 40%, rgba(121, 80, 168, 0.55), transparent 70%); }
.app__align-mark { width: 84px; position: relative; margin-bottom: 14px; filter: drop-shadow(0 0 18px rgba(189, 166, 216, 0.4)); }
.app__align-title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 6px; position: relative; }
.app__align-sub { font-size: 12px; color: var(--body); margin-bottom: 22px; position: relative; }

.app__me { display: grid; justify-items: center; gap: 6px; padding: 16px; text-align: center; }
.app__me b { display: flex; gap: 5px; align-items: center; color: var(--ink); font-weight: 500; font-size: 12.5px; margin-top: 6px; }
.app__me b i { color: var(--lavender); }
.app__me span { font-size: 11px; color: var(--muted); }
.app__rows { padding: 8px 12px; display: grid; gap: 6px; }
.app__rows div { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--ink); font-size: 12px; }
.app__rows div i:first-child { color: var(--lavender); font-size: 14px; }
.app__rows div i:last-child { margin-left: auto; color: var(--muted); }

/* --------------------------------------------------------------- usp grid (what makes us different)
   Seven glass cards, each carrying its own slow field of stars clipped to
   the card (the page-level body::before field keeps the gutters alive). The
   outline light: one pointermove listener on
   .usp__grid (main.js) writes --mx/--my to every card relative to its own
   rect, so the hovered card lights fully and its neighbours catch a glancing
   light on the nearest edge. The ring is a 1px masked pseudo-element (a
   dual background-clip ring would tint a translucent face); a second pseudo
   adds a faint interior wash at the same point. */
.usp {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(23, 2, 38, 0.42) 18%, rgba(23, 2, 38, 0.42) 82%, transparent 100%);
}
.usp .container { position: relative; z-index: 1; }
/* per-card star layers, injected by main.js as the first child of every
   .starcard. The clip lives here (border-radius: inherit + overflow: hidden),
   never on the card, so the border glow at inset: -1px is not cut off. Dots
   breathe on 2.5-6s cycles, sparkles flare once per 6-9s cycle; the layer
   sits at 0.77 opacity at rest and lifts to 1 on hover. */
.starcard__stars {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
  pointer-events: none;
  opacity: 0.72;
  transition: opacity 0.35s ease, filter 0.35s ease;
}
/* the card under the pointer sharpens its own sky: the whole layer comes up
   and every star in it gains a halo. This is keyed to the card, not the grid,
   so only the one being hovered intensifies. Keyboard focus does the same. */
.starcard:hover .starcard__stars,
.starcard:focus-within .starcard__stars {
  opacity: 1;
  filter: brightness(1.4);
}
.starcard__stars i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  color: var(--c); background: currentColor;
  opacity: 0; transform: scale(0.45);
  animation: card-twinkle var(--dur) ease-in-out infinite var(--delay);
  will-change: opacity, transform;
  transition: box-shadow 0.35s ease;
}
/* the halo is on the round dots only; a square glow behind a sparkle reads
   as a smudge, and the layer's brightness already lifts those */
.starcard:hover .starcard__stars i:not(.is-sparkle),
.starcard:focus-within .starcard__stars i:not(.is-sparkle) {
  box-shadow: 0 0 7px 0 currentColor;
}
/* dark for most of a long cycle, then one brief appearance */
.starcard__stars i.is-blink { animation-name: card-blink; }
/* sparkles stay out most of the cycle, then flare once with a quarter turn */
.starcard__stars i.is-sparkle {
  animation-name: card-sparkle; animation-timing-function: ease-in-out;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0EAF5' d='M12 0C12 7.5 16.5 12 24 12 16.5 12 12 16.5 12 24 12 16.5 7.5 12 0 12 7.5 12 12 7.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* every star goes out completely between flares, rather than resting at a
   floor, so the field keeps rearranging itself as you watch it */
@keyframes card-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.45); }
  42%, 58% { opacity: var(--peak); transform: scale(1.1); }
}
@keyframes card-blink {
  0%, 64% { opacity: 0; transform: scale(0.3); }
  76% { opacity: var(--peak); transform: scale(1.15); }
  88%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes card-sparkle {
  0%, 62%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  72% { opacity: var(--peak); transform: scale(1.35) rotate(45deg); }
  82% { opacity: 0.3; transform: scale(0.7) rotate(90deg); }
}

.usp__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 56px; }
.usp__cell {
  padding: 24px 28px 32px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    linear-gradient(rgba(11, 7, 18, 0.45), rgba(11, 7, 18, 0.45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: grid; gap: 12px; align-content: start;
}
.usp__cell--even { grid-column: 1 / span 7; }
.usp__cell--verified { grid-column: 8 / span 5; }
.usp__cell--approved { grid-column: 1 / span 4; }
.usp__cell--intentional { grid-column: 5 / span 4; }
.usp__cell--active { grid-column: 9 / span 4; }
.usp__cell--private { grid-column: 1 / span 5; }
.usp__cell--rare { grid-column: 6 / span 7; }

/* Shared card treatment: a star field behind the copy and a cursor-tracked
   light that rides the 1px border (::before) with a soft wash inside it
   (::after). main.js writes --mx / --my per card and puts .is-lit on the
   grid, so every card in a grid lights together while the one under the
   pointer is brightest. Used by the standards grid, the two verification
   steps and the Interest cards. A card only needs the .starcard class; its
   own padding, background and border stay where they are. */
.starcard {
  --mx: 50%;
  --my: 50%;
  position: relative; isolation: isolate;
}
/* Content clears the star layer. The :not() list matters: a bare
   `.starcard > *` has the same specificity as `.starcard__stars` and, coming
   later, would override its `position: absolute`, collapsing the layer to
   zero height and hiding every star. Excluding the decorative layers here
   leaves their own positioning intact. */
.starcard > *:not(.starcard__stars):not(.bento__glow) { position: relative; z-index: 1; }
.starcard::before {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1px;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(240, 234, 245, 0.9), rgba(189, 166, 216, 0.30) 45%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.starcard::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(189, 166, 216, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.starcard-grid.is-lit .starcard::before, .starcard-grid.is-lit .starcard::after,
.starcard:focus-within::before, .starcard:focus-within::after { opacity: 1; transition-duration: 0.18s; }

.usp__icon { font-size: 1.5rem; color: var(--lavender); margin-top: 6px; }
.usp__cell h3 { font-size: 1.375rem; }
.usp__cell p { color: var(--muted); }

.usp__ui {
  position: relative; overflow: hidden;
  min-height: 150px; padding: 18px;
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(11, 7, 18, 0.38);
  display: grid; place-items: center; align-content: center; gap: 12px;
}
.usp__chip, .usp__caption { position: relative; }
.usp__caption { font-size: 0.8rem; color: var(--muted); text-align: center; }
.usp__arrow { color: var(--muted); font-size: 0.9rem; }
.chip--seal { display: inline-flex; align-items: center; gap: 6px; background: var(--opal); color: var(--bg); border-color: var(--opal); }
.chip--seal i { font-size: 0.95rem; }
.chip .ph-map-pin { color: var(--lavender); }

/* even: two facing columns of equal dots with a level line */
.usp__ui--even { grid-template-columns: 1fr; }
.usp__balance { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 22px; width: 100%; max-width: 360px; }
.usp__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: end; }
.usp__side--men { justify-items: start; }
.usp__side span { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender), var(--uv)); opacity: 0.9; }
.usp__side--men span { background: linear-gradient(135deg, var(--uv), var(--aubergine)); }
.usp__level { width: 1px; height: 64px; background: linear-gradient(180deg, transparent, var(--lavender), transparent); }

/* verified: id -> face -> seal */
.usp__strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.usp__ui--verified .mini-doc { width: 66px; height: 46px; font-size: 1.3rem; }
.usp__ui--verified .mini-doc--selfie { width: 46px; }

/* approved: four-node stepper, third lit */
.usp__stepper { display: grid; gap: 10px; width: 100%; max-width: 220px; font-size: 0.85rem; color: var(--muted); }
.usp__stepper li { display: flex; align-items: center; gap: 12px; position: relative; }
.usp__stepper li span {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-strong); background: transparent;
}
.usp__stepper li.is-done { color: var(--body); }
.usp__stepper li.is-done span { background: var(--uv); border-color: var(--uv); }
.usp__stepper li.is-on { color: var(--ink); }
.usp__stepper li.is-on span { background: var(--opal); border-color: var(--opal); box-shadow: 0 0 0 4px rgba(189, 166, 216, 0.22), 0 0 18px rgba(189, 166, 216, 0.6); }

/* intentional */
.usp__ui--intentional .mini-mutual { margin-top: 0; }

/* active: reuse mini rows */
.usp__ui--active { grid-template-columns: 1fr; align-content: center; }
.usp__ui--active .mini-row { width: 100%; }

/* private */
.usp__ui--private { grid-auto-flow: column; justify-content: center; align-items: center; gap: 16px; }
.usp__lock {
  width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 1.2rem; color: var(--lavender);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}

/* rare alignment: orbit lines crossing at one bright point */
.usp__ui--rare { padding: 0; min-height: 190px; border-color: rgba(189, 166, 216, 0.2); background: radial-gradient(60% 80% at 50% 50%, rgba(121, 80, 168, 0.28), rgba(11, 7, 18, 0.35) 70%); }
.usp__orbits { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------- how it works */
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; margin-top: 56px; }
.how__steps li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.how__n { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--lavender); }
.how__steps h3 { font-size: 1.25rem; }
.how__steps p { color: var(--muted); font-size: 1rem; }
.how__cta { margin-top: 64px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.how__city { color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------- voices */
.voices__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; margin-top: 56px; }
.voice { padding-left: 24px; border-left: 1px solid var(--line-strong); display: grid; gap: 18px; align-content: start; }
.voice p { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.voice--lead { grid-column: 1 / span 7; }
.voice--lead p { font-size: clamp(1.75rem, 2.8vw, 2.375rem); }
.voice:nth-child(2) { grid-column: 8 / span 5; }
.voice:nth-child(3) { grid-column: 4 / span 6; margin-top: 8px; }
.voice footer { display: grid; gap: 2px; font-size: 0.9rem; }
.voice footer b { color: var(--ink); font-weight: 500; }
.voice footer span { color: var(--muted); }
.voices__count { margin-top: 64px; font-family: var(--font-display); font-size: 1.25rem; color: var(--muted); }
.voices__count strong { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- membership */
.membership__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.membership__copy { display: grid; gap: 20px; }
.membership__copy h2 { max-width: 14ch; }
.membership__copy .statement--inline { margin-top: 12px; }
.membership__never-title { color: var(--muted); font-size: 0.9375rem; margin-bottom: 8px; }
.membership__never li { display: flex; gap: 18px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.membership__never li:last-child { border-bottom: 1px solid var(--line); }
.membership__never i { font-size: 1.4rem; color: var(--lavender); flex: none; margin-top: 2px; }
.membership__never b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------- safety */
.safety__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 56px; }
.safety__grid li { display: grid; gap: 6px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.safety__grid li b { font-family: var(--font-display); font-weight: 400; font-size: 1.125rem; color: var(--ink); }
.safety__grid li p { color: var(--muted); }
.safety__lead { grid-column: 1 / -1; display: flex !important; gap: 24px; align-items: center; padding: 28px 32px !important; border-top: 1px solid var(--line) !important; }
.safety__lead i { font-size: 2rem; color: var(--lavender); flex: none; }
.safety__lead b { font-size: 1.375rem; }
.safety__lead p { margin-top: 4px; }
.safety__links { display: flex; gap: 32px; flex-wrap: wrap; }
.safety__links .link-arrow { margin-top: 48px; }

/* --------------------------------------------------------------- waitlist */
.waitlist__card { padding: 72px 48px 64px; text-align: center; overflow: hidden; display: grid; justify-items: center; }
.waitlist__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(121, 80, 168, 0.5), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(121, 80, 168, 0.35), transparent 70%);
}
.waitlist__mark { position: relative; width: 72px; height: auto; filter: drop-shadow(0 0 22px rgba(189, 166, 216, 0.45)); }
.waitlist__head { position: relative; margin-top: 28px; display: grid; gap: 18px; justify-items: center; }
.waitlist__head p { max-width: 54ch; font-size: 1.125rem; }

.form { position: relative; width: 100%; max-width: 760px; margin-top: 48px; text-align: left; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: 0.875rem; color: var(--ink); font-weight: 500; }
.field label em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="number"], .field select {
  width: 100%; height: 48px; padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 400 1rem var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-appearance: none; appearance: none;
}
.field input:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(189, 166, 216, 0.18); background: rgba(255, 255, 255, 0.06); }
.field input[type="number"] { -moz-appearance: textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.select { position: relative; }
.select select { padding-right: 44px; }
.select select:invalid { color: var(--muted); }
.select select option { color: var(--ink); background: var(--plum); }
.select i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice label { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
  display: grid; place-items: center; height: 48px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--body); font-weight: 400; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choice input:checked + span { background: var(--opal); color: var(--bg); border-color: var(--opal); font-weight: 500; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(189, 166, 216, 0.28); }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; color: var(--body) !important; font-size: 0.9375rem !important; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--lavender); }
.check a { color: var(--lavender); }
.field__error { display: none; font-size: 0.8125rem; color: var(--error); }
.field.is-invalid .field__error { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid .choice span { border-color: var(--error); }

.form__submit { margin-top: 36px; display: grid; justify-items: center; gap: 18px; text-align: center; }
.form__note { font-size: 0.875rem; color: var(--muted); max-width: 52ch; }
.form__error { font-size: 0.9rem; color: var(--error); }
.form__error[hidden] { display: none; }

.waitlist__success { position: relative; margin-top: 40px; display: grid; justify-items: center; gap: 12px; max-width: 54ch; }
.waitlist__success[hidden] { display: none; }
.waitlist__success i { font-size: 2.5rem; color: var(--lavender); }
.waitlist__success h3 { font-size: 2rem; }
.waitlist__success p { font-size: 1.0625rem; }

/* --------------------------------------------------------------- faq
   Same night sky as the hero: a soft glow from the top edge and a field of
   twinkling stars behind the accordion. Both are decorative and sit behind
   the copy, so the section reads the same with JS off. */
.faq { position: relative; isolation: isolate; overflow: hidden; }
.faq__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 0%, rgba(121, 80, 168, 0.3), transparent 72%),
    radial-gradient(80% 50% at 50% 6%, rgba(74, 29, 107, 0.22), transparent 76%);
}
.faq__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 99%);
}

.faq__inner { max-width: 940px; }
.faq__inner .lede a { color: var(--lavender); text-decoration: none; transition: opacity 0.2s ease; }
.faq__inner .lede a:hover { opacity: 0.78; }

/* no rule above the first question: the list opens on the divider under it */
.faq__list { margin-top: 84px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 4px; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--ink); line-height: 1.3;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.faq__q:hover { color: var(--opal); }
.faq__q i { flex: none; color: var(--lavender); font-size: 1.25rem; transition: transform 0.35s var(--ease); }
.faq__q[aria-expanded="true"] i { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 2px solid var(--lavender); outline-offset: -2px; border-radius: 8px; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 4px 28px; color: var(--muted); max-width: 68ch; }
.faq__a a { color: var(--lavender); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* --------------------------------------------------------------- legal pages
   Terms and Privacy. Same night sky as the hero and the FAQ over the title,
   then a single reading column. Body copy sits a little larger and looser
   than the landing page, because these are read rather than scanned. */
.legal {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 72px) 0 56px;
}
.legal__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(44% 70% at 50% 0%, rgba(121, 80, 168, 0.3), transparent 72%),
    radial-gradient(90% 80% at 50% 0%, rgba(74, 29, 107, 0.2), transparent 78%);
}
.legal__stars {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 96%);
}
.legal__head { max-width: 780px; display: grid; gap: 20px; justify-items: start; }
.legal__head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: 8px 0;
  font-size: 0.875rem; color: var(--muted);
}
.legal__meta span + span { padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line-strong); }

.legal__doc { max-width: 780px; padding-bottom: clamp(72px, 9vw, 120px); }

/* contents list, so a long document can be entered part of the way down */
.legal__toc {
  margin-bottom: 8px; padding: 26px 28px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface);
}
.legal__toc h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 0.75rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--lavender);
  margin-bottom: 18px;
}
.legal__toc ol { display: grid; gap: 10px; counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: 12px; font-size: 0.9375rem; }
.legal__toc li::before { content: counter(toc) "."; color: var(--muted); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.legal__toc a { color: var(--body); text-decoration: none; transition: color 0.2s ease; }
.legal__toc a:hover { color: var(--ink); }

.legal__section { margin-top: 52px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__section > h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;
  padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line);
}
.legal__section h3 {
  font-size: 1.0625rem; font-family: var(--font-body); font-weight: 500;
  color: var(--ink); margin-top: 28px; margin-bottom: 10px;
}
.legal__section p { color: var(--body); }
.legal__section p + p { margin-top: 16px; }
.legal__section ul { display: grid; gap: 12px; margin-top: 16px; }
.legal__section li { position: relative; padding-left: 24px; color: var(--body); }
.legal__section li::before {
  content: ""; position: absolute; left: 6px; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lavender);
}
.legal__section a { color: var(--lavender); }

/* the capitalised passages are conspicuous on purpose in the source
   documents, so they keep their emphasis here rather than being softened */
.legal__notice {
  margin-top: 22px; padding: 22px 24px;
  border: 1px solid var(--line-strong); border-radius: var(--r-card);
  background: var(--surface);
  font-size: 0.875rem; line-height: 1.7; letter-spacing: 0.01em; color: var(--body);
}
.legal__notice p + p { margin-top: 14px; }

.legal__contact { display: grid; gap: 4px; margin-top: 18px; color: var(--body); }

/* placeholders the source documents leave open; deliberately loud so they
   cannot be published unnoticed */
.legal__todo { color: var(--error); border-bottom: 1px dashed currentColor; }

@media (max-width: 680px) {
  .legal { padding-top: calc(var(--nav-h) + 40px); }
  .legal__toc { padding: 22px 20px; }
  .legal__section { margin-top: 40px; }
  /* the meta line wraps here, so the separators would start a line */
  .legal__meta { display: grid; gap: 4px; }
  .legal__meta span + span { padding-left: 0; margin-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding: 88px 0 48px; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
/* brand block, then three link columns */
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.footer__brand { display: grid; gap: 22px; align-content: start; justify-items: start; }
.footer__tagline { color: var(--body); font-size: 1.0625rem; line-height: 1.45; }
.footer__cta { margin-top: 6px; }
.footer__col { display: grid; gap: 18px; align-content: start; }
.footer__col h4 { margin-bottom: 4px; }
.footer__col a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--ink); }

.footer__bottom {
  position: relative;
  margin-top: 96px; padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 0.875rem; color: var(--muted);
}
.footer__bottom::before {
  content: "";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: var(--line);
}
.footer__social { display: flex; gap: 6px; }
.footer__social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--muted); font-size: 1.2rem; text-decoration: none; transition: color 0.2s ease, background 0.2s ease; }
.footer__social a:hover { color: var(--ink); background: var(--surface-2); }

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* hero: the two paths converge, then the shared point lights up */
  .hero__half--l { animation: mark-left 1.6s var(--ease) both; }
  .hero__half--r { animation: mark-right 1.6s var(--ease) both; }
  .hero__core { opacity: 0; animation: mark-core 1.4s ease-out 0.9s both; }
  .hero__eyebrow, .hero__title, .hero__lede, .hero__cta, .hero__meta { animation: rise 1s var(--ease) both; }
  .hero__eyebrow { animation-delay: 0.55s; }
  .hero__title { animation-delay: 0.65s; }
  .hero__lede { animation-delay: 0.8s; }
  .hero__cta { animation-delay: 0.95s; }
  .hero__meta { animation-delay: 1.1s; }
  .hero__glow { animation: glow-in 1.8s ease-out both; }

  .ratio__bar span { transform: scaleX(0); transition: transform 1.2s var(--ease) 0.2s; }
  .is-in .ratio__bar span { transform: scaleX(1); }
}
@keyframes mark-left { from { transform: translateX(-56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-right { from { transform: translateX(56px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-core { from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn--stellar {
    background:
      linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
      linear-gradient(var(--bg), var(--bg)) padding-box,
      linear-gradient(rgba(189, 166, 216, 0.32), rgba(189, 166, 216, 0.32)) border-box;
  }
  .btn--stellar::before, .btn__stars { display: none; }
  .hero__aurora-pulse { opacity: 0.55; }
  .starfield i { opacity: 0.28; transform: none; }
  .starcard__stars { opacity: 1; }
  .starcard__stars i { opacity: 0.3; transform: none; }
  .starcard::before, .starcard::after { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .starcard::before, .starcard::after { display: none; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .voice--lead { grid-column: 1 / span 12; }
  .voice:nth-child(2) { grid-column: 1 / span 6; }
  .voice:nth-child(3) { grid-column: 7 / span 6; margin-top: 0; }
}

@media (max-width: 1024px) {
  .ratio__grid { grid-template-columns: 1fr; gap: 48px; }
  .ratio__copy h2 { max-width: 20ch; }
  .usp__grid { grid-template-columns: 1fr 1fr; }
  .usp__cell { grid-column: auto / span 1; }
  .usp__cell--even, .usp__cell--verified, .usp__cell--rare { grid-column: 1 / -1; }
  .membership__grid { grid-template-columns: 1fr; gap: 48px; }
  .bento { grid-template-columns: 1fr; }
  .bento__glow::before { inset: -30% -20% auto auto; width: 50%; }

  .inside__track {
    display: flex; overflow-x: auto; gap: 20px;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  .screen { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; }

  /* five columns stop fitting: brand on its own row, the three link columns
     share the next, and the contact card takes the full width below them */
  .footer__grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 40px); }
  .hero__mark { width: 118px; height: 142px; }
  .hero__meta { flex-direction: column; align-items: center; gap: 8px; }
  .hero__meta span + span { padding-left: 0; margin-left: 0; border-left: 0; }

  .trust__list { grid-template-columns: 1fr 1fr; }
  .trust__item { padding: 26px 20px 28px; }
  .trust__list li:nth-child(3) { border-left: 0; }
  .trust__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }

  .ratio__panel { padding: 28px 24px 26px; }
  .verify__steps { grid-template-columns: 1fr; }
  .ledger { grid-template-columns: 1fr; }
  .ledger__col { border-left: 0; padding: 22px 0; border-top: 1px solid var(--line); }
  .ledger__col:first-child { border-top: 0; }

  .how__steps { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .voice:nth-child(2), .voice:nth-child(3) { grid-column: 1 / span 12; }
  .safety__grid { grid-template-columns: 1fr; }
  .safety__lead { flex-direction: column; align-items: flex-start; gap: 14px; }

  .waitlist__card { padding: 56px 24px 48px; }
  .form__grid { grid-template-columns: 1fr; }
  .field--full { grid-column: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .usp__grid { grid-template-columns: 1fr; gap: 16px; }
  .usp__cell, .usp__cell--even, .usp__cell--verified, .usp__cell--rare { grid-column: auto; }
  .usp__cell { padding: 22px 22px 28px; }
  .starcard::before, .starcard::after { display: none; }
}

@media (max-width: 520px) {
  .btn--sm { padding: 0 14px; font-size: 0.8125rem; }
  .brand__word { display: none; }
  .trust__list { grid-template-columns: 1fr; }
  .trust__list li { border-left: 0; border-top: 1px solid var(--line); }
  .trust__list li:first-child { border-top: 0; }
  .how__steps { grid-template-columns: 1fr; }
  .ratio__counters { gap: 8px; }
  .counter__num { font-size: 2.5rem; }
  .ratio__lock i { width: 44px; height: 44px; }
  .footer__grid { grid-template-columns: 1fr; }
}