/* ==========================================================================
   QuantivoFx — Design System
   Dark-first, high-contrast, web3-adjacent fintech aesthetic.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #05060a;
  --bg-2: #080a11;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.085);
  --surface-solid: #0c0e15;
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.22);

  --text: #f3f5f9;
  --text-2: #aab3c5;
  --text-3: #8b95aa;

  --accent: #2de5a8;
  --accent-2: #14b886;
  --accent-ink: #04231a;
  --accent-soft: rgba(45, 229, 168, 0.16);
  --accent-line: rgba(45, 229, 168, 0.38);

  --violet: #9d84ff;
  --cyan: #4fdcff;
  --gold: #f7c163;
  --up: #2de5a8;
  --down: #ff7480;

  /* Ordered bright → dark so dark ink stays ≥4.5:1 across the whole sheen sweep. */
  --grad-primary: linear-gradient(135deg, #2de5a8 0%, #4fd6ff 62%, #9d84ff 100%);
  --grad-primary-rev: linear-gradient(135deg, #9d84ff 0%, #4fd6ff 38%, #2de5a8 100%);
  --grad-text: linear-gradient(120deg, #ffffff 0%, #cfe4ff 40%, #2de5a8 100%);
  --grad-soft: linear-gradient(160deg, rgba(45, 229, 168, 0.16), rgba(157, 132, 255, 0.12));

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, 1);
  --glow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 80px -30px rgba(45, 229, 168, 0.28);

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-full: 999px;

  --pad: clamp(1.15rem, 4vw, 2rem);
  --gutter: clamp(1.15rem, 5vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1240px;

  --font: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 74px;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f5f7fb;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(12, 16, 28, 0.045);
  --surface-solid: #ffffff;
  --line: rgba(12, 16, 28, 0.13);
  --line-2: rgba(12, 16, 28, 0.2);

  --text: #0a0d16;
  --text-2: #4a5364;
  --text-3: #5f6779;

  --accent: #07734f;
  --accent-2: #07815a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 156, 110, 0.12);
  --accent-line: rgba(7, 115, 79, 0.32);

  --violet: #5a3ec8;
  --cyan: #0b7fa3;
  --gold: #a96f00;
  --down: #d32b3c;

  /* Light mode has no bright-gradient surface, so ink on accent must be white. */
  --grad-primary: linear-gradient(135deg, #056e4b 0%, #075f45 55%, #07436b 100%);
  --grad-primary-rev: linear-gradient(135deg, #07436b 0%, #075f45 45%, #056e4b 100%);

  --grad-text: linear-gradient(120deg, #0a0d16 0%, #23364f 45%, #07734f 100%);
  --grad-soft: linear-gradient(160deg, rgba(11, 156, 110, 0.12), rgba(90, 62, 200, 0.09));

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 18px 40px -24px rgba(16, 24, 40, 0.28);
  --shadow-lg: 0 40px 90px -44px rgba(16, 24, 40, 0.4);
  --glow: 0 0 0 1px rgba(12, 16, 28, 0.03), 0 30px 70px -34px rgba(11, 156, 110, 0.35);
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  /* 17px rather than the 16px browser default: body copy at 16px is the most
     common readability failure on a text-heavy page, and 50–75 characters per
     line is only reachable at a readable size if the measure is also capped. */
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1, "ss01" 1;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  cursor: pointer;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
table {
  border-collapse: collapse;
  width: 100%;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
hr {
  border: 0;
  border-top: 1px solid var(--line);
}
[hidden] {
  display: none !important;
}

/* ---------- 3. Ambient background ---------- */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-fx__grid {
  position: absolute;
  inset: -20%;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.5;
}
.bg-fx__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  will-change: transform;
}
.bg-fx__blob--a {
  width: 46vw;
  height: 46vw;
  min-width: 340px;
  min-height: 340px;
  top: -14vw;
  left: -6vw;
  background: radial-gradient(circle, rgba(45, 229, 168, 0.5), transparent 66%);
  animation: drift 26s var(--ease) infinite alternate;
}
.bg-fx__blob--b {
  width: 40vw;
  height: 40vw;
  min-width: 300px;
  min-height: 300px;
  top: 4vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.45), transparent 66%);
  animation: drift 32s var(--ease) infinite alternate-reverse;
}
.bg-fx__blob--c {
  width: 34vw;
  height: 34vw;
  min-width: 260px;
  min-height: 260px;
  top: 62vh;
  left: 34vw;
  background: radial-gradient(circle, rgba(56, 214, 255, 0.28), transparent 66%);
  animation: drift 38s var(--ease) infinite alternate;
}
[data-theme="light"] .bg-fx__blob {
  opacity: 0.32;
  filter: blur(90px);
}
.bg-fx__noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .bg-fx__noise {
  opacity: 0.025;
}
@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(4vw, 5vh, 0) scale(1.14);
  }
}

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: 860px;
}
.wrap--wide {
  max-width: 1440px;
}
.section {
  padding-block: var(--section);
  position: relative;
}
.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.section--flush-top {
  padding-top: 0;
}
.stack > * + * {
  margin-top: var(--pad);
}
.center {
  text-align: center;
  margin-inline: auto;
}
.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide-left {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}
.bento > .span-2 {
  grid-column: span 2;
}
.bento > .span-3 {
  grid-column: span 3;
}
.bento > .span-4 {
  grid-column: span 4;
}
.bento > .span-6 {
  grid-column: span 6;
}
.flex {
  display: flex;
  gap: 1rem;
}
.flex--between {
  justify-content: space-between;
}
.flex--center {
  align-items: center;
}
.flex--wrap {
  flex-wrap: wrap;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.75rem;
}
.mt-2 {
  margin-top: 1.5rem;
}
.mt-3 {
  margin-top: 2.5rem;
}
.mt-4 {
  margin-top: 3.5rem;
}

/* ---------- 5. Typography ---------- */
h1,
h2,
h3,
h4,
h5 {
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.35rem);
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(1.9rem, 4.1vw, 3rem);
  letter-spacing: -0.034em;
}
h3 {
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
}
h4 {
  font-size: 1.06rem;
  letter-spacing: -0.014em;
}
p {
  color: var(--text-2);
  text-wrap: pretty;
}
.lead {
  font-size: clamp(1.03rem, 1.7vw, 1.23rem);
  color: var(--text-2);
  line-height: 1.62;
  max-width: 62ch;
}
.prose {
  max-width: 72ch;
}
.prose > * + * {
  margin-top: 1.15em;
}
.prose h2 {
  margin-top: 2.4em;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.prose h3 {
  margin-top: 2em;
}
.prose p,
.prose li {
  color: var(--text-2);
}
.prose ul {
  list-style: none;
  padding-left: 0;
}
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.6em;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 6. Eyebrow / badges ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.eyebrow--plain::before {
  display: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.8rem 0.36rem 0.6rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--surface);
  backdrop-filter: blur(12px);
  font-size: 0.79rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}
.badge b {
  color: var(--text);
  font-weight: 600;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
}
.tag--violet {
  background: rgba(124, 92, 255, 0.14);
  color: var(--violet);
  border-color: rgba(124, 92, 255, 0.3);
}
.dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(45, 229, 168, 0.7);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(45, 229, 168, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(45, 229, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(45, 229, 168, 0);
  }
}

/* ---------- 7. Buttons ---------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.4rem;
  border-radius: var(--r-full);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease),
    border-color 0.22s var(--ease), color 0.22s var(--ease), opacity 0.2s;
  overflow: hidden;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn svg {
  flex: none;
}
.btn--primary {
  --btn-fg: var(--accent-ink);
  border-color: transparent;
  background: var(--grad-primary-rev);
  background-size: 160% 160%;
  box-shadow: 0 10px 30px -12px rgba(45, 229, 168, 0.55);
  font-weight: 650;
  animation: sheen 8s ease infinite;
}
/* White text on the bright mint→cyan gradient fails contrast (1.6:1), so light mode
   uses a deep green→teal gradient with white text instead. */
[data-theme="light"] .btn--primary {
  --btn-fg: var(--accent-ink);
  box-shadow: 0 12px 28px -14px rgba(7, 115, 79, 0.55);
}
.btn--primary:hover {
  box-shadow: 0 18px 44px -14px rgba(45, 229, 168, 0.7);
}
@keyframes sheen {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.btn--ghost {
  background: transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
  border-color: var(--line-2);
}
.btn--quiet {
  padding: 0.5rem 0.95rem;
  font-size: 0.86rem;
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn--quiet:hover {
  color: var(--text);
  background: var(--surface-2);
}
.btn--lg {
  padding: 1.02rem 1.9rem;
  font-size: 1rem;
}
.btn--sm {
  padding: 0.58rem 1.05rem;
  font-size: 0.85rem;
}
.btn--block {
  width: 100%;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent);
}
.link-arrow svg {
  transition: transform 0.25s var(--ease);
}
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- 8. Cards ---------- */
.card {
  position: relative;
  padding: clamp(1.3rem, 2.3vw, 1.85rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(45, 229, 168, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.card:hover::before {
  opacity: 1;
}
.card--flat:hover {
  transform: none;
  box-shadow: none;
}
.card--feature {
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.card--accent {
  background: var(--grad-soft);
  border-color: var(--accent-line);
}
.card__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  margin-bottom: 1.05rem;
}
.card__icon svg {
  width: 22px;
  height: 22px;
}
.card__icon--violet {
  background: rgba(124, 92, 255, 0.13);
  border-color: rgba(124, 92, 255, 0.3);
  color: var(--violet);
}
.card__icon--cyan {
  background: rgba(56, 214, 255, 0.12);
  border-color: rgba(56, 214, 255, 0.28);
  color: var(--cyan);
}
.card h3 + p,
.card h4 + p {
  margin-top: 0.6rem;
}
.card p {
  font-size: 0.94rem;
}
.metric {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
}
.metric--sm {
  font-size: 1.45rem;
}
.metric-label {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}

/* ---------- 9. Header ---------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav-shell.is-stuck {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-size: 1.09rem;
  flex: none;
}
.brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: var(--accent-ink);
  box-shadow: 0 6px 18px -8px rgba(45, 229, 168, 0.8);
  flex: none;
}
.brand__mark svg {
  width: 18px;
  height: 18px;
}
.brand small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-top: -2px;
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.6rem;
}
.nav__link,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.5rem 0.72rem;
  border-radius: var(--r-xs);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-2);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav__link:hover,
.nav__trigger:hover,
.nav__link.is-active,
.nav__trigger.is-active {
  color: var(--text);
  background: var(--surface-2);
}
.nav__link.is-active {
  color: var(--accent);
}
.nav__trigger svg {
  width: 13px;
  height: 13px;
  opacity: 0.65;
  transition: transform 0.25s var(--ease);
}
.nav__item {
  position: relative;
}
.nav__item:hover .nav__trigger svg,
.nav__item:focus-within .nav__trigger svg {
  transform: rotate(180deg);
}
.nav__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 460px;
  padding: 0.7rem;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav__item:hover .nav__panel,
.nav__item:focus-within .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__panel a {
  display: flex;
  gap: 0.7rem;
  padding: 0.62rem 0.7rem;
  border-radius: var(--r-sm);
  transition: background 0.18s;
}
.nav__panel a:hover {
  background: var(--surface-2);
}
.nav__panel svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
  flex: none;
  margin-top: 3px;
}
.nav__panel strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.nav__panel span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.42;
}
/* The legal menu is a list of documents, not products: no icon, no description,
   and narrow enough that it reads as a reference list rather than a sales panel. */
.nav__panel--plain {
  min-width: 232px;
  padding: 0.5rem;
}
.nav__panel--plain a {
  padding: 0.5rem 0.7rem;
}
.nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.icon-btn:hover {
  color: var(--text);
  border-color: var(--line-2);
  background: var(--surface-2);
}
.icon-btn svg {
  width: 17px;
  height: 17px;
}
.theme-toggle .sun {
  display: none;
}
[data-theme="light"] .theme-toggle .sun {
  display: block;
}
[data-theme="light"] .theme-toggle .moon {
  display: none;
}
.nav__burger {
  display: none;
}
.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--text-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.announce b {
  color: var(--accent);
  font-weight: 600;
}
.announce svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--accent);
}

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: 90;
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-out);
  overflow-y: auto;
  padding: 1.1rem 1.15rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.drawer.is-open {
  transform: none;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.drawer__group {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin: 1.1rem 0 0.35rem;
  padding-left: 0.2rem;
}
.drawer a {
  padding: 0.72rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer a:hover,
.drawer a.is-active {
  background: var(--surface-2);
  color: var(--text);
}
.drawer .btn {
  margin-top: 0.5rem;
}
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(3, 4, 8, 0.62);
  backdrop-filter: blur(3px);
  z-index: 85;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* ---------- 10. Ticker ---------- */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  gap: 2.4rem;
  padding: 0.68rem 0;
  animation: marquee 46s linear infinite;
  flex: none;
  will-change: transform;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.tick {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  white-space: nowrap;
}
.tick__sym {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tick__px {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.tick__ch {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.up {
  color: var(--up);
}
.down {
  color: var(--down);
}

/* ---------- 11. Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(3.2rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  margin-top: 1.15rem;
}
.hero .lead {
  margin-top: 1.3rem;
}
.hero .btn-row {
  margin-top: 1.9rem;
}
.hero__note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--text-3);
}
/* Stated facts, not statistics. Rules rather than boxes, because a row of
   bordered pills reads as a claim and this is a list of what the platform does. */
.trust-strip {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 1.75rem;
}
.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.trust-strip__item svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}
.trust-strip__item span {
  /* The wrapper is a column flex rather than block-and-forget. The row that holds
     the icon already makes every child a flex item, so `display: block` on the
     label does nothing: the label and the description would sit side by side and
     run together. A column here, with its own gap, is what actually separates them. */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--text-2);
}
.trust-strip__item b {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

/* ticker-style word strip */
.wordstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.wordstrip span {
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text-3);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ---------- 11b. Section head / lede layout ---------- */
/* A sticky head rail: the label and claim stay put while the evidence scrolls
   past. Uses align-self rather than position:sticky alone so a short body does
   not leave the rail floating in dead space. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.section-head__rail {
  position: sticky;
  top: calc(var(--nav-h) + 2.5rem);
}
.section-head__rail h2 {
  margin-top: 0.9rem;
}
.section-head__body > * + * {
  margin-top: 1.15rem;
}
.section-head__body .lead {
  max-width: 68ch;
}
.section-head__body ul {
  display: grid;
  gap: 0.7rem;
}

/* ---------- 11c. Ledger ---------- */
/* Two lists presented as one record: what we do, and what we do not. The
   negative column is the point of the component, so it is marked, not muted. */
.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.ledger__col {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ledger__col--yes {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.ledger__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 0.9rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
}
.ledger__col--yes .ledger__title {
  color: var(--accent);
}
.ledger li {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.85rem;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-2);
}
.ledger li + li {
  border-top: 1px solid var(--line);
}
.ledger li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
}
.ledger__col--yes li svg {
  color: var(--accent);
}
.ledger__col--no li svg {
  color: var(--text-3);
}
.ledger li b {
  color: var(--text);
  font-weight: 600;
}
/* The single-column variant, used inside a card as a plain itemised list:
   the card already supplies the frame, so the rows carry no heading of their own. */
.ledger--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.ledger--stack li {
  padding-block: 0.7rem;
}
.ledger--stack li:first-child {
  padding-top: 0.1rem;
}

/* ---------- 11d. Company record ---------- */
.company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: stretch;
}
.record {
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.record dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 0.85rem 1.4rem;
  margin-top: 1.2rem;
  font-size: 0.92rem;
}
.record dt {
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}
.record dd {
  color: var(--text-2);
  line-height: 1.5;
}
.record dd b {
  color: var(--text);
  font-weight: 600;
}
.record a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.contact-rail {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}
.contact-card {
  display: block;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.contact-card:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.contact-card span {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.contact-card b {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.contact-card small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* ---------- 11e. Risk summary ---------- */
/* The warning as a section rather than fine print. It is the last thing read
   before the call to action, which is where it belongs. */
.risk-panel {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
}
.risk-panel h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}
.risk-panel p {
  max-width: 82ch;
}
.risk-panel .grid {
  margin-top: 1.6rem;
}
.risk-panel h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.risk-panel h4 svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

/* ---------- 12. App mockups ---------- */
.mock {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 92%, transparent), var(--surface-solid));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.mock::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.11), transparent 36%);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mock__dots {
  display: flex;
  gap: 5px;
}
.mock__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
}
.mock__title {
  font-size: 0.72rem;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: 0.03em;
}
.mock__body {
  padding: 0.95rem;
}
.mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: 0.82rem;
  transition: background 0.2s;
}
.mock__row:hover {
  background: var(--surface-2);
}
.mock__row + .mock__row {
  border-top: 1px solid var(--line);
}
.mock__row .sym {
  font-weight: 600;
  font-size: 0.82rem;
}
/* The symbol and its timeframe are two inline runs with nothing between them, so
   they would render as "BTC/USDH4". The gap is what separates them. */
.mock__row .sym + .sub {
  margin-left: 0.4rem;
}
.mock__row .sub {
  font-size: 0.7rem;
  color: var(--text-3);
}
.mock__row .px {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}
.spark {
  width: 62px;
  height: 22px;
  flex: none;
}
.spark path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark--up path {
  stroke: var(--up);
}
.spark--down path {
  stroke: var(--down);
}
.mock__chart {
  position: relative;
  height: 148px;
  margin-bottom: 0.75rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(45, 229, 168, 0.12), transparent 72%);
  overflow: hidden;
}
.mock__chart svg {
  width: 100%;
  height: 100%;
}
.pill-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}
.pill-stat {
  padding: 0.55rem 0.6rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.pill-stat span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.pill-stat b {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.float-card {
  position: absolute;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  z-index: 3;
  animation: floaty 6.5s ease-in-out infinite;
}
.float-card--order {
  bottom: 9%;
  left: -6%;
}
.float-card--fill {
  top: 7%;
  right: -5%;
  animation-delay: -3.2s;
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}
.float-card .metric-label {
  font-size: 0.63rem;
}
.float-card strong {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.mock-phone {
  /* Capped against the container rather than only against a pixel value: two of
     these sit side by side inside a 26px gap, so a fixed 280px puts the pair
     25px wider than the column on a 360px phone and the second one is clipped.
     The subtraction is the pair's gap, which keeps two of them exactly fitting. */
  width: min(280px, calc(100% - 26px));
  margin-inline: auto;
  border-radius: 34px;
  border: 1px solid var(--line-2);
  background: var(--surface-solid);
  padding: 10px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.mock-phone__screen {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 1.1rem 0.9rem 0.9rem;
}
.mock-phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: 74px;
  height: 5px;
  border-radius: 9px;
  background: var(--line-2);
}

/* ---------- 13. Steps / process ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1rem;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.4rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.step:hover {
  border-color: var(--accent-line);
  transform: translateX(4px);
}
.step__n {
  counter-increment: step;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.step__n::before {
  content: "0" counter(step);
}

/* ---------- 14. Table ---------- */
.table-shell {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.table-scroll {
  overflow-x: auto;
}
table.data {
  min-width: 620px;
  font-size: 0.9rem;
}
table.data th,
table.data td {
  padding: 0.92rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data thead th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  background: var(--surface-2);
  white-space: nowrap;
}
table.data tbody tr {
  transition: background 0.2s;
}
table.data tbody tr:hover {
  background: var(--surface-2);
}
table.data tbody tr:last-child td {
  border-bottom: 0;
}
table.data td.num,
table.data th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
table.data td:first-child {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
table.data caption {
  caption-side: bottom;
  padding: 0.9rem 1.15rem;
  font-size: 0.78rem;
  color: var(--text-3);
  text-align: left;
  border-top: 1px solid var(--line);
}

/* ---------- 15. Pricing ---------- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  align-items: start;
}
.plan {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.plan:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}
.plan--featured {
  border-color: var(--accent-line);
  background: var(--grad-soft);
  box-shadow: var(--glow);
}
.plan--featured::after {
  content: "Most popular";
  position: absolute;
  top: -12px;
  right: 1.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-full);
  background: var(--grad-primary);
  color: var(--accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.plan__price b {
  font-family: var(--mono);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.plan__price span {
  font-size: 0.85rem;
  color: var(--text-3);
}
.plan ul {
  display: grid;
  gap: 0.62rem;
  font-size: 0.9rem;
}
.plan li {
  display: flex;
  gap: 0.6rem;
  color: var(--text-2);
  line-height: 1.45;
}
.plan li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}
.plan li.is-muted {
  color: var(--text-3);
}
.plan li.is-muted svg {
  color: var(--text-3);
  opacity: 0.6;
}
.plan > .btn {
  margin-top: auto;
}

/* ---------- 16. Accordion ---------- */
.acc {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s, background 0.25s;
}
.acc + .acc {
  margin-top: 0.7rem;
}
.acc[open] {
  border-color: var(--line-2);
}
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  font-weight: 550;
  font-size: 0.99rem;
  letter-spacing: -0.012em;
  list-style: none;
  transition: color 0.2s;
}
.acc summary::-webkit-details-marker {
  display: none;
}
.acc summary:hover {
  color: var(--accent);
}
.acc summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.28s var(--ease);
  opacity: 0.6;
}
.acc[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.acc__body {
  padding: 0 1.3rem 1.25rem;
  color: var(--text-2);
  font-size: 0.93rem;
  max-width: 78ch;
}
.acc__body > * + * {
  margin-top: 0.85em;
}

/* ---------- 17. Tabs ---------- */
.tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface-2);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  padding: 0.55rem 1.05rem;
  border-radius: var(--r-full);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s, background 0.25s;
}
.tab:hover {
  color: var(--text);
}
.tab.is-active {
  color: var(--accent-ink);
  background: var(--accent);
}
[data-theme="light"] .tab.is-active {
  color: #fff;
}
.tab-panel[hidden] {
  display: none;
}

/* ---------- 18. Marquee logo strip ---------- */
.logos {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0.75;
}
.logos span {
  font-weight: 650;
  letter-spacing: 0.04em;
  font-size: 0.98rem;
  color: var(--text-3);
  transition: color 0.25s;
}
.logos span:hover {
  color: var(--text);
}

/* ---------- 19. Quotes ---------- */
.quote {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
}
.quote blockquote {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text);
  letter-spacing: -0.012em;
}
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-ink);
  background: var(--grad-primary);
  flex: none;
}
.quote figcaption strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}
.quote figcaption span {
  display: block;
  font-size: 0.79rem;
  color: var(--text-3);
}
.stars {
  display: flex;
  gap: 3px;
  color: var(--gold);
}
.stars svg {
  width: 14px;
  height: 14px;
}

/* ---------- 20. CTA band ---------- */
.cta-band {
  position: relative;
  padding: clamp(2.4rem, 6vw, 4.2rem);
  border-radius: clamp(22px, 3vw, 34px);
  border: 1px solid var(--accent-line);
  background: var(--grad-soft);
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  top: -40%;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(45, 229, 168, 0.3), transparent 66%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-band > * {
  position: relative;
}
.cta-band .btn-row {
  justify-content: center;
  margin-top: 1.9rem;
}

/* ---------- 21. Forms ---------- */
.field {
  display: grid;
  gap: 0.45rem;
}
.field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-2);
}
.field input,
.field select,
.field textarea {
  padding: 0.82rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 0.93rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
}
.field textarea {
  min-height: 140px;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--surface);
}
.check {
  display: flex;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--text-2);
  align-items: flex-start;
  cursor: pointer;
}
.check input {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex: none;
}
.form-note {
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.form-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--accent);
  margin-top: 2px;
}

/* ---------- 22. Breadcrumbs / page head ---------- */
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-3);
  flex-wrap: wrap;
}
.crumbs a:hover {
  color: var(--accent);
}
.crumbs svg {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}
.page-head {
  padding-top: clamp(2.6rem, 5vw, 4.2rem);
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  margin-top: 1rem;
}
.page-head .lead {
  margin-top: 1.15rem;
}

/* ---------- 23. Footer ---------- */
.footer {
  margin-top: var(--section);
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  position: relative;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-bottom: 3rem;
}
.footer__brand p {
  font-size: 0.88rem;
  margin-top: 1rem;
  max-width: 34ch;
}
.footer h5 {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer ul {
  display: grid;
  gap: 0.2rem;
}
.footer ul a {
  /* WCAG 2.2 SC 2.5.8 asks for a 24x24px target. A 15px link in a stacked list
     clears it on line-height alone, which is why the row carries the padding
     rather than the gap: the clickable area is the box, not the glyph. */
  display: block;
  padding-block: 0.3rem;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--text-2);
  transition: color 0.2s;
}
.footer ul a:hover {
  color: var(--accent);
}
.footer__social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.footer__social a:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 16px;
  height: 16px;
}
.footer__legal {
  border-top: 1px solid var(--line);
  padding-block: 1.9rem;
}
.risk {
  padding: 1.15rem 1.3rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.79rem;
  line-height: 1.65;
  color: var(--text-3);
}
.risk strong {
  color: var(--text-2);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--text-3);
}
.footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
}
.footer__bottom a:hover {
  color: var(--accent);
}

/* ---------- 24. Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Stagger delays are set in main.js, which counts only the .reveal children of a
   [data-stagger] group. An nth-child rule here would disagree with it as soon as a
   group mixed revealable and static children, so the ordering lives in one place. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ticker__track,
  .float-card,
  .bg-fx__blob,
  .btn--primary {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- 25. Utilities ---------- */
.muted {
  color: var(--text-3);
}
.small {
  font-size: 0.85rem;
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.kbd {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--text-2);
}
.list-check {
  display: grid;
  gap: 0.75rem;
}
.list-check li {
  display: flex;
  gap: 0.7rem;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.5;
}
.list-check svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* ---------- 26. Data visualisation ---------- */
.bars {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.5rem;
}
.bar {
  display: grid;
  grid-template-columns: minmax(88px, 130px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  font-size: 0.87rem;
}
.bar__label {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar__track {
  height: 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--grad-primary);
}
.bar__fill--violet {
  background: linear-gradient(90deg, var(--violet), var(--cyan));
}
.bar__value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.83rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
  }
  .bar__label {
    grid-column: 1 / -1;
  }
}

/* ---------- 27. Responsive ---------- */
@media (max-width: 1080px) {
  .nav__menu {
    display: none;
  }
  .nav__burger {
    display: grid;
  }
  /* The menu collapses into the drawer here, so the bar carries the brand, the
     theme toggle, Log in, the primary action and the burger. That set is about
     300px wide, which does not fit beside the brand on a phone: at 375px the
     "Log in" control was clipped by the overflow guard on <body>. Signing in
     belongs in the drawer at these widths, and the drawer already carries both
     "Log in" and "Open account", so nothing becomes unreachable. */
  .nav__actions .btn--quiet {
    display: none;
  }
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bento > .span-3 {
    grid-column: span 4;
  }
  .bento > .span-2 {
    grid-column: span 2;
  }
  .cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .hero__inner,
  .split,
  .split--wide-left,
  .section-head,
  .ledger,
  .company-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-head__rail {
    position: static;
  }
  .ledger__col--no {
    order: 2;
  }
  .hero__visual {
    order: -1;
  }
  .cols-3,
  .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan--featured {
    grid-column: 1 / -1;
  }
  .float-card--order {
    left: 0;
  }
  .float-card--fill {
    right: 0;
  }
}
@media (max-width: 640px) {
  :root {
    --nav-h: 66px;
  }
  .cols-2,
  .cols-3,
  .cols-4,
  .price-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento > .span-2,
  .bento > .span-3,
  .bento > .span-4,
  .bento > .span-6 {
    grid-column: span 1;
  }
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Back to the 16px baseline on phones, where the narrower measure already
     keeps the line length short and a larger body size only adds scrolling. */
  body {
    font-size: 1rem;
  }
  .hero__proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .record dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem 0;
  }
  .record dd {
    margin-bottom: 0.7rem;
  }
  .step {
    grid-template-columns: minmax(0, 1fr);
  }
  .step__n {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .float-card {
    display: none;
  }
  .announce {
    font-size: 0.74rem;
  }
  /* At 360px the bar carries the brand, the theme toggle, the primary action and
     the burger, which is a few pixels wider than the viewport. The action keeps
     its label and the burger keeps its target: what gives way is the padding and
     the gap. Verified at 360, 820 and 1440px by tools/check-layout.mjs. */
  .nav__actions {
    gap: 0.3rem;
  }
  .nav__actions .btn--primary.btn--sm {
    padding-inline: 0.7rem;
  }
  /* Two phone mockups sit side by side in a 26px gap. A flex row cannot shrink
     them below their min-content width and cannot wrap, so on a phone the pair
     overflows its column and the right-hand phone is clipped by the overflow
     guard on <body>. Stacking them is the honest layout at this width. */
  .split .flex {
    flex-wrap: wrap;
  }
  .btn-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 420px) {
  .hero__proof,
  .pill-stats,
  .trust-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 360px cannot hold the brand, the theme toggle, the primary action and the
     burger: the row needs about 331px against 323px of guttered width, and the
     overflow was hidden by the overflow guard on <body> rather than resolved, so
     the button was simply cut off. Something has to go and the theme toggle is
     the right thing: the site already follows the operating system preference
     until the reader chooses, so the control is a convenience rather than the
     only route to the light theme. The call to action is not. Above this width
     the toggle stays. */
  .nav__actions .theme-toggle {
    display: none;
  }
}