/* OPHION Protocol — hero (video bg + nav + live terminal) and intro sections */

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px clamp(16px, 5vw, 60px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  --nav-ink: #0b0e08;
  --nav-ink-dim: rgba(11, 14, 8, .68);
}

.nav.scrolled {
  --nav-ink: #fff;
  --nav-ink-dim: rgba(255, 255, 255, .68);
}

.nav-inner {
  width: 100%;
  max-width: 1200px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 4px 0 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.nav.scrolled .nav-inner {
  background: rgba(8, 10, 6, .72);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .32);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--nav-ink);
}

.nav-logo-mark {
  width: 30px;
  height: auto;
}

.nav-wordmark {
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -1.44px;
  color: var(--nav-ink);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 3px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--nav-ink-dim);
  transition: color .15s ease;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease;
}

.nav-menu a:hover {
  color: var(--nav-ink);
}

.nav-menu a:hover::after {
  transform: scaleX(1);
}

.nav-menu-chevron svg {
  width: 11px;
  height: 11px;
  color: currentColor;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}

.nav-follow {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--nav-ink-dim);
  transition: color .2s ease;
  white-space: nowrap;
}

.nav-follow:hover {
  color: var(--nav-ink);
}

.nav-cta {
  background: #0b0e08;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 500;
  padding: 18px 30px; /* 56px-tall capsule seated flush at the pill's right edge (64px bar − 2×4px inset) */
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  transition: filter .25s ease, transform .25s ease, box-shadow .25s ease;
}

.nav-cta:hover {
  filter: brightness(1.25);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--nav-ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.nav-open .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: rgba(4, 5, 3, .98);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

.nav-open .nav-drawer {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
}

.nav-drawer {
  counter-reset: navidx;
}

.nav-drawer a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Fustat", sans-serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink-80);
}

.nav-drawer > a:not(.nav-drawer-follow):not(.nav-drawer-cta)::before {
  counter-increment: navidx;
  content: counter(navidx, decimal-leading-zero);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-bright);
}

.nav-drawer-follow {
  font-size: 16px !important;
  color: var(--ink-65) !important;
  margin-top: 8px;
}

.nav-drawer-cta {
  background: var(--ink);
  color: #0a0a08 !important;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 16px !important;
}

body.no-scroll {
  overflow: hidden;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #000;
}

.hero-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  background: #1C3A30 center top / cover no-repeat;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 115%;
  height: 115%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: top;
  opacity: 0;
}

.hero-bottom-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .55) 78%, #000 100%);
  pointer-events: none;
}

.hero-hills-far {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  max-width: none;
  height: clamp(240px, 26vw, 460px);
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.hero-hills-near {
  /* Pink meadow cutout plate: sits in front of the terminal so its ridge line
     rises over the bottom edge of .term-shell, matching the FAUST 3D layering. */
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: 100vw;
  max-width: none;
  height: auto; /* natural aspect — never crop the ridge silhouette into a flat line */
  bottom: -12vw; /* seat the plate so the ridge crest rides ~150px over the terminal bottom */
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 96%);
  transform: translateX(-50%);
  pointer-events: none;
  will-change: transform;
}

.hero-statue {
  /* 3D coin: same containing block (.hero) and same "bottom" coordinate
     space as .hero-hills-near, so it tracks the ridge crest at every width
     instead of drifting relative to it. display:block is explicit because
     custom elements default to display:inline until the model-viewer script
     upgrades them, and inline boxes ignore width/height. No scroll
     parallax — it moves with the page like the ridge does. Ported from
     Helius's .hero-statue system (2026-08-29); geometry unchanged, asset
     swapped to Ophion's own pink coin. */
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7vw;
  z-index: 4;
  height: clamp(140px, 26vw, 480px);
  width: clamp(130px, 23vw, 480px);
  pointer-events: none;
  background: transparent;
  --poster-color: transparent;
  will-change: transform;
  /* No poster image (a static crop never matches the GLB's first render —
     that mismatch is what caused the load "pop"). Instead: start invisible,
     fade in once the model (or its fallback <img>) actually has pixels to
     show — see initStatueReveal() in terminal.js. */
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.hero-statue.is-loaded {
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 168px 24px 140px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: 56px;
  text-align: center;
  transform: translateY(-50px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  transition: background .2s ease;
}

.hero-badge:hover {
  background: rgba(255, 255, 255, .68);
}

.hero-badge-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #0e1311;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
}

.hero-badge-new svg {
  width: 11px;
  height: 11px;
  color: var(--accent-bright);
}

.hero-badge-text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: #2b2b28;
}

.hero-title {
  font-family: "Fustat", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.06em;
  color: #0b0e08;
  max-width: 980px;
}

.hero-sub {
  font-family: "Fustat", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.4px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 14px rgba(28, 58, 48, 0.45);
  max-width: 736px;
}

/* Ask box */
.hero-ask {
  width: 100%;
  max-width: 728px;
  margin-top: 10px;
  border-radius: 18px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  padding: 14px 16px 16px;
  text-align: left;
}

.hero-ask-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 12px;
}

.hero-ask-gate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-ask-gate-text {
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .68);
}

.hero-ask-unlock {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #0b0e08;
  background: var(--accent-bright);
  padding: 3px 9px;
  border-radius: 999px;
}

.hero-ask-powered {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.hero-ask-sparkle {
  width: 14px;
  height: 14px;
  color: var(--accent-bright);
  flex-shrink: 0;
}

.hero-ask-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.hero-ask-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: #0b0e08;
  padding: 10px 0;
}

.hero-ask-input::placeholder {
  color: rgba(0, 0, 0, .6);
}

.hero-ask-suffix {
  flex-shrink: 0;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: rgba(0, 0, 0, .4);
  padding-right: 2px;
}

.hero-ask-submit {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0b0e08;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter .2s ease, transform .2s ease;
}

.hero-ask-submit svg {
  width: 18px;
  height: 18px;
}

.hero-ask-submit:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

.hero-ask-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 2px;
}

.hero-ask-chips {
  display: flex;
  gap: 8px;
}

.hero-ask-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .78);
  font-family: "Inter", sans-serif;
  font-size: 12px;
}

.hero-ask-chip svg {
  width: 12px;
  height: 12px;
}

.hero-ask-counter {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

.hero-ask-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(16, 185, 129, .1);
  border: 1px solid rgba(16, 185, 129, .2);
}

.hero-ask-result[hidden] {
  display: none;
}

.hero-ask-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .68);
}

.hero-ask-result-value {
  color: var(--accent-bright);
  font-weight: 600;
}

/* ---------- Terminal dashboard ---------- */
.term-shell {
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1160px;
  margin: -32px auto 0;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #0a0b08;
  box-shadow: 0 50px 140px rgba(0, 0, 0, .55), 0 0 70px rgba(16, 185, 129, .12);
  overflow: hidden;
  transform: perspective(1200px) rotateX(1.5deg) scale(0.995);
  transform-origin: center bottom;
  transition: transform .5s ease;
}

.term-shell:hover {
  transform: none;
}

/* Copy pass 2026-08-12: unobtrusive caption clarifying the hero terminal's
   live feed is a demo, not real chain data yet. */
.term-shell-caption {
  margin-top: 12px;
  text-align: center;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .38);
}

.term-titlebar {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #0d0f0a;
  flex-shrink: 0;
}

.term-chrome-left,
.term-chrome-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.term-mark-icon {
  width: 18px;
  height: auto;
  flex-shrink: 0;
}

.term-chrome-name {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-80);
  flex-shrink: 0;
}

.term-chrome-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  flex-shrink: 0;
}

.term-tabs {
  display: flex;
  align-items: center;
  gap: 18px;
}

.term-tab {
  position: relative;
  border: none;
  background: transparent;
  padding: 4px 0 8px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-40);
  transition: color .2s ease;
}

.term-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.term-tab:hover {
  color: var(--ink-80);
}

.term-tab.is-active {
  color: var(--accent-bright);
}

.term-tab.is-active::after {
  transform: scaleX(1);
}

.term-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  color: var(--ink-40);
}

.term-search svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.term-search span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-40);
  white-space: nowrap;
}

.term-status {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-40);
  flex-shrink: 0;
}

.term-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 8px var(--accent-bright);
  flex-shrink: 0;
}

.term-status-text {
  color: var(--accent-bright);
}

.term-body {
  display: flex;
}

.term-sidebar {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-right: 1px solid var(--line);
  background: #08090b;
}

.term-side-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.term-side-meter {
  width: 3px;
  height: 64px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-bright) 0%, rgba(16, 185, 129, .1) 100%);
  opacity: .55;
}

.term-side-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}

.term-side-icon svg {
  width: 16px;
  height: 16px;
}

.term-side-icon.is-active {
  background: rgba(16, 185, 129, .16);
  color: var(--accent-bright);
}

.term-side-icon:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--ink-80);
}

.term-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.term-chart-wrap {
  height: 180px;
  padding: 16px 18px 4px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.term-chart {
  display: block;
  width: 100%;
  height: 100%;
}

.term-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.term-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 18px;
  background: #0a0b08;
}

.term-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-40);
}

.term-stat-value {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.term-stat-delta {
  font-family: var(--mono);
  font-size: 11px;
}

.term-stat-delta.is-up { color: var(--accent-bright); }
.term-stat-delta.is-down { color: #c05b4d; }
.term-stat-delta.is-neutral { color: var(--ink-40); font-family: var(--mono); }

.term-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.term-columns {
  display: grid;
  grid-template-columns: 90px 100px 160px 110px 120px;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(16, 185, 129, .08);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--accent-bright);
}

.term-feed {
  max-height: 340px;
  overflow-y: auto;
}

.term-row {
  display: grid;
  grid-template-columns: 90px 100px 160px 110px 120px;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-80);
  border-bottom: 1px dotted rgba(255, 255, 255, .1);
  animation: term-row-in .35s ease;
  white-space: nowrap;
}

.term-row:hover {
  background: rgba(255, 255, 255, .03);
}

@keyframes term-row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.term-cell--time {
  color: var(--ink-40);
}

.term-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  letter-spacing: .02em;
}

.term-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.term-cell--wallet {
  color: var(--ink-65);
}

.term-cell--action.is-buy { color: var(--accent-bright); font-weight: 600; }
.term-cell--action.is-sell { color: #c05b4d; font-weight: 600; }
.term-cell--action.is-neutral { color: var(--ink-65); font-weight: 600; }
.term-cell--action.is-bond { color: #d9a441; font-weight: 600; }
.term-cell--action.is-rebase { color: var(--accent-bright); font-weight: 700; text-shadow: 0 0 8px rgba(16, 185, 129, .55); }

.term-cell--token {
  color: var(--ink);
}

.term-cell--amount {
  color: var(--ink-65);
}

.term-cell--index {
  color: var(--ink);
  font-weight: 600;
}

.term-cell--delta.is-up { color: var(--accent-bright); }
.term-cell--delta.is-down { color: #c05b4d; }

.term-row--query,
.term-row--answer {
  display: block;
  padding: 9px 18px 0;
  white-space: normal;
}

.term-row--query {
  color: var(--ink);
  font-weight: 600;
  padding-top: 8px;
}

.term-row--query::before {
  content: "> ";
  color: var(--accent-bright);
}

.term-row--answer {
  color: var(--accent-bright);
  padding-bottom: 8px;
  padding-top: 4px;
}

.term-row--answer::before {
  content: "\00b7 ";
  color: var(--ink-40);
}

/* Terminal cloned into the product tab (no hero overlap offset there) */
.term-shell--embed {
  margin: 0;
  max-width: none;
}

/* ---------- Terminal search (real input) ---------- */
.term-search {
  min-width: 190px;
}

.term-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-65);
}

.term-search-input::placeholder {
  color: var(--ink-40);
}

/* ---------- Terminal tab panels: Machine / Stake / Bonds / Treasury ---------- */
.term-panel {
  display: none;
  flex: 1;
  min-width: 0;
}

.term-panel.is-active {
  display: flex;
  flex-direction: column;
}

.term-panel--stake.is-active,
.term-panel--bonds.is-active,
.term-panel--treasury.is-active {
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
}

.term-mini-stake {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.term-mini-stake-balance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .18);
}

.term-mini-stake-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-40);
}

.term-mini-stake-value {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--accent-bright);
}

.term-mini-stake-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 4px 4px 12px;
}

.term-mini-stake-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--ink);
  padding: 9px 0;
}

.term-mini-stake-input::placeholder {
  color: var(--ink-40);
}

.term-mini-stake-suffix {
  flex-shrink: 0;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-40);
  padding-right: 6px;
}

.term-mini-stake-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.term-mini-stake-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 0;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .2s ease-out, transform .2s ease-out;
}

.term-mini-stake-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.term-mini-stake-btn--stake {
  background: var(--accent-bright);
  color: #060704;
}

.term-mini-stake-btn--unstake {
  background: transparent;
  color: var(--ink-65);
  border: 1px solid var(--line-strong);
}

.term-mini-bonds {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
}

.term-mini-bond-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .1);
}

.term-mini-bond-row:last-child {
  border-bottom: none;
}

.term-mini-bond-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.term-mini-bond-name {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.term-mini-bond-discount {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent-bright);
}

.term-mini-bond-btn {
  flex-shrink: 0;
  background: transparent;
  color: var(--accent-bright);
  border: 1px solid rgba(16, 185, 129, .4);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease-out, color .2s ease-out;
}

.term-mini-bond-btn:hover:not(:disabled) {
  background: rgba(16, 185, 129, .12);
}

.term-mini-bond-btn.is-bought {
  color: var(--ink-40);
  border-color: var(--line);
  cursor: default;
}

.term-mini-treasury {
  width: 100%;
  max-width: 280px;
}

.term-mini-treasury-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 12px;
}

.term-mini-treasury-row span:first-child {
  color: var(--ink-40);
}

.term-mini-treasury-row span:last-child {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Hero ask: Unlock chip + example chips (now real buttons) ---------- */
.hero-ask-unlock,
.hero-ask-chip {
  border: none;
  cursor: pointer;
  transition: opacity .2s ease-out, transform .2s ease-out;
}

.hero-ask-unlock:hover,
.hero-ask-chip:hover {
  opacity: .82;
  transform: translateY(-1px);
}

.hero-ask-unlock:active,
.hero-ask-chip:active {
  opacity: .7;
  transform: translateY(0);
}

/* ---------- Sitewide focus visibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Intro ---------- */
.intro {
  background: var(--bg);
  padding: 140px 0 160px;
}

.intro-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}

.intro-pill {
  margin-bottom: 32px;
}

.intro-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-bright);
  flex-shrink: 0;
}

.intro-copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.intro-p {
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-align: left;
}

.intro-p1 {
  color: var(--ink);
}

.intro-p1 .accent-dim {
  color: var(--ink);
  font-weight: 500;
}

.intro-p2,
.intro-p3 {
  color: var(--ink-40);
}

.intro-p2 .accent-dim,
.intro-p3 .accent-dim {
  color: var(--ink-80);
}

/* ---------- Responsive: tablet ---------- */
/* Mid widths: the pill can't fit 5 links + follow + CTA — shed the follow link first, tighten gaps */
@media (max-width: 1240px) {
  .nav-follow { display: none; }
  .nav-menu { gap: 22px; }
  .nav-menu a { font-size: 15px; }
}

/* Below 1060px the menu itself no longer fits cleanly — collapse to burger early.
   With the menu gone, space-between would float the CTA mid-bar: pin brand left,
   group CTA + burger tight at the right edge instead. */
@media (max-width: 1060px) {
  .nav-menu { display: none; }
  .nav-burger { display: flex; }
  .nav-inner { justify-content: flex-start; }
  .nav-brand { margin-right: auto; }
  .nav-actions { margin-left: 0; }
  .nav-cta { padding: 15px 24px; }
}

@media (max-width: 768px) {
  .nav {
    padding: 12px 14px 0;
  }

  .nav-inner {
    height: 56px;
    padding: 0 8px 0 18px;
  }

  .nav-menu,
  .nav-follow,
  .nav-cta {
    display: none; /* mobile bar = logo + burger only; the CTA lives in the drawer */
  }

  .nav-burger {
    display: flex;
  }

  .hero-content {
    padding: 128px 8px 100px;
  }

  .hero-hills-far {
    height: clamp(160px, 30vw, 260px);
    opacity: .4;
  }

  .hero-hills-near {
    /* mobile: wider plate keeps natural aspect (no stretch), sides crop via overflow clip */
    width: 170vw;
    height: auto;
    bottom: -18vw;
  }

  .hero-statue {
    /* ridge is 170vw here (bottom:-18vw) — plant feet further into the
       grass past the crest. Size comes from the base-rule clamp; this
       breakpoint only overrides the ridge-relative vertical anchor. */
    bottom: 14vw;
  }

  .hero-copy {
    gap: 20px;
    padding-bottom: 40px;
    transform: translateY(-28px);
  }

  .hero-title {
    letter-spacing: -0.045em;
  }

  .hero-sub {
    font-size: 16.5px;
  }

  .hero-ask {
    padding: 12px 12px 14px;
  }

  .hero-ask-top {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .term-shell {
    margin-top: -22px;
    border-radius: 12px;
  }

  .term-search,
  .term-tabs {
    display: none;
  }

  .term-sidebar {
    display: none;
  }

  .term-chart-wrap {
    height: 120px;
  }

  .term-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .intro {
    padding: 96px 0 110px;
  }

  .intro-inner {
    max-width: 520px;
  }

  .intro-copy {
    gap: 32px;
  }

  /* Tap targets: bump to ~44px via padding (not fixed height) so text stays centered */
  .hero-ask-unlock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 16px;
  }

  .hero-ask-chip {
    min-height: 44px;
    padding: 12px 14px;
  }

  .hero-ask-bottom {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .hero-ask-chips {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .hero-badge {
    min-height: 44px;
    padding: 10px 18px 10px 10px;
  }

  .nav-follow,
  .nav-drawer-follow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
  }

  /* Legibility: 12px prose copy raised to 13.5px minimum */
  .hero-ask-counter {
    font-size: 13.5px;
  }

  .hero-marquee-item--robinhood {
    font-size: 13.5px;
  }
}

/* ---------- Responsive: mobile ---------- */
@media (max-width: 390px) {
  .nav {
    padding: 10px 10px 0;
  }

  .nav-inner {
    height: 52px;
    padding: 0 6px 0 14px;
    gap: 10px;
  }

  .nav-logo-mark {
    width: 24px;
  }

  .nav-wordmark {
    font-size: 19px;
    letter-spacing: -1px;
  }

  .hero-content {
    padding: 108px 6px 84px;
  }

  .hero-hills-far {
    height: clamp(120px, 30vw, 180px);
  }

  .hero-title {
    font-size: clamp(30px, 8.4vw, 38px);
    letter-spacing: -0.03em;
  }

  .hero-sub {
    font-size: 14.5px;
  }

  .hero-badge-text {
    display: none;
  }

  .hero-ask-powered span:last-child {
    display: none;
  }

  .term-shell {
    margin-top: -16px;
    border-radius: 10px;
  }

  .term-chrome-name,
  .term-block {
    display: none;
  }

  .intro {
    padding: 72px 0 88px;
  }

  .intro-inner {
    max-width: 100%;
    padding: 0 20px;
  }

  .intro-p {
    font-size: 19px;
    line-height: 1.4;
  }

  .intro-copy {
    gap: 26px;
  }
}

/* ---------- Ecosystem marquee ---------- */
.hero-marquee {
  margin: 22px auto 0;
  max-width: 560px;
  width: 100%;
}

.hero-marquee-label {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 10px;
}

.hero-marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.hero-marquee-track {
  display: flex;
  align-items: baseline;
  width: max-content;
  animation: hero-marquee-scroll 22s linear infinite;
}

.hero-marquee-viewport:hover .hero-marquee-track {
  animation-play-state: paused;
}

.hero-marquee-item {
  display: inline-block;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(28, 58, 48, 0.4);
  margin: 0 28px;
}

.hero-marquee-item--uniswap { font-family: "Trebuchet MS", sans-serif; font-weight: 600; font-style: italic; font-size: 15px; }
.hero-marquee-item--pools { font-family: "Courier New", monospace; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; }
.hero-marquee-item--robinhood { font-family: Arial, sans-serif; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.hero-marquee-item--sablier { font-family: Georgia, serif; font-weight: 700; font-size: 15px; }
.hero-marquee-item--blockscout { font-family: Verdana, sans-serif; font-weight: 700; font-size: 13px; }
.hero-marquee-item--dexscreener { font-family: Impact, sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .04em; }
.hero-marquee-item--pinksale { font-family: Palatino, "Palatino Linotype", serif; font-weight: 500; font-size: 15px; }

@keyframes hero-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track {
    animation: none;
  }
}

/* mobile: brand lockup was 25px tall — pad it into a 44px tap target */
@media (max-width: 768px) {
  .nav-brand { min-height: 44px; padding: 6px 0; }
}

/* mobile: last sub-13px prose labels lifted for legibility */
@media (max-width: 768px) {
  .hero-ask-gate-text { font-size: 13px; }
  .hero-marquee-item { font-size: 13px !important; }
  .hero-marquee-label { font-size: 11.5px; letter-spacing: .18em; }
}

/* ---- CA showcase (2026-08-30) ------------------------------------------
   The full contract address as a second headline once live: emerald glass
   plate, extruded glowing glyphs, the serpent coiled through it (one copy
   behind the plate, one clipped copy in front, so it reads as wrapped).
   Sized by the address itself: 42 monospace glyphs fit the plate at every
   width via clamp(), and the string wraps to two lines below 640px. */
/* ---- $NAGA contract showcase (live mode only) ---- */
.hero-ca-show {
  position: relative; width: min(100%, 900px); margin: 34px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 0;
  isolation: isolate; text-align: left;
}
.hero-ca-card {
  position: relative; z-index: 2; border-radius: 24px; overflow: hidden;
  background: linear-gradient(165deg, rgba(8, 38, 30, .78), rgba(3, 16, 13, .9));
  border: 1px solid rgba(134, 255, 214, .28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset,
    0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(16, 185, 129, .18);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.hero-ca-plate {
  display: block; width: 100%; text-align: left; cursor: copy; background: none; border: 0; color: inherit;
  padding: 20px 24px 14px;
}
.hero-ca-plate:focus-visible { outline: 2px solid #6dffce; outline-offset: -4px; border-radius: 20px; }
.hero-ca-label { display: block; font-family: "Schibsted Grotesk", sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(134, 255, 214, .8); margin: 0 0 10px; }
.hero-ca-addr {
  display: block; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 700; font-size: clamp(13px, 1.32vw, 19px); line-height: 1.25; letter-spacing: .02em; white-space: nowrap;
  color: #dcfff1; text-shadow: 0 0 18px rgba(52, 211, 153, .45);
}
.hero-ca-hint { display: block; margin-top: 10px; font-family: "Schibsted Grotesk", sans-serif; font-size: 12px; letter-spacing: .06em; color: rgba(190, 255, 230, .55); }
.hero-ca-hint-done { display: none; color: #6dffce; }
.hero-ca-plate.is-copied .hero-ca-hint-copy { display: none; }
.hero-ca-plate.is-copied .hero-ca-hint-done { display: inline; }
.hero-ca-actions { display: flex; align-items: center; gap: 12px; padding: 12px 24px 18px; border-top: 1px solid rgba(134, 255, 214, .12); }
.hero-ca-buy {
  display: inline-block; background: #34d399; color: #05060a; border-radius: 999px; padding: 11px 22px;
  font-family: "Schibsted Grotesk", sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(52, 211, 153, .3); transition: background .2s ease, transform .2s ease;
}
.hero-ca-buy:hover { background: #6dffce; transform: translateY(-1px); }
/* the serpent: the real hero GLB, standing beside the card, never pasted over it */
.hero-ca-snake3d {
  position: relative; z-index: 3; width: 240px; height: 240px; margin-left: -40px; pointer-events: none;
  --poster-color: transparent; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55));
}
.hero-ca-snake3d::part(default-progress-bar) { display: none; }
@media (max-width: 900px) {
  .hero-ca-show { grid-template-columns: minmax(0, 1fr) 150px; }
  .hero-ca-addr { white-space: normal; word-break: break-all; font-size: clamp(14px, 2.2vw, 17px); }
  .hero-ca-snake3d { width: 180px; height: 180px; margin-left: -30px; }
}
@media (max-width: 640px) {
  .hero-ca-show { grid-template-columns: 1fr; margin-top: 26px; }
  .hero-ca-snake3d { display: none; }
  .hero-ca-plate { padding: 18px 18px 12px; }
  .hero-ca-actions { padding: 10px 18px 16px; }
  .hero-ca-addr { font-size: clamp(13px, 3.9vw, 16px); }
}