/* ---------- fonts ---------- */
@font-face {
  font-family: "Vercetti";
  src: url("fonts/Vercetti-Regular.woff2") format("woff2"),
       url("fonts/Vercetti-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens ---------- */
:root {
  --bg: #0B0E12;
  --ink: #ECE7D9;
  --ink-strong: #F7F3E8;
  --ink-muted: #B8B5AC;
  --ink-faint: #6E6B65;
  --hairline: rgba(236, 231, 217, 0.16);
  --hairline-strong: rgba(236, 231, 217, 0.32);
  --accent: #D4A574;

  --font-body: "Vercetti", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

html, body { height: 100%; }
html { scroll-behavior: auto; }

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

a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ---------- mountain backdrop ---------- */
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.backdrop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 160px;
  background: linear-gradient(180deg, rgba(11, 14, 18, 0) 0%, var(--bg) 100%);
}

.backdrop__image {
  position: absolute;
  inset: 0;
  background-image: url("mtn.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: slow-pan 40s var(--ease-in-out) infinite alternate;
}

.backdrop__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 14, 18, 0.82) 0%, rgba(11, 14, 18, 0.55) 38%, rgba(11, 14, 18, 0.18) 75%, rgba(11, 14, 18, 0.12) 100%),
    linear-gradient(180deg, rgba(11, 14, 18, 0.35) 0%, rgba(11, 14, 18, 0) 22%, rgba(11, 14, 18, 0) 70%, rgba(11, 14, 18, 0.55) 100%);
}

@keyframes slow-pan {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}

/* faint stars on the dark side */
.backdrop__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* feather the field so stars fade where the image gets lighter (right) and toward the mountain (bottom) */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.85) 28%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0) 78%);
  mask-image:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.85) 28%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 75%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0) 78%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.star {
  position: absolute;
  width: 1.5px;
  height: 1.5px;
  border-radius: 50%;
  background: #ECE7D9;
  opacity: 0;
  box-shadow: 0 0 2px rgba(236, 231, 217, 0.5);
  animation: twinkle 7s var(--ease-in-out) infinite;
  will-change: opacity, transform;
}

/* unique positions — clustered in the upper-left dark zone, scattered for a natural feel */
.star:nth-child(1)  { top:  6%; left:  4%; width: 1px;   height: 1px;   animation-delay:  -7s;   animation-duration: 13s; }
.star:nth-child(2)  { top:  9%; left: 17%; width: 1.5px; height: 1.5px; animation-delay:  -9s;   animation-duration: 16s; }
.star:nth-child(3)  { top: 12%; left: 31%; width: 1px;   height: 1px;   animation-delay:  -3s;   animation-duration: 14s; }
.star:nth-child(4)  { top: 14%; left:  8%; width: 2px;   height: 2px;   animation-delay: -12s;   animation-duration: 18s; }
.star:nth-child(5)  { top: 17%; left: 23%; width: 1px;   height: 1px;   animation-delay:  -5s;   animation-duration: 12.5s; }
.star:nth-child(6)  { top: 19%; left: 45%; width: 1.5px; height: 1.5px; animation-delay: -14s;   animation-duration: 15s; }
.star:nth-child(7)  { top: 21%; left: 12%; width: 1px;   height: 1px;   animation-delay: -10s;   animation-duration: 16.5s; }
.star:nth-child(8)  { top: 24%; left: 36%; width: 1.5px; height: 1.5px; animation-delay:  -2s;   animation-duration: 13s; }
.star:nth-child(9)  { top: 27%; left:  3%; width: 1px;   height: 1px;   animation-delay:  -8s;   animation-duration: 14.5s; }
.star:nth-child(10) { top: 29%; left: 20%; width: 2px;   height: 2px;   animation-delay: -16s;   animation-duration: 19s; }
.star:nth-child(11) { top: 31%; left: 51%; width: 1px;   height: 1px;   animation-delay:  -6s;   animation-duration: 14s; }
.star:nth-child(12) { top: 34%; left: 27%; width: 1.5px; height: 1.5px; animation-delay: -11s;   animation-duration: 13.5s; }
.star:nth-child(13) { top: 36%; left:  9%; width: 1px;   height: 1px;   animation-delay:  -4s;   animation-duration: 17s; }
.star:nth-child(14) { top: 39%; left: 42%; width: 1px;   height: 1px;   animation-delay: -13s;   animation-duration: 15s; }
.star:nth-child(15) { top: 41%; left: 15%; width: 1.5px; height: 1.5px; animation-delay:  -7s;   animation-duration: 12.5s; }
.star:nth-child(16) { top: 44%; left: 33%; width: 1px;   height: 1px;   animation-delay: -15s;   animation-duration: 18.5s; }
.star:nth-child(17) { top: 46%; left:  6%; width: 1px;   height: 1px;   animation-delay:  -1s;   animation-duration: 15.5s; }
.star:nth-child(18) { top: 48%; left: 24%; width: 1.5px; height: 1.5px; animation-delay:  -9s;   animation-duration: 12.5s; }
.star:nth-child(19) { top: 51%; left: 48%; width: 1px;   height: 1px;   animation-delay: -12s;   animation-duration: 16s; }
.star:nth-child(20) { top: 53%; left: 11%; width: 1px;   height: 1px;   animation-delay:  -3s;   animation-duration: 14s; }
.star:nth-child(21) { top: 55%; left: 39%; width: 1.5px; height: 1.5px; animation-delay:  -8s;   animation-duration: 13s; }
.star:nth-child(22) { top: 58%; left: 19%; width: 1px;   height: 1px;   animation-delay: -14s;   animation-duration: 17.5s; }
.star:nth-child(23) { top: 60%; left:  2%; width: 1px;   height: 1px;   animation-delay:  -6s;   animation-duration: 14.5s; }
.star:nth-child(24) { top: 62%; left: 29%; width: 1.5px; height: 1.5px; animation-delay: -10s;   animation-duration: 13.5s; }
.star:nth-child(25) { top: 64%; left: 44%; width: 1px;   height: 1px;   animation-delay: -17s;   animation-duration: 19s; }
.star:nth-child(26) { top: 66%; left: 14%; width: 1px;   height: 1px;   animation-delay:  -4s;   animation-duration: 15.5s; }
.star:nth-child(27) { top: 68%; left: 37%; width: 1px;   height: 1px;   animation-delay:  -7s;   animation-duration: 12.5s; }
.star:nth-child(28) { top: 70%; left:  7%; width: 1.5px; height: 1.5px; animation-delay: -13s;   animation-duration: 16s; }
.star:nth-child(29) { top: 72%; left: 22%; width: 1px;   height: 1px;   animation-delay:  -9s;   animation-duration: 15.5s; }
.star:nth-child(30) { top: 74%; left: 41%; width: 1px;   height: 1px;   animation-delay:  -5s;   animation-duration: 12.5s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.95); }
  50%      { opacity: 0.65; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; opacity: 0.4; }
}

/* ---------- brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink-strong);
  transition: opacity 240ms var(--ease-out);
  justify-self: start;
}
.brand:hover { opacity: 0.78; }
.brand__logo {
  height: 22px;
  width: auto;
  display: block;
}

/* ---------- nav ---------- */
.nav {
  position: relative;
  z-index: 10;
  padding-top: 14px;
}

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding-bottom: 22px;
  opacity: 0;
  transform: translateY(-6px);
  animation: reveal 0.9s var(--ease-out) 0.05s forwards;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 38px;
  justify-self: center;
}

.nav__link {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.005em;
  position: relative;
  padding: 6px 2px;
  transition: color 200ms var(--ease-out);
}
.nav__link:hover { color: var(--ink-strong); }
.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: left 240ms var(--ease-out), right 240ms var(--ease-out);
}
.nav__link:hover::after { left: 0; right: 0; }
.nav__link--button::after { display: none; }
.nav__link--button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav__caret {
  width: 9px;
  height: 6px;
  transition: transform 240ms var(--ease-out);
}
[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* dropdown */
.nav__dropdown { position: relative; }
.nav__submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translate(-50%, -6px);
  width: 360px;
  background: rgba(18, 22, 28, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(236, 231, 217, 0.06) inset,
    0 24px 60px -16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.nav__dropdown[data-open="true"] .nav__submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav__sublink {
  display: block;
  padding: 14px 14px;
  border-radius: 10px;
  transition: background 200ms var(--ease-out);
}
.nav__sublink:hover { background: rgba(236, 231, 217, 0.06); }
.nav__sublink-title {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 3px;
}
.nav__sublink-desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* CTA in nav */
.nav__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: rgba(18, 22, 28, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.nav__cta:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 clamp(72px, 11vh, 140px);
}

.hero__inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

.hero__headline {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: clamp(2.2rem, 7.05vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink-strong);
  margin: 0;
  max-width: none;
  white-space: nowrap;
}
.hero__line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 1.0s var(--ease-out) forwards;
}
.hero__line:nth-child(1) { animation-delay: 0.22s; }
.hero__line:nth-child(2) { animation-delay: 0.34s; }

.hero__lede {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 38ch;
  margin: clamp(24px, 3.2vh, 36px) 0 0;
  opacity: 0;
  animation: reveal 1.0s var(--ease-out) 0.52s forwards;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 4.5vh, 52px);
  opacity: 0;
  animation: reveal 1.0s var(--ease-out) 0.68s forwards;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background 240ms var(--ease-out), color 240ms var(--ease-out),
              border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.btn svg {
  width: 13px;
  height: 13px;
  transition: transform 280ms var(--ease-out);
}
.btn--primary {
  background: var(--ink-strong);
  color: #0B0E12;
}
.btn--primary:hover {
  background: var(--ink);
  color: #0B0E12;
}
.btn--secondary {
  background: rgba(18, 22, 28, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn--secondary:hover {
  background: rgba(236, 231, 217, 0.08);
  border-color: var(--ink);
}
.btn--lg {
  padding: 18px 28px;
  font-size: 1rem;
}
.btn--lg svg { width: 14px; height: 14px; }

/* ---------- sections (shared) ---------- */
.section {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 11vh, 140px) 0;
}
.section__inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
}
.section__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-bottom: 32px;
}
.eyebrow::before {
  content: none;
}
.eyebrow--center {
  justify-content: center;
  display: flex;
}

.section__headline {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: clamp(1.75rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  margin: 0;
  max-width: 22ch;
}
.section__headline--wide { max-width: none; }
.section__headline--quote {
  font-family: var(--font-body);
  max-width: 26ch;
}

.section__body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 52ch;
  margin: 26px 0 0;
}
.section__body--wide { max-width: 70ch; }

/* ---------- 02 Problem ---------- */
.section--problem {
  padding-top: clamp(120px, 18vh, 220px);
  padding-bottom: clamp(120px, 18vh, 220px);
  text-align: center;
}
.section--problem .section__body {
  margin-left: auto;
  margin-right: auto;
}
.problem__statement {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0 auto;
  max-width: 52ch;
}
.problem__statement em {
  display: block;
  font-style: normal;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* ---------- 03 Tailored ---------- */
.section--tailored {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.section--tailored .section__headline {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.06;
  max-width: 18ch;
}
.section--tailored .section__body {
  font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
  max-width: 56ch;
  margin-top: 30px;
}
.section--tailored .section__inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw);
}
.signal-map {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.signal-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- 04 Pace ---------- */
.section--instant {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.compare {
  margin-top: 56px;
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  max-width: 820px;
}
.compare__row {
  display: grid;
  grid-template-columns: 110px 1fr 28px 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
  background: rgba(11, 14, 18, 0.85);
}
.compare__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
.compare__from {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.compare__arrow {
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-align: center;
}
.compare__to {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--ink-strong);
}

/* ---------- 05 What you get ---------- */
.section--get {
  background: linear-gradient(180deg, rgba(20, 24, 28, 0.3) 0%, rgba(20, 24, 28, 0.6) 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.oppcard {
  background: linear-gradient(180deg, rgba(28, 32, 38, 0.85), rgba(18, 22, 28, 0.9));
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  padding: 30px 30px 26px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(236, 231, 217, 0.04) inset,
    0 30px 70px -24px rgba(0, 0, 0, 0.6);
}
.oppcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.oppcard__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding: 5px 11px;
  background: rgba(212, 165, 116, 0.10);
  border: 1px solid rgba(212, 165, 116, 0.28);
  border-radius: 999px;
}
.oppcard__meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}
.oppcard__title {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: var(--ink-strong);
}
.oppcard__desc {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 26px;
}
.oppcard__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  overflow: hidden;
}
.oppcard__stats > div {
  padding: 14px 16px;
  background: rgba(11, 14, 18, 0.7);
}
.oppcard__stats span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.oppcard__stats b {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-strong);
  letter-spacing: -0.008em;
}
.oppcard__bar {
  margin-top: 22px;
  height: 4px;
  border-radius: 999px;
  background: rgba(236, 231, 217, 0.08);
  overflow: hidden;
}
.oppcard__bar-fill {
  height: 100%;
  width: 84%;
  background: linear-gradient(90deg, rgba(212, 165, 116, 0.7), var(--accent));
  border-radius: 999px;
}
.oppcard__rank {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}

/* ---------- 06 Method ---------- */
.section--method .section__headline { text-align: center; margin-inline: auto; }
.steps {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 110px 1fr 110px 1fr;
  align-items: stretch;
  gap: 0;
}
.step {
  padding: 36px 30px 36px;
  background: rgba(11, 14, 18, 0.5);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background 280ms var(--ease-out);
}
.step:hover { background: rgba(20, 24, 28, 0.5); }
.step-flow {
  position: relative;
  align-self: stretch;
  pointer-events: none;
}
.step-flow__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.step__title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--ink-strong);
  letter-spacing: -0.01em;
}
.step__desc {
  color: var(--ink-muted);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.6;
  max-width: 36ch;
}

/* ---------- 07 Compared ---------- */
.vs {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.vs__col {
  padding: 36px;
  background: rgba(11, 14, 18, 0.7);
}
.vs__col--us {
  background: linear-gradient(180deg, rgba(212, 165, 116, 0.05), rgba(11, 14, 18, 0.7));
}
.vs__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  margin-bottom: 26px;
}
.vs__col--us .vs__label { color: var(--accent); }
.vs__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vs__list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}
.vs__list li:first-child { border-top: 0; }
.vs__list li span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}
.vs__list li b {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.vs__col--them .vs__list li b { color: var(--ink-faint); }

/* ---------- 08 Engagement ---------- */
.section--stay {
  text-align: left;
}
.stay__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 26px;
}
.stay__row .section__body {
  margin: 0;
  flex: 0 1 auto;
}
.stay__btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.stay__btn:hover,
.stay__btn:focus-visible,
.stay__btn:active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ---------- 09 CTA ---------- */
.section--cta {
  text-align: center;
  padding-top: clamp(110px, 16vh, 200px);
  padding-bottom: clamp(110px, 16vh, 200px);
  position: relative;
}
.section--cta::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: 0;
  background: radial-gradient(60% 90% at 50% 50%, rgba(212, 165, 116, 0.06), transparent 70%);
  pointer-events: none;
}
.section--cta .section__inner { position: relative; }
.cta__headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.625rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink-strong);
  margin: 0 auto;
  max-width: 22ch;
}
.cta__sub {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  margin: 22px auto 0;
}
.cta__actions {
  margin-top: 42px;
  display: flex;
  justify-content: center;
}

/* ---------- legal page ---------- */
.legal {
  position: relative;
  z-index: 1;
  padding: clamp(120px, 16vh, 200px) 0 clamp(72px, 11vh, 140px);
}
.legal__inner {
  width: min(720px, 92vw);
  margin: 0 auto;
}
.legal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin: 0 0 24px;
}
.legal__title {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--ink-strong);
  margin: 0 0 16px;
}
.legal__updated {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin: 0 0 56px;
}
.legal__body h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ink-strong);
  margin: 48px 0 14px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p,
.legal__body li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-muted);
}
.legal__body p { margin: 0 0 14px; }
.legal__body ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.legal__body li { margin-bottom: 6px; }
.legal__body a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline-strong);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.legal__body a:hover {
  color: var(--ink-strong);
  border-bottom-color: var(--ink-strong);
}
.legal__body strong { color: var(--ink); font-weight: 500; }

/* ---------- footer ---------- */
.footer {
  position: relative;
  z-index: 1;
  padding: 44px 0 36px;
}
.footer__inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}
.footer__left {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: start;
}
.brand__logo--footer { height: 18px; }
.footer__tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.footer__nav {
  display: flex;
  gap: 28px;
  justify-self: center;
}
.footer__nav a {
  font-size: 0.875rem;
  color: var(--ink-muted);
  transition: color 200ms var(--ease-out);
}
.footer__nav a:hover { color: var(--ink); }
.footer__right { justify-self: end; }
.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- shared reveal ---------- */
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .nav__menu { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__cta { grid-column: 2; }
  .backdrop__shade {
    background:
      linear-gradient(180deg, rgba(11, 14, 18, 0.55) 0%, rgba(11, 14, 18, 0.4) 40%, rgba(11, 14, 18, 0.7) 100%);
  }
  .section__inner--split { grid-template-columns: 1fr; gap: 48px; }
  .steps { grid-template-columns: 1fr; }
  .step-flow { display: none; }
  .vs { grid-template-columns: 1fr; }
  .compare__row {
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 18px 22px;
  }
  .compare__arrow,
  .compare__from { display: none; }
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__left,
  .footer__nav,
  .footer__right { justify-self: center; }
  .footer__left { flex-direction: column; gap: 8px; }
}

@media (max-width: 560px) {
  .nav { padding-top: 10px; }
  .brand__logo { height: 19px; }
  .nav__cta { padding: 9px 14px; font-size: 0.8125rem; }
  .hero__headline {
    font-size: clamp(2.6rem, 11.5vw, 3.6rem);
    letter-spacing: -0.024em;
    white-space: normal;
    max-width: 12ch;
  }
  .hero__lede { font-size: 1.0625rem; }
  .btn { padding: 13px 18px; }
  .oppcard { padding: 22px; }
  .oppcard__stats { grid-template-columns: 1fr 1fr; }
  .oppcard__stats > div:last-child { grid-column: span 2; }
  .vs__list li { grid-template-columns: 90px 1fr; gap: 10px; }
  .section__headline { letter-spacing: -0.018em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .hero__line, .hero__lede, .hero__actions, .nav__inner { opacity: 1; transform: none; }
  .backdrop__image { animation: none; transform: scale(1.06); }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 360ms;
}
.modal[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    background 280ms var(--ease-out),
    backdrop-filter 280ms var(--ease-out),
    -webkit-backdrop-filter 280ms var(--ease-out);
}
.modal[data-open="true"] .modal__overlay {
  background: rgba(8, 10, 14, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal__panel {
  position: relative;
  width: min(460px, 100%);
  background: rgba(18, 22, 28, 0.94);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(236, 231, 217, 0.06) inset,
    0 30px 80px -20px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    transform 360ms var(--ease-out),
    opacity 240ms var(--ease-out);
}
.modal[data-open="true"] .modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink-muted);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.modal__close:hover {
  background: rgba(236, 231, 217, 0.08);
  color: var(--ink-strong);
}
.modal__close svg { width: 12px; height: 12px; }

.modal__body {
  padding: 44px 36px 36px;
  display: grid;
}

.modal__state {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out);
}
.modal__state[data-active] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 320ms var(--ease-out) 140ms, transform 420ms var(--ease-out) 140ms;
}

.modal__state--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-height: 240px;
}
.modal__state--success .modal__title { margin: 0; }
.modal__state--success .modal__sub { margin: 0; max-width: 30ch; }

.modal__check {
  width: 56px;
  height: 56px;
  color: var(--ink-strong);
  margin-bottom: 4px;
}
.modal__check svg {
  width: 100%;
  height: 100%;
  display: block;
}
.modal__check circle,
.modal__check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modal__check circle {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}
.modal__check path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.modal__state--success[data-active] .modal__check circle {
  animation: drawCircle 0.6s var(--ease-out) 0.32s forwards;
}
.modal__state--success[data-active] .modal__check path {
  animation: drawCheck 0.4s var(--ease-out) 0.7s forwards;
}
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__check circle,
  .modal__check path { stroke-dashoffset: 0; }
}

.modal__title {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: clamp(1.625rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink-strong);
  margin: 0 0 10px;
}

.modal__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 28px;
  max-width: 36ch;
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
}
.field__input {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink-strong);
  background: rgba(11, 14, 18, 0.55);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, color 0.4s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field__input:hover { border-color: var(--hairline-strong); }
.field__input:focus {
  border-color: var(--ink);
  background: rgba(11, 14, 18, 0.8);
}
.field__input::placeholder { color: var(--ink-faint); }
.field__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-strong);
  -webkit-box-shadow: 0 0 0 1000px rgba(11, 14, 18, 0.8) inset;
  caret-color: var(--ink-strong);
}

.field__error {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: #d94040;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              margin 0.35s ease;
}
.field.invalid .field__error {
  height: 1.2rem;
  opacity: 1;
  margin-top: -2px;
}
.field.invalid .field__input {
  border-color: #d94040;
  box-shadow: 0 0 0 3px rgba(217, 64, 64, 0.10);
  animation: fieldShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.field.valid .field__input {
  border-color: var(--hairline);
  background: rgba(11, 14, 18, 0.55);
  color: var(--ink-strong);
  box-shadow: none;
}

@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.modal__submit {
  margin-top: 10px;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}
.modal__submit[disabled] {
  opacity: 0.65;
  cursor: progress;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .modal { padding: 16px; }
  .modal__body { padding: 40px 22px 26px; }
  .modal__title { font-size: 1.5rem; }
}

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