/* tokenholder.io — Token Holder Ecosystem landing
 *
 * Palette (pulled from Mali's color preferences):
 *   --ink     #050505  deep black
 *   --paper   #f7f5ef  cool off-white for alternating sections
 *   --graphite#1a1a1a  panel surfaces
 *   --fog     #9ca3af  cool grey for body text
 *   --amber   #d97706  burnt orange (links, CTAs, Raven's eye)
 *   --ember   #fbbf24  brighter amber for accents
 *   --moss    #4d5d3f  olive-green for "verified/allowed"
 *   --rust    #c2410c  error/deny
 *
 * One stylesheet. No build step. Loads fast.
 */

:root {
  --ink: #050505;
  --paper: #f7f5ef;
  --graphite: #141414;
  --slate: #1e1e1e;
  --fog: #9ca3af;
  --mist: #d4d4d8;
  --amber: #d97706;
  --ember: #fbbf24;
  --moss: #4d5d3f;
  --sage: #7c8a6a;
  --rust: #c2410c;
  --text-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --text-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --text-mono: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--text-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  transition: border-color 150ms ease, color 150ms ease;
}
a:hover {
  color: #fff;
  border-bottom-color: var(--ember);
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ==== Hero ==== */
.hero {
  padding: 120px 0 100px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(217, 119, 6, 0.08), transparent 55%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.wordmark {
  font-family: var(--text-serif);
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 20px;
}
.wordmark .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 50%;
  margin: 0 8px 2px;
  vertical-align: middle;
}
h1 {
  font-family: var(--text-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 24px;
}
h1 em {
  font-style: italic;
  color: var(--ember);
}
.tagline {
  font-size: 19px;
  color: var(--fog);
  max-width: 560px;
  margin: 0 0 40px;
}
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn.primary {
  background: var(--amber);
  color: #fff;
  border-bottom: none;
}
.btn.primary:hover {
  background: var(--ember);
  color: var(--ink);
  border-bottom: none;
}
.btn.ghost {
  background: transparent;
  color: var(--mist);
  border: 1px solid #333;
  border-bottom: 1px solid #333;
}
.btn.ghost:hover {
  border-color: var(--ember);
  color: #fff;
  border-bottom-color: var(--ember);
}

.raven-frame {
  position: relative;
}
.raven-frame svg {
  width: 100%;
  max-width: 420px;
  filter: drop-shadow(0 0 40px rgba(217, 119, 6, 0.15));
}

/* ==== Sections ==== */
section.band {
  padding: 90px 0;
  border-top: 1px solid #141414;
}
section.band.paper {
  background: var(--paper);
  color: #1a1a1a;
}
section.band.paper a {
  color: var(--amber);
  border-bottom-color: rgba(217, 119, 6, 0.35);
}
section.band.paper a:hover { color: var(--ink); }

h2 {
  font-family: var(--text-serif);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 18px;
}
section.band.paper h2 { color: var(--ink); }
.eyebrow {
  font-family: var(--text-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 12px;
}
section.band.paper .eyebrow { color: var(--amber); }

.lede {
  font-size: 19px;
  color: var(--fog);
  max-width: 720px;
  margin: 0 0 48px;
}
section.band.paper .lede { color: #444; }

/* ==== Three-level identity diagram (node graph) ==== */
.identity-graph {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  align-items: stretch;
  gap: 8px;
  margin-top: 40px;
}
.id-node {
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 24px 22px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.id-node::before {
  /* A faint amber rail climbs the card's left edge so all three nodes
     read as "connected layers" even before the arrows are parsed. */
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--amber), transparent);
  opacity: 0.5;
  border-radius: 3px;
}
.id-node[data-level="1"]::before { opacity: 0.25; }
.id-node[data-level="2"]::before { opacity: 0.5; }
.id-node[data-level="3"]::before { opacity: 0.85; }
section.band.paper .id-node {
  background: #fff;
  border-color: #e5e1d4;
}
.id-node-ring {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 2px solid var(--amber);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: rgba(217, 119, 6, 0.08);
}
.id-level-badge {
  font-family: var(--text-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ember);
  letter-spacing: 0.05em;
}
.id-node .level {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.id-node h3 {
  font-family: var(--text-serif);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 10px;
}
section.band.paper .id-node h3 { color: var(--ink); }
.id-node p {
  color: var(--fog);
  font-size: 15px;
  margin: 0;
  line-height: 1.55;
}
section.band.paper .id-node p { color: #555; }
.id-node .tag {
  margin-top: 14px;
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--fog);
}

.id-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  gap: 6px;
  min-width: 40px;
}
.id-arrow-h {
  width: 100%;
  height: 28px;
  display: block;
  color: var(--amber);
  opacity: 0.8;
}
.id-arrow-label {
  font-family: var(--text-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--amber);
  text-transform: uppercase;
  opacity: 0.85;
}

@media (max-width: 840px) {
  /* Stack vertically on mobile — arrows rotate to point down. */
  .identity-graph {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .id-connector {
    flex-direction: column;
    min-height: 48px;
  }
  .id-arrow-h {
    transform: rotate(90deg);
    width: 32px;
    height: 32px;
    margin: 0 auto;
  }
}

/* ==== Audit chain visual ==== */
.chain-visual {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 40px 0 20px;
}
.chain-block {
  background: var(--graphite);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--text-mono);
  font-size: 13px;
  color: var(--mist);
  /* Identical sizing for all rows — order + hierarchy read at a glance. */
  flex: 1 1 0;
  min-width: 140px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.chain-block .label {
  display: block;
  color: var(--fog);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chain-block .event {
  color: var(--mist);
  font-size: 13px;
}
.chain-block .hash {
  color: var(--ember);
  margin-top: auto;
  font-size: 12px;
}
.chain-block.verified {
  border-color: rgba(132, 204, 22, 0.35);
}
.chain-block.verified::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--sage);
  font-size: 14px;
}
.chain-block.pending {
  border-style: dashed;
  opacity: 0.7;
}
.chain-block.pending .hash {
  color: var(--fog);
  font-style: italic;
}
.chain-arrow {
  color: var(--amber);
  font-family: var(--text-mono);
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  opacity: 0.7;
}
@media (max-width: 720px) {
  .chain-visual {
    flex-direction: column;
  }
  .chain-arrow {
    transform: rotate(90deg);
  }
  .chain-block {
    width: 100%;
  }
}
.chain-note {
  color: var(--fog);
  font-size: 14px;
  margin-top: 12px;
  font-family: var(--text-mono);
}

/* ==== Code blocks ==== */
pre.code {
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 22px 24px;
  font-family: var(--text-mono);
  font-size: 14px;
  color: var(--mist);
  line-height: 1.6;
  overflow-x: auto;
  margin: 24px 0;
}
pre.code .kw { color: #c4a1f9; }
pre.code .str { color: var(--ember); }
pre.code .fn { color: #7dd3fc; }
pre.code .com { color: #575757; font-style: italic; }
section.band.paper pre.code {
  background: #fbfaf5;
  border-color: #e5e1d4;
  color: #333;
}
section.band.paper pre.code .com { color: #888; }

/* ==== Roadmap ==== */
.roadmap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}
.step {
  background: var(--graphite);
  border: 1px solid #262626;
  border-left: 3px solid var(--fog);
  border-radius: 8px;
  padding: 22px 20px;
}
.step.done { border-left-color: var(--sage); }
.step.next { border-left-color: var(--amber); }
.step.later { border-left-color: #333; opacity: 0.7; }
.step .status {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.step.done .status { color: var(--sage); }
.step.next .status { color: var(--amber); }
.step.later .status { color: var(--fog); }
.step h4 {
  font-family: var(--text-serif);
  font-size: 19px;
  font-weight: 400;
  color: #fff;
  margin: 8px 0 10px;
}
.step p {
  font-size: 14px;
  color: var(--fog);
  margin: 0;
}

/* ==== Components strip ==== */
.components {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.comp {
  background: transparent;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  padding: 22px 20px;
}
section.band.paper .comp { border-color: #d6cfbf; background: #fbfaf5; }
.comp .kind {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--amber);
  text-transform: uppercase;
}
.comp h4 {
  font-family: var(--text-serif);
  font-size: 20px;
  color: #fff;
  margin: 6px 0 8px;
  font-weight: 400;
}
section.band.paper .comp h4 { color: var(--ink); }
.comp p {
  color: var(--fog);
  margin: 0;
  font-size: 14px;
}
section.band.paper .comp p { color: #555; }

/* ==== AI stack — vertical layered cards ==== */
.ai-stack {
  margin: 44px auto 28px;
  max-width: 760px;
  position: relative;
}
.ai-stack::before {
  /* vertical guide line running through all the layers */
  content: "";
  position: absolute;
  left: 40px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #3a3a3a 8%,
    #3a3a3a 92%,
    transparent 100%
  );
  z-index: 0;
}
.stack-layer {
  position: relative;
  margin-bottom: 10px;
  padding: 18px 22px 18px 78px;
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 10px;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    background 200ms ease;
  cursor: default;
  z-index: 1;
}
.stack-layer::before {
  /* numbered node on the guide line */
  content: attr(data-layer);
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 2px solid #3a3a3a;
  color: var(--fog);
  font-family: var(--text-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background 200ms ease;
}
.stack-layer:hover {
  border-color: #555;
  transform: translateX(4px);
}
.stack-layer:hover::before {
  border-color: var(--fog);
  color: var(--mist);
}
.stack-layer .layer-title {
  display: block;
  font-family: var(--text-serif);
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.stack-layer .layer-examples {
  display: block;
  margin-top: 3px;
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--fog);
  letter-spacing: 0.01em;
}
.stack-layer .layer-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 300ms ease,
    opacity 200ms ease,
    margin-top 300ms ease;
  font-size: 14px;
  color: var(--mist);
  line-height: 1.55;
}
.stack-layer:hover .layer-detail,
.stack-layer.is-th .layer-detail {
  max-height: 400px;  /* generous cap; wraps-safe on narrow widths */
  opacity: 1;
  margin-top: 10px;
}

/* the Token Holder layer — always highlighted */
.stack-layer.is-th {
  background: linear-gradient(
    135deg,
    rgba(217, 119, 6, 0.12) 0%,
    rgba(251, 191, 36, 0.08) 100%
  );
  border-color: var(--amber);
  padding-top: 22px;
  padding-bottom: 22px;
}
.stack-layer.is-th::before {
  background: var(--amber);
  border-color: var(--ember);
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.35);
}
.stack-layer.is-th .layer-title {
  color: var(--ember);
  font-style: italic;
  font-size: 22px;
}
.stack-layer.is-th .layer-examples {
  color: var(--mist);
}

/* arrows between user/apps (layer 1) and TH (layer 2) to signal
   that everything above has to pass through the TH pinch point */
.stack-pinch {
  text-align: center;
  padding: 2px 0 2px 42px;
  color: var(--amber);
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}

.stack-caption {
  color: var(--fog);
  font-size: 14px;
  margin-top: 20px;
  font-family: var(--text-mono);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
section.band.paper .stack-caption {
  color: #555;
}

@media (max-width: 620px) {
  .ai-stack::before { left: 28px; }
  .stack-layer { padding-left: 62px; padding-right: 16px; }
  .stack-layer::before { left: 14px; width: 28px; height: 28px; font-size: 11px; }
  .stack-layer .layer-title { font-size: 16px; }
  .stack-layer.is-th .layer-title { font-size: 18px; }
  .stack-pinch { padding-left: 28px; }
}

/* ==== Who's this for — persona cards (expandable) ==== */
.lede-hint {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--text-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fog);
  opacity: 0.75;
}
.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
  align-items: stretch;
}
/* Cards are <button> elements for keyboard accessibility — reset
   the browser's default button skin and restore block layout. */
.persona {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition:
    border-color 200ms ease,
    transform 220ms ease,
    background 200ms ease;
}
.persona:hover,
.persona:focus-visible {
  border-color: var(--amber);
  outline: none;
}
.persona:focus-visible {
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
}
section.band.paper .persona {
  background: #fff;
  border-color: #e5e1d4;
}
.persona .p-glyph {
  color: var(--amber);
  margin-bottom: 14px;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 220ms ease;
}
.persona:hover .p-glyph,
.persona.is-open .p-glyph {
  opacity: 1;
  transform: translateY(-2px);
}
.persona .p-kind {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.persona h3 {
  font-family: var(--text-serif);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
section.band.paper .persona h3 { color: var(--ink); }
.persona .p-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 280ms ease,
    opacity 240ms ease,
    margin-top 200ms ease;
  margin-top: 0;
}
.persona:hover .p-details,
.persona.is-open .p-details,
.persona:focus-within .p-details {
  max-height: 320px;
  opacity: 1;
  margin-top: 6px;
}
.persona .p-details p {
  color: var(--fog);
  font-size: 15px;
  margin: 0 0 14px;
  line-height: 1.55;
}
section.band.paper .persona .p-details p { color: #555; }
.persona .p-surface {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--mist);
  border-top: 1px solid #232323;
  padding-top: 12px;
}
section.band.paper .persona .p-surface {
  border-top-color: #e5e1d4;
  color: #333;
}
.persona .p-more {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber);
  opacity: 0.7;
  transition: opacity 180ms ease;
}
.persona:hover .p-more,
.persona.is-open .p-more {
  opacity: 0;
}
@media (max-width: 840px) {
  .personas { grid-template-columns: 1fr; }
  /* On touch devices, always show the full card — hover isn't
     reliable. Users can still use click-to-collapse via JS. */
  .persona .p-details {
    max-height: 320px;
    opacity: 1;
    margin-top: 6px;
  }
  .persona .p-more { display: none; }
}

/* ==== "Docs coming soon" roadmap nod under the quickstart ==== */
.install-roadmap {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fog);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
section.band.paper .install-roadmap { color: #555; }
.ir-chip {
  flex-shrink: 0;
  font-family: var(--text-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ember);
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  height: fit-content;
  margin-top: 2px;
}
.install-roadmap a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(217, 119, 6, 0.35);
  text-underline-offset: 2px;
}
.install-roadmap a:hover {
  text-decoration-color: var(--amber);
}

/* ==== Verticals philosophy block ==== */
.v-philosophy {
  margin: 40px 0 12px;
  padding: 32px 30px 28px;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.04), transparent 70%);
  border: 1px solid #242424;
  border-radius: 16px;
}
section.band.paper .v-philosophy {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.06), transparent 70%);
  border-color: #e5e1d4;
}
.v-philosophy-prose h3 {
  font-family: var(--text-serif);
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
section.band.paper .v-philosophy-prose h3 { color: var(--ink); }
.v-philosophy-prose p {
  color: var(--mist);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}
section.band.paper .v-philosophy-prose p { color: #444; }
.v-philosophy-prose em {
  color: var(--ember);
  font-style: normal;
  font-weight: 500;
}

.v-bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 26px 0 20px;
}
.v-band {
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 18px 18px 16px;
  position: relative;
  transition: border-color 180ms ease;
}
.v-band:hover { border-color: var(--amber); }
section.band.paper .v-band {
  background: #fff;
  border-color: #e5e1d4;
}
.v-band-rank {
  font-family: var(--text-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 10px;
  opacity: 0.75;
}
.v-band h4 {
  font-family: var(--text-serif);
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
section.band.paper .v-band h4 { color: var(--ink); }
.v-band p {
  color: var(--fog);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 10px;
}
section.band.paper .v-band p { color: #555; }
.v-band em {
  font-style: italic;
  color: var(--mist);
}
section.band.paper .v-band em { color: #333; }
.v-band-for {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--amber);
  border-top: 1px solid #232323;
  padding-top: 10px;
  margin-top: auto;
}
section.band.paper .v-band-for {
  border-top-color: #e5e1d4;
}

.v-picker {
  color: var(--mist);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.18);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
}
section.band.paper .v-picker {
  background: rgba(217, 119, 6, 0.05);
  color: #333;
}
.v-picker strong {
  color: #fff;
  font-weight: 500;
}
section.band.paper .v-picker strong { color: var(--ink); }
.v-picker em {
  color: var(--ember);
  font-style: normal;
  font-weight: 500;
}

@media (max-width: 900px) {
  .v-bands { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .v-bands { grid-template-columns: 1fr; }
  .v-philosophy { padding: 22px 20px 20px; }
}

/* ==== Verticals filter pills ==== */
.v-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 28px 0 12px;
}
.v-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  color: var(--fog);
  font-family: var(--text-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.v-filter:hover {
  border-color: #555;
  color: var(--mist);
}
.v-filter[aria-pressed="true"] {
  background: rgba(217, 119, 6, 0.15);
  border-color: var(--amber);
  color: var(--ember);
}
.v-filter .count {
  font-size: 11px;
  color: var(--fog);
  background: #222;
  padding: 1px 7px;
  border-radius: 999px;
}
.v-filter[aria-pressed="true"] .count {
  background: rgba(217, 119, 6, 0.25);
  color: var(--ember);
}
section.band.paper .v-filter {
  border-color: #d6cfbf;
  color: #555;
}
section.band.paper .v-filter .count {
  background: #eae5d5;
  color: #555;
}

/* Filter states on the grid — when the container has a filter class
   set, hide all cards whose data-category doesn't match. */
.verticals[data-filter="core"] .vertical:not([data-category="core"]),
.verticals[data-filter="integrations"] .vertical:not([data-category="integrations"]),
.verticals[data-filter="monitor"] .vertical:not([data-category="monitor"]),
.verticals[data-filter="roadmap"] .vertical:not([data-category="roadmap"]) {
  display: none;
}

/* ==== Verticals grid ==== */
.verticals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.vertical {
  background: var(--graphite);
  border: 1px solid #262626;
  border-radius: 12px;
  padding: 26px 24px;
  position: relative;
}
section.band.paper .vertical {
  background: #fff;
  border-color: #e5e1d4;
}
.vertical .v-kind {
  font-family: var(--text-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.vertical h3 {
  font-family: var(--text-serif);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  padding-right: 72px;   /* reserve space for the absolutely-positioned status badge */
}
section.band.paper .vertical h3 { color: var(--ink); }
.vertical p {
  color: var(--fog);
  font-size: 14.5px;
  margin: 0 0 14px;
  line-height: 1.55;
}
section.band.paper .vertical p { color: #555; }
.vertical .v-detail {
  font-family: var(--text-mono);
  font-size: 12px;
  color: var(--mist);
  border-top: 1px solid #232323;
  padding-top: 12px;
}
section.band.paper .vertical .v-detail {
  color: #333;
  border-top-color: #e5e1d4;
}
.vertical .v-status {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--text-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}
.vertical .v-status.roadmap {
  color: var(--fog);
}
@media (max-width: 920px) {
  .verticals { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .verticals { grid-template-columns: 1fr; }
}

/* ==== Footer ==== */
footer {
  padding: 60px 0 80px;
  color: var(--fog);
  font-size: 14px;
  border-top: 1px solid #141414;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  flex-wrap: wrap;
}
footer .brand {
  font-family: var(--text-serif);
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.02em;
}

/* ==== Responsive ==== */
@media (max-width: 780px) {
  .hero { padding: 80px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .identity-row { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .components { grid-template-columns: 1fr; }
  .chain-visual { flex-direction: column; align-items: stretch; }
  .chain-arrow { display: none; }
  section.band { padding: 60px 0; }
}

/* ==== Wallet screenshot figure ==== */
.wallet-shot {
  margin: 48px 0 0;
  padding: 0;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08), transparent 40%);
  border-radius: 14px;
  border: 1px solid rgba(217, 119, 6, 0.2);
  overflow: hidden;
}
.wallet-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #1c1c1c;
}
.wallet-shot figcaption {
  font-family: var(--text-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fog);
  padding: 14px 20px;
  text-align: center;
  background: #0a0a0a;
}
section.band.paper .wallet-shot {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.05), transparent 40%);
  border-color: #e5e1d4;
}
section.band.paper .wallet-shot img { border-bottom-color: #e5e1d4; }
section.band.paper .wallet-shot figcaption {
  background: #fff;
  color: #555;
}

/* ==== Error pages (404 / 403 / 500) ==== */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.error-wrap {
  max-width: 480px;
  text-align: center;
}
.error-raven {
  width: 72px;
  height: 72px;
  opacity: 0.65;
  margin: 0 auto 24px;
  display: block;
  filter: drop-shadow(0 0 40px rgba(217, 119, 6, 0.15));
}
.error-code {
  font-family: var(--text-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--amber);
  margin-bottom: 12px;
}
.error-page h1 {
  font-family: var(--text-serif);
  font-size: 38px;
  font-weight: 400;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.error-page p {
  color: var(--mist);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 20px;
}
.error-page .error-links {
  font-family: var(--text-mono);
  font-size: 13px;
  margin-top: 32px;
  letter-spacing: 0.04em;
}
.error-page .error-links .sep {
  color: var(--fog);
  margin: 0 6px;
  opacity: 0.6;
}