/* Zolva prototype. Visual language follows aave.com (2026): white canvas, ink
   #252228, hairline borders, lavender accent, Inter, 24px cards, pill buttons,
   expo-out motion (cubic-bezier(.19,1,.22,1)), 150ms micro / 600ms entrances. */

:root {
  /* Surfaces */
  --color-bg: #faf8f1;
  --color-bg-subtle: #f3f0e7;
  --color-bg-panel: #efede4;
  --color-card: #faf8f1;
  --color-dark: #102b24;
  --color-dark-card: rgba(255, 255, 255, 0.04);
  --color-dark-line: rgba(255, 255, 255, 0.08);

  /* Lines */
  --color-border: #f1f1f0;
  --color-border-strong: #e1e1e0;

  /* Ink */
  --color-text: #252228;
  --color-text-90: rgba(37, 34, 40, 0.9);
  --color-text-muted: rgba(37, 34, 40, 0.65);
  --color-text-faint: #8f8e8e;
  --color-text-ghost: #bcbbbb;
  --color-on-dark: #f6f7f4;
  --color-on-dark-muted: rgba(246, 247, 244, 0.6);

  /* Accent: Aave lavender */
  --color-purple-1: #b29255;
  --color-purple-2: #b29255;
  --color-purple-3: #b29255;
  --color-purple-5: #d6c49b;
  --color-purple-6: #e6ddc7;
  --color-purple-8: #f0eadc;
  --color-purple-rich: #806026;

  /* Data */
  --color-gain: #0a9a4c;
  --color-gain-dot: #01d062;
  --color-gain-soft: #e6f8ee;
  --color-loss: #e04400;
  --color-loss-soft: #fdeee6;
  --color-hold-line: #bcbbbb;

  --color-focus: #aa8240;

  /* Type */
  --font-sans: "Source Sans 3", "Segoe UI", sans-serif;
  --font-editorial: "Fraunces", Georgia, serif;

  /* Spacing */
  --space-25: 2px;
  --space-50: 4px;
  --space-75: 8px;
  --space-100: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-700: 64px;
  --space-800: 80px;
  --space-900: 96px;

  /* Radius */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --duration-micro: 150ms;
  --duration-enter: 600ms;

  --content-width: 1200px;
  --header-height: 64px;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--color-text-muted);
}

.gain {
  color: var(--color-gain);
}

.loss {
  color: var(--color-loss);
}

.skip-link {
  position: absolute;
  left: var(--space-200);
  top: -64px;
  z-index: 200;
  padding: var(--space-75) var(--space-200);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  transition: top var(--duration-micro) var(--ease-out-expo);
}

.skip-link:focus {
  top: var(--space-200);
}

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

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-300);
  }
}

/* ---------- Prototype banner ---------- */

.prototype-banner {
  position: relative;
  z-index: 101;
  padding: var(--space-75) var(--space-200);
  background: var(--color-bg-panel);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* ---------- Header: transparent, blurs white on scroll ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow 200ms ease-out;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  transition: background-color 200ms ease-out;
}

.nav.is-scrolled,
.menu-open .nav {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.nav.is-scrolled::before,
.menu-open .nav::before {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200);
  height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.nav__links {
  display: none;
  gap: var(--space-25);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: block;
  padding: var(--space-50) var(--space-100);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 24px;
  font-weight: 450;
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-out-expo), background-color var(--duration-micro) var(--ease-out-expo);
}

.nav__link:hover {
  color: var(--color-text);
  background: rgba(37, 34, 40, 0.05);
}

.nav__link[aria-current="page"] {
  color: var(--color-text);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-75);
}

@media (min-width: 768px) {
  .nav__links {
    display: flex;
  }

  .nav__menu-button {
    display: none !important;
  }
}

/* Hamburger lines rotate into an X */
.nav__menu-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(37, 34, 40, 0.05);
  cursor: pointer;
}

.nav__menu-line {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  transition: transform 500ms var(--ease-out-expo);
}

.nav__menu-line:first-child {
  transform: translateY(-3px);
}

.nav__menu-line:last-child {
  transform: translateY(3px);
}

.menu-open .nav__menu-line:first-child {
  transform: rotate(45deg);
}

.menu-open .nav__menu-line:last-child {
  transform: rotate(-45deg);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding: calc(var(--header-height) + var(--space-600)) var(--space-300) var(--space-300);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out-expo), visibility 400ms var(--ease-out-expo);
}

.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
}

.menu-overlay a {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}

.menu-open .menu-overlay a {
  opacity: 1;
  transform: none;
}

.menu-open .menu-overlay a:nth-child(1) { transition-delay: 60ms; }
.menu-open .menu-overlay a:nth-child(2) { transition-delay: 120ms; }
.menu-open .menu-overlay a:nth-child(3) { transition-delay: 180ms; }
.menu-open .menu-overlay a:nth-child(4) { transition-delay: 240ms; }

/* ---------- Buttons (Aave: pill, solid ink or soft tint) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-75);
  height: 40px;
  padding: 0 var(--space-200);
  border: 0;
  border-radius: var(--radius-full);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out-expo), transform var(--duration-micro) var(--ease-out-expo),
    opacity var(--duration-micro) var(--ease-out-expo);
}

.button:active:not([disabled]) {
  transform: scale(0.97);
}

.button--primary {
  background: var(--color-text);
  color: #fff;
}

.button--ghost {
  background: rgba(37, 34, 40, 0.05);
  color: var(--color-text);
}

@media (hover: hover) {
  .button--primary:hover:not([disabled]) {
    background: #3b383e;
  }

  .button--ghost:hover:not([disabled]) {
    background: rgba(37, 34, 40, 0.09);
  }
}

.button--small {
  height: 32px;
  font-size: 14px;
  font-weight: 450;
}

.button--large {
  height: 48px;
  padding: 0 var(--space-300);
  font-size: 16px;
}

.button[disabled],
.button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.button i {
  font-size: 16px;
  transition: transform var(--duration-micro) var(--ease-out-expo);
}

.button:hover i.ph-arrow-right {
  transform: translateX(2px);
}

.wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
}

.wallet-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gain-dot);
}

/* ---------- Small pieces ---------- */

/* Aave section label: lavender gradient text with a slow shine */
.label {
  display: inline-block;
  width: fit-content;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: transparent;
  background: linear-gradient(90deg, var(--color-purple-3) 0%, var(--color-purple-6) 50%, var(--color-purple-3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: label-shine 6s linear infinite;
}

@keyframes label-shine {
  to {
    background-position: -200% 0;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  color: var(--color-text-faint);
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  height: 24px;
  padding: 0 var(--space-75);
  border-radius: var(--radius-full);
  background: rgba(37, 34, 40, 0.05);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}

.pill--running {
  background: var(--color-gain-soft);
  color: var(--color-gain);
}

.pill--paused {
  color: var(--color-text-muted);
}

.pill--warn {
  background: var(--color-loss-soft);
  color: var(--color-loss);
}

.pill--accent {
  background: var(--color-purple-8);
  color: var(--color-purple-rich);
}

/* Aave "earning" pulse */
.pulse {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-gain-dot);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--color-card);
  padding: var(--space-300);
}

.card__title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-300);
  z-index: 300;
  padding: var(--space-75) var(--space-200);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.98);
  transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo);
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Entrance: fade up, expo out */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity var(--duration-enter) var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Headlines reveal word by word */
.words .word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(40%);
  transition: opacity 700ms var(--ease-out-expo), transform 900ms var(--ease-out-expo), filter 700ms var(--ease-out-expo);
}

.words.is-visible .word {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Lavender highlight inside headlines */
.highlight {
  color: transparent;
  background: linear-gradient(134deg, var(--color-purple-6) 0%, var(--color-purple-2) 49%, var(--color-purple-6) 91%);
  -webkit-background-clip: text;
  background-clip: text;
  padding-right: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .words .word {
    opacity: 1;
    transform: none;
    filter: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-800) 0;
}

@media (min-width: 768px) {
  .section {
    padding: 160px 0;
  }
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.section--subtle {
  background: var(--color-bg-subtle);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  max-width: 46rem;
  margin-bottom: var(--space-600);
}

.section-heading--center {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.section-heading__title {
  color: var(--color-text-90);
  font-size: 32px;
  line-height: 120%;
  font-weight: 500;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .section-heading__title {
    font-size: 56px;
    line-height: 108%;
    letter-spacing: -0.045em;
  }
}

.section-heading__lead {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 136%;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .section-heading__lead {
    font-size: 20px;
  }
}

.section--dark .section-heading__title {
  color: var(--color-on-dark);
}

.section--dark .section-heading__lead {
  color: var(--color-on-dark-muted);
}

/* ---------- Landing: hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-700) 0 0;
  text-align: center;
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-900);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  height: 32px;
  padding: 0 var(--space-100) 0 var(--space-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: border-color var(--duration-micro) var(--ease-out-expo);
}

.hero__badge:hover {
  border-color: var(--color-border-strong);
}

.hero__badge img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-md);
}

.hero__title {
  max-width: 880px;
  color: var(--color-text-90);
  font-size: 48px;
  line-height: 1.04;
  font-weight: 550;
  letter-spacing: -0.045em;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 96px;
  }
}

.hero__lead {
  max-width: 560px;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 140%;
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .hero__lead {
    font-size: 20px;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-100);
}

/* Row of three phones rising from the bottom edge */
.phones {
  --phone-w: 232px;
  position: relative;
  width: 100%;
  height: calc(var(--phone-w) * 1.32);
  margin-top: var(--space-600);
  overflow: hidden;
}

@media (min-width: 768px) {
  .phones {
    --phone-w: 300px;
  }
}

.phone {
  position: absolute;
  top: 0;
  width: var(--phone-w);
  aspect-ratio: 9 / 19;
  padding: calc(var(--phone-w) * 0.035);
  border-radius: calc(var(--phone-w) * 0.16);
  background: #1d1c20;
  box-shadow: 0 0 0 1.5px #3a383e, 0 40px 80px -20px rgba(37, 34, 40, 0.25);
  opacity: 0;
  transform: translateY(12%) scale(0.975);
  transition: opacity 600ms var(--ease-out-expo), transform 1200ms var(--ease-out-expo);
}

.phones.is-visible .phone {
  opacity: 1;
  transform: none;
}

.phone--center {
  z-index: 2;
  left: 50%;
  margin-left: calc(var(--phone-w) / -2);
}

.phone--left,
.phone--right {
  display: none;
  top: 10%;
}

@media (min-width: 900px) {
  .phone--left,
  .phone--right {
    display: block;
  }

  .phone--left {
    left: calc(50% - var(--phone-w) * 1.55);
    transition-delay: 120ms;
  }

  .phone--right {
    left: calc(50% + var(--phone-w) * 0.55);
    transition-delay: 200ms;
  }

  .phones.is-visible .phone--left,
  .phones.is-visible .phone--right {
    transform: scale(0.94);
  }
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--phone-w) * 0.035);
  height: 100%;
  overflow: hidden;
  padding: calc(var(--phone-w) * 0.15) calc(var(--phone-w) * 0.06) calc(var(--phone-w) * 0.06);
  border-radius: calc(var(--phone-w) * 0.13);
  background: #fff;
  text-align: left;
  font-size: calc(var(--phone-w) * 0.043);
  line-height: 1.35;
}

.phone__island {
  position: absolute;
  top: calc(var(--phone-w) * 0.035);
  left: 50%;
  width: 32%;
  height: calc(var(--phone-w) * 0.085);
  border-radius: var(--radius-full);
  background: #1d1c20;
  transform: translateX(-50%);
}

.phone__status {
  position: absolute;
  top: calc(var(--phone-w) * 0.045);
  left: calc(var(--phone-w) * 0.09);
  right: calc(var(--phone-w) * 0.09);
  display: flex;
  justify-content: space-between;
  font-size: calc(var(--phone-w) * 0.042);
  font-weight: 600;
}

.phone__title {
  font-size: calc(var(--phone-w) * 0.056);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.phone__big {
  font-size: calc(var(--phone-w) * 0.15);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.phone__caption {
  color: var(--color-text-faint);
  text-align: center;
}

.phone__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--phone-w) * 0.03);
}

.phone__tile {
  padding: calc(var(--phone-w) * 0.04);
  border-radius: calc(var(--phone-w) * 0.05);
  background: var(--color-bg-panel);
}

.phone__tile--accent {
  background: var(--color-purple-8);
}

.phone__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--phone-w) * 0.02);
}

.phone__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--phone-w) * 0.012) calc(var(--phone-w) * 0.03);
  border-radius: var(--radius-full);
  background: var(--color-bg-panel);
  font-weight: 500;
}

.phone__chip--on {
  background: var(--color-text);
  color: #fff;
}

.phone__button {
  margin-top: auto;
  padding: calc(var(--phone-w) * 0.035);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: #fff;
  font-weight: 500;
  text-align: center;
}

.phone__icon {
  width: calc(var(--phone-w) * 0.16);
  height: calc(var(--phone-w) * 0.16);
  margin: 0 auto;
}

.phone svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Landing: stats band with rolling digits ---------- */

.stats-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-400) var(--space-300);
  padding: var(--space-600) 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .stats-band {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-big {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
}

.stat-big__label {
  color: var(--color-text-faint);
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
}

.stat-big__value {
  display: inline-flex;
  align-items: baseline;
  font-size: 36px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .stat-big__value {
    font-size: 48px;
  }
}

.odometer {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}

.odometer__digit {
  display: inline-flex;
  flex-direction: column;
  transition: transform 1600ms var(--ease-out-expo);
}

.odometer__digit span {
  height: 1em;
}

/* ---------- Landing: dark strategy cards (Aave market cards) ---------- */

.strategy-grid {
  display: grid;
  gap: var(--space-200);
}

@media (min-width: 1024px) {
  .strategy-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.strategy-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-400);
  min-height: 360px;
  padding: var(--space-400) var(--space-300);
  border-radius: var(--radius-3xl);
  background: var(--color-dark-card);
  text-decoration: none;
  transition: background-color 300ms var(--ease-out-expo);
}

.strategy-card:hover {
  background: rgba(255, 255, 255, 0.07);
}

.strategy-card__icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-200);
  transition: transform 600ms var(--ease-spring);
}

.strategy-card:hover .strategy-card__icon {
  transform: translateY(-4px) rotate(-4deg) scale(1.04);
}

.strategy-card__label {
  color: var(--color-purple-3);
  font-size: 14px;
  line-height: 16px;
  font-weight: 450;
  letter-spacing: 0.01em;
}

.strategy-card__title {
  margin-top: var(--space-75);
  font-size: 20px;
  line-height: 135%;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.strategy-card__text {
  margin-top: var(--space-100);
  color: var(--color-on-dark-muted);
  font-size: 15px;
  line-height: 145%;
}

.token-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-50);
}

.token-dot {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 var(--space-75);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-on-dark);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}

.strategy-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-200);
  padding-top: var(--space-200);
  border-top: 1px solid var(--color-dark-line);
  color: var(--color-on-dark-muted);
  font-size: 13px;
  line-height: 18px;
}

.strategy-card__foot strong {
  display: block;
  margin-top: var(--space-25);
  color: var(--color-on-dark);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

/* ---------- Landing: feature cards ---------- */

.grid-3 {
  display: grid;
  gap: var(--space-200);
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding: var(--space-400) var(--space-300);
  border-radius: var(--radius-3xl);
  background: var(--color-bg-subtle);
  transition: background-color 300ms var(--ease-out-expo);
}

.feature:hover {
  background: var(--color-bg-panel);
}

.feature__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-300);
  transition: transform 600ms var(--ease-spring);
}

.feature:hover .feature__icon {
  transform: translateY(-4px) scale(1.05);
}

.feature__step {
  color: var(--color-purple-3);
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
}

.feature h3 {
  font-size: 20px;
  line-height: 135%;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.feature p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 145%;
}

/* "Honest by default" stat tiles */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-200);
}

@media (min-width: 900px) {
  .proof-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  padding: var(--space-300);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
}

.proof strong {
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.proof span {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 145%;
}

/* Tagline reveal: words light up one by one */
.tagline {
  max-width: 900px;
  margin-bottom: var(--space-700);
  font-size: 36px;
  line-height: 115%;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .tagline {
    font-size: 56px;
  }
}

.tagline__word {
  color: rgba(37, 34, 40, 0.16);
  transition: color 600ms var(--ease-out-expo);
}

.tagline__word.is-lit {
  color: var(--color-text-90);
}

/* Growth chart card */
.growth {
  display: grid;
  gap: var(--space-400);
  padding: var(--space-300);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
}

@media (min-width: 900px) {
  .growth {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    padding: var(--space-500);
  }
}

.growth__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.growth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200);
  padding-bottom: var(--space-200);
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  line-height: 20px;
}

.growth__row:last-child {
  border-bottom: 0;
}

.growth__row strong {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: var(--space-75);
  border-radius: var(--radius-full);
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin-inline: auto;
}

.faq details {
  border-bottom: 1px solid var(--color-border);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-200);
  padding: var(--space-300) 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-micro) var(--ease-out-expo);
}

.faq summary:hover {
  color: var(--color-purple-rich);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary i {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(37, 34, 40, 0.05);
  font-size: 14px;
  transition: transform 400ms var(--ease-out-expo);
}

.faq details[open] summary i {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 680px;
  padding-bottom: var(--space-300);
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 150%;
}

/* Final CTA */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-700) var(--space-300);
  border-radius: var(--radius-3xl);
  background: var(--color-dark);
  color: var(--color-on-dark);
  text-align: center;
}

.cta-band img {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-3xl);
}

.cta-band h2 {
  font-size: 32px;
  line-height: 120%;
  letter-spacing: -0.03em;
}

@media (min-width: 768px) {
  .cta-band {
    padding: var(--space-900) var(--space-300);
  }

  .cta-band h2 {
    font-size: 48px;
  }
}

.cta-band p {
  max-width: 520px;
  color: var(--color-on-dark-muted);
  font-size: 18px;
  line-height: 140%;
}

.cta-band .button--primary {
  background: #fff;
  color: var(--color-text);
}

@media (hover: hover) {
  .cta-band .button--primary:hover:not([disabled]) {
    background: var(--color-purple-8);
  }
}

/* Footer */
.footer {
  padding: var(--space-700) 0 var(--space-400);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-400) var(--space-300);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  max-width: 320px;
}

@media (min-width: 768px) {
  .footer__brand {
    grid-column: auto;
  }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.footer__col h3 {
  color: var(--color-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.footer a {
  width: fit-content;
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-out-expo);
}

.footer a:hover {
  color: var(--color-text);
}

.footer__bottom {
  margin-top: var(--space-600);
  color: var(--color-text-faint);
  font-size: 13px;
  line-height: 18px;
}

/* ---------- App pages ---------- */

.page {
  padding-top: var(--space-500);
  padding-bottom: var(--space-800);
}

.page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
}

.page__title {
  color: var(--color-text-90);
  font-size: 36px;
  line-height: 115%;
  font-weight: 500;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .page__title {
    font-size: 48px;
  }
}

.page__lead {
  margin-top: var(--space-100);
  max-width: 600px;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 140%;
}

/* Forge */
.forge {
  display: grid;
  gap: var(--space-300);
  align-items: start;
}

@media (min-width: 1024px) {
  .forge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .forge__result {
    position: sticky;
    top: calc(var(--header-height) + var(--space-200));
  }
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding: var(--space-300) 0;
  border-top: 1px solid var(--color-border);
}

.form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.form-section__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-200);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.form-section__hint {
  color: var(--color-text-faint);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-200);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background: #fff;
  font-size: 16px;
  line-height: 24px;
  transition: border-color var(--duration-micro) var(--ease-out-expo), box-shadow var(--duration-micro) var(--ease-out-expo);
}

.input:hover {
  border-color: var(--color-purple-5);
}

.input:focus {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 4px var(--color-purple-8);
  outline: none;
}

.input[aria-invalid="true"] {
  border-color: var(--color-loss);
  box-shadow: 0 0 0 4px var(--color-loss-soft);
}

.field-error {
  color: var(--color-loss);
  font-size: 13px;
  line-height: 18px;
}

.choice-grid {
  display: grid;
  gap: var(--space-100);
}

@media (min-width: 560px) {
  .choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-50);
  padding: var(--space-200);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out-expo), box-shadow var(--duration-micro) var(--ease-out-expo),
    transform var(--duration-micro) var(--ease-out-expo);
}

.choice:hover {
  border-color: var(--color-purple-5);
}

.choice:active {
  transform: scale(0.985);
}

.choice:has(input:checked) {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 4px var(--color-purple-8);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-75);
  transition: transform 500ms var(--ease-spring);
}

.choice:hover .choice__icon,
.choice:has(input:checked) .choice__icon {
  transform: translateY(-2px) rotate(-4deg);
}

.choice__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.choice__text {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: var(--space-75);
}

.token {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-25);
  padding: var(--space-100);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out-expo), box-shadow var(--duration-micro) var(--ease-out-expo),
    transform var(--duration-micro) var(--ease-out-expo);
}

.token:hover:not([disabled]) {
  border-color: var(--color-purple-5);
}

.token:active:not([disabled]) {
  transform: scale(0.97);
}

.token[aria-pressed="true"] {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 3px var(--color-purple-8);
}

.token[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.token__row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-75);
  font-size: 14px;
  line-height: 20px;
}

.token__symbol {
  font-weight: 600;
}

.token__name {
  overflow: hidden;
  max-width: 100%;
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.range {
  display: flex;
  align-items: center;
  gap: var(--space-200);
}

.range input[type="range"] {
  flex: 1;
  accent-color: var(--color-purple-rich);
}

.range output {
  min-width: 48px;
  font-size: 15px;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-200);
}

@media (min-width: 560px) {
  .result-head__aside {
    text-align: right;
  }
}

.big-number {
  margin-top: var(--space-75);
  font-size: 56px;
  line-height: 1;
  font-weight: 550;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-75);
}

@media (min-width: 560px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-50);
  padding: var(--space-100) var(--space-200);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-subtle);
}

.stat__label {
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.stat__value {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.note {
  display: flex;
  gap: var(--space-75);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.verdict {
  display: flex;
  gap: var(--space-100);
  padding: var(--space-200);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-subtle);
  font-size: 14px;
  line-height: 20px;
}

.verdict i {
  flex: none;
  font-size: 20px;
}

/* Chart */
.chart {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Lines draw themselves in on render (pathLength normalises the dash) */
.chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1400ms var(--ease-out-expo) forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-200);
  margin-top: var(--space-100);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
}

.chart__swatch {
  width: 12px;
  height: 2px;
  border-radius: var(--radius-full);
}

.chart__tooltip {
  position: absolute;
  top: 0;
  padding: var(--space-50) var(--space-75);
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: opacity var(--duration-micro) var(--ease-out-expo);
}

.chart:hover .chart__tooltip {
  opacity: 1;
}

/* Modal */
.modal {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-3xl);
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(37, 34, 40, 0.18);
}

.modal[open] {
  animation: modal-enter 400ms var(--ease-out-expo);
}

@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }
}

.modal::backdrop {
  background: rgba(37, 34, 40, 0.3);
  backdrop-filter: blur(4px);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-400) var(--space-300) var(--space-300);
}

.modal__icon {
  width: 56px;
  height: 56px;
}

.modal__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.check {
  display: flex;
  gap: var(--space-100);
  align-items: flex-start;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  margin: var(--space-25) 0 0;
  accent-color: var(--color-purple-rich);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-75);
  margin-top: var(--space-75);
}

/* Agent page */
.agent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-300);
  margin-bottom: var(--space-400);
}

.agent-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-75);
  margin-top: var(--space-100);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.agent-layout {
  display: grid;
  gap: var(--space-200);
}

@media (min-width: 1024px) {
  .agent-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

.stack--tight {
  gap: var(--space-100);
}

.tabs {
  display: inline-flex;
  gap: var(--space-25);
  padding: var(--space-25);
  border-radius: var(--radius-full);
  background: rgba(37, 34, 40, 0.05);
}

.tab {
  height: 28px;
  padding: 0 var(--space-100);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 450;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out-expo), color var(--duration-micro) var(--ease-out-expo),
    box-shadow var(--duration-micro) var(--ease-out-expo);
}

.tab:hover {
  color: var(--color-text);
}

.tab[aria-selected="true"] {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(37, 34, 40, 0.08);
}

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200);
  margin-bottom: var(--space-200);
}

.decision {
  display: flex;
  gap: var(--space-100);
  padding: var(--space-100);
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
  font-size: 13px;
  line-height: 18px;
}

.decision__action {
  flex: none;
  align-self: flex-start;
  min-width: 44px;
  padding: var(--space-25) var(--space-75);
  border-radius: var(--radius-full);
  background: rgba(37, 34, 40, 0.06);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decision__action--buy {
  background: var(--color-gain-soft);
  color: var(--color-gain);
}

.decision__action--sell {
  background: var(--color-loss-soft);
  color: var(--color-loss);
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.table th {
  padding: var(--space-75) var(--space-100);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-weight: 450;
  font-size: 12px;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--space-200) var(--space-100);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table .num {
  text-align: right;
}

.table tbody tr {
  transition: background-color var(--duration-micro) var(--ease-out-expo);
}

.table--clickable tbody tr {
  cursor: pointer;
}

.table--clickable tbody tr:hover {
  background: var(--color-bg-subtle);
}

.table a {
  font-weight: 500;
  text-decoration: none;
}

.rank {
  color: var(--color-text-ghost);
}

/* Empty states: a 3D icon, a short title and the reason, no grey box */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-400) var(--space-300);
  text-align: center;
}

.empty img {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  50% {
    transform: translateY(-6px);
  }
}

.cash-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
}

.cash-state__bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-bg-panel);
}

.cash-state__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-purple-6), var(--color-purple-1));
}

.proto-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-100);
  margin-bottom: var(--space-300);
  padding: var(--space-75) var(--space-75) var(--space-75) var(--space-200);
  border: 1px dashed var(--color-purple-5);
  border-radius: var(--radius-2xl);
  background: #fbfbff;
}

.empty img {
  width: 72px;
  height: 72px;
}

.empty > i {
  font-size: 24px;
  color: var(--color-text-faint);
}

.empty p {
  max-width: 360px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.log-run {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  padding: var(--space-200) 0;
  border-bottom: 1px solid var(--color-border);
}

.log-run:last-child {
  border-bottom: 0;
}

.log-run__time {
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-200);
  margin-bottom: var(--space-200);
}

.leader-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
}

.leader-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-100);
  align-items: center;
  padding: var(--space-200);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: #fff;
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--ease-out-expo), transform var(--duration-micro) var(--ease-out-expo);
}

.leader-card:active {
  transform: scale(0.985);
}

@media (min-width: 768px) {
  .only-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .only-desktop {
    display: none !important;
  }
}

.prose {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  color: var(--color-text-muted);
}

.prose h2 {
  margin-top: var(--space-300);
  color: var(--color-text);
  font-size: 20px;
  line-height: 28px;
}

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  padding: var(--space-900) 0;
  text-align: center;
}

.not-found img {
  width: 120px;
  height: 120px;
}

/* ==========================================================================
   Aave-style glows, inset dark panels, browser mockup, stock grid, feed
   ========================================================================== */

/* Hero glow: soft lavender light behind the phones, plus a faint dot grid */
.hero-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 40% at 50% 92%, rgba(184, 160, 104, 0.32), transparent 70%),
    radial-gradient(30% 30% at 18% 70%, rgba(184, 160, 104, 0.45), transparent 70%),
    radial-gradient(30% 30% at 82% 70%, rgba(184, 160, 104, 0.7), transparent 70%);
}

.hero-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(37, 34, 40, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 30%, #000 0%, transparent 75%);
}

/* Inset dark panel with a purple glow rising from the bottom (Aave Pro) */
.panel-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 var(--space-75);
  border-radius: 32px;
  background: #102b24;
  color: var(--color-on-dark);
}

@media (min-width: 768px) {
  .panel-dark {
    margin: 0 var(--space-300);
    border-radius: 40px;
  }
}

.panel-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(128, 117, 255, 0.42), transparent 70%),
    radial-gradient(55% 40% at 0% 90%, rgba(76, 31, 94, 0.75), transparent 70%),
    radial-gradient(40% 30% at 100% 40%, rgba(147, 145, 254, 0.12), transparent 70%),
    radial-gradient(50% 30% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
}

.panel-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.panel-dark .section-heading__title {
  color: var(--color-on-dark);
}

.panel-dark .section-heading__lead {
  color: var(--color-on-dark-muted);
}

.panel-dark .highlight {
  background: linear-gradient(134deg, var(--color-purple-8) 0%, #b29255 49%, var(--color-purple-8) 91%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Showcase head: product label, huge title, two pills */
.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-300);
  padding-top: var(--space-800);
  text-align: center;
}

@media (min-width: 768px) {
  .showcase {
    padding-top: 160px;
  }
}

.showcase__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.showcase__label img {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
}

.showcase__title {
  max-width: 1000px;
  font-size: 48px;
  line-height: 1.02;
  font-weight: 550;
  letter-spacing: -0.045em;
}

@media (min-width: 768px) {
  .showcase__title {
    font-size: 88px;
  }
}

.showcase__lead {
  max-width: 560px;
  color: var(--color-on-dark-muted);
  font-size: 18px;
  line-height: 140%;
}

@media (min-width: 768px) {
  .showcase__lead {
    font-size: 22px;
  }
}

.button--light {
  background: #fff;
  color: var(--color-text);
}

.button--dark-soft {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-dark);
}

@media (hover: hover) {
  .button--light:hover:not([disabled]) {
    background: var(--color-purple-8);
  }

  .button--dark-soft:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* Browser window mockup of the Zolva app (dark UI), fading at the bottom */
.browser {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: var(--space-700) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px 20px 0 0;
  background: #102b24;
  box-shadow: 0 -20px 120px rgba(128, 117, 255, 0.18);
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.browser__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser__dots {
  display: flex;
  gap: 6px;
}

.browser__dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: #ff5f57;
}

.browser__dots span:nth-child(2) {
  background: #febc2e;
}

.browser__dots span:nth-child(3) {
  background: #28c840;
}

.browser__url {
  min-width: 200px;
  padding: var(--space-25) var(--space-200);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-on-dark-muted);
  font-size: 11px;
  text-align: center;
}

.browser__body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 520px;
}

@media (min-width: 900px) {
  .browser__body {
    grid-template-columns: 196px 1fr;
  }
}

.browser__side {
  display: none;
  flex-direction: column;
  gap: var(--space-25);
  padding: var(--space-200) var(--space-100);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark-muted);
}

@media (min-width: 900px) {
  .browser__side {
    display: flex;
  }
}

.browser__brand {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  margin-bottom: var(--space-200);
  padding: 0 var(--space-75);
  color: var(--color-on-dark);
  font-size: 14px;
  font-weight: 600;
}

.browser__brand img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-md);
}

.browser__group {
  margin: var(--space-200) 0 var(--space-50);
  padding: 0 var(--space-75);
  color: rgba(246, 247, 244, 0.35);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.browser__nav {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  padding: 6px var(--space-75);
  border-radius: var(--radius-md);
}

.browser__nav--on {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-on-dark);
}

.browser__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  min-width: 0;
  padding: var(--space-200) var(--space-200) var(--space-400);
  color: var(--color-on-dark);
}

@media (min-width: 900px) {
  .browser__main {
    padding: var(--space-200) var(--space-600) var(--space-400);
  }
}

.browser__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-100);
}

.browser__search {
  flex: 1;
  max-width: 260px;
  padding: 6px var(--space-100);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: rgba(246, 247, 244, 0.4);
  white-space: nowrap;
  overflow: hidden;
}

.browser__chip {
  padding: 6px var(--space-100);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.browser__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.browser__table-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
}

.browser__table {
  width: 100%;
  border-collapse: collapse;
}

.browser__table th {
  padding: var(--space-100) var(--space-200);
  color: rgba(246, 247, 244, 0.4);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.browser__table td {
  padding: var(--space-100) var(--space-200);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.browser__table .sub {
  display: block;
  color: rgba(246, 247, 244, 0.4);
  font-size: 11px;
}

.browser .gain {
  color: #3fdc87;
}

.browser .loss {
  color: #ff8a5c;
}

@media (max-width: 899px) {
  .browser__table .hide-sm {
    display: none;
  }
}

@media (max-width: 1099px) {
  .browser__table .hide-md {
    display: none;
  }
}

.ticker-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.agent-cell {
  display: flex;
  align-items: center;
  gap: var(--space-100);
}

/* Strategy cards inside the dark panel */
.strategy-section {
  padding: var(--space-800) 0;
}

@media (min-width: 768px) {
  .strategy-section {
    padding: 120px 0 160px;
  }
}

/* Stock grid (Aave markets): live price + 7 day sparkline per token */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-100);
}

@media (min-width: 768px) {
  .stock-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1100px) {
  .stock-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stock-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  min-width: 0;
  padding: var(--space-200);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: #fff;
  text-decoration: none;
  transition: border-color var(--duration-micro) var(--ease-out-expo), transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo);
}

.stock-tile:hover {
  border-color: var(--color-purple-6);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(128, 117, 255, 0.35);
}

.stock-tile:active {
  transform: scale(0.98);
}

.stock-tile__head {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  min-width: 0;
}

.stock-tile__head > span {
  min-width: 0;
}

.stock-tile__name {
  display: block;
  overflow: hidden;
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stock-tile__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-50) var(--space-75);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stock-tile__price small {
  font-size: 13px;
  font-weight: 500;
}

.stock-tile svg {
  display: block;
  width: 100%;
  height: 40px;
}

/* Decision feed: an endless upward scroll of real decisions */
.feed-section {
  display: grid;
  gap: var(--space-600);
  align-items: center;
}

@media (min-width: 960px) {
  .feed-section {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-800);
  }
}

.feed {
  position: relative;
  height: 520px;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(184, 160, 104, 0.9), transparent 70%),
    radial-gradient(50% 50% at 20% 90%, rgba(184, 160, 104, 0.6), transparent 70%),
    var(--color-bg-subtle);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.feed__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  padding: var(--space-200);
  animation: feed-scroll 70s linear infinite;
}

.feed:hover .feed__track {
  animation-play-state: paused;
}

@keyframes feed-scroll {
  to {
    transform: translateY(-50%);
  }
}

.feed__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  padding: var(--space-200);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(37, 34, 40, 0.04);
  font-size: 14px;
  line-height: 20px;
}

.feed__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-100);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  margin: var(--space-300) 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: var(--space-100);
  font-size: 16px;
  line-height: 24px;
}

.check-list i {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-purple-8);
  color: var(--color-purple-rich);
  font-size: 13px;
}

/* Final CTA as a glowing dark panel */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 40px;
  background: #102b24;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 50% 120%, rgba(128, 117, 255, 0.45), transparent 70%),
    radial-gradient(35% 40% at 10% 0%, rgba(76, 31, 94, 0.6), transparent 70%),
    radial-gradient(35% 40% at 90% 10%, rgba(147, 145, 254, 0.18), transparent 70%);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000, transparent);
}

@media (min-width: 768px) {
  .cta-band {
    padding: 160px var(--space-300);
  }

  .cta-band h2 {
    font-size: 72px;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
}

/* ==========================================================================
   App shell (sidebar on desktop, top bar + tab bar on phones)
   ========================================================================== */

.app-side,
.app-topbar,
.app-tabbar {
  display: none;
}

body.is-app .nav,
body.is-app .footer,
body.is-app .menu-overlay {
  display: none;
}

body.is-app {
  background: var(--color-bg-subtle);
}

body.is-app .card {
  background: #fff;
}

@media (min-width: 900px) {
  body.is-app .app-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: var(--space-300);
    width: 240px;
    padding: var(--space-300) var(--space-200);
    border-right: 1px solid var(--color-border);
    background: #fff;
  }

  body.is-app main {
    margin-left: 240px;
  }

  body.is-app .prototype-banner {
    margin-left: 240px;
  }
}

.app-side .brand {
  padding: 0 var(--space-75);
}

.app-side__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-25);
}

.app-side__group {
  margin: var(--space-200) 0 var(--space-50);
  padding: 0 var(--space-100);
  color: var(--color-text-ghost);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-link {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  height: 36px;
  padding: 0 var(--space-100);
  border-radius: var(--radius-xl);
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--ease-out-expo), color var(--duration-micro) var(--ease-out-expo);
}

.app-link i {
  font-size: 18px;
}

.app-link:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

.app-link[aria-current="page"] {
  background: var(--color-purple-8);
  color: var(--color-purple-rich);
  font-weight: 500;
}

.app-side__account {
  margin-top: auto;
}

.account {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-75);
  border-radius: var(--radius-2xl);
}

.app-side .account {
  border: 1px solid var(--color-border);
}

.account__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
}

.account__text strong {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.account__text span {
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-purple-6), var(--color-purple-rich));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.avatar--empty {
  background: var(--color-bg-panel);
  color: var(--color-text-faint);
}

.avatar-button {
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
}

@media (max-width: 899px) {
  body.is-app .app-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-200);
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
  }

  body.is-app .app-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--space-50) var(--space-75) calc(var(--space-50) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
  }

  body.is-app main {
    padding-bottom: 72px;
  }
}

.app-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-25);
  padding: var(--space-50) 0;
  border-radius: var(--radius-xl);
  color: var(--color-text-faint);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--duration-micro) var(--ease-out-expo), transform var(--duration-micro) var(--ease-out-expo);
}

.app-tabbar a i {
  font-size: 22px;
}

.app-tabbar a:active {
  transform: scale(0.94);
}

.app-tabbar a[aria-current="page"] {
  color: var(--color-purple-rich);
}

/* ==========================================================================
   Login modal (Privy style)
   ========================================================================== */

.modal--privy {
  width: min(380px, calc(100% - 24px));
}

.privy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-400) var(--space-300) var(--space-200);
  text-align: center;
}

.privy__logo {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-75);
}

.privy__title {
  margin-bottom: var(--space-100);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.privy__text {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.privy__icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out-expo), color var(--duration-micro) var(--ease-out-expo);
}

.privy__icon-button:hover {
  background: var(--color-bg-panel);
  color: var(--color-text);
}

.privy__close {
  position: absolute;
  top: var(--space-100);
  right: var(--space-100);
}

.privy__back {
  position: absolute;
  top: var(--space-100);
  left: var(--space-100);
}

.privy__email {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  width: 100%;
  height: 52px;
  padding: 0 var(--space-75) 0 var(--space-200);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  transition: border-color var(--duration-micro) var(--ease-out-expo), box-shadow var(--duration-micro) var(--ease-out-expo);
}

.privy__email:focus-within {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 4px var(--color-purple-8);
}

.privy__email[aria-invalid="true"] {
  border-color: var(--color-loss);
}

.privy__email > i {
  color: var(--color-text-faint);
  font-size: 18px;
}

.privy__email input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
}

.privy__submit {
  height: 36px;
  padding: 0 var(--space-200);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--color-purple-8);
  color: var(--color-purple-rich);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-out-expo);
}

.privy__submit:hover {
  background: var(--color-purple-6);
}

.privy__option {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  width: 100%;
  height: 52px;
  padding: 0 var(--space-200) 0 var(--space-100);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-micro) var(--ease-out-expo), background-color var(--duration-micro) var(--ease-out-expo),
    transform var(--duration-micro) var(--ease-out-expo);
}

.privy__option:hover {
  border-color: var(--color-purple-5);
  background: #fbfbff;
}

.privy__option:active {
  transform: scale(0.98);
}

.privy__glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 700;
}

.privy__glyph--big {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-2xl);
  font-size: 24px;
}

.privy__chevron {
  margin-left: auto;
  color: var(--color-text-ghost);
}

.privy__wallets {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  width: 100%;
}

.privy__note {
  margin-top: var(--space-50);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.privy__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-purple-rich);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.privy__footer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-50);
  margin-top: var(--space-200);
  color: var(--color-text-ghost);
  font-size: 11px;
  line-height: 16px;
}

.privy__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-75);
  border-radius: var(--radius-full);
  background: var(--color-purple-8);
  color: var(--color-purple-rich);
  font-size: 26px;
}

.privy__badge--ok {
  background: var(--color-gain-soft);
  color: var(--color-gain);
  animation: pop 500ms var(--ease-spring);
}

@keyframes pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.privy__code {
  display: flex;
  gap: var(--space-75);
  margin: var(--space-100) 0;
}

.privy__code input {
  width: 44px;
  height: 52px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  transition: border-color var(--duration-micro) var(--ease-out-expo), box-shadow var(--duration-micro) var(--ease-out-expo);
}

.privy__code input:focus {
  border-color: var(--color-purple-1);
  box-shadow: 0 0 0 4px var(--color-purple-8);
  outline: none;
}

.privy__pulse {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin-bottom: var(--space-75);
  border-radius: var(--radius-full);
  background: var(--color-purple-8);
  animation: ring 1.6s ease-out infinite;
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(184, 160, 104, 0.45);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(184, 160, 104, 0);
  }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash-stats {
  display: grid;
  gap: var(--space-200);
  margin-bottom: var(--space-300);
}

@media (min-width: 768px) {
  .dash-stats {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.dash-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  padding: var(--space-300);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: #fff;
}

.dash-stat--accent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: transparent;
  background: #102b24;
  color: var(--color-on-dark);
}

.dash-stat--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(128, 117, 255, 0.55), transparent 70%),
    radial-gradient(50% 70% at 0% 0%, rgba(76, 31, 94, 0.6), transparent 70%);
}

.dash-stat--accent .stat__label,
.dash-stat--accent .muted {
  color: var(--color-on-dark-muted);
}

.dash-stat__value {
  overflow: hidden;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 550;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.dash-layout {
  display: grid;
  gap: var(--space-200);
  align-items: start;
}

@media (min-width: 1100px) {
  .dash-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.agent-cards {
  display: grid;
  gap: var(--space-200);
}

@media (min-width: 640px) {
  .agent-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.agent-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  padding: var(--space-300);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: #fff;
  text-decoration: none;
  transition: border-color var(--duration-micro) var(--ease-out-expo), transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo);
}

.agent-card:hover {
  border-color: var(--color-purple-6);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -18px rgba(128, 117, 255, 0.35);
}

.agent-card:active {
  transform: scale(0.985);
}

.agent-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.agent-card__waiting {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  height: 32px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
}

.agent-card__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-200);
  padding-top: var(--space-200);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-size: 12px;
  line-height: 16px;
}

.agent-card__foot strong {
  display: block;
  margin-top: var(--space-25);
  color: var(--color-text);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.agent-card--new {
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed var(--color-purple-5);
  background: #fbfbff;
  text-align: center;
}

.agent-card--new img {
  transition: transform 600ms var(--ease-spring);
}

.agent-card--new:hover img {
  transform: translateY(-4px) rotate(-4deg);
}

.wallet-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-75);
  padding: var(--space-200);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-subtle);
}

.wallet-box__address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  padding: var(--space-100) var(--space-75);
  border-radius: var(--radius-xl);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color var(--duration-micro) var(--ease-out-expo);
}

.mini-row:hover {
  background: var(--color-bg-subtle);
}

/* ==========================================================================
   Closing CTA: light panel with lavender glow and a fanned card stack
   ========================================================================== */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-600);
  align-items: center;
  padding: var(--space-600) var(--space-300);
  border: 1px solid var(--color-border);
  border-radius: 40px;
  background: #fbfbff;
}

@media (min-width: 960px) {
  .closing {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    padding: var(--space-800) var(--space-700);
  }
}

.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 85% 55%, rgba(184, 160, 104, 0.45), transparent 70%),
    radial-gradient(35% 45% at 65% 100%, rgba(184, 160, 104, 0.8), transparent 70%),
    radial-gradient(30% 40% at 0% 0%, rgba(184, 160, 104, 0.9), transparent 70%);
}

.closing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(37, 34, 40, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(50% 70% at 80% 50%, #000, transparent);
  -webkit-mask-image: radial-gradient(50% 70% at 80% 50%, #000, transparent);
}

.closing__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
}

.closing__title {
  color: var(--color-text-90);
  font-size: 44px;
  line-height: 1.02;
  font-weight: 550;
  letter-spacing: -0.045em;
}

@media (min-width: 768px) {
  .closing__title {
    font-size: 72px;
  }
}

.closing__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100) var(--space-300);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 20px;
}

.closing__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
}

.closing__points i {
  color: var(--color-purple-rich);
}

/* Three cards fanned out, gently floating at different speeds */
.closing__stack {
  position: relative;
  height: 440px;
}

.closing__card {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--space-100);
  width: min(300px, 78%);
  padding: var(--space-300);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-3xl);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -24px rgba(76, 31, 94, 0.35);
  transition: transform 700ms var(--ease-out-expo);
}

.closing__card--back {
  top: 0;
  --tilt: translateX(-22%) rotate(5deg);
  transform: var(--tilt);
  animation: drift 7s ease-in-out infinite;
}

.closing__card--mid {
  top: 120px;
  --tilt: translateX(-74%) rotate(-5deg);
  transform: var(--tilt);
  animation: drift 8s ease-in-out -2s infinite;
}

.closing__card--front {
  top: 240px;
  --tilt: translateX(-38%) rotate(-1deg);
  transform: var(--tilt);
  animation: drift 6s ease-in-out -4s infinite;
}

@keyframes drift {
  50% {
    transform: var(--tilt) translateY(-8px);
  }
}

.closing:hover .closing__card--back {
  animation-play-state: paused;
  transform: translateX(-18%) rotate(8deg) translateY(-10px);
}

.closing:hover .closing__card--mid {
  animation-play-state: paused;
  transform: translateX(-80%) rotate(-8deg) translateY(-6px);
}

.closing__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-75);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.closing__big {
  font-size: 40px;
  line-height: 1;
  font-weight: 550;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 959px) {
  .closing__stack {
    height: 430px;
  }
}

/* ==========================================================================
   Footer: newsletter, link columns, giant gradient wordmark
   ========================================================================== */

.footer {
  overflow: hidden;
  padding: var(--space-700) 0 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.footer__news {
  display: grid;
  gap: var(--space-300);
  align-items: center;
  padding-bottom: var(--space-600);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .footer__news {
    grid-template-columns: 1fr 1fr;
  }
}

.footer__news-title {
  margin-bottom: var(--space-75);
  color: var(--color-text);
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.footer__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-75);
}

.footer__form .field-error {
  grid-column: 1 / -1;
}

.footer__form .button {
  height: 48px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-400) var(--space-300);
  padding: var(--space-600) 0;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-75);
  width: fit-content;
  padding: var(--space-50) var(--space-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: #fff;
  font-size: 12px;
  line-height: 16px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-100) var(--space-300);
  margin-top: 0;
  padding: var(--space-300) 0;
  border-top: 1px solid var(--color-border);
}

/* Giant wordmark, cut off by the bottom edge (Aave footer) */
.footer__wordmark {
  margin-top: var(--space-200);
  margin-bottom: -0.24em;
  color: transparent;
  background: linear-gradient(180deg, var(--color-purple-5) 0%, var(--color-purple-8) 70%, rgba(184, 160, 104, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 34vw;
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* Editorial typography and a quiet celestial trading canvas. */
.brand {font-family:var(--font-editorial);font-weight:500;letter-spacing:-.035em;}
h1,h2,.page__title,.section__title,.footer__news-title {font-family:var(--font-editorial);font-weight:450;letter-spacing:-.03em;}
button,input,select,textarea {font-family:var(--font-sans);}
.brand__mark {object-fit:contain;}
.rulequay-hero {background:#102b24;color:#f5f1e7;display:block;position:relative;isolation:isolate;padding:76px 24px;min-height:610px;}
.rulequay-hero::before {display:block;content:"";position:absolute;inset:22px;z-index:0;border:1px solid #c8a45d26;background-image:linear-gradient(#c8a45d0b 1px,transparent 1px),linear-gradient(90deg,#c8a45d0b 1px,transparent 1px);background-size:58px 58px;pointer-events:none;}
.rulequay-hero::after {display:block;content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 43%,#102b24c9 0%,#102b2475 36%,transparent 73%),linear-gradient(0deg,#102b24,transparent 28%);mask-image:none;-webkit-mask-image:none;pointer-events:none;}
.rulequay-hero>.container {position:relative;z-index:2;width:100%;}
.rulequay-hero .hero {padding:28px 0;align-items:center;text-align:center;gap:26px;}
.rulequay-hero .hero__title {color:#f5f1e7;font-family:var(--font-editorial);font-size:clamp(48px,6vw,82px);font-weight:450;line-height:1.1;letter-spacing:-.04em;text-shadow:0 2px 18px #102b24;}
.rulequay-hero .highlight {color:#d2b36f;background:none;font-style:italic;font-weight:400;}
.rulequay-hero .hero__lead {color:#d6ded6;font-size:20px;line-height:1.55;max-width:530px;}
.rulequay-hero .hero__actions {justify-content:center;}
.rulequay-hero .button--primary {background:#d2b36f;color:#102b24;border-color:#d2b36f;}
.rulequay-hero .button--primary:hover {background:#dfc58f;}
.rulequay-hero .button--ghost {color:#f5f1e7;border:1px solid #7c8066;background:#102b2488;}
.rulequay-hero .hero__badge {background:#203e3499;color:#eee9dc;border-color:#6b715b;max-width:100%;height:auto;min-height:32px;padding:7px 12px;font-size:13px;}
.rulequay-art {position:absolute;inset:0 0 auto;width:100%;max-width:none;height:clamp(230px,30vw,360px);z-index:0;margin:0;padding:0;pointer-events:none;opacity:.2;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);}
.rulequay-art img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;border:0;border-radius:0;box-shadow:none;}
.hero-constellation {position:absolute;inset:0;width:100%;height:100%;z-index:0;color:#c8b9ed;opacity:.32;pointer-events:none;}
@media(max-width:600px){.rulequay-hero {padding:48px 22px;min-height:560px;}.rulequay-hero::before {inset:12px;background-size:42px 42px;}.rulequay-hero .hero {padding:16px 0;gap:22px;}.rulequay-hero .hero__lead {font-size:18px;}.rulequay-art {inset:0 0 auto;width:100%;height:240px;opacity:.18;}.rulequay-art img {object-position:center top;}.hero-constellation {opacity:.24;}}

/* Forest green, warm paper, and the gold of a working lighthouse. */
:root {--color-text:#18372e;--color-text-90:#18372e;--color-border:#e5e2d7;--color-border-strong:#cdcbbd;--radius-full:7px;--radius-3xl:12px;}
body {background:#faf8f1;}
.nav,.app-side,.app-topbar {background:#faf8f1;}
.button {border-radius:6px;box-shadow:none;}
.button--primary {background:#173e32;color:#faf8f1;border-color:#173e32;}
.button--primary:hover {background:#24513f;}
.highlight,.panel-dark .highlight {background:none;color:#a17c36;-webkit-text-fill-color:currentColor;}
.panel-dark {background:#102b24;border-radius:8px;}
.panel-dark::before,.closing::before {display:none;}
.rulequay-hero {min-height:570px;padding:72px max(24px,6vw);}
.rulequay-hero>.container {max-width:1200px;}
.rulequay-hero .hero {align-items:flex-start;text-align:left;max-width:720px;}
.rulequay-hero .hero__title {font-size:clamp(46px,5.8vw,78px);}
.rulequay-hero .hero__lead {max-width:500px;}
.rulequay-hero .hero__actions {justify-content:flex-start;}
.rulequay-hero .hero__badge {background:transparent;border:0;padding:0;letter-spacing:.07em;text-transform:uppercase;font-size:11px;}
.rulequay-hero::before {border-color:#c8a45d26;background-image:linear-gradient(#c8a45d08 1px,transparent 1px),linear-gradient(90deg,#c8a45d08 1px,transparent 1px);}
.rulequay-hero::after {background:linear-gradient(90deg,#102b24dd 0%,#102b2499 42%,transparent 76%),linear-gradient(0deg,#102b24,transparent 25%);}
.rulequay-art {inset:12px 3% auto auto;width:43%;height:380px;opacity:.64;mask-image:linear-gradient(#000 60%,transparent);-webkit-mask-image:linear-gradient(#000 60%,transparent);}
.rulequay-art img {object-fit:contain;object-position:top right;}
.feature__icon,.strategy-card__icon,.closing__card-head img {filter:grayscale(1) sepia(.65);}
.journal-preview {display:grid;grid-template-columns:1fr .8fr 1.4fr;gap:32px;padding:48px 0;border-bottom:1px solid var(--color-border-strong);align-items:start;}
.journal-kicker {font-size:10px;letter-spacing:.14em;color:#806026;font-weight:600;}
.journal-preview h2 {font-size:30px;line-height:1.15;margin:12px 0;}
.journal-preview p,.journal-result small {font-size:13px;color:#657469;line-height:1.5;}
.journal-result {display:flex;flex-direction:column;gap:9px;text-decoration:none;color:#18372e;border-left:1px solid #d5d2c3;padding-left:24px;}
.journal-result strong {font-size:42px;font-family:var(--font-editorial);font-weight:400;font-variant-numeric:tabular-nums;}
.journal-result__link {font-size:12px;text-decoration:underline;text-underline-offset:4px;margin-top:6px;}
.journal-note .decision {margin-top:14px;align-items:start;font-size:14px;line-height:1.5;}
@media(max-width:700px){.rulequay-hero {padding:48px 24px;min-height:570px;}.rulequay-hero .hero {padding-top:24px;}.rulequay-art {width:66%;height:240px;right:0;top:10px;opacity:.36;}.rulequay-hero::after {background:linear-gradient(90deg,#102b24b0,transparent),linear-gradient(0deg,#102b24 8%,#102b2470 75%,transparent);}.journal-preview {grid-template-columns:1fr;gap:24px;padding:32px 0;}.journal-result {border-left:0;border-top:1px solid #d5d2c3;padding:20px 0 0;}}

.contract-panel {padding:24px 0;border-bottom:1px solid var(--color-border);margin-bottom:32px;} .contract-panel p {overflow-wrap:anywhere;font-family:var(--font-sans);} .contract-panel a {margin-right:20px;}

/* Onchain controls inherit the established Rulequay theme. */
.chain-page {max-width:1120px;}.chain-page>.card {margin:24px 0;}.chain-page h2 {margin-bottom:16px;}.chain-page .card {padding:24px;}.chain-page label {display:block;font-size:14px;margin:16px 0;}.chain-page .input {width:100%;margin:8px 0;}.chain-page a {overflow-wrap:anywhere;}.chain-page p {line-height:1.65;margin:12px 0;}.chain-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0;}.chain-inline {display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:20px 0;}.chain-inline .input {max-width:260px;}.chain-code {font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--color-bg-subtle);padding:12px;margin:16px 0;}.chain-record {display:flex;flex-direction:column;gap:8px;padding:16px 0;border-bottom:1px solid var(--color-border);}.chain-record .button {align-self:flex-start;}.chain-status {padding:16px;border-left:2px solid #b29255;overflow-wrap:anywhere;}.chain-status:empty {display:none;}@media(max-width:700px){.chain-grid {grid-template-columns:1fr;}.chain-page .mono {font-size:12px;}}

/* Live records use the established editorial palette. */
.realtime-panel {margin:28px 0;padding:24px;}.realtime-panel h2 {font-size:30px;}.realtime-panel h3 {margin-top:28px;font-family:var(--font-editorial);font-size:22px;}.live-heading {display:flex;gap:20px;align-items:start;justify-content:space-between;flex-wrap:wrap;}.live-state {font-size:12px;color:#2a6247;background:#e7eee3;padding:7px 10px;border-radius:4px;}.live-state[data-state="stale"] {background:#f0e4ca;color:#795820;}.live-caption {font-size:12px;color:#657469;line-height:1.6;margin:12px 0;}.live-table-wrap {overflow-x:auto;max-height:420px;}.live-table-wrap td {font-size:12px;white-space:nowrap;}.live-tracked-row {display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--color-border);font-size:13px;flex-wrap:wrap;}.live-execution-note {margin-top:24px;border-left:2px solid #b29255;padding:12px 16px;background:#f3f0e7;}.live-execution-note p {font-size:13px;margin:8px 0 0;line-height:1.6;}

.wallet-budget {margin-top:28px;padding-top:8px;border-top:1px solid var(--color-border-strong);}.wallet-budget__choices {border:0;padding:0;margin:20px 0;display:flex;gap:12px;flex-wrap:wrap;}.wallet-budget__choices legend {font-size:12px;color:#657469;margin-bottom:12px;}.wallet-budget__choices label {display:inline-flex;align-items:center;gap:10px;border:1px solid #cdcbbd;border-radius:6px;padding:12px 18px;cursor:pointer;}.wallet-budget__choices label:has(input:checked) {border-color:#a17c36;background:#eee6d2;}.wallet-budget__choices input {accent-color:#173e32;}.wallet-budget [role="status"] {font-size:13px;line-height:1.6;margin-top:14px;max-width:680px;}

/* Rulequay gold-column lighthouse identity. Keep background art clear of the headline. */
.brand__mark {width:40px;height:40px;object-fit:contain;border-radius:8px;flex-shrink:0;}
.rulequay-art {height:400px;}
.rulequay-art img {aspect-ratio:1371/1147;object-fit:contain;}
@media(max-width:700px){.brand__mark{width:34px;height:34px;}.rulequay-art{height:240px;}}