/* block0 design system — modeled on databend.com */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --background: 220 13% 14%;      /* #1F2228 */
  --card: 220 20% 10%;
  --foreground: 0 0% 98%;
  --muted-foreground: 220 10% 55%;
  --primary: 210 100% 50%;        /* Databend blue */
  --border: 220 15% 18%;
  --glow-secondary: 220 70% 50%;
}

* { border-color: hsl(var(--border)); }

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a, button, [role="button"] { cursor: pointer; }

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Subtle 60px grid overlay */
.grid-pattern {
  background-image:
    linear-gradient(to right, hsl(220 15% 18% / 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(220 15% 18% / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Frosted glass surfaces */
.glass {
  background: hsl(220 20% 10% / 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid hsl(220 15% 25% / 0.6);
}
.glass-card {
  background: linear-gradient(145deg, hsl(220 20% 13% / 0.95) 0%, hsl(220 20% 9% / 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid hsl(210 50% 30% / 0.3);
  box-shadow: 0 0 0 1px hsl(210 100% 50% / 0.05), 0 4px 20px hsl(220 20% 5% / 0.5), inset 0 1px 0 hsl(220 20% 25% / 0.1);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.glass-card:hover {
  border-color: hsl(210 100% 50% / 0.4);
  box-shadow: 0 0 30px hsl(210 100% 50% / 0.12), inset 0 1px 0 hsl(220 20% 25% / 0.1);
  transform: translateY(-3px);
}

/* White → light-blue gradient headline text */
.text-gradient {
  background: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(210 30% 85%) 50%, hsl(210 60% 72%) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.text-gradient-blue {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(210 80% 70%) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Glow orbs */
.glow-orb { position: absolute; border-radius: 9999px; filter: blur(150px); pointer-events: none; }

@keyframes pulse-slow { 0%,100% { opacity:.5; } 50% { opacity:.8; } }
.animate-pulse-slow { animation: pulse-slow 4s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Mac-style code panel */
.code-panel { background: #0a0f18; border: 1px solid hsl(210 100% 50% / 0.2); transition: border-color .4s, box-shadow .4s; }
.code-panel:hover { border-color: hsl(210 100% 50% / 0.4); box-shadow: 0 0 30px hsl(210 100% 50% / 0.15); }

/* DNA dimension tabs */
.trait-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
  color: hsl(220 9% 62%);
  font-size: .875rem;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.trait-tab:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.trait-tab.active {
  color: #fff;
  border-color: hsl(210 100% 50% / .45);
  background: hsl(210 100% 50% / .10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 28px hsl(210 100% 50% / .08);
}
.trait-panel { animation: traitFade .18s ease-out; }
@keyframes traitFade { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#trait-panels .max-w-2xl { max-width: 100%; }
#trait-panels .tier-table { min-width: 560px; }

/* DNA tier tables */
.tier-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 440px; }
.tier-table thead th {
  text-align: left; font-weight: 600; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: hsl(220 9% 56%);
  padding: .7rem 1.1rem; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.tier-table tbody td { padding: .7rem 1.1rem; border-top: 1px solid rgba(255,255,255,.06); vertical-align: baseline; }
.tier-table tbody tr:first-child td { border-top: none; }
.tier-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.tier-table tbody tr { transition: background .15s; }
.tier-table tbody tr:hover td { background: rgba(255,255,255,.04); }
.tier-table .t-name { font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; font-weight: 500; }
.tier-table .t-range { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; white-space: nowrap; }
.tier-table td.t-name, .tier-table td.t-range { border-right: 1px solid rgba(255,255,255,.04); }
.tier-table thead th:not(:last-child) { border-right: 1px solid rgba(255,255,255,.06); }
.tier-table col.c-name { width: 130px; }
.tier-table col.c-range { width: 104px; }

/* Mobile: tighten tier-table padding so it fits small screens; the wrapper
   scrolls horizontally if it still overflows. */
@media (max-width: 640px) {
  .tier-table { font-size: .8125rem; min-width: 380px; }
  .tier-table thead th,
  .tier-table tbody td { padding: .55rem .7rem; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 4px; }

/* Agent logo hover glow */
.agent-logo img,
.agent-logo > span:first-child {
  transition: border-color .3s, box-shadow .3s;
}
.agent-logo:hover img,
.agent-logo:hover > span:first-child {
  border-color: hsl(210 100% 50% / 0.5);
  box-shadow: 0 0 10px hsl(210 100% 50% / 0.35);
}
.agent-logo span:last-child {
  transition: color .3s;
}
.agent-logo:hover span:last-child {
  color: hsl(0 0% 80%);
}

/* Legal pages (terms, privacy): readable long-form prose + sticky TOC. */
.legal-prose h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal-prose p,
.legal-prose li {
  color: hsl(220 9% 65%);
  line-height: 1.7;
}
.legal-prose p { margin-bottom: 1rem; }
.legal-prose ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.legal-prose li { margin-bottom: 0.4rem; }
.legal-prose a {
  color: hsl(210 80% 70%);
  text-decoration: none;
}
.legal-prose a:hover { text-decoration: underline; }
#toc a.active {
  color: #fff;
  border-left-color: hsl(210 100% 50%);
}

/* Homepage wallet showcase: grid rows in a FIXED-height viewport so the
   rotation animation never changes the section's outer height — content below
   the board stays pixel-still while rows cycle. The wrapper height only
   animates (smoothly) when the user expands a detail chart. */
.showcase-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr 0.9fr 1fr 1fr 1fr 1.4fr;
  align-items: center;
}
#showcase-body {
  height: 264px; /* 6 rows x 44px; JS animates this when a detail opens */
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase-row {
  height: 44px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid hsl(0 0% 100% / 0.03);
  transition: background-color 0.15s ease, height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.showcase-row:hover { background: hsl(0 0% 100% / 0.03); }
.showcase-row.enter, .showcase-row.leave { height: 0; opacity: 0; }
.showcase-detail { overflow: hidden; }