/* =============================================================================
   KaspaFAQ — site.css
   Design direction: clean documentation aesthetic — Stripe docs / MDN energy.
   Kaspa brand teal (#49D5C8) on deep navy (#0A1628), white content area.
   Typography: Inter (Google Fonts) + ui-monospace stack for code.
   Mobile-first. WCAG AA contrast throughout. Phase 4 visual overhaul.
   ============================================================================= */

/* ── 1. Font imports ───────────────────────────────────────────────────────── */
/* Original Inter (kept for fallback compatibility) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Premium port: Neue Machina (display), Onest (body), JetBrains Mono (accents) */
@import url('https://api.fontshare.com/v2/css?f[]=neue-machina@300,400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── 2. Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --color-teal:            #49D5C8;
  --color-teal-dim:        #38b5a9;
  --color-teal-glow:       rgba(73, 213, 200, 0.18);
  --color-teal-subtle:     rgba(73, 213, 200, 0.10);
  --color-navy:            #0A1628;
  --color-navy-mid:        #0f2040;
  --color-navy-light:      #1a3050;

  /* Content palette */
  --color-bg:              #ffffff;
  --color-bg-subtle:       #f5f7fa;
  --color-bg-card:         #ffffff;
  --color-text:            #1a2030;
  --color-text-muted:      #5a6474;
  --color-text-xmuted:     #8a96a4;
  --color-border:          #e5e8ec;
  --color-border-strong:   #cdd2d9;

  /* Semantic link color — navy-blue, AA contrast on white */
  --color-link:            #1a6fa8;
  --color-link-hover:      #0d5285;

  /* Header / hero */
  --color-header-bg:       var(--color-navy);
  --color-header-text:     #f0f4f8;
  --color-header-link:     var(--color-teal);

  /* Footer */
  --color-footer-bg:       #f8f9fb;
  --color-footer-text:     #5a6474;

  /* Disclaimer — amber, AA contrast */
  --color-disclaimer-bg:   #fffbeb;
  --color-disclaimer-border: #f59e0b;
  --color-disclaimer-text: #78350f;

  /* Tags */
  --color-tag-bg:          #e0f9f6;
  --color-tag-text:        #0f5750;
  --color-tag-border:      #b2ede8;

  /* Code */
  --color-code-bg:         #f0f2f5;
  --color-code-border:     #dde1e7;

  /* Typography */
  --font-stack:   'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  /* Spacing rhythm */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout */
  --max-width:       760px;
  --max-width-wide:  1140px;

  /* Motion */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   250ms ease;

  /* Radius */
  --radius-sm:    4px;
  --radius-base:  6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  /* Shadow */
  --shadow-sm:   0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-md:   0 4px 12px rgba(10, 22, 40, 0.10), 0 2px 4px rgba(10, 22, 40, 0.06);
  --shadow-lg:   0 8px 24px rgba(10, 22, 40, 0.12), 0 4px 8px rgba(10, 22, 40, 0.08);
}

/* ── 3. Reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 1.0625rem; /* ~17px */
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

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

/* ── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-stack);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

h1 { font-size: 2.25rem; margin-top: 0; letter-spacing: -0.025em; }
h2 { font-size: 1.5rem;  letter-spacing: -0.015em; }
h3 { font-size: 1.2rem;  letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

p {
  margin: 0 0 1.1em;
  line-height: 1.7;
}

ul, ol {
  margin: 0 0 1.1em;
  padding-left: 1.5em;
}

li { margin-bottom: 0.35em; line-height: 1.65; }

strong { font-weight: 600; color: var(--color-navy); }

/* ── Code ─────────────────────────────────────────────────────────────────── */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: #1a4060;
}

pre {
  background: var(--color-navy);
  color: #cdd9e5;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.65;
  margin: 0 0 1.5em;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: 1em;
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--color-teal);
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  background: var(--color-teal-subtle);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

/* ── Table ────────────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5em;
  font-size: 0.9em;
  border-radius: var(--radius-base);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th, td {
  border: 1px solid var(--color-border);
  padding: 0.6em 0.9em;
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--color-bg-subtle);
  font-weight: 600;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

tr:nth-child(even) td { background: var(--color-bg-subtle); }

/* ── HR ───────────────────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ── 4. Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  background: var(--color-navy);
  color: var(--color-teal);
  padding: var(--space-2) var(--space-4);
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 var(--radius-base) var(--radius-base);
  border: 1px solid var(--color-teal);
}

.skip-link:focus {
  top: 0;
}

/* ── 5. Site Header ────────────────────────────────────────────────────────── */
.site-header {
  background: var(--color-header-bg);
  color: var(--color-header-text);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 rgba(73, 213, 200, 0.12), 0 2px 16px rgba(0, 0, 0, 0.35);
}

.site-header-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 56px;
}

/* Logo */
.site-logo {
  color: var(--color-teal);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--transition-fast);
}

.site-logo:hover { opacity: 0.85; color: var(--color-teal); }
.site-logo:focus-visible { outline-color: var(--color-teal); }

.site-logo img {
  height: 34px;
  width: auto;
  border-radius: var(--radius-sm);
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.site-nav a {
  color: rgba(240, 244, 248, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-base);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-nav a:hover {
  color: var(--color-header-text);
  background: rgba(255, 255, 255, 0.07);
}

.site-nav a:focus-visible {
  outline: 2px solid var(--color-teal);
  color: var(--color-header-text);
}

.site-nav a[aria-current="page"] {
  color: var(--color-teal);
  border-bottom: 2px solid var(--color-teal);
  border-radius: 0;
  padding-bottom: calc(0.5rem - 2px);
}
.site-nav a[aria-current="page"]:hover {
  background: transparent;
}

/* ── 6. Search in header ───────────────────────────────────────────────────── */
/* The _search.php partial renders inside .site-header */
.kfaq-search {
  position: relative;
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6) var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kfaq-search-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(73, 213, 200, 0.7);
  margin-bottom: var(--space-2);
}

#kfaq-search-input {
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-stack);
  border: 1px solid rgba(73, 213, 200, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-header-text);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base);
}

#kfaq-search-input::placeholder {
  color: rgba(240, 244, 248, 0.35);
}

#kfaq-search-input:focus {
  border-color: var(--color-teal);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px var(--color-teal-glow);
}

/* Search results dropdown */
#kfaq-search-results {
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
  background: var(--color-navy-mid);
  border: 1px solid rgba(73, 213, 200, 0.2);
  border-radius: var(--radius-md);
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  z-index: 300;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.kfaq-search-results { /* duplicate selector kept for specificity compatibility */
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}

#kfaq-search-results li,
.kfaq-search-results li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0;
}

#kfaq-search-results li:last-child,
.kfaq-search-results li:last-child { border-bottom: none; }

#kfaq-search-results a,
.kfaq-search-results a {
  display: block;
  padding: 0.65rem 1rem;
  color: var(--color-header-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--transition-fast);
}

#kfaq-search-results a:hover,
.kfaq-search-results a:hover {
  background: rgba(73, 213, 200, 0.1);
  color: var(--color-teal);
}

.kfaq-search-excerpt {
  margin: 0.1rem 0 0 0;
  font-size: 0.78rem;
  color: rgba(240, 244, 248, 0.5);
  font-weight: 400;
}

/* AI CTA */
.kfaq-search-ai-cta {
  margin-top: var(--space-3);
}

#kfaq-ask-ai-btn {
  background: transparent;
  border: 1px solid rgba(73, 213, 200, 0.45);
  color: var(--color-teal);
  border-radius: var(--radius-base);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-family: var(--font-stack);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

#kfaq-ask-ai-btn:hover {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: var(--color-navy);
}

#kfaq-ask-ai-btn:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* ── 7. Search modal ───────────────────────────────────────────────────────── */
.kfaq-search-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 32, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: modal-fade-in 150ms ease;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.kfaq-search-modal[hidden] { display: none; }

.kfaq-search-modal-inner {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 680px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(73, 213, 200, 0.15);
  animation: modal-slide-up 180ms ease;
}

@keyframes modal-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.kfaq-search-modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.kfaq-search-modal-close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.kfaq-search-attribution {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.kfaq-search-placeholder {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

/* ── 8. Main content ───────────────────────────────────────────────────────── */
.site-main {
  max-width: var(--max-width);
  margin: var(--space-10) auto var(--space-16);
  padding: 0 var(--space-5);
}

/* Wide layout for index pages */
.site-main--wide {
  max-width: var(--max-width-wide);
}

/* ── 9. Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  font-weight: 500;
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover { color: var(--color-link); }

.breadcrumb > * + *::before {
  content: "›";
  margin-right: var(--space-1);
  color: var(--color-border-strong);
}

/* ── 10. FAQ Entry page ────────────────────────────────────────────────────── */
.faq-entry h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--color-navy);
}

.faq-entry-excerpt {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-teal);
  padding: 0.5em var(--space-5);
  margin: 0 0 var(--space-8);
  background: var(--color-teal-subtle);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  line-height: 1.6;
}

.faq-entry-body {
  margin-bottom: var(--space-8);
  font-size: 1.0rem;
  line-height: 1.75;
}

/* Headings within the body content */
.faq-entry-body h2 {
  font-size: 1.35rem;
  margin-top: 2.25em;
  padding-top: 1em;
  border-top: 1px solid var(--color-border);
}

.faq-entry-body h3 { font-size: 1.1rem; margin-top: 1.75em; }

/* ── Tags ────────────────────────────────────────────────────────────────── */
.faq-entry-tags {
  margin-top: var(--space-6);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.faq-entry-tags strong {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.tag {
  display: inline-block;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border: 1px solid var(--color-tag-border);
  padding: 0.2em 0.65em;
  border-radius: 99px; /* pill shape */
  font-size: 0.8rem;
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tag:hover {
  background: #c7f2ee;
  border-color: var(--color-teal-dim);
}

/* ── Entry meta ──────────────────────────────────────────────────────────── */
.faq-entry-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-xmuted);
}

/* ── 11. FAQ index page (category list) ────────────────────────────────────── */
.faq-index > h1 {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.faq-index > p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  font-size: 1.05rem;
}

/* Category list */
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

.category-list-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-slow);
}

.category-list-item:hover {
  border-color: var(--color-teal-dim);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.category-list-name {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.category-list-name a {
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.category-list-name a:hover { color: var(--color-link); }

.category-entry-count {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-teal-dim);
  background: var(--color-teal-subtle);
  border: 1px solid rgba(73, 213, 200, 0.2);
  padding: 0.15em 0.55em;
  border-radius: 99px;
}

.category-description,
.category-list-description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.925rem;
  line-height: 1.6;
}

/* ── 12. Category page (entry list) ───────────────────────────────────────── */
.category-page h1 {
  margin-bottom: var(--space-2);
}

.category-page .category-description {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  border-left: 3px solid var(--color-teal);
  padding-left: var(--space-4);
}

.entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry-list-item {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.entry-list-item:last-child { border-bottom: none; }

.entry-list-item:hover {
  background: var(--color-bg-subtle);
}

.entry-list-item a {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-navy);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.entry-list-item a:hover { color: var(--color-link); }

.entry-list-excerpt {
  margin: var(--space-1) 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ── 13. Static page (About, Home) ────────────────────────────────────────── */
.static-page h1 {
  font-size: 2rem;
}

.static-page .page-body {
  font-size: 1rem;
  line-height: 1.75;
}

.page-meta {
  font-size: 0.8rem;
  color: var(--color-text-xmuted);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── 14. Hero section (homepage) ───────────────────────────────────────────── */
/* Applied when .site-main gets class .hero-main via the home template or layout */
.hero-block {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 60%, #0c2040 100%);
  margin: calc(-1 * var(--space-10)) calc(-1 * var(--space-5)) var(--space-10);
  padding: var(--space-16) var(--space-5) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Decorative teal accent line at top */
.hero-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-teal), transparent);
}

/* Decorative glow blob */
.hero-block::after {
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(73, 213, 200, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-block__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-teal);
  margin: 0 0 var(--space-4);
}

.hero-block__title {
  font-size: clamp(1.8rem, 5vw, 2.75rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-4);
  line-height: 1.15;
}

.hero-block__title em {
  font-style: normal;
  color: var(--color-teal);
}

.hero-block__sub {
  font-size: 1.05rem;
  color: rgba(240, 244, 248, 0.65);
  max-width: 480px;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
}

.hero-block__cta-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Primary button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-stack);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-base);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}

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

.btn-primary {
  background: var(--color-teal);
  color: var(--color-navy);
  border-color: var(--color-teal);
}

.btn-primary:hover {
  background: #5de3d6;
  border-color: #5de3d6;
  color: var(--color-navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(73, 213, 200, 0.4);
}

.btn-ghost {
  background: transparent;
  color: rgba(240, 244, 248, 0.8);
  border-color: rgba(240, 244, 248, 0.25);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(240, 244, 248, 0.4);
  color: #ffffff;
}

/* ── 15. Home category grid ────────────────────────────────────────────────── */
.home-categories {
  margin-top: var(--space-8);
}

.home-categories__heading {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
}

.home-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.home-category-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  display: block;
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              transform var(--transition-slow);
}

.home-category-card:hover {
  border-color: var(--color-teal-dim);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.home-category-card__icon {
  width: 40px;
  height: 40px;
  background: var(--color-teal-subtle);
  border: 1px solid rgba(73, 213, 200, 0.2);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
}

.home-category-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

.home-category-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.home-category-card__count {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-teal-dim);
}

/* ── 16. Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-16);
  padding: var(--space-12) var(--space-5) var(--space-8);
}

.site-footer-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.disclaimer {
  background: var(--color-disclaimer-bg);
  border: 1px solid var(--color-disclaimer-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-disclaimer-text);
  font-size: 0.85rem;
  line-height: 1.6;
  grid-column: 1 / -1; /* spans full width */
}

.disclaimer strong { color: var(--color-disclaimer-text); font-weight: 700; }

.attribution {
  color: var(--color-footer-text);
  font-size: 0.85rem;
  line-height: 1.6;
}

.attribution a,
.site-footer-copy a {
  color: var(--color-footer-text);
  text-decoration-thickness: 1px;
}

.attribution a:hover,
.site-footer-copy a:hover {
  color: var(--color-link);
}

.site-footer-copy {
  color: var(--color-text-xmuted);
  font-size: 0.8rem;
  margin: 0;
}

/* ── 17. Responsive ────────────────────────────────────────────────────────── */

/* Small tablet and up: 600px+ */
@media (min-width: 600px) {
  .home-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .disclaimer {
    grid-column: 1 / -1;
  }
}

/* Desktop: 900px+ */
@media (min-width: 900px) {
  .site-header-inner {
    height: 60px;
  }

  /* Inline search (single row in header) */
  .site-header {
    padding: 0;
  }

  .site-header-inner {
    padding: 0 var(--space-8);
    /* On desktop the search sits in the header-inner row */
  }

  .kfaq-search {
    /* Stretch search into the header-inner flex row */
    flex: 1;
    max-width: 480px;
    padding: var(--space-2) 0;
    border-top: none;
    margin: 0;
  }

  .kfaq-search-label {
    display: none; /* label shown below on mobile, hidden on desktop */
  }

  #kfaq-search-results {
    left: 0;
    right: 0;
    top: calc(100% + var(--space-2));
  }

  .home-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .site-footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: start;
  }

  .disclaimer {
    grid-column: 1 / -1;
  }

  h1 { font-size: 2.5rem; }

  .site-main {
    margin-top: var(--space-12);
    padding: 0 var(--space-8);
  }
}

/* Wide desktop: 1200px+ */
@media (min-width: 1200px) {
  .site-main {
    padding: 0 var(--space-6);
  }
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .site-header-inner {
    padding: 0 var(--space-4);
    height: auto;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .site-nav {
    margin-left: 0;
    order: 3;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--space-2);
  }

  .kfaq-search {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  #kfaq-search-results {
    left: var(--space-4);
    right: var(--space-4);
  }

  h1 { font-size: 1.65rem; }
  h2 { font-size: 1.25rem; }

  .hero-block {
    padding: var(--space-10) var(--space-4) var(--space-8);
  }

  .faq-index > h1,
  .category-page h1,
  .faq-entry h1 { font-size: 1.55rem; }

  /* Full-screen modal on phones — easier to read and the iframe fits naturally. */
  .kfaq-search-modal {
    padding: 0;
    align-items: stretch;
  }
  .kfaq-search-modal-inner {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    padding: var(--space-5);
    overflow-y: auto;
  }
  /* Iframe fills available space minus the header */
  .kfaq-search-iframe-wrap iframe {
    height: calc(100vh - 220px) !important;
    min-height: 320px;
  }

  table { font-size: 0.8rem; }
  th, td { padding: 0.45em 0.65em; }
}

/* ── 18. Utility classes ────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus management */
:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* Smooth scroll anchor target offset (for sticky header) */
:target {
  scroll-margin-top: 80px;
}

/* Print styles */
@media print {
  /* Hide chrome on print */
  .site-header, .site-footer,
  .kfaq-search-modal,
  .home-hero,
  .home-tools, .home-meta,
  .faq-entry-related,
  .faq-all-jump,
  .breadcrumb { display: none !important; }

  body { background: #fff; color: #000; }
  .site-main { max-width: none; margin: 0; padding: 0; }

  /* Ensure links show their destination on paper, except for fragments,
     mailto, and anchor-only links where the URL is unhelpful. */
  a[href]:not([href^="#"]):not([href^="mailto:"]):not(.skip-link)::after {
    content: " (" attr(href) ")";
    color: #444;
    font-size: 0.85em;
    word-break: break-all;
  }

  /* Disclaimer is required on every printed page footer */
  .faq-entry::after {
    content: "Source: KaspaFAQ.com — Not financial advice. Content under permission from kaspa.com and KaspaFacts.";
    display: block;
    margin-top: 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid #999;
    font-size: 0.75rem;
    color: #555;
  }

  /* Avoid breaking inside short blocks */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .faq-entry-excerpt { page-break-inside: avoid; break-inside: avoid; }

  /* Slightly smaller body for paper */
  html { font-size: 11pt; }
}

/* ─────────────────────────────────────────────────────────────────────
 * 19. Homepage
 * Custom layout used only on / — hero + topic grid + tools.
 * ───────────────────────────────────────────────────────────────────── */

.home-hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, #102540 100%);
  color: #e6edf5;
  padding: 4rem 1.5rem 3.5rem;
  margin: -2rem -1.5rem 3rem;
  position: relative;
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(73, 213, 200, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.home-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.home-hero-title {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 1.25rem;
}
.home-hero-tagline {
  color: #c8d3e0;
  font-size: clamp(1.05rem, 1.75vw, 1.2rem);
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.home-hero-tagline strong {
  color: var(--color-teal);
  font-weight: 600;
}
.home-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.9rem;
  color: #93a3b8;
  margin: 0;
}
.home-hero-stats span:first-child,
.home-hero-stats span:nth-child(3) {
  color: #fff;
  font-weight: 600;
}
.home-hero-stats a {
  color: var(--color-teal);
  text-decoration: none;
}
.home-hero-stats a:hover { text-decoration: underline; }
.home-hero-divider { color: #4a5a73; }

.home-intro {
  max-width: 720px;
  margin: 0 auto 3rem;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}
.home-intro p:first-child { margin-top: 0; }

.home-section-heading {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.home-topics, .home-tools, .home-meta {
  max-width: 1140px;
  margin: 0 auto 3.5rem;
}

.home-topic-grid, .home-tools-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 600px) {
  .home-topic-grid, .home-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .home-topic-grid, .home-tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.home-topic-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.home-topic-card:hover {
  border-color: var(--color-teal);
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.06);
  transform: translateY(-2px);
}
.home-topic-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
}
.home-topic-link .home-topic-meta { margin-top: auto; }
.home-topic-link:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: 12px;
}
.home-topic-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.home-topic-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.home-topic-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}
.home-topic-count {
  color: var(--color-teal-dark, #2a8a82);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.home-topic-arrow {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  transition: transform 200ms, color 200ms;
}
.home-topic-card:hover .home-topic-arrow {
  color: var(--color-teal);
  transform: translateX(4px);
}

.home-tool-card {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-bg-subtle);
  padding: 1.5rem;
}
.home-tool-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.home-tool-desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.home-tool-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--color-teal);
  color: #03332f;
}
.home-tool-tag-planned {
  background: #f5e6c8;
  color: #6b4f0a;
}

.home-meta {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 1.5rem 1rem;
  border-top: 1px solid var(--color-border);
}
.home-meta-line { margin: 0 auto; max-width: 60ch; }
.home-meta a { color: var(--color-teal-dark, #2a8a82); }

/* ─────────────────────────────────────────────────────────────────────
 * 20. Error pages (404)
 * ───────────────────────────────────────────────────────────────────── */

.error-page {
  max-width: 560px;
  margin: 4rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.error-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-teal);
  margin: 0 0 0.5rem;
  letter-spacing: -0.05em;
}
.error-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-navy);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
.error-body {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.error-actions {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
}
.error-actions a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 150ms, background 150ms;
}
.error-actions a:hover {
  border-color: var(--color-teal);
  background: var(--color-bg-subtle);
}
.error-hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

/* ─────────────────────────────────────────────────────────────────────
 * 21. Full /faq/all/ alphabetical index
 * ───────────────────────────────────────────────────────────────────── */

.faq-all-summary {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  margin: 0 0 2rem;
}
.faq-all-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 0 0 2.5rem;
  position: sticky;
  top: 64px;
  z-index: 5;
  backdrop-filter: blur(8px);
  background: rgba(245, 247, 250, 0.92);
}
.faq-all-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-navy);
  border: 1px solid transparent;
  border-radius: 6px;
  transition: border-color 150ms, background 150ms;
}
.faq-all-jump a:hover {
  border-color: var(--color-teal);
  background: #fff;
}
.faq-all-bucket {
  margin: 0 0 2.5rem;
  scroll-margin-top: 130px;
}
.faq-all-letter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-teal-dark, #2a8a82);
  margin: 0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--color-border);
}
.faq-all-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.faq-all-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-all-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: background 150ms;
}
.faq-all-link:hover {
  background: var(--color-bg-subtle);
}
.faq-all-link:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}
.faq-all-title {
  color: var(--color-text);
  font-weight: 500;
  flex: 1 1 auto;
}
.faq-all-link:hover .faq-all-title {
  color: var(--color-teal-dark, #2a8a82);
}
.faq-all-cat {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────
 * 22. FAQ entry: top meta strip + related-entries sidebar
 * ───────────────────────────────────────────────────────────────────── */

.faq-entry-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.faq-entry-readtime {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-teal-dark, #2a8a82);
  font-weight: 500;
}
.faq-entry-readtime::before {
  content: "○";
  font-size: 0.75rem;
}
.faq-entry-updated time { color: var(--color-text-muted); }

.faq-entry-related {
  margin: 3rem 0 1rem;
  padding: 1.5rem;
  background: var(--color-bg-subtle);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.faq-entry-related-heading {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.faq-entry-related-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.4rem;
}
.faq-entry-related-list a {
  display: block;
  padding: 0.4rem 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color 150ms, border-color 150ms;
}
.faq-entry-related-list a:hover {
  color: var(--color-teal-dark, #2a8a82);
  border-bottom-color: var(--color-teal);
}
.faq-entry-related-back {
  margin: 0;
  font-size: 0.875rem;
}
.faq-entry-related-back a {
  color: var(--color-teal-dark, #2a8a82);
  text-decoration: none;
}
.faq-entry-related-back a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────
 * 23. Tags index + per-tag page
 * ───────────────────────────────────────────────────────────────────── */

.tags-summary, .tag-page-summary {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  margin: 0 0 2rem;
}
.tag-page-summary code {
  background: var(--color-bg-subtle);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}
.tag-page-prefix {
  color: var(--color-teal-dark, #2a8a82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 500;
}
.tag-cloud {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-cloud-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.875rem;
  transition: border-color 150ms, background 150ms;
}
.tag-cloud-item:hover {
  border-color: var(--color-teal);
  background: #fff;
}
.tag-cloud-item.tag-cloud-small {
  font-size: 0.8125rem;
  padding: 0.3rem 0.6rem;
}
.tag-cloud-secondary { margin-bottom: 1.5rem; }
.tags-section-heading {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 1.75rem 0 0.75rem;
  padding: 0;
  border-bottom: none;
}
details.tags-rare summary {
  cursor: pointer;
  user-select: none;
  display: list-item;
}
details.tags-rare summary:hover {
  color: var(--color-teal-dark, #2a8a82);
}
details.tags-rare[open] summary { margin-bottom: 0.75rem; }
.tag-cloud-name { color: var(--color-text); }
.tag-cloud-count {
  color: var(--color-teal-dark, #2a8a82);
  font-weight: 600;
  font-size: 0.75rem;
}
a.tag {
  text-decoration: none;
}
a.tag:hover {
  background: var(--color-teal);
  color: var(--color-navy);
}

/* Tag-page entry list (mirrors faq-all-link layout). */
.tag-page .entry-list-link,
.entry-list-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: background 150ms;
}
.entry-list-link:hover { background: var(--color-bg-subtle); }
.entry-list-link:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}
.entry-list-title {
  flex: 1 1 auto;
  font-weight: 500;
  color: var(--color-text);
}
.entry-list-link:hover .entry-list-title {
  color: var(--color-teal-dark, #2a8a82);
}
.entry-list-cat {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* =============================================================================
   PREMIUM STYLE PORT 2026-05-09
   Midnight + teal visual layer ported from design_proto/final/styles.css.
   All original rules above are preserved — these override via cascade.
   Revert with: git checkout site/site.css
   =============================================================================

   Fonts: Neue Machina (Fontshare) for display headings,
          Onest (Google) for body, JetBrains Mono for accents/labels.
   ============================================================================= */

/* ── Design token overrides ───────────────────────────────────────────────── */
:root {
  /* Midnight palette (aliased to existing variable names) */
  --color-navy:         #07101A;   /* --void from proto */
  --color-navy-mid:     #0E1A24;   /* --surface */
  --color-navy-light:   #15212C;   /* --surface-mid */

  /* Teal shifted to proto's richer hue */
  --color-teal:         #70C7BA;
  --color-teal-dim:     rgba(112, 199, 186, 0.55);
  --color-teal-glow:    rgba(112, 199, 186, 0.32);
  --color-teal-subtle:  rgba(112, 199, 186, 0.08);

  /* Body/content surface — dark, not white */
  --color-bg:           #07101A;
  --color-bg-subtle:    #0E1A24;
  --color-bg-card:      #0E1A24;

  /* Text — light on dark */
  --color-text:         #F4F8FB;
  --color-text-muted:   #B5C2CE;
  --color-text-xmuted:  #6B7886;

  /* Borders — translucent light */
  --color-border:        rgba(180, 220, 235, 0.09);
  --color-border-strong: rgba(180, 220, 235, 0.20);

  /* Links — teal on dark bg */
  --color-link:          #70C7BA;
  --color-link-hover:    #9CE7DA;

  /* Header */
  --color-header-bg:    rgba(5, 11, 18, 0.90);
  --color-header-text:  #F4F8FB;
  --color-header-link:  #70C7BA;

  /* Footer */
  --color-footer-bg:    #0E1A24;
  --color-footer-text:  #B5C2CE;

  /* Disclaimer — subtle midnight surface instead of amber */
  --color-disclaimer-bg:     rgba(112, 199, 186, 0.025);
  --color-disclaimer-border: rgba(180, 220, 235, 0.09);
  --color-disclaimer-text:   #B5C2CE;

  /* Tags */
  --color-tag-bg:     rgba(112, 199, 186, 0.10);
  --color-tag-text:   #70C7BA;
  --color-tag-border: rgba(112, 199, 186, 0.25);

  /* Code */
  --color-code-bg:     rgba(180, 220, 235, 0.06);
  --color-code-border: rgba(180, 220, 235, 0.12);

  /* Typography stacks */
  --font-stack: 'Onest', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: 'Neue Machina', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shadow — teal-tinted on dark */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}

/* ── Body — midnight gradient + dot-grid backdrop ─────────────────────────── */
body {
  background-color: #07101A;
  background-image:
    radial-gradient(80vmax 60vmax at 18% -10%, rgba(112, 199, 186, 0.10), transparent 60%),
    radial-gradient(70vmax 55vmax at 92% 105%, rgba(111, 168, 224, 0.10), transparent 60%),
    radial-gradient(50vmax 40vmax at 50% 55%, rgba(167, 232, 156, 0.04), transparent 70%);
  background-attachment: fixed;
  color: #F4F8FB;
  font-family: var(--font-stack);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dot-grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(112, 199, 186, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 199, 186, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  animation: pm-gridDrift 50s linear infinite;
}

@keyframes pm-gridDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(48px); }
}

/* Guard body::before animation for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ── Base typography overrides ────────────────────────────────────────────── */
a {
  color: var(--color-teal);
  transition: color var(--transition-fast);
}

a:hover {
  color: #9CE7DA;
}

/* Display headings — Neue Machina 700 (editorial, sentence case) */
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2vw + 1.2rem, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #F4F8FB;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2vw + 0.9rem, 1.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #F4F8FB;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.6vw + 0.85rem, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #F4F8FB;
}

h4, h5, h6 {
  color: #B5C2CE;
  font-size: 1rem;
}

strong {
  color: #F4F8FB;
}

code {
  font-family: var(--font-mono);
  color: #70C7BA;
  background: rgba(180, 220, 235, 0.06);
  border-color: rgba(180, 220, 235, 0.12);
}

pre {
  background: #0E1A24;
  border: 1px solid rgba(180, 220, 235, 0.09);
}

blockquote {
  background: rgba(112, 199, 186, 0.06);
  border-left-color: #70C7BA;
  color: #B5C2CE;
}

hr {
  border-top-color: rgba(180, 220, 235, 0.09);
}

table {
  box-shadow: var(--shadow-sm);
}

th {
  background: #0E1A24;
  color: #6B7886;
}

td {
  border-color: rgba(180, 220, 235, 0.09);
  color: #F4F8FB;
}

tr:nth-child(even) td {
  background: rgba(180, 220, 235, 0.03);
}

/* ── Site header — dark glass surface ────────────────────────────────────── */
.site-header {
  background: rgba(5, 11, 18, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(180, 220, 235, 0.09);
  box-shadow: 0 1px 0 rgba(112, 199, 186, 0.10), 0 2px 24px rgba(0, 0, 0, 0.50);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Logo */
.site-logo {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F8FB;
}

.site-logo:hover {
  color: #70C7BA;
  opacity: 1;
}

/* Nav links */
.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7886;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.site-nav a:hover {
  color: #F4F8FB;
  background: rgba(28, 41, 53, 1);
}

.site-nav a[aria-current="page"] {
  color: #70C7BA;
  border-bottom: 2px solid #70C7BA;
}

/* ── Search bar — pill-shaped teal ───────────────────────────────────────── */
.kfaq-search {
  border-top: 1px solid rgba(180, 220, 235, 0.06);
}

#kfaq-search-input {
  background: linear-gradient(135deg, rgba(112, 199, 186, 0.10) 0%, rgba(9, 14, 18, 0.96) 100%);
  border: 1.5px solid rgba(180, 220, 235, 0.16);
  border-radius: 100px;
  color: #F4F8FB;
  font-family: var(--font-stack);
  padding: 0.6rem 1.25rem;
}

#kfaq-search-input::placeholder {
  color: #6B7886;
  font-style: italic;
}

#kfaq-search-input:focus {
  border-color: #70C7BA;
  background: #0E1620;
  box-shadow:
    0 0 0 4px rgba(112, 199, 186, 0.12),
    0 0 36px rgba(112, 199, 186, 0.18);
}

/* Search results dropdown */
#kfaq-search-results {
  background: #0E1A24;
  border-color: rgba(112, 199, 186, 0.20);
  box-shadow: var(--shadow-lg);
}

#kfaq-search-results a,
.kfaq-search-results a {
  color: #F4F8FB;
}

#kfaq-search-results a:hover,
.kfaq-search-results a:hover {
  background: rgba(112, 199, 186, 0.08);
  color: #70C7BA;
}

.kfaq-search-excerpt {
  color: #6B7886;
}

#kfaq-ask-ai-btn {
  border-color: rgba(112, 199, 186, 0.35);
  color: #70C7BA;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
}

#kfaq-ask-ai-btn:hover {
  background: #70C7BA;
  border-color: #70C7BA;
  color: #07101A;
}

/* ── Search modal — midnight glass ───────────────────────────────────────── */
.kfaq-search-modal {
  background: rgba(5, 11, 18, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kfaq-search-modal-inner {
  background: #0E1A24;
  border: 1px solid rgba(112, 199, 186, 0.20);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(112, 199, 186, 0.10);
}

.kfaq-search-modal-close {
  background: #15212C;
  border-color: rgba(180, 220, 235, 0.09);
  color: #6B7886;
}

.kfaq-search-modal-close:hover {
  background: rgba(180, 220, 235, 0.09);
  color: #F4F8FB;
}

.kfaq-search-attribution {
  color: #6B7886;
}

.kfaq-search-placeholder {
  background: #07101A;
  border-color: rgba(180, 220, 235, 0.09);
  color: #6B7886;
}

/* ── Main content area ────────────────────────────────────────────────────── */
.site-main {
  position: relative;
  z-index: 1;
  padding-top: 1.5rem;
}
/* Push the page title down clear of the sticky header on legacy /static-page/ slugs */
.static-page,
.faq-entry { padding-top: 1.5rem; }
.static-page > h1:first-child,
.faq-entry > h1:first-child { margin-top: 0.5rem; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb {
  color: #6B7886;
}

.breadcrumb a {
  color: #6B7886;
}

.breadcrumb a:hover {
  color: #70C7BA;
}

/* ── Static page / article body ──────────────────────────────────────────── */
.static-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2vw + 1.2rem, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #F4F8FB;
  line-height: 1.1;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  position: relative;
  display: inline-block;
}

/* Teal hairline accent — 56 px underline, no full-width rule, no glow on text */
.static-page h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 0.45em;
  background: #70C7BA;
  box-shadow: 0 0 8px rgba(112, 199, 186, 0.55);
}

.static-page .page-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #B5C2CE;
}

.static-page .page-body p {
  color: #B5C2CE;
}

.page-meta {
  color: #6B7886;
  border-top-color: rgba(180, 220, 235, 0.09);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* ── FAQ entry ────────────────────────────────────────────────────────────── */
.faq-entry h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2vw + 1.2rem, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #F4F8FB;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.faq-entry-excerpt {
  background: rgba(112, 199, 186, 0.06);
  border-left-color: #70C7BA;
  color: #B5C2CE;
}

.faq-entry-body {
  color: #B5C2CE;
}

.faq-entry-body h2,
.faq-entry-body h3 {
  color: #F4F8FB;
  border-top-color: rgba(180, 220, 235, 0.09);
}

.faq-entry-meta {
  color: #6B7886;
  border-top-color: rgba(180, 220, 235, 0.09);
}

.faq-entry-meta-top {
  color: #6B7886;
  border-bottom-color: rgba(180, 220, 235, 0.09);
}

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.tag {
  background: rgba(112, 199, 186, 0.10);
  color: #70C7BA;
  border-color: rgba(112, 199, 186, 0.25);
}

.tag:hover {
  background: rgba(112, 199, 186, 0.20);
  border-color: rgba(112, 199, 186, 0.50);
  color: #9CE7DA;
}

a.tag:hover {
  background: rgba(112, 199, 186, 0.20);
  color: #9CE7DA;
}

/* ── Category list / entry lists ─────────────────────────────────────────── */
.category-list-item {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
}

.category-list-item:hover {
  border-color: rgba(112, 199, 186, 0.35);
  box-shadow: 0 8px 30px -8px rgba(112, 199, 186, 0.20);
}

.category-list-name a {
  color: #F4F8FB;
}

.category-list-name a:hover {
  color: #70C7BA;
}

.category-description,
.category-list-description {
  color: #B5C2CE;
}

.entry-list {
  border-color: rgba(180, 220, 235, 0.09);
  background: #0E1A24;
}

.entry-list-item {
  border-bottom-color: rgba(180, 220, 235, 0.09);
}

.entry-list-item:hover {
  background: rgba(180, 220, 235, 0.03);
}

.entry-list-item a {
  color: #F4F8FB;
}

.entry-list-item a:hover {
  color: #70C7BA;
}

.entry-list-excerpt {
  color: #6B7886;
}

/* ── Home cards ───────────────────────────────────────────────────────────── */
.home-category-card {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
}

.home-category-card:hover {
  border-color: rgba(112, 199, 186, 0.35);
  box-shadow: 0 8px 30px -8px rgba(112, 199, 186, 0.20);
}

.home-category-card__name {
  color: #F4F8FB;
}

.home-category-card__desc {
  color: #B5C2CE;
}

.home-category-card__icon {
  background: rgba(112, 199, 186, 0.08);
  border-color: rgba(112, 199, 186, 0.20);
}

.home-category-card__count {
  color: #70C7BA;
}

.home-categories__heading {
  color: #F4F8FB;
  font-family: var(--font-display);
}

.home-section-heading {
  color: #F4F8FB;
  font-family: var(--font-display);
  border-bottom-color: rgba(180, 220, 235, 0.09);
}

/* Homepage topic cards */
.home-topic-card {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
}

.home-topic-card:hover {
  border-color: rgba(112, 199, 186, 0.35);
  box-shadow: 0 8px 30px -8px rgba(112, 199, 186, 0.20);
}

.home-topic-title {
  color: #F4F8FB;
}

.home-topic-desc {
  color: #B5C2CE;
}

.home-topic-meta {
  border-top-color: rgba(180, 220, 235, 0.09);
}

.home-topic-count {
  color: #70C7BA;
}

.home-tool-card {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
}

.home-tool-title {
  color: #F4F8FB;
}

.home-tool-desc {
  color: #B5C2CE;
}

.home-meta {
  border-top-color: rgba(180, 220, 235, 0.09);
  color: #6B7886;
}

/* ── Hero block ───────────────────────────────────────────────────────────── */
.hero-block {
  background: linear-gradient(135deg, #07101A 0%, #0E1A24 60%, #0C1826 100%);
}

.hero-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #F4F8FB;
}

.hero-block__eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  color: #70C7BA;
}

.hero-block__sub {
  color: #B5C2CE;
}

/* Homepage hero */
.home-hero {
  background: linear-gradient(135deg, #07101A 0%, #102540 100%);
}

.home-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #F4F8FB;
}

.home-hero-tagline {
  color: #B5C2CE;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary {
  background: #70C7BA;
  color: #07101A;
  border-color: #70C7BA;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-primary:hover {
  background: #9CE7DA;
  border-color: #9CE7DA;
  color: #07101A;
  box-shadow: 0 0 24px rgba(112, 199, 186, 0.35);
}

.btn-ghost {
  color: #B5C2CE;
  border-color: rgba(180, 220, 235, 0.20);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(180, 220, 235, 0.35);
  color: #F4F8FB;
}

/* ── Footer — midnight surface ────────────────────────────────────────────── */
.site-footer {
  background: #0E1A24;
  border-top: 1px solid rgba(180, 220, 235, 0.09);
  color: #B5C2CE;
  position: relative;
  z-index: 1;
}

.attribution {
  color: #B5C2CE;
}

.attribution a,
.site-footer-copy a {
  color: #70C7BA;
}

.attribution a:hover,
.site-footer-copy a:hover {
  color: #9CE7DA;
  text-decoration: underline;
}

.site-footer-copy {
  color: #6B7886;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ── Disclaimer — midnight glass surface ──────────────────────────────────── */
.disclaimer {
  background: rgba(112, 199, 186, 0.025);
  border: 1px solid rgba(180, 220, 235, 0.09);
  color: #B5C2CE;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
}

.disclaimer strong {
  color: #70C7BA;
  font-weight: 500;
}

/* ── Related entries + sidebar boxes ─────────────────────────────────────── */
.faq-entry-related {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
}

.faq-entry-related-heading {
  color: #F4F8FB;
}

.faq-entry-related-list a {
  color: #B5C2CE;
}

.faq-entry-related-list a:hover {
  color: #70C7BA;
  border-bottom-color: #70C7BA;
}

.faq-entry-related-back a {
  color: #70C7BA;
}

/* ── All-entries index ────────────────────────────────────────────────────── */
.faq-all-summary {
  color: #B5C2CE;
}

.faq-all-jump {
  background: rgba(14, 26, 36, 0.92);
  border-color: rgba(180, 220, 235, 0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.faq-all-jump a {
  color: #B5C2CE;
  font-family: var(--font-mono);
}

.faq-all-jump a:hover {
  border-color: rgba(112, 199, 186, 0.40);
  background: rgba(180, 220, 235, 0.04);
  color: #70C7BA;
}

.faq-all-letter {
  color: #70C7BA;
  border-bottom-color: rgba(180, 220, 235, 0.09);
  font-family: var(--font-mono);
}

.faq-all-item {
  border-bottom-color: rgba(180, 220, 235, 0.09);
}

.faq-all-link:hover {
  background: rgba(180, 220, 235, 0.03);
}

.faq-all-title {
  color: #B5C2CE;
}

.faq-all-link:hover .faq-all-title {
  color: #70C7BA;
}

.faq-all-cat {
  color: #6B7886;
}

/* ── Tags index / tag cloud ───────────────────────────────────────────────── */
.tags-summary,
.tag-page-summary {
  color: #B5C2CE;
}

.tag-cloud-item {
  background: #0E1A24;
  border-color: rgba(180, 220, 235, 0.09);
  color: #B5C2CE;
}

.tag-cloud-item:hover {
  border-color: rgba(112, 199, 186, 0.40);
  background: rgba(180, 220, 235, 0.04);
  color: #70C7BA;
}

.tag-cloud-name {
  color: #B5C2CE;
}

.tag-cloud-count {
  color: #70C7BA;
}

.tags-section-heading {
  color: #6B7886;
}

/* ── Entry list link ─────────────────────────────────────────────────────── */
.entry-list-link {
  color: #B5C2CE;
}

.entry-list-link:hover {
  background: rgba(180, 220, 235, 0.03);
}

.entry-list-title {
  color: #B5C2CE;
}

.entry-list-link:hover .entry-list-title {
  color: #70C7BA;
}

/* ── Skip link ────────────────────────────────────────────────────────────── */
.skip-link {
  background: #0E1A24;
  color: #70C7BA;
  border-color: #70C7BA;
}

/* ── Scrollbar — teal-tinted ──────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: #07101A; }
::-webkit-scrollbar-thumb   { background: #15212C; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(180, 220, 235, 0.16); }

/* ── Reduced-motion guard ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* body::before gridDrift already guarded above */
  .home-topic-card,
  .home-category-card,
  .category-list-item,
  .home-topic-card:hover,
  .home-category-card:hover,
  .category-list-item:hover {
    transform: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .btn,
  .btn:hover {
    transform: none;
  }

  .home-topic-arrow {
    transition: color var(--transition-fast);
  }

  .home-topic-card:hover .home-topic-arrow {
    transform: none;
  }
}

/* ── Print — restore legibility on white paper ────────────────────────────── */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  body::before { display: none; }
}

/* ===== END PREMIUM STYLE PORT 2026-05-09 ===== */

/* ===== PROTOTYPE STYLES.CSS APPENDED 2026-05-09-2700 ===== */
/* ============================================================
   KaspaFAQ — FINAL MERGED PROTOTYPE
   V2 typographic confidence × V3 ambient simplicity
   Neue Machina display · Onest body · JetBrains Mono accents
   Deep black · Teal #70C7BA · DAG mesh backdrop · Vignette center
   ============================================================ */

/* Neue Machina via Fontshare */
@import url('https://api.fontshare.com/v2/css?f[]=neue-machina@300,400,500,700,800&display=swap');
/* Onest + JetBrains Mono via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Design Tokens ── */
:root {
  /* Base palette — atmospheric, not pure black */
  --void:          #07101A;   /* deep navy-black, room to breathe */
  --void-deeper:   #050B12;
  --surface:       #0E1A24;   /* slate-blue elevated */
  --surface-mid:   #15212C;
  --surface-hi:    #1C2935;
  --surface-warm:  #0F1E1B;   /* teal-tinted slate */
  --surface-cool:  #0C1826;   /* blue-tinted slate */
  --surface-bright:#1A2A36;   /* brightest section band */
  --border:        rgba(180,220,235,0.09);
  --border-mid:    rgba(180,220,235,0.16);
  --border-bright: rgba(180,220,235,0.28);

  --ink:           #F4F8FB;
  --ink-mid:       #B5C2CE;
  --ink-dim:       #6B7886;

  --teal:          #70C7BA;
  --teal-bright:   #9CE7DA;
  --teal-vivid:    #5EE0CB;   /* hotter teal for glow accents */
  --teal-dim:      rgba(112,199,186,0.18);
  --teal-glow:     rgba(112,199,186,0.32);
  --teal-glow-lg:  rgba(112,199,186,0.16);
  --teal-glow-xl:  rgba(112,199,186,0.09);

  --blue:          #6FA8E0;
  --blue-glow:     rgba(111,168,224,0.18);
  --green:         #A7E89C;
  --green-glow:    rgba(167,232,156,0.14);

  --search-bg-rest:  rgba(112,199,186,0.10);
  --search-bg-focus: rgba(112,199,186,0.18);

  --font-display: 'Neue Machina', 'SF Pro Display', system-ui, sans-serif;
  --font-body:    'Onest', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --col-max:   1200px;
  --gap:       clamp(1rem, 2vw, 1.5rem);
  --gap-lg:    clamp(1.5rem, 3vw, 2.5rem);

  --text-xs:   clamp(0.68rem, 0.64rem + 0.18vw, 0.72rem);
  --text-sm:   clamp(0.80rem, 0.76rem + 0.20vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.0625rem);
  --text-md:   clamp(1.10rem, 1.00rem + 0.55vw, 1.30rem);
  --text-lg:   clamp(1.30rem, 1.10rem + 1.0vw,  1.75rem);
  --text-xl:   clamp(1.75rem, 1.30rem + 2.2vw,  2.75rem);
  --text-2xl:  clamp(2.50rem, 1.80rem + 3.5vw,  4.50rem);
  --text-hero: clamp(2.10rem, 1.20rem + 3.50vw,  4.00rem);

  --radius-sm:   3px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 100px;

  --transition-fast:   120ms ease;
  --transition-normal: 220ms ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background-color: var(--void);
  background-image:
    radial-gradient(80vmax 60vmax at 18% -10%, rgba(112,199,186,0.10), transparent 60%),
    radial-gradient(70vmax 55vmax at 92% 105%, rgba(111,168,224,0.10), transparent 60%),
    radial-gradient(50vmax 40vmax at 50% 55%, rgba(167,232,156,0.04), transparent 70%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* V2 dot-grid body backdrop */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(112,199,186,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,199,186,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  animation: gridDrift 50s linear infinite;
}
@keyframes gridDrift { from { transform: translateY(0); } to { transform: translateY(48px); } }

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-container {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
}

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--void); }
::-webkit-scrollbar-thumb   { background: var(--surface-hi); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-mid); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(5,6,7,0.90);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* Legacy /<slug>/ pages have <nav class="site-nav"> NESTED inside <header class="site-header">.
   The prototype's fixed positioning above pops it out of its parent and sticks it at the
   viewport top, displacing the legacy header. Reset the nested case to its original layout. */
.site-header .site-nav {
  position: static;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: auto;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 56px;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(112, 199, 186, 0.30);
  transition: text-shadow var(--transition-fast), color var(--transition-fast);
}
.nav-logo:hover {
  color: #FFFFFF;
  text-shadow: 0 0 24px rgba(94, 224, 203, 0.55);
}
.nav-logo-mark {
  position: relative;
  width: 46px; height: 46px;
  border: 2px solid var(--teal);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(94,224,203,0.12) 0%, rgba(11,18,24,0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(156, 231, 218, 0.20),
    0 0 0 1px rgba(94, 224, 203, 0.20),
    0 0 22px rgba(112, 199, 186, 0.45),
    0 0 44px rgba(112, 199, 186, 0.20);
}
.nav-logo-mark::before {
  content: 'K';
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--teal);
  text-shadow: 0 0 12px rgba(94, 224, 203, 0.85);
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav-logo-faq {
  color: var(--teal);
  font-weight: 800;
  text-shadow: 0 0 16px rgba(94, 224, 203, 0.55);
  margin-left: 0.15em;
}
.nav-logo-faq { color: var(--teal); }

/* Homepage-only: just Submit link on right */
.nav-submit-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.nav-submit-link:hover { border-color: rgba(112,199,186,0.35); color: var(--teal); }

/* Interior: prominent search bar in nav (60% hero size) */
/* Nav search — the marquee element. Most prominent glowing thing on every interior page. */
.nav-search-wrap { flex: 1 1 auto; max-width: 880px; min-width: 0; margin: 0 1.25rem; }
.nav-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0B1218;
  border: 2px solid rgba(94, 224, 203, 0.55);
  border-radius: var(--radius-pill);
  padding: 8px 10px 8px 22px;
  height: 56px;
  box-shadow:
    0 0 0 1px rgba(94, 224, 203, 0.18),
    0 0 0 6px rgba(94, 224, 203, 0.08),
    0 0 36px rgba(94, 224, 203, 0.28),
    0 0 64px rgba(94, 224, 203, 0.16),
    0 12px 40px rgba(0, 0, 0, 0.55);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.nav-search-form:focus-within {
  border-color: var(--teal-vivid, #5EE0CB);
  background: #0E1620;
  box-shadow:
    inset 0 1px 0 rgba(156, 231, 218, 0.18),
    0 0 0 1px rgba(94, 224, 203, 0.65),
    0 0 0 7px rgba(94, 224, 203, 0.18),
    0 0 56px rgba(94, 224, 203, 0.40),
    0 0 96px rgba(94, 224, 203, 0.22),
    0 12px 40px rgba(0, 0, 0, 0.60);
}
.nav-search-icon { color: var(--teal); opacity: 0.85; flex-shrink: 0; width: 20px; height: 20px; }
.nav-search-input {
  flex: 1 1 auto;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  min-width: 0;
  width: 100%;
}
.nav-search-input::placeholder { color: var(--ink-dim); font-style: italic; }
.nav-search-input::-webkit-search-decoration,
.nav-search-input::-webkit-search-cancel-button { display: none; }
.nav-search-btn {
  background: var(--teal);
  color: var(--void);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 24px;
  height: 40px;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(112, 199, 186, 0.30);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-search-btn:hover {
  background: var(--teal-bright);
  box-shadow: 0 0 26px rgba(112, 199, 186, 0.55);
}
/* Tighten the side columns so the search bar gets the breathing room it needs */
.nav-inner { gap: 1rem; }
.nav-logo { flex-shrink: 0; }
.nav-right-links { flex-shrink: 0; }

.nav-right-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-link:hover { color: var(--ink); background: var(--surface-hi); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(520px, 68vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: 56px;
  padding-bottom: 1.5rem;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.48; }
.dag-canvas { width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 68% at 50% 48%, transparent 22%, var(--void) 82%),
    linear-gradient(to bottom, rgba(5,6,7,0.45) 0%, transparent 22%, transparent 76%, rgba(5,6,7,0.88) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 2.5rem) 48px;
}

/* Mono kicker */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.80;
  margin-bottom: 1.25rem;
}
.hero-kicker-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--teal); }
  50%       { opacity: 0.4; box-shadow: 0 0 14px var(--teal); }
}

/* THE headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.hero-headline-go {
  font-style: italic;
  text-transform: none;
  color: var(--teal);
  font-weight: 300;
}
.hero-headline-anything {
  text-transform: uppercase;
  background: linear-gradient(90deg, #E8F1F4 0%, #9CE7DA 35%, #5EE0CB 65%, #C9D6DB 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  display: inline-block;
  animation: gradientFlow 6s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(156,231,218,0.30));
}

/* ── Hero search bar — 72px tall, teal-tinted ── */
.hero-search-wrap { width: 100%; max-width: 720px; margin-bottom: 1.125rem; }
.hero-search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0B1218;
  border: 2px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 12px 12px 12px 28px;
  height: 72px;
  box-shadow: 0 10px 52px rgba(0,0,0,0.55);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}
.hero-search-form:focus-within {
  border-color: var(--teal-vivid);
  background: #0E1620;
  box-shadow:
    inset 0 1px 0 rgba(156,231,218,0.18),
    0 0 0 1px rgba(94,224,203,0.55),
    0 0 0 5px rgba(112,199,186,0.20),
    0 0 0 9px rgba(112,199,186,0.07),
    0 0 80px rgba(94,224,203,0.28),
    0 10px 52px rgba(0,0,0,0.60);
}
.hero-search-icon { color: var(--teal); opacity: 0.70; flex-shrink: 0; transition: color var(--transition-fast), opacity var(--transition-fast); }
.hero-search-form:focus-within .hero-search-icon { color: var(--teal-vivid); opacity: 1; }
.hero-search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  min-width: 0;
  box-shadow: none;
}
.hero-search-input::placeholder { color: var(--ink-dim); font-style: italic; font-weight: 300; }
.hero-search-input::-webkit-search-decoration,
.hero-search-input::-webkit-search-cancel-button,
.hero-search-input::-webkit-search-results-button,
.hero-search-input::-webkit-search-results-decoration { display: none; }
.hero-search-btn {
  background: var(--teal);
  color: var(--void);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 14px 32px;
  height: 48px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.hero-search-btn:hover { background: var(--teal-bright); box-shadow: 0 0 24px rgba(112,199,186,0.35); }

/* Question chips */
.question-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.q-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.38rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  line-height: 1.4;
}
.q-chip:hover { border-color: rgba(112,199,186,0.40); color: var(--teal); background: rgba(112,199,186,0.06); }
.q-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* AI answer panel — resting placeholder */
.hero-ai-results {
  width: 100%; max-width: 720px;
  margin-top: 1.25rem;
  text-align: left;
  animation: fadeSlideIn 0.35s ease both;
  display: none;
}
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ai-answer-card {
  background: var(--surface);
  border: 1px solid rgba(112,199,186,0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(0,0,0,0.35), 0 0 32px var(--teal-glow-xl);
}
.ai-answer-card::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.ai-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--surface-mid);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal);
}
.ai-badge-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal);
  animation: pulseDot 1.8s ease-in-out infinite;
}
.ai-query-display { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-mid); font-style: italic; }
.ai-card-body { padding: 1.25rem 1.5rem 0.5rem; font-size: var(--text-sm); color: var(--ink-mid); line-height: 1.75; }
.ai-card-disclaimer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
}
.ai-typing-dots { display: inline-flex; gap: 5px; padding: 1.25rem 1.5rem; }
.ai-typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.25;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { opacity: 0.20; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1); }
}

/* Browse CTA */
.hero-browse-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.80;
  margin-top: 0.5rem;
  transition: gap var(--transition-normal), opacity var(--transition-fast), color var(--transition-fast);
}
.hero-browse-cta:hover { gap: 0.8rem; opacity: 1; color: var(--teal-bright); }
.hero-browse-cta svg { width: 12px; height: 12px; transition: filter var(--transition-fast); }
.hero-browse-cta:hover svg { filter: drop-shadow(0 0 6px rgba(94,224,203,0.65)); }

/* ── DAG SVG (V3) ── */
.dag-node          { fill: var(--teal); opacity: 0; animation: dagNodeAppear 0.6s ease forwards; }
.dag-node-glow     { fill: var(--teal); filter: blur(6px); opacity: 0; animation: dagGlowPulse 3s ease-in-out infinite; }
.dag-edge          { stroke: var(--teal); stroke-width: 1; fill: none; opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; animation: dagEdgeDraw 1.2s ease forwards; }
.dag-edge-secondary{ stroke: rgba(167,139,250,0.35); stroke-width: 0.7; fill: none; opacity: 0; stroke-dasharray: 200; stroke-dashoffset: 200; animation: dagEdgeDraw 1.4s ease forwards; }
.dag-layer-label   { font-family: 'JetBrains Mono', monospace; font-size: 9px; fill: rgba(112,199,186,0.28); letter-spacing: 0.08em; }
@keyframes dagNodeAppear { to { opacity: 0.85; } }
@keyframes dagGlowPulse { 0%, 100% { opacity: 0.10; transform: scale(1); } 50% { opacity: 0.24; transform: scale(1.3); } }
@keyframes dagEdgeDraw  { to { stroke-dashoffset: 0; opacity: 0.50; } }
.dag-group-drift { animation: dagDrift 20s ease-in-out infinite; transform-origin: center; }
@keyframes dagDrift {
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(-7px) translateY(4px); }
  50%  { transform: translateX(4px)  translateY(-5px); }
  75%  { transform: translateX(6px)  translateY(3px); }
  100% { transform: translateX(0)    translateY(0); }
}

/* ============================================================
   BELOW-FOLD SECTIONS (homepage)
   ============================================================ */
.below-fold {
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
}

/* Section bands — break the monotony with varied surfaces.
   Wraps around .below-fold to create full-bleed colour bands. */
.section-band {
  position: relative;
  width: 100%;
}
.section-band--warm {
  background:
    linear-gradient(180deg, transparent 0%, rgba(112,199,186,0.05) 18%, rgba(112,199,186,0.05) 82%, transparent 100%),
    var(--surface-warm);
  border-block: 1px solid var(--border);
}
.section-band--cool {
  background:
    linear-gradient(180deg, transparent 0%, rgba(111,168,224,0.06) 50%, transparent 100%),
    var(--surface-cool);
  border-block: 1px solid var(--border);
}
.section-band--bright {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(112,199,186,0.10), transparent 70%),
    var(--surface-bright);
  border-block: 1px solid var(--border-mid);
}
.section-band--elevated {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-mid) 100%);
  border-block: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.section-marker { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--gap); }
.section-marker__num   { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; color: var(--ink-dim); }
.section-marker__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mid); }
.section-marker__rule  { flex: 1; height: 1px; background: var(--border); }

.welcome-section   { padding-block: var(--gap); border-bottom: 1px solid var(--border); }
.welcome-text      { font-size: var(--text-base); color: var(--ink-mid); line-height: 1.85; max-width: 62ch; }

.pull-quote-section { padding-block: var(--gap); border-bottom: 1px solid var(--border); text-align: center; }
.pull-quote-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 56ch;
  margin-inline: auto;
}
.pull-quote-text::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 800;
  font-style: normal;
  line-height: 0.6;
  color: var(--teal);
  opacity: 0.07;
  display: block;
  margin-bottom: 0.5rem;
  user-select: none;
}

.browse-all-section { padding-block: 2rem; border-bottom: 1px solid var(--border); }
.browse-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.85;
  transition: gap var(--transition-normal), opacity var(--transition-fast);
}
.browse-all-link:hover { gap: 0.9rem; opacity: 1; }

/* Mini-projects — proper card row, not throwaway pills */
.projects-strip {
  padding-block: clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}
.projects-strip-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  flex-shrink: 0;
}
.projects-strip-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .projects-strip { grid-template-columns: 1fr; }
  .projects-strip-items { grid-template-columns: repeat(2, 1fr); }
}
.project-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(112,199,186,0.07) 0%, rgba(111,168,224,0.05) 100%),
    rgba(255,255,255,0.02);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast), transform var(--transition-fast),
              background var(--transition-fast);
  overflow: hidden;
}
.project-pill::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--teal) 0%, var(--blue) 100%);
  opacity: 0.55;
  transition: opacity var(--transition-fast);
}
.project-pill:hover {
  border-color: var(--teal);
  color: var(--teal-bright);
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(112,199,186,0.14) 0%, rgba(111,168,224,0.10) 100%),
    rgba(255,255,255,0.03);
  box-shadow: 0 8px 30px -8px var(--teal-glow), 0 0 0 1px rgba(112,199,186,0.30);
}
.project-pill:hover::before { opacity: 1; }

/* ── Share buttons — bigger, cleaner, single label per button ── */
.share-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.share-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 0.625rem 1.1rem;
  min-height: 40px;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(112,199,186,0.05) 0%, rgba(111,168,224,0.03) 100%),
    rgba(255,255,255,0.015);
  transition: border-color var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast), background var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none;
}
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.share-btn:hover {
  border-color: var(--teal);
  color: var(--teal-bright);
  background:
    linear-gradient(135deg, rgba(112,199,186,0.14) 0%, rgba(111,168,224,0.08) 100%),
    rgba(255,255,255,0.025);
  box-shadow: 0 0 24px var(--teal-glow), 0 0 0 1px rgba(112,199,186,0.30);
  transform: translateY(-1px);
}
/* Copy toast */
.copy-toast {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--teal);
  letter-spacing: 0.06em;
  animation: fadeSlideIn 0.25s ease both;
}
.copy-toast.visible { display: inline; }

/* Share section wrapper */
.share-section {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.share-section--inline {
  padding-block: 1rem 0;
  border-bottom: none;
}

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  z-index: 1;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gap-lg);
  margin-bottom: var(--gap);
}
.footer-logo { font-family: var(--font-display); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.875rem; }
.footer-logo span { color: var(--teal); }
.footer-tagline { font-size: var(--text-sm); color: var(--ink-mid); line-height: 1.65; max-width: 36ch; margin-bottom: 1.5rem; }
.footer-attribution {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.7;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.footer-attribution a { color: var(--teal); }
.footer-attribution a:hover { text-decoration: underline; }
.footer-col-heading { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }
.footer-col-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col-list a { font-size: var(--text-sm); color: var(--ink-mid); transition: color var(--transition-fast); }
.footer-col-list a:hover { color: var(--teal); }
.footer-disclaimer-block {
  padding: 1.25rem;
  background: rgba(112,199,186,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--gap);
}
.footer-disclaimer-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  line-height: 1.75;
  letter-spacing: 0.02em;
}
.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim); letter-spacing: 0.04em; }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.category-hero {
  padding-top: calc(56px + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.category-hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.category-hero-kicker::before {
  content: '';
  display: inline-block;
  width: 20px; height: 1px;
  background: var(--teal);
  opacity: 0.5;
}
.category-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.0;
  color: var(--ink);
  margin-bottom: 1rem;
}
.category-hero-desc {
  font-size: var(--text-base);
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 52ch;
}
.category-layout {
  display: grid;
  grid-template-columns: 220px 1fr 160px;
  gap: var(--gap-lg);
  padding-block: var(--gap-lg);
  /* push content below fixed nav so sidebar is visible immediately */
  padding-top: calc(56px + var(--gap-lg));
  align-items: start;
  position: relative;
  z-index: 1;
}
/* Sidebar left (col 1), main column (col 2), TOC right (col 3) */
.category-sidebar { grid-column: 1; grid-row: 1; }
.wiki-main { grid-column: 2; grid-row: 1; }
.wiki-toc { grid-column: 3; grid-row: 1; }

/* Curated clusters */
.curated-cluster { margin-bottom: 3rem; }
.curated-cluster:last-child { margin-bottom: 0; }
.cluster-heading {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
}
.cluster-heading-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--teal); }
.cluster-heading-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim); letter-spacing: 0.04em; }
.cluster-heading-rule  { flex: 1; height: 1px; background: var(--border); }

/* .entry-list / .entry-row — removed; category page now uses .wiki-section / .wiki-entry-list */

.category-sidebar {
  position: sticky;
  top: calc(56px + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.sidebar-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.25rem; }
.sidebar-box-heading { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }
.sidebar-box-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.sidebar-box-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  border-left: 2px solid transparent;
  margin-left: -0.5rem;
  padding-left: 0.5rem;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-box-link:hover,
.sidebar-box-link--active { background: var(--surface-hi); color: var(--teal); border-left-color: var(--teal); }
.sidebar-box-link-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim); }

/* ── Wiki layout — page title + section list ── */
.wiki-page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.75rem;
  line-height: 1.2;
}

.wiki-section {
  margin-bottom: 2.25rem;
}
.wiki-section:last-child { margin-bottom: 0; }

.wiki-section h2 {
  /* reset old underline treatment */
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 1rem;
  display: block;
}

/* ── Wiki section headings — editorial typography, no capsule ── */

/* Flatten the span — it carries no visual chrome; h2 does all the work */
.wiki-section h2 > .wiki-section-banner {
  all: unset;
  display: inline;
}

/* Editorial h2 */
.wiki-section h2 {
  font-family: var(--font-display), 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #5EE0CB;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
  display: block;
  transition: color 0.2s ease;
}

/* Accent A — 70px hairline just below the heading text */
.wiki-section h2::after {
  content: '';
  display: block;
  width: 70px;
  height: 2px;
  background: #5EE0CB;
  margin-top: 0.45rem;
  border-radius: 1px;
}

/* Hover — brighter teal, no transform, no glow */
.wiki-section h2:hover {
  color: #7EECD6;
}

@media (prefers-reduced-motion: reduce) {
  .wiki-section h2 { transition: none; }
}

/* Hide the now-redundant underline span */
.wiki-section-underline {
  display: none;
}

/* ── Sidebar reading-time stub ── */
.sidebar-stub-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 0 0.5rem 0.45rem 0.5rem;
  margin-left: -0.5rem;
  margin-top: -2px;
}

/* ── Active sidebar link — more alive ── */
.sidebar-box-link--active {
  background: rgba(94, 224, 203, 0.07);
  color: var(--teal-bright);
  border-left-color: var(--teal-vivid);
  box-shadow: inset 2px 0 8px rgba(94, 224, 203, 0.12);
}
.sidebar-box-link--active .sidebar-box-link-count {
  color: var(--teal);
}

/* ── Entry list — arrow affordance on hover ── */
.wiki-entry-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.wiki-entry-list li {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.wiki-entry-list li:last-child { border-bottom: none; }
.wiki-entry-list li a {
  display: block;
  padding: 0.55rem 1.8rem 0.55rem 0.25rem;
  font-size: var(--text-sm);
  color: var(--ink-mid);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}
.wiki-entry-list li a::after {
  content: '→';
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: var(--teal-bright);
  opacity: 0;
  transition: opacity var(--transition-fast), right var(--transition-fast);
}
.wiki-entry-list li a:hover {
  color: var(--teal-bright);
  padding-left: 0.5rem;
}
.wiki-entry-list li a:hover::after {
  opacity: 1;
  right: 0.25rem;
}
.wiki-entry-list li a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .wiki-entry-list li a,
  .wiki-entry-list li a::after { transition: none; }
}

/* ── In-page search/filter bar (category page) ── */
.wiki-filter-wrap {
  margin-bottom: 2rem;
}
.wiki-filter-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(94, 224, 203, 0.06);
  border: 1px solid rgba(94, 224, 203, 0.22);
  border-radius: 8px;
  padding: 0 0.75rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wiki-filter-form:focus-within {
  border-color: var(--teal-vivid);
  box-shadow: 0 0 0 2px rgba(94, 224, 203, 0.14), 0 0 18px rgba(94, 224, 203, 0.10);
}
.wiki-filter-icon {
  width: 14px;
  height: 14px;
  color: var(--teal);
  flex-shrink: 0;
}
.wiki-filter-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 0.6rem 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink);
  caret-color: var(--teal-vivid);
}
.wiki-filter-input::placeholder { color: var(--ink-dim); }
.wiki-filter-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--teal);
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-left: 0.5rem;
  min-width: 6ch;
  text-align: right;
}

/* ── Floating section TOC — right strip ── */
.wiki-toc {
  position: sticky;
  top: calc(56px + 2rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.wiki-toc-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}
.wiki-toc-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding: 0.25rem 0;
  border-left: 2px solid transparent;
  margin-left: -1rem;
  padding-left: calc(1rem - 2px);
  transition: color var(--transition-fast), border-color var(--transition-fast);
  display: block;
}
.wiki-toc-link:hover { color: var(--teal); }
.wiki-toc-link.toc-active {
  color: var(--teal-bright);
  border-left-color: var(--teal-vivid);
}
.wiki-toc-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wiki-toc-link { transition: none; }
}

/* ── Most-viewed stub (sidebar) ── */
.sidebar-most-viewed-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sidebar-most-viewed-list li a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--ink-mid);
  padding: 0.3rem 0;
  transition: color var(--transition-fast);
}
.sidebar-most-viewed-list li a:hover { color: var(--teal); }
.sidebar-mv-rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--teal-dim);
  flex-shrink: 0;
}
.sidebar-mv-stub-note {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  opacity: 0.6;
  margin-top: 0.5rem;
}

/* ── Smart breadcrumbs ── */
.wiki-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
}
.wiki-breadcrumb a {
  color: var(--ink-dim);
  transition: color var(--transition-fast);
}
.wiki-breadcrumb a:hover { color: var(--teal); }
.wiki-breadcrumb a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.wiki-breadcrumb-sep {
  color: rgba(180,220,235,0.25);
}
.wiki-breadcrumb-current { color: var(--teal); }

/* ── Orbital tracer accent on active wiki cluster ── */
.wiki-section:first-of-type {
  position: relative;
}
.wiki-section:first-of-type::before {
  content: '';
  position: absolute;
  top: 0;
  left: -1.5rem;
  right: -1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(94,224,203,0.35) 40%, rgba(156,231,218,0.55) 60%, transparent 100%);
  pointer-events: none;
  animation: tracer-sweep 4s ease-in-out infinite;
}
@keyframes tracer-sweep {
  0%, 100% { opacity: 0.5; background-position: -100% 0; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wiki-section:first-of-type::before { animation: none; opacity: 0.4; }
}

/* ============================================================
   ENTRY / ARTICLE PAGE
   ============================================================ */
.article-header {
  padding-top: calc(56px + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border-bright);
  position: relative;
  z-index: 1;
}
.article-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 100px; height: 1px;
  background: var(--teal);
}
.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
}
.article-breadcrumb a { color: var(--teal); }
.article-breadcrumb-sep { color: var(--border-mid); }
.article-kicker { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 1.25rem; }
.article-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; letter-spacing: -0.015em; text-transform: uppercase; line-height: 1.0; max-width: 20ch; color: var(--ink); margin-bottom: 1.25rem; }

/* Header meta strip */
.article-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}
.article-meta-item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.article-meta-item svg { width: 11px; height: 11px; color: var(--teal); opacity: 0.7; }
/* Sources count pill */
.sources-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(112,199,186,0.08);
  border: 1px solid rgba(112,199,186,0.25);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 680px) 200px;
  gap: 0 3rem;
  padding-block: clamp(3rem, 6vw, 5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}
.article-aside-left {
  position: sticky;
  top: calc(56px + 1.5rem);
  text-align: right;
  padding-top: 0.35rem;
}
.reading-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-dim); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); letter-spacing: 0.08em; text-transform: uppercase; }
.article-body p { margin-bottom: 1.5rem; font-size: var(--text-base); line-height: 1.85; color: var(--ink-mid); max-width: 56ch; }
.article-body h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; color: var(--ink); margin-top: 3.5rem; margin-bottom: 1.25rem; max-width: 56ch; }
.article-body h3 { font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.3; color: var(--ink); margin-top: 2.25rem; margin-bottom: 0.875rem; max-width: 56ch; }
.article-body strong { color: var(--ink); }
.article-body .callout { background: var(--surface); border-left: 2px solid var(--teal); padding: 1.25rem 1.5rem; margin-block: 2rem; max-width: 56ch; }
.article-body .callout p { margin-bottom: 0; font-size: var(--text-sm); }

/* Share row — above article body on entry page */
.article-share { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }

/* ── Sources block ── */
.sources-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  max-width: 56ch;
}
.sources-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sources-kicker::after { content: ''; flex: 1; height: 1px; background: rgba(112,199,186,0.2); }
.sources-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.sources-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-fast);
}
.sources-item:last-child { border-bottom: none; }
.sources-item:hover { background: var(--surface); margin-inline: -1rem; padding-inline: 1rem; }
.sources-item-arrow { color: var(--border-mid); font-size: 0.9rem; flex-shrink: 0; transition: color var(--transition-fast), transform var(--transition-fast); }
.sources-item:hover .sources-item-arrow { color: var(--teal); transform: translateX(3px); }
.sources-item-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  transition: color var(--transition-fast);
  line-height: 1.45;
}
.sources-item:hover .sources-item-link { color: var(--teal); }

/* Article TOC */
.article-toc { position: sticky; top: calc(56px + 1.5rem); }
.article-toc-heading { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1rem; }
.article-toc-list { list-style: none; display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--border); }
.article-toc-item a { display: block; font-size: var(--text-sm); color: var(--ink-dim); padding: 0.35rem 0 0.35rem 1rem; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.45; transition: color var(--transition-fast), border-color var(--transition-fast); }
.article-toc-item a:hover { color: var(--teal); border-left-color: var(--teal); }

/* ============================================================
   HOMEPAGE — FRIENDLY CRYPTO REBUILD
   All new sections appended here; existing classes above untouched.
   ============================================================ */

/* ── HERO SEARCH RESULTS — unified scanning → answer ── */
.hero-search-results {
  width: 100%; max-width: 720px;
  margin-top: 1.25rem;
  text-align: left;
  animation: fadeSlideIn 0.3s ease both;
}
.answer-card {
  background: var(--surface);
  border: 1px solid rgba(112,199,186,0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(0,0,0,0.35), 0 0 32px rgba(112,199,186,0.07);
}

/* Scanning state */
.answer-scanning {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.125rem 1.5rem;
}
.scanning-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: scanPulse 1.4s ease-in-out infinite;
}
@keyframes scanPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 4px var(--teal); transform: scale(1); }
  50%      { opacity: 0.35; box-shadow: 0 0 14px var(--teal); transform: scale(0.85); }
}
.scanning-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  font-style: italic;
}

/* Answer content */
.answer-content {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  animation: fadeSlideIn 0.3s ease both;
}
.answer-query {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 500;
  margin: 0;
}
.answer-body p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  line-height: 1.75;
  margin: 0;
}
.answer-inline-link { color: var(--teal); text-decoration: underline; }
.answer-source-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  transition: gap var(--transition-fast), opacity var(--transition-fast);
}
.answer-source-link:hover { gap: 0.5rem; opacity: 0.85; }
.answer-disclaimer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ── GETTING STARTED BAND ── */
:root { --violet: #A78BFA; --violet-glow: rgba(167,139,250,0.16); }

.gsband {
  background:
    radial-gradient(80% 60% at 15% 40%, rgba(112,199,186,0.07), transparent 60%),
    radial-gradient(60% 50% at 85% 60%, rgba(111,168,224,0.06), transparent 60%),
    linear-gradient(180deg, var(--surface-mid) 0%, var(--surface) 100%);
  border-block: 1px solid var(--border);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.gsband-inner { position: relative; z-index: 1; }
.gsband-header { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.gsband-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.5rem;
  text-transform: none;
}
.gsband-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-mid);
}

.gs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 860px) { .gs-steps { grid-template-columns: 1fr; max-width: 420px; } }

.gs-card {
  position: relative;
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  overflow: hidden;
}
.gs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  opacity: 0;
}
.gs-card:hover { transform: translateY(-4px); }

.gs-card--teal {
  background: linear-gradient(145deg, rgba(112,199,186,0.12) 0%, rgba(112,199,186,0.04) 60%, var(--surface) 100%);
  box-shadow: 0 4px 24px -6px rgba(0,0,0,0.30), 0 0 0 1px rgba(112,199,186,0.08);
}
.gs-card--teal:hover {
  box-shadow: 0 14px 40px -8px rgba(0,0,0,0.40), 0 0 40px rgba(112,199,186,0.16);
}
.gs-card--blue {
  background: linear-gradient(145deg, rgba(111,168,224,0.12) 0%, rgba(111,168,224,0.04) 60%, var(--surface) 100%);
  box-shadow: 0 4px 24px -6px rgba(0,0,0,0.30), 0 0 0 1px rgba(111,168,224,0.08);
}
.gs-card--blue:hover {
  box-shadow: 0 14px 40px -8px rgba(0,0,0,0.40), 0 0 40px rgba(111,168,224,0.16);
}
.gs-card--green {
  background: linear-gradient(145deg, rgba(167,232,156,0.10) 0%, rgba(167,232,156,0.03) 60%, var(--surface) 100%);
  box-shadow: 0 4px 24px -6px rgba(0,0,0,0.30), 0 0 0 1px rgba(167,232,156,0.08);
}
.gs-card--green:hover {
  box-shadow: 0 14px 40px -8px rgba(0,0,0,0.40), 0 0 40px rgba(167,232,156,0.14);
}

.gs-card-num-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(112,199,186,0.14);
  border: 1px solid rgba(112,199,186,0.30);
  flex-shrink: 0;
  align-self: flex-start;
}
.gs-card-num-wrap--blue {
  background: rgba(111,168,224,0.14);
  border-color: rgba(111,168,224,0.30);
}
.gs-card-num-wrap--green {
  background: rgba(167,232,156,0.12);
  border-color: rgba(167,232,156,0.28);
}
.gs-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.gs-card-num-wrap--blue .gs-num  { color: var(--blue); }
.gs-card-num-wrap--green .gs-num { color: var(--green); }

.gs-card-illo {
  width: 64px; height: 64px;
  flex-shrink: 0;
}
.gs-card-illo svg { width: 100%; height: 100%; }

.gs-card-title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  margin: 0;
}
.gs-card-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-mid);
  line-height: 1.65;
  flex: 1;
}
.gs-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--void);
  background: linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 100%);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  text-decoration: none;
  align-self: flex-start;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  margin-top: auto;
}
.gs-card-cta:hover {
  box-shadow: 0 0 18px rgba(112,199,186,0.35);
  transform: translateX(2px);
}
.gs-card-cta--blue {
  background: linear-gradient(135deg, #93C5FD 0%, var(--blue) 100%);
}
.gs-card-cta--blue:hover { box-shadow: 0 0 18px rgba(111,168,224,0.35); }
.gs-card-cta--green {
  background: linear-gradient(135deg, #86EFAC 0%, var(--green) 100%);
}
.gs-card-cta--green:hover { box-shadow: 0 0 18px rgba(167,232,156,0.30); }

/* ── HOT / COLD WALLET BAND ── */
.walletband {
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-cool) 50%, var(--surface) 100%);
  border-block: 1px solid var(--border);
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.walletband-inner { position: relative; z-index: 1; }
.walletband-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
}
.wallet-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.875rem, 2vw, 1.5rem);
}
@media (max-width: 560px) { .wallet-cards { grid-template-columns: 1fr; } }

.wallet-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-mid);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.wallet-card:hover { transform: translateY(-3px); }
.wallet-card--hot {
  background: linear-gradient(135deg, rgba(251,146,60,0.08) 0%, rgba(251,191,36,0.04) 100%);
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.28);
}
.wallet-card--hot:hover { box-shadow: 0 10px 32px -6px rgba(0,0,0,0.38), 0 0 28px rgba(251,146,60,0.12); }
.wallet-card--cold {
  background: linear-gradient(135deg, rgba(111,168,224,0.08) 0%, rgba(167,139,250,0.04) 100%);
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.28);
}
.wallet-card--cold:hover { box-shadow: 0 10px 32px -6px rgba(0,0,0,0.38), 0 0 28px rgba(111,168,224,0.12); }

.wallet-card-illo { width: 48px; height: 48px; flex-shrink: 0; }
.wallet-card-illo svg { width: 100%; height: 100%; }
.wallet-card-content { display: flex; flex-direction: column; gap: 0.3rem; }
.wallet-card-title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.wallet-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-mid);
  line-height: 1.5;
}
.wallet-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--teal);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: gap var(--transition-fast), opacity var(--transition-fast);
}
.wallet-card-link:hover { gap: 0.55rem; opacity: 0.85; }

/* ── WELCOME BAND (two-column, illustrated) ── */
.wband {
  position: relative;
  background:
    radial-gradient(70% 80% at 85% 50%, rgba(112,199,186,0.08), transparent 65%),
    linear-gradient(180deg, var(--surface-warm) 0%, var(--surface-mid) 100%);
  border-block: 1px solid var(--border);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}
.wband-glow {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112,199,186,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.wband-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.wband-illo { max-width: 280px; }
.wband-illo svg { width: 100%; height: auto; }
@media (max-width: 768px) {
  .wband-inner { grid-template-columns: 1fr; }
  .wband-illo  { display: none; }
}
.wband-text { display: flex; flex-direction: column; gap: 1rem; }
.wband-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.01em;
}
.wband-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-mid);
  line-height: 1.85;
  max-width: 52ch;
}
.wband-illo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dag-illo { width: 100%; max-width: 340px; height: auto; }

/* ── PULL-QUOTE BAND ── */
.pqband {
  position: relative;
  background:
    radial-gradient(80% 90% at 50% 50%, rgba(112,199,186,0.07), transparent 65%),
    linear-gradient(180deg, var(--surface-bright) 0%, var(--surface-mid) 100%);
  border-block: 1px solid var(--border-mid);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  text-align: center;
}
.pqband-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(112,199,186,0.10) 0%, transparent 70%);
  pointer-events: none;
}
.pqband-quote {
  position: relative;
  z-index: 1;
  max-width: 56ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.pqband-mark {
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 0.7;
  color: var(--teal);
  opacity: 0.22;
  user-select: none;
  align-self: flex-start;
  margin-bottom: -0.5rem;
}
.pqband-quote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ── BROWSE TOPICS BAND ── */
.topicsband {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(112,199,186,0.06), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--surface-mid) 100%);
  border-block: 1px solid var(--border);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
.topicsband-inner { position: relative; z-index: 1; }
.topicsband-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-mid);
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}
.topics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (max-width: 1024px) { .topics-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 580px)  { .topics-grid { grid-template-columns: repeat(2, 1fr); } }

/* Base .topic-btn stub — full treatment in POLISH LAYER 3 */
.topic-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-body);
}
.topic-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.topic-btn-icon svg { width: 100%; height: 100%; }
.topic-btn-name {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* ── FEATURED TOOLS BAND ── */
.toolsband {
  position: relative;
  background:
    /* volumetric lens flare — top-center glow */
    radial-gradient(ellipse 80% 40% at 50% -5%, rgba(94,224,203,0.11), transparent 60%),
    /* left accent bloom */
    radial-gradient(ellipse 55% 50% at 12% 90%, rgba(100,160,240,0.07), transparent 58%),
    /* right accent bloom */
    radial-gradient(ellipse 50% 45% at 90% 80%, rgba(160,120,255,0.06), transparent 55%),
    /* center depth */
    radial-gradient(ellipse 40% 35% at 50% 55%, rgba(94,224,203,0.03), transparent 70%),
    linear-gradient(180deg, #050C14 0%, #071018 50%, #050C14 100%);
  border-block: 1px solid rgba(94,224,203,0.08);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* Particle / node-network overlay */
.toolsband::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 10% 20%, rgba(94,224,203,0.20) 0%, transparent 1px),
    radial-gradient(circle 1px at 28% 72%, rgba(94,224,203,0.14) 0%, transparent 1px),
    radial-gradient(circle 1px at 47% 18%, rgba(100,160,240,0.16) 0%, transparent 1px),
    radial-gradient(circle 1px at 62% 82%, rgba(160,120,255,0.13) 0%, transparent 1px),
    radial-gradient(circle 1px at 76% 30%, rgba(94,224,203,0.15) 0%, transparent 1px),
    radial-gradient(circle 1px at 88% 65%, rgba(100,160,240,0.11) 0%, transparent 1px),
    radial-gradient(circle 1.5px at 20% 50%, rgba(94,224,203,0.10) 0%, transparent 1px),
    radial-gradient(circle 1px at 55% 45%, rgba(160,120,255,0.09) 0%, transparent 1px),
    radial-gradient(circle 1px at 93% 15%, rgba(94,224,203,0.12) 0%, transparent 1px);
  pointer-events: none;
  animation: toolsNodeBreath 9s ease-in-out infinite alternate;
  z-index: 0;
}

/* Top-edge luminous bar — matches Topics quality */
.toolsband::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,224,203,0.45), rgba(100,160,240,0.30), rgba(160,120,255,0.25), rgba(94,224,203,0.45), transparent);
  pointer-events: none;
  z-index: 0;
}

@keyframes toolsNodeBreath {
  0%   { opacity: 0.45; }
  100% { opacity: 1.00; }
}

.toolsband-inner { position: relative; z-index: 1; }

/* Label — centered, dramatic double-dot underline */
.toolsband-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(94,224,203,0.88);
  margin-bottom: 2.25rem;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.toolsband-label::after {
  content: '';
  display: block;
  margin-top: 0.45rem;
  width: 2.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,224,203,0.80), rgba(100,160,240,0.55), transparent);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(94,224,203,0.40);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 860px)  { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .tools-grid { grid-template-columns: 1fr; } }

/* ── CSS custom property for per-card accent ── */
@property --tool-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── Card base — midnight glass, matches Topics quality ── */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border-radius: 20px;
  padding: 1.875rem 1.625rem 1.5rem;
  min-height: 205px;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
  /* glassmorphic base */
  background:
    radial-gradient(ellipse 70% 55% at 85% 0%, rgba(var(--tool-accent, 94,224,203), 0.09) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 5%),
    linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.010) 40%, transparent 70%),
    linear-gradient(180deg, rgba(10,22,38,0.93) 0%, rgba(6,14,26,0.97) 100%);
  border: 1px solid rgba(var(--tool-accent, 94,224,203), 0.18);
  box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.10),
    inset 0 -1px 0   rgba(0,0,0,0.30),
    inset 1px 0 0    rgba(255,255,255,0.04),
    inset -1px 0 0   rgba(0,0,0,0.18),
    0 4px 28px -6px  rgba(0,0,0,0.65),
    0 0  0   1px     rgba(var(--tool-accent, 94,224,203), 0.18),
    0 0  26px -6px   rgba(var(--tool-accent, 94,224,203), 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  animation: toolBreath 5s ease-in-out infinite;
  transition:
    transform    320ms cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow   300ms ease,
    border-color 280ms ease,
    filter       260ms ease;
  will-change: transform, box-shadow;
}

/* Conic border sweep — ::before (visible at rest, active on hover) */
.tool-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: conic-gradient(
    from var(--tool-angle, 0deg),
    transparent                                      50%,
    rgba(var(--tool-accent, 94,224,203), 0.55)       68%,
    rgba(255,255,255,0.22)                            73%,
    rgba(var(--tool-accent, 94,224,203), 0.35)       78%,
    transparent                                     100%
  );
  pointer-events: none;
  opacity: 0.20;
  transition: opacity 380ms ease;
  z-index: -1;
  clip-path: inset(0 round 20px);
}

/* Cursor spotlight — ::after */
.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--tool-accent, 94,224,203), 0.10) 0%,
    transparent 62%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 0;
}

/* Breathing animation — rest state accent shadow pulse */
@keyframes toolBreath {
  0%,  100% { box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.10),
    inset 0 -1px 0   rgba(0,0,0,0.30),
    inset 1px 0 0    rgba(255,255,255,0.04),
    inset -1px 0 0   rgba(0,0,0,0.18),
    0 4px 28px -6px  rgba(0,0,0,0.65),
    0 0  0   1px     rgba(var(--tool-accent, 94,224,203), 0.18),
    0 0  26px -6px   rgba(var(--tool-accent, 94,224,203), 0.22); }
  50% { box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.10),
    inset 0 -1px 0   rgba(0,0,0,0.30),
    inset 1px 0 0    rgba(255,255,255,0.04),
    inset -1px 0 0   rgba(0,0,0,0.18),
    0 4px 28px -6px  rgba(0,0,0,0.65),
    0 0  0   1px     rgba(var(--tool-accent, 94,224,203), 0.30),
    0 0  38px -4px   rgba(var(--tool-accent, 94,224,203), 0.34); }
}
/* Stagger breathing across 3 cards */
.tool-card:nth-child(1) { animation-delay:  0.00s; }
.tool-card:nth-child(2) { animation-delay: -1.80s; }
.tool-card:nth-child(3) { animation-delay: -3.60s; }

/* Per-card accent CSS variables */
.tool-card--teal   { --tool-accent: 112,199,186; }
.tool-card--blue   { --tool-accent: 111,168,224; }
.tool-card--green  { --tool-accent: 167,232,156; }
.tool-card--violet { --tool-accent: 167,139,250; }

/* ── Hover state ── */
.tool-card:hover {
  transform: translateY(-8px) scale(1.020);
  filter: brightness(1.06);
  border-color: rgba(var(--tool-accent, 94,224,203), 0.38);
  box-shadow:
    inset 0  1px 0   rgba(255,255,255,0.16),
    inset 0 -1px 0   rgba(0,0,0,0.35),
    inset 1px 0 0    rgba(255,255,255,0.06),
    inset -1px 0 0   rgba(0,0,0,0.22),
    0 22px 55px -16px rgba(0,0,0,0.72),
    0  0   0   1px   rgba(var(--tool-accent, 94,224,203), 0.50),
    0  0  55px -8px  rgba(var(--tool-accent, 94,224,203), 0.42),
    0  0  22px -6px  rgba(var(--tool-accent, 94,224,203), 0.24);
}
.tool-card:hover::before {
  opacity: 1;
  animation: toolConicSweep 2.6s linear infinite;
}
.tool-card:hover::after { opacity: 1; }

@keyframes toolConicSweep {
  from { --tool-angle:   0deg; }
  to   { --tool-angle: 360deg; }
}

/* Shimmer sweep on hover — separate pseudo on inner element not available; use ::before background shift */
/* Already covered by conic sweep above */

.tool-card-illo { width: 72px; height: 72px; flex-shrink: 0; }
.tool-card-illo svg { width: 100%; height: 100%; }
.tool-card-name {
  font-family: var(--font-body);
  font-size: 1.20rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.tool-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-mid);
  line-height: 1.55;
  letter-spacing: 0.01em;
  flex: 1;
}
.tool-card-arrow {
  font-size: 1.05rem;
  color: var(--border-mid);
  align-self: flex-end;
  transition: color var(--transition-fast), transform var(--transition-fast),
              text-shadow 280ms ease;
}
.tool-card:hover .tool-card-arrow {
  color: rgba(var(--tool-accent, 94,224,203), 1);
  transform: translateX(5px);
  text-shadow: 0 0 12px rgba(var(--tool-accent, 94,224,203), 0.75),
               0 0 24px rgba(var(--tool-accent, 94,224,203), 0.40);
}

/* ── SHARE BAND ── */
.shareband {
  background: linear-gradient(180deg, var(--surface) 0%, var(--void) 100%);
  border-top: 1px solid var(--border);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.shareband-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.shareband-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-mid);
  flex-shrink: 0;
  margin-right: 0.25rem;
}
.shareband-btns {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-mid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  min-height: 44px;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(112,199,186,0.05) 0%, rgba(111,168,224,0.03) 100%),
    rgba(255,255,255,0.015);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}
.sbtn--icon-only { padding: 0.5rem 0.875rem; }
.sbtn-icon { width: 15px; height: 15px; flex-shrink: 0; }
.sbtn:hover {
  background: linear-gradient(135deg, var(--teal) 0%, #3FBFAD 100%);
  border-color: var(--teal);
  color: var(--void);
  box-shadow: 0 0 20px rgba(112,199,186,0.25);
}

/* ── FOOTER ADDITIONS ── */
.footer-tagline-friendly {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-mid);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.site-footer {
  background:
    radial-gradient(80vmax 40vmax at 50% 110%, rgba(112,199,186,0.06), transparent 55%),
    var(--void-deeper);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before, .dag-group-drift, .hero-kicker-dot, .ai-badge-dot, .ai-typing-dots span { animation: none; }
  .dag-node           { opacity: 0.7; animation: none; }
  .dag-node-glow      { opacity: 0.08; animation: none; }
  .dag-edge,
  .dag-edge-secondary { opacity: 0.4; animation: none; stroke-dashoffset: 0; }
  .reveal             { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-inner             { grid-template-columns: 1fr 1fr; }
  .footer-brand-col         { grid-column: span 2; }
  .article-layout           { grid-template-columns: 1fr minmax(0, 620px); }
  .article-aside-left       { display: none; }
  .article-toc              { display: none; }
  .nav-right-links          { display: none; }
  .category-layout          { grid-template-columns: 200px 1fr; }
  .wiki-toc                 { display: none; }
}
@media (max-width: 768px) {
  .category-layout    { grid-template-columns: 1fr; padding-top: calc(56px + var(--gap-lg)); }
  .category-sidebar   { position: static; grid-column: 1; grid-row: 2; order: 2; }
  .wiki-main          { grid-column: 1; grid-row: 1; order: 1; }
  .wiki-toc           { display: none; }
  .article-layout     { grid-template-columns: 1fr; }
  .article-title      { max-width: 100%; }
  .footer-inner       { grid-template-columns: 1fr; }
  .footer-brand-col   { grid-column: auto; }
}
@media (max-width: 640px) {
  .hero-search-form   { height: 60px; padding: 8px 8px 8px 20px; }
  .hero-search-btn    { padding: 12px 20px; height: auto; }
  .hero-search-input  { font-size: 1rem; }
  .hero-headline      { max-width: 100%; }
  .question-chips     { gap: 0.4rem; }
  .projects-strip     { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .nav-search-wrap    { max-width: 100%; }
  .share-row          { gap: 0.4rem; }
  .share-btn          { padding: 0.4rem 0.6rem; }
  .share-btn .share-btn-label { display: none; }
}

/* ============================================================
   POLISH LAYER — sophistication, micro-interactions, low pulses
   Appended 2026-05-09 under KF1 oversight
   ============================================================ */

/* Refined easing curves — premium feel */
:root {
  --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-glam:  380ms var(--ease-out-elegant);
}

@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.78; transform: scale(0.98); }
}
@keyframes goShimmer {
  0%, 100% { color: var(--teal); text-shadow: 0 0 14px rgba(112,199,186,0.45); }
  50%      { color: var(--teal-bright); text-shadow: 0 0 26px rgba(156,231,218,0.65); }
}
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%)  skewX(-18deg); }
}
@keyframes ringExpand {
  0%   { box-shadow: 0 0 0 0 rgba(112,199,186,0.40); }
  100% { box-shadow: 0 0 0 14px rgba(112,199,186,0.00); }
}

/* ── Hero search bar — flat solid rest state, no inner gradient, no glow ── */
.hero-search-form {
  border-color: rgba(94,224,203,0.42);
  background: #0B1218;
  box-shadow: 0 12px 40px rgba(0,0,0,0.50);
  transition: border-color var(--transition-glam),
              background var(--transition-glam),
              box-shadow var(--transition-glam),
              transform var(--transition-glam);
  overflow: visible;
}
.hero-search-form::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from 180deg at 50% 50%,
              rgba(112,199,186,0.0) 0deg,
              rgba(112,199,186,0.35) 100deg,
              rgba(111,168,224,0.25) 200deg,
              rgba(112,199,186,0.0) 320deg);
  opacity: 0;
  filter: blur(14px);
  z-index: -1;
  transition: opacity 480ms var(--ease-out-elegant);
  pointer-events: none;
}
.hero-search-form { position: relative; }
.hero-search-form:hover { transform: translateY(-1px); }
.hero-search-form:focus-within {
  animation: none;
  transform: translateY(-1px);
}
.hero-search-form:focus-within::before { opacity: 0.7; }

.hero-search-btn {
  position: relative;
  overflow: hidden;
  transition: background var(--transition-glam),
              box-shadow var(--transition-glam),
              transform var(--transition-fast);
}
.hero-search-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.hero-search-btn:hover::after { animation: shineSweep 900ms var(--ease-out-elegant); }
.hero-search-btn:hover {
  box-shadow:
    0 0 0 1px rgba(112,199,186,0.40),
    0 0 32px rgba(112,199,186,0.45),
    0 6px 22px rgba(0,0,0,0.30);
}

/* ── Hero kicker dot — slow breathing ── */
.hero-kicker-dot {
  animation: breathe 3.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(112,199,186,0.55), 0 0 24px rgba(112,199,186,0.20);
}

/* ── "Go" italic word — soft luminous breath ── */
.hero-headline-go {
  animation: goShimmer 4.8s ease-in-out infinite;
  display: inline-block;
}

/* ── Question chips — refined hover ── */
.q-chip {
  position: relative;
  transition: border-color var(--transition-glam),
              color var(--transition-glam),
              background var(--transition-glam),
              transform 220ms var(--ease-out-soft),
              box-shadow var(--transition-glam);
}
.q-chip:hover {
  border-color: var(--teal);
  color: var(--teal-bright);
  background: linear-gradient(135deg, rgba(112,199,186,0.10) 0%, rgba(112,199,186,0.04) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px -6px rgba(112,199,186,0.40), 0 0 0 1px rgba(112,199,186,0.22);
}

/* ── Browse-all CTA — warmer ── */
.hero-browse-cta {
  transition: gap var(--transition-glam), color var(--transition-glam), opacity var(--transition-fast);
}
.hero-browse-cta:hover { color: var(--teal-bright); }

/* ── Step cards — multi-layer hover, breathing number badge ── */
.gs-card {
  position: relative;
  overflow: hidden;
  transition: transform 320ms var(--ease-out-elegant),
              box-shadow var(--transition-glam),
              border-color var(--transition-glam);
}
.gs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(112,199,186,0.10), transparent 55%);
  opacity: 0;
  transition: opacity 380ms var(--ease-out-elegant);
  pointer-events: none;
}
.gs-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 20px 50px -18px rgba(0,0,0,0.55),
    0 0 0 1px rgba(112,199,186,0.18),
    0 0 36px rgba(112,199,186,0.10);
}
.gs-card:hover::before { opacity: 1; }
.gs-card-num {
  animation: breathe 5.4s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(112,199,186,0.18), 0 0 22px rgba(112,199,186,0.18);
}
.gs-card:nth-child(2) .gs-card-num { animation-delay: -1.8s; box-shadow: 0 0 0 1px rgba(111,168,224,0.20), 0 0 22px rgba(111,168,224,0.18); }
.gs-card:nth-child(3) .gs-card-num { animation-delay: -3.6s; box-shadow: 0 0 0 1px rgba(167,232,156,0.20), 0 0 22px rgba(167,232,156,0.16); }
.gs-card-cta {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-glam), transform var(--transition-fast);
}
.gs-card-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.50), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.gs-card-cta:hover::after { animation: shineSweep 900ms var(--ease-out-elegant); }
.gs-card-cta:hover { transform: translateY(-1px); }

/* ── Wallet cards — soft float on hover ── */
.wallet-card {
  transition: transform 320ms var(--ease-out-elegant),
              box-shadow var(--transition-glam),
              border-color var(--transition-glam);
}
.wallet-card-illo svg { transition: transform 480ms var(--ease-out-elegant), filter var(--transition-glam); }
.wallet-card:hover .wallet-card-illo svg { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 0 12px rgba(112,199,186,0.35)); }
.wallet-card-link { transition: gap 220ms var(--ease-out-soft), color var(--transition-glam); }
.wallet-card-link:hover { color: var(--teal-bright); }

/* ── Topic CTA buttons — premium fill, ripple on click, gloss sweep on hover ── */
.topic-btn {
  position: relative;
  overflow: hidden;
  transition: transform 240ms var(--ease-out-elegant),
              box-shadow var(--transition-glam),
              filter var(--transition-glam);
  background-image: linear-gradient(135deg, var(--teal-bright) 0%, var(--teal) 60%, #54B0A2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 8px 24px -10px rgba(112,199,186,0.45),
    0 0 0 1px rgba(112,199,186,0.25);
}
.topic-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.topic-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 14px 38px -12px rgba(112,199,186,0.65),
    0 0 0 1px rgba(112,199,186,0.45),
    0 0 30px rgba(112,199,186,0.30);
}
.topic-btn:hover::before { animation: shineSweep 1100ms var(--ease-out-elegant); }
.topic-btn:active { transform: translateY(0); animation: ringExpand 480ms var(--ease-out-soft); }
.topic-btn-icon { transition: transform 480ms var(--ease-out-elegant); }
.topic-btn:hover .topic-btn-icon { transform: scale(1.08) rotate(-2deg); }

/* ── Tool cards — overridden by POLISH LAYER 3 (glassmorphic rebuild) ── */
/* Legacy block kept as comment anchor — rules now live in base .tool-card definition */

/* ── Share buttons — refined hover ── */
.share-btn {
  transition: border-color var(--transition-glam),
              color var(--transition-glam),
              box-shadow var(--transition-glam),
              background var(--transition-glam),
              transform 220ms var(--ease-out-soft);
}
.share-btn svg { transition: transform 320ms var(--ease-out-elegant); }
.share-btn:hover svg { transform: scale(1.12) rotate(-2deg); }

/* ── Pull-quote — subtle quote-mark luminance ── */
.pull-quote-text::before {
  transition: opacity 800ms var(--ease-out-elegant), color 800ms var(--ease-out-elegant);
  animation: breathe 7s ease-in-out infinite;
}

/* ── DAG nodes — gentle pulse layered onto existing animations ── */
.dag-node-glow {
  filter: blur(2px);
}

/* ── Nav submit-link — refined ── */
.nav-submit-link {
  transition: border-color var(--transition-glam),
              color var(--transition-glam),
              background var(--transition-glam),
              box-shadow var(--transition-glam);
}
.nav-submit-link:hover {
  border-color: var(--teal);
  color: var(--teal-bright);
  box-shadow: 0 0 18px rgba(112,199,186,0.20);
}

/* ── Section markers — subtle reveal ── */
.section-marker__rule { transition: background var(--transition-glam); }

/* ── Reveal animations — slightly more elegant ── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 760ms var(--ease-out-elegant),
              transform 760ms var(--ease-out-elegant);
}
.reveal.is-visible,
.reveal:not([data-reveal-pending]) { opacity: 1; transform: translateY(0); }

/* ── Reduced motion guard ── */
@media (prefers-reduced-motion: reduce) {
  .hero-search-form,
  .hero-kicker-dot,
  .hero-headline-go,
  .gs-card-num,
  .pull-quote-text::before,
  .reveal {
    animation: none !important;
    transition: none !important;
  }
  .hero-search-btn::after,
  .gs-card-cta::after,
  .topic-btn::before {
    display: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   POLISH LAYER 2 — futurist sophistication, cursor-aware
   Appended 2026-05-09 under KF1 oversight
   ============================================================ */

/* ── Glassmorphic search bar ── */
/* backdrop-filter removed — was causing the bar interior to read as a radial gradient by sampling the DAG canvas + particle streams behind it. */

/* ── Slow-rotating conic halo behind the search bar ── */
.hero-search-wrap { position: relative; }
.hero-search-wrap::before {
  content: '';
  position: absolute;
  inset: -28px -120px;
  border-radius: 999px;
  background: conic-gradient(from 0deg at 50% 50%,
              rgba(112,199,186,0.0) 0deg,
              rgba(112,199,186,0.18) 60deg,
              rgba(111,168,224,0.12) 140deg,
              rgba(167,139,250,0.10) 220deg,
              rgba(112,199,186,0.0) 320deg);
  filter: blur(38px);
  opacity: 0.55;
  z-index: -1;
  animation: haloRotate 22s linear infinite;
  pointer-events: none;
}
@keyframes haloRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── Hero floating particles — three soft dots drifting ── */
.hero-content { position: relative; }
.hero-content::before,
.hero-content::after {
  content: '';
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 14px rgba(112,199,186,0.55);
  pointer-events: none;
  opacity: 0.45;
}
.hero-content::before { top: 18%; left: 6%;  animation: drift1 16s ease-in-out infinite; }
.hero-content::after  { top: 70%; right: 8%; animation: drift2 19s ease-in-out infinite; background: var(--blue); box-shadow: 0 0 14px rgba(111,168,224,0.55); }
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(28px, -22px); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-32px, 18px); }
}

/* ── Cursor-aware spotlight (CSS vars set by JS in index.html) ── */
.gs-card,
.tool-card,
.wallet-card,
.topic-btn {
  --mx: 50%;
  --my: 50%;
}
.gs-card::before {
  background: radial-gradient(220px circle at var(--mx) var(--my),
              rgba(112,199,186,0.16), transparent 55%);
}
/* tool-card::after cursor spotlight — deferred to base rule in new glassmorphic layer */
/* 3D tilt on tool cards (transform set by JS) */
.tool-card {
  transform-style: preserve-3d;
  perspective: 900px;
}
.tool-card-illo,
.tool-card-name,
.tool-card-desc,
.tool-card-arrow {
  transform: translateZ(0);
  transition: transform 340ms var(--ease-out-elegant);
}
.tool-card:hover .tool-card-name { transform: translateZ(16px); }
.tool-card:hover .tool-card-desc { transform: translateZ(8px); }
.tool-card:hover .tool-card-arrow { transform: translateZ(20px) translateX(5px); }

/* ── Topic CTA button — animated icon at rest ── */
.topic-btn-icon {
  animation: iconSway 6s ease-in-out infinite;
  will-change: transform;
}
.topic-btn:nth-child(2) .topic-btn-icon { animation-delay: -1.2s; }
.topic-btn:nth-child(3) .topic-btn-icon { animation-delay: -2.4s; }
.topic-btn:nth-child(4) .topic-btn-icon { animation-delay: -3.6s; }
.topic-btn:nth-child(5) .topic-btn-icon { animation-delay: -4.8s; }
@keyframes iconSway {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(-1deg); }
}

/* ── Animated underline on text links inside content ── */
.wallet-card-link,
.gs-card-cta,
.hero-browse-cta,
.answer-source-link,
.answer-inline-link {
  position: relative;
}
.hero-browse-cta::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--ease-out-elegant);
}
.hero-browse-cta:hover::after { transform: scaleX(1); }

/* ── Refined share buttons with floating label tooltip ── */
.share-btn, .sbtn { position: relative; }
.share-btn[data-tooltip]::after,
.sbtn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(15,22,30,0.96);
  color: var(--teal-bright);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(112,199,186,0.30);
  box-shadow: 0 6px 18px rgba(0,0,0,0.50), 0 0 18px rgba(112,199,186,0.12);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out-elegant), transform 240ms var(--ease-out-elegant);
}
.share-btn[data-tooltip]:hover::after,
.sbtn[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Premium focus rings (keyboard nav) ── */
/* Note: .hero-search-input intentionally omitted — form-level focus-within glow handles it; nesting a second ring creates a visible "inner box". */
.gs-card-cta:focus-visible,
.topic-btn:focus-visible,
.tool-card:focus-visible,
.wallet-card-link:focus-visible,
.share-btn:focus-visible,
.sbtn:focus-visible,
.nav-submit-link:focus-visible,
.q-chip:focus-visible,
.hero-browse-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--void),
    0 0 0 4px rgba(112,199,186,0.55),
    0 0 28px rgba(112,199,186,0.35);
}

/* ── Wallet card icons — gentle pulse at rest ── */
.wallet-card--hot .wallet-card-illo svg  { animation: heatGlow 5.4s ease-in-out infinite; }
.wallet-card--cold .wallet-card-illo svg { animation: chillGlow 6.8s ease-in-out infinite; }
@keyframes heatGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(251,146,60,0.30)); }
  50%      { filter: drop-shadow(0 0 14px rgba(251,146,60,0.55)); }
}
@keyframes chillGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(111,168,224,0.30)); }
  50%      { filter: drop-shadow(0 0 14px rgba(111,168,224,0.55)); }
}

/* .hero-search-btn is pixel-stationary; magnetic JS removed */

/* ── Pull-quote — softer fade-in glow on the open-quote mark ── */
.pull-quote-text::before {
  filter: drop-shadow(0 0 30px rgba(112,199,186,0.22));
}

/* ── Refined nav logo glow ── */
.nav-logo-mark {
  animation: logoMarkPulse 4.8s ease-in-out infinite;
}
@keyframes logoMarkPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(112,199,186,0.30), inset 0 0 0 1px rgba(112,199,186,0.45); }
  50%      { box-shadow: 0 0 14px rgba(112,199,186,0.50), inset 0 0 0 1px rgba(112,199,186,0.65); }
}

/* ── Section reveal: stagger via custom delays ── */
.reveal-delay-3 { transition-delay: 220ms; }
.reveal-delay-4 { transition-delay: 290ms; }

/* ── Reduced motion guard for polish layer 2 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-search-wrap::before,
  .hero-content::before,
  .hero-content::after,
  .topic-btn-icon,
  .nav-logo-mark,
  .wallet-card--hot .wallet-card-illo svg,
  .wallet-card--cold .wallet-card-illo svg {
    animation: none !important;
  }
  .tool-card:hover .tool-card-name,
  .tool-card:hover .tool-card-desc,
  .tool-card:hover .tool-card-arrow { transform: none !important; }
}

/* ============================================================
   POLISH LAYER 3 — HERO
   Appended 2026-05-09 — futurist warmth refinements
   ============================================================ */

/* Rest-state conic halo behind the search bar removed by design — halo reveals on focus only via .hero-search-wrap:focus-within rule below. */
.hero-search-wrap::before { opacity: 0 !important; animation: none !important; }
.hero-search-wrap:focus-within::before { opacity: 0.55 !important; animation: haloRotate 22s linear infinite !important; }

/* Gloss-shimmer sweep removed by design — calm rest state, no animated glow. */

/* ── Orbiting white tracer lights — two dots circling the search bar in opposite directions ── */
.hero-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow:
    0 0 4px 1px rgba(255,255,255,0.40),
    0 0 10px 3px rgba(255,255,255,0.22),
    0 0 18px 5px rgba(156,231,218,0.14);
  pointer-events: none;
  z-index: 3;
  offset-path: inset(0 round 9999px);
  offset-distance: 0%;
  offset-rotate: 0deg;
}
.hero-orbit--cw  { animation: heroOrbitCW  14s linear infinite; }
.hero-orbit--ccw { animation: heroOrbitCCW 14s linear infinite; }
@keyframes heroOrbitCW  { from { offset-distance: 0%;   } to { offset-distance: 100%; } }
@keyframes heroOrbitCCW { from { offset-distance: 100%; } to { offset-distance: 0%;   } }

/* Fake "I'm listening" caret removed — was rendering as visible artifacts and added clutter. The real input caret on focus is sufficient. */
.hero-search-caret { display: none !important; }
@keyframes caretBlink {
  0%, 45%  { opacity: 0.60; }
  55%, 100% { opacity: 0; }
}

/* ── Hero kicker dot — multi-color radial glow: teal core, blue ring ── */
.hero-kicker-dot {
  box-shadow:
    0 0  5px 1px rgba(112,199,186,0.80),
    0 0 12px 3px rgba(112,199,186,0.40),
    0 0 22px 5px rgba(111,168,224,0.20);
  animation: kickerDotGlow 3.6s ease-in-out infinite;
}
@keyframes kickerDotGlow {
  0%, 100% {
    opacity: 1;
    box-shadow:
      0 0  5px 1px rgba(112,199,186,0.80),
      0 0 12px 3px rgba(112,199,186,0.40),
      0 0 22px 5px rgba(111,168,224,0.20);
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    box-shadow:
      0 0  8px 2px rgba(94,224,203,0.85),
      0 0 18px 5px rgba(112,199,186,0.50),
      0 0 34px 8px rgba(111,168,224,0.30);
    transform: scale(1.3);
  }
}

/* ── "Go" italic — refined light-sweep shimmer ── */
/* ".Go" gloss-sweep box removed — created a visible rectangular outline around the word that read as a glowing box. Plain italic teal "Go" without overlay reads cleaner. */

/* ── Headline letter-stagger fade-in on first paint ── */
.hero-headline {
  animation: headlineFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-headline-go {
  animation:
    headlineFadeUp 0.85s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both,
    goShimmer 4.8s 1.2s ease-in-out infinite;
}
.hero-kicker {
  animation: headlineFadeUp 0.70s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-search-wrap {
  animation: headlineFadeUp 0.80s 0.10s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-browse-cta {
  animation: headlineFadeUp 0.75s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes headlineFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Question chips — subtle magnetic pull on hover (~3-4px, via JS transform) ── */
.q-chip {
  transition: border-color var(--transition-glam),
              color var(--transition-glam),
              background var(--transition-glam),
              transform 180ms var(--ease-out-soft),
              box-shadow var(--transition-glam);
  will-change: transform;
}
/* JS will set transform directly; CSS handles the spring-back */

/* ── Ask button — glow ring pulse on click ── */
@keyframes askRingExpand {
  0%   {
    box-shadow:
      0 0 0 0   rgba(112,199,186,0.55),
      0 0 0 0   rgba(111,168,224,0.30);
  }
  60%  {
    box-shadow:
      0 0 0 10px rgba(112,199,186,0.00),
      0 0 0 18px rgba(111,168,224,0.00);
  }
  100% {
    box-shadow:
      0 0 0 12px rgba(112,199,186,0.00),
      0 0 0 22px rgba(111,168,224,0.00);
  }
}
.hero-search-btn.is-pulsing {
  animation: askRingExpand 500ms var(--ease-out-elegant) forwards;
}

/* ── Ask button — chevron arrow ── */
.hero-search-btn .btn-chevron {
  display: inline-block;
  margin-left: 5px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 200ms ease, transform 220ms var(--ease-out-soft);
}
.hero-search-btn:hover .btn-chevron,
.hero-search-btn:focus-visible .btn-chevron {
  opacity: 1;
  transform: translateX(2px);
}

/* ── DAG node twinkle — random micro-flicker on specific nodes ── */
@keyframes dagTwinkle {
  0%, 85%, 100% { opacity: 0.85; }
  88%           { opacity: 0.30; }
  92%           { opacity: 0.90; }
  96%           { opacity: 0.45; }
}
@keyframes dagTwinkleB {
  0%, 70%, 100% { opacity: 0.85; }
  73%           { opacity: 0.20; }
  78%           { opacity: 0.75; }
  82%           { opacity: 0.35; }
}
@keyframes dagTwinkleC {
  0%, 55%, 100% { opacity: 0.85; }
  59%           { opacity: 0.15; }
  64%           { opacity: 0.80; }
  68%           { opacity: 0.40; }
}
/* Target specific nodes by position (cx/cy attributes cannot be CSS-selected;
   use nth-of-type on the .dag-node circles to pick a few) */
.dag-node:nth-of-type(5)  { animation: dagNodeAppear 0.6s ease forwards, dagTwinkle  7.3s  2.1s ease-in-out infinite; }
.dag-node:nth-of-type(9)  { animation: dagNodeAppear 0.6s ease forwards, dagTwinkleB 9.1s  0.8s ease-in-out infinite; }
.dag-node:nth-of-type(14) { animation: dagNodeAppear 0.6s ease forwards, dagTwinkleC 11.7s 4.3s ease-in-out infinite; }
.dag-node:nth-of-type(18) { animation: dagNodeAppear 0.6s ease forwards, dagTwinkle  8.4s  6.7s ease-in-out infinite; }

/* ── DAG mesh parallax — CSS custom props set by JS pointer handler ── */
.dag-group-drift {
  /* JS will override transform via inline style; CSS drift remains fallback */
  will-change: transform;
}

/* ── Reduced motion guard for polish layer 3 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-search-form:not(:focus-within)::after { animation: none !important; }
  .hero-search-caret                   { animation: none !important; opacity: 0 !important; }
  .hero-kicker-dot                     { animation: none !important; }
  .hero-headline-go::after             { animation: none !important; }
  .hero-headline-anything              { animation: none !important; background-position: 50% 50%; }
  .hero-particle-stream                { animation: none !important; opacity: 0; }
  .hero-headline,
  .hero-headline-go,
  .hero-kicker,
  .hero-search-wrap,
  .hero-browse-cta                     { animation: none !important; opacity: 1 !important; transform: none !important; }
  .dag-node:nth-of-type(5),
  .dag-node:nth-of-type(9),
  .dag-node:nth-of-type(14),
  .dag-node:nth-of-type(18)            { animation: dagNodeAppear 0.6s ease forwards !important; }
  .hero-search-btn.is-pulsing          { animation: none !important; }
  .hero-orbit                          { animation: none !important; opacity: 0 !important; }
}

/* ── Hero particle streams — CSS-only slow radial-gradient drifts ── */
.hero-particle-stream {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.hero-particle-stream--a {
  width: 340px; height: 340px;
  top: -10%; left: -8%;
  background: radial-gradient(circle, rgba(94,224,203,0.20) 0%, transparent 65%);
  animation: streamDriftA 34s ease-in-out infinite;
}
.hero-particle-stream--b {
  width: 260px; height: 260px;
  bottom: 5%; right: -6%;
  background: radial-gradient(circle, rgba(94,224,203,0.16) 0%, transparent 65%);
  animation: streamDriftB 40s ease-in-out infinite;
}
.hero-particle-stream--c {
  width: 200px; height: 200px;
  top: 30%; right: 12%;
  background: radial-gradient(circle, rgba(156,231,218,0.13) 0%, transparent 65%);
  animation: streamDriftC 28s ease-in-out infinite;
}
@keyframes streamDriftA {
  0%   { opacity: 0;    transform: translate(0, 0)     scale(1); }
  15%  { opacity: 0.18; }
  50%  { opacity: 0.22; transform: translate(60px, 40px) scale(1.1); }
  85%  { opacity: 0.15; }
  100% { opacity: 0;    transform: translate(0, 0)     scale(1); }
}
@keyframes streamDriftB {
  0%   { opacity: 0;    transform: translate(0, 0)       scale(1); }
  20%  { opacity: 0.15; }
  50%  { opacity: 0.20; transform: translate(-50px, -30px) scale(1.08); }
  80%  { opacity: 0.12; }
  100% { opacity: 0;    transform: translate(0, 0)       scale(1); }
}
@keyframes streamDriftC {
  0%   { opacity: 0;    transform: translate(0, 0)       scale(1); }
  25%  { opacity: 0.13; }
  50%  { opacity: 0.18; transform: translate(-30px, 50px) scale(1.05); }
  75%  { opacity: 0.10; }
  100% { opacity: 0;    transform: translate(0, 0)       scale(1); }
}


/* ============================================================
   POLISH LAYER 4 — WELCOME BAND
   Refined BlockDAG illustration, label gradient, typography, layout
   Appended 2026-05-09
   ============================================================ */

/* ── Grid: equal split on wide, tighter on mid ── */
@media (min-width: 900px) {
  .wband-inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .wband-illo {
    max-width: 360px;
    justify-self: end;
  }
}

/* ── Illustration container gains presence ── */
.wband-illo {
  max-width: 320px;
}
.dag-illo {
  max-width: 360px;
  overflow: visible;
}

/* ── Body text: better measure, refined line-height ── */
.wband-body {
  max-width: 64ch;
  line-height: 1.92;
  font-size: var(--text-base);
  color: var(--ink-mid);
}

/* ── "About KaspaFAQ" label: gradient fill + leading dot ── */
.wband-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* gradient text: teal → bright-teal */
  background: linear-gradient(90deg, var(--teal) 30%, var(--teal-bright) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wband-label::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 6px 2px rgba(156,231,218,0.55);
  animation: wbLabelDotBlink 2.8s ease-in-out infinite;
  /* keep the dot colored even with gradient text trick */
  -webkit-text-fill-color: initial;
  background-clip: initial;
  -webkit-background-clip: initial;
}
@keyframes wbLabelDotBlink {
  0%, 45%, 100% { opacity: 1; box-shadow: 0 0 6px 2px rgba(156,231,218,0.55); }
  55%           { opacity: 0.30; box-shadow: 0 0 2px 1px rgba(156,231,218,0.20); }
}

/* ── Inline "Browse all topics" link ── */
.wband-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--teal);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.4rem;
  transition: color var(--transition-normal), gap var(--transition-normal);
}
.wband-browse-link svg {
  width: 13px; height: 13px;
  transition: transform var(--transition-normal);
}
.wband-browse-link:hover {
  color: var(--teal-bright);
  gap: 0.55em;
}
.wband-browse-link:hover svg { transform: translateX(3px); }

/* ── Glow: larger, softer, animates gently ── */
.wband-glow {
  width: 320px; height: 320px;
  background: radial-gradient(circle,
    rgba(112,199,186,0.13) 0%,
    rgba(111,168,224,0.07) 45%,
    transparent 70%
  );
  animation: wbGlowPulse 7s ease-in-out infinite;
}
@keyframes wbGlowPulse {
  0%, 100% { opacity: 1;    transform: translateY(-50%) scale(1);    }
  50%       { opacity: 0.60; transform: translateY(-52%) scale(1.12); }
}

/* ─────────────────────────────────────────────
   ILLO NODE ANIMATIONS
   Each node class: wbn-* for welcome band nodes
   ───────────────────────────────────────────── */

/* Reveal: nodes draw in one-by-one when section enters viewport.
   The .wband-illo gains .is-visible from the existing reveal observer.
   We chain opacity/scale per node using --ni (node-index) CSS var. */
.dag-illo .wbn {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--wbn-delay, 0s),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--wbn-delay, 0s);
}
.wband-illo.is-visible .dag-illo .wbn {
  opacity: 1;
  transform: scale(1);
}

/* Edge lines reveal: draw via stroke-dashoffset */
.dag-illo .wbe {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition:
    stroke-dashoffset 0.7s cubic-bezier(0.25, 1, 0.5, 1) var(--wbe-delay, 0s);
}
.wband-illo.is-visible .dag-illo .wbe {
  stroke-dashoffset: 0;
}

/* Gentle node pulse — staggered phases */
@keyframes wbnPulse {
  0%, 100% { opacity: 1;    filter: brightness(1);    }
  50%       { opacity: 0.72; filter: brightness(1.30); }
}
@keyframes wbnPulseActive {
  0%, 100% { opacity: 1;    filter: brightness(1.10);  transform: scale(1);    }
  50%       { opacity: 0.85; filter: brightness(1.55);  transform: scale(1.10); }
}

/* Data-flow shimmer on edges (slow left-to-right gradient pulse) */
@keyframes wbeFlow {
  0%   { stroke-dashoffset: 200; opacity: 0.30; }
  50%  { opacity: 0.75; }
  100% { stroke-dashoffset: -200; opacity: 0.25; }
}

/* ── Reduced motion guard ── */
@media (prefers-reduced-motion: reduce) {
  .wband-label::before        { animation: none !important; }
  .wband-glow                 { animation: none !important; }
  .dag-illo .wbn              { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dag-illo .wbe              { stroke-dashoffset: 0 !important; transition: none !important; }
  .dag-illo .wbn-active       { animation: none !important; }
  .dag-illo .wbn-mid          { animation: none !important; }
  .dag-illo .wbe-flow         { animation: none !important; }
  .wband-browse-link svg      { transition: none !important; }
}

/* ============================================================
   POLISH LAYER 4 — PULL-QUOTE BAND
   Editorial-luxurious typeset moment. Futuristic, elegant.
   Appended 2026-05-09
   ============================================================ */

/* ── Band: expanded breathing room ── */
.pqband {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  border-block: none;
}

/* Hairline gradient rules above and below (overrides border-block) */
.pqband::before,
.pqband::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(112,199,186,0.00) 8%,
    rgba(112,199,186,0.35) 30%,
    rgba(94,224,203,0.52) 50%,
    rgba(112,199,186,0.35) 70%,
    rgba(112,199,186,0.00) 92%,
    transparent 100%
  );
  pointer-events: none;
}
.pqband::before { top: 0; }
.pqband::after  { bottom: 0; }

/* ── Background glow: intensifies when section is in view ── */
.pqband-glow {
  width: 1000px;
  height: 480px;
  background: radial-gradient(ellipse at center,
    rgba(94,224,203,0.16) 0%,
    rgba(112,199,186,0.08) 38%,
    transparent 70%
  );
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.30;
}
.pqband.pq-in-view .pqband-glow {
  opacity: 1;
}

/* ── Quote container: optimal editorial measure ── */
.pqband-quote {
  max-width: 44ch;
  gap: 0;
}

/* ── Opening quote-mark: ornate, luminous, editorial ── */
.pqband-mark {
  font-size: clamp(7.5rem, 15vw, 12rem);
  font-weight: 800;
  line-height: 0.60;
  color: var(--teal-vivid);
  opacity: 1;
  align-self: flex-start;
  margin-bottom: -0.18rem;
  margin-left: -0.06em;
  /* Multi-layer luminous glow: sharp inner core + wide soft halo */
  text-shadow:
    0 0  8px  rgba(94,224,203,0.90),
    0 0 22px  rgba(94,224,203,0.55),
    0 0 55px  rgba(112,199,186,0.30),
    0 0 110px rgba(112,199,186,0.14);
  transition: text-shadow 1.0s ease;
  user-select: none;
}
.pqband.pq-in-view .pqband-mark {
  text-shadow:
    0 0  6px  rgba(94,224,203,1.00),
    0 0 18px  rgba(94,224,203,0.70),
    0 0 45px  rgba(112,199,186,0.42),
    0 0 100px rgba(112,199,186,0.22);
}

/* ── Quote body: Neue Machina italic at generous display size ── */
.pqband-quote p {
  font-size: clamp(1.45rem, 1.10rem + 1.80vw, 2.50rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.30;
  letter-spacing: -0.028em;
  color: var(--ink);
  position: relative;
}

/* Closing quote-mark: small, elevated, editorial */
.pqband-quote p::after {
  content: '\201D';
  font-family: var(--font-display);
  font-size: 0.60em;
  font-weight: 800;
  font-style: normal;
  color: var(--teal-vivid);
  opacity: 0.50;
  margin-left: 0.06em;
  vertical-align: 0.45em;
  line-height: 0;
  text-shadow:
    0 0 10px rgba(94,224,203,0.45),
    0 0 28px rgba(112,199,186,0.22);
}

/* ── Animated underline: draws in from centre when in view ── */
.pqband-quote p::before {
  content: '';
  position: absolute;
  bottom: -0.70rem;
  left: 50%;
  width: 0%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(112,199,186,0.50) 22%,
    rgba(94,224,203,0.80) 50%,
    rgba(112,199,186,0.50) 78%,
    transparent 100%
  );
  transition: width 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.pqband.pq-in-view .pqband-quote p::before {
  width: 100%;
}

/* ── Word-stagger spans (injected by JS) ── */
.pq-word {
  display: inline;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.36s ease, transform 0.36s ease;
}
.pq-word.pq-word--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Reduced-motion guards for this layer ── */
@media (prefers-reduced-motion: reduce) {
  .pq-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pqband-quote p::before {
    transition: none !important;
    width: 100% !important;
  }
  .pqband-mark {
    transition: none !important;
  }
  .pqband-glow {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   POLISH LAYER 5 — ATMOSPHERE
   Page-wide connective tissue: body gradients, seams, particles,
   reveal choreography, scroll-driven ambient.
   Appended 2026-05-09
   ============================================================ */

/* ── Design tokens: scroll-driven ambient positions (JS writes these) ── */
:root {
  --atm-vx: 88%;
  --atm-vy: 8%;
  --atm-tx: 18%;
  --atm-ty: -10%;

  /* Refined reveal easing: natural deceleration with slight overshoot feel */
  --ease-reveal: cubic-bezier(0.16, 1.0, 0.30, 1.0);
}

/* ── Body background: layered radials including scroll-tracked violet accent ── */
body {
  background-image:
    radial-gradient(80vmax 60vmax at var(--atm-tx, 18%) var(--atm-ty, -10%),
      rgba(112,199,186,0.11), transparent 60%),
    radial-gradient(70vmax 55vmax at 92% 105%,
      rgba(111,168,224,0.10), transparent 60%),
    radial-gradient(50vmax 40vmax at 50% 55%,
      rgba(167,232,156,0.04), transparent 70%),
    radial-gradient(55vmax 42vmax at var(--atm-vx, 88%) var(--atm-vy, 8%),
      rgba(167,139,250,0.055), transparent 65%);
  transition: background-image 0s; /* prevent flash; JS handles interpolation */
}

/* ── Section seam treatment helper ──
   Strips the blunt border-block from the major bands and replaces
   with gradient hairlines via ::before / ::after pseudo-elements.
   Each band gets position:relative so the pseudos can anchor. */

/* Shared hairline mixin via attribute */
.gsband,
.walletband,
.wband,
.topicsband,
.shareband {
  position: relative;
  overflow: visible; /* let hairlines bleed slightly */
}

/* Remove existing blunt borders from these bands — overridden below */
.gsband     { border-block: none; }
.walletband { border-block: none; }
.wband      { border-block: none; }
.topicsband { border-block: none; }
.shareband  { border-block: none; }

/* Hairline factory — teal-anchored fade */
.gsband::before,
.gsband::after,
.walletband::before,
.walletband::after,
.wband::before,
.wband::after,
.topicsband::before,
.topicsband::after,
.shareband::before,
.shareband::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
}

/* Top hairlines — teal signature */
.gsband::before,
.walletband::before,
.wband::before,
.topicsband::before,
.shareband::before {
  top: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(112,199,186,0.00) 5%,
    rgba(112,199,186,0.22) 22%,
    rgba(94,224,203,0.38) 50%,
    rgba(112,199,186,0.22) 78%,
    rgba(112,199,186,0.00) 95%,
    transparent 100%
  );
}

/* Bottom hairlines — blue accent, cooler feel */
.gsband::after,
.walletband::after,
.wband::after,
.topicsband::after,
.shareband::after {
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(111,168,224,0.00) 8%,
    rgba(111,168,224,0.18) 28%,
    rgba(112,199,186,0.28) 50%,
    rgba(111,168,224,0.18) 72%,
    rgba(111,168,224,0.00) 92%,
    transparent 100%
  );
}

/* ── Section inset depth glow: light bleeding through top/bottom of each band ── */
.gsband,
.walletband,
.wband,
.topicsband {
  box-shadow:
    inset 0  2px 32px -8px rgba(112,199,186,0.07),
    inset 0 -2px 32px -8px rgba(111,168,224,0.06);
}
.topicsband {
  box-shadow:
    inset 0  2px 48px -12px rgba(94,224,203,0.09),
    inset 0 -2px 36px -10px rgba(111,168,224,0.07);
}

/* ── Ambient floating particles ── */
.atm-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atm-p {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* Soft diffuse glow dot — blurred sphere */
  filter: blur(1.5px);
}

/* Particle 1 — teal, upper-left zone, slow drift */
.atm-p--1 {
  width: 5px; height: 5px;
  background: rgba(112,199,186,0.55);
  box-shadow: 0 0 10px 3px rgba(112,199,186,0.25);
  left: 12%; top: 28%;
  animation: atmDrift1 32s ease-in-out infinite;
}

/* Particle 2 — blue, upper-right, mid drift */
.atm-p--2 {
  width: 4px; height: 4px;
  background: rgba(111,168,224,0.50);
  box-shadow: 0 0 8px 2px rgba(111,168,224,0.22);
  right: 18%; top: 18%;
  animation: atmDrift2 28s ease-in-out infinite;
}

/* Particle 3 — violet, mid-left, slowest */
.atm-p--3 {
  width: 3px; height: 3px;
  background: rgba(167,139,250,0.60);
  box-shadow: 0 0 9px 3px rgba(167,139,250,0.24);
  left: 6%; top: 58%;
  animation: atmDrift3 38s ease-in-out infinite;
}

/* Particle 4 — teal-bright, right side, mid height */
.atm-p--4 {
  width: 4px; height: 4px;
  background: rgba(94,224,203,0.48);
  box-shadow: 0 0 10px 3px rgba(94,224,203,0.20);
  right: 8%; top: 52%;
  animation: atmDrift4 24s ease-in-out infinite;
}

/* Particle 5 — blue, lower-left */
.atm-p--5 {
  width: 3px; height: 3px;
  background: rgba(111,168,224,0.45);
  box-shadow: 0 0 7px 2px rgba(111,168,224,0.18);
  left: 28%; top: 75%;
  animation: atmDrift5 34s ease-in-out infinite;
}

/* Particle 6 — violet accent, lower-right, subtle */
.atm-p--6 {
  width: 4px; height: 4px;
  background: rgba(167,139,250,0.42);
  box-shadow: 0 0 8px 3px rgba(167,139,250,0.16);
  right: 22%; top: 82%;
  animation: atmDrift6 29s ease-in-out infinite;
}

/* Drift keyframes — each path is unique so particles feel organic */
@keyframes atmDrift1 {
  0%   { transform: translate(  0px,   0px); opacity: 0.65; }
  20%  { transform: translate( 14px,  -22px); opacity: 0.90; }
  45%  { transform: translate(-10px,  -38px); opacity: 0.55; }
  70%  { transform: translate(  8px,  -18px); opacity: 0.80; }
  100% { transform: translate(  0px,   0px); opacity: 0.65; }
}
@keyframes atmDrift2 {
  0%   { transform: translate(  0px,   0px); opacity: 0.55; }
  25%  { transform: translate(-18px,   12px); opacity: 0.80; }
  55%  { transform: translate( 12px,   26px); opacity: 0.60; }
  80%  { transform: translate( -6px,    8px); opacity: 0.85; }
  100% { transform: translate(  0px,   0px); opacity: 0.55; }
}
@keyframes atmDrift3 {
  0%   { transform: translate(  0px,   0px); opacity: 0.50; }
  30%  { transform: translate( 20px,  -16px); opacity: 0.75; }
  60%  { transform: translate( 30px,   10px); opacity: 0.55; }
  85%  { transform: translate( 14px,  -24px); opacity: 0.70; }
  100% { transform: translate(  0px,   0px); opacity: 0.50; }
}
@keyframes atmDrift4 {
  0%   { transform: translate(  0px,   0px); opacity: 0.60; }
  20%  { transform: translate(-12px,  -18px); opacity: 0.90; }
  50%  { transform: translate(-24px,   6px); opacity: 0.60; }
  75%  { transform: translate( -8px,  20px); opacity: 0.78; }
  100% { transform: translate(  0px,   0px); opacity: 0.60; }
}
@keyframes atmDrift5 {
  0%   { transform: translate(  0px,   0px); opacity: 0.50; }
  35%  { transform: translate( 16px,  -20px); opacity: 0.72; }
  65%  { transform: translate( -8px,  -32px); opacity: 0.58; }
  90%  { transform: translate( 10px,  -10px); opacity: 0.80; }
  100% { transform: translate(  0px,   0px); opacity: 0.50; }
}
@keyframes atmDrift6 {
  0%   { transform: translate(  0px,   0px); opacity: 0.45; }
  28%  { transform: translate(-16px,  -14px); opacity: 0.68; }
  58%  { transform: translate( 10px,  -26px); opacity: 0.52; }
  82%  { transform: translate( -4px,  -12px); opacity: 0.72; }
  100% { transform: translate(  0px,   0px); opacity: 0.45; }
}

/* ── Reveal choreography refinement ──
   Override the existing .reveal transition with a superior easing curve.
   JS (POLISH LAYER 5) injects per-element transitionDelay dynamically
   based on power-curve stagger. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  0.72s var(--ease-reveal),
    transform 0.72s var(--ease-reveal);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Static delay classes remain as fallback if JS hasn't fired */
.reveal-delay-1 { transition-delay: 0.07s; }
.reveal-delay-2 { transition-delay: 0.14s; }
.reveal-delay-3 { transition-delay: 0.22s; }
.reveal-delay-4 { transition-delay: 0.30s; }

/* ── Smooth scroll: ensure it's on html and respected ── */
html {
  scroll-behavior: smooth;
}

/* ── Reduced motion: override every atmosphere animation ── */
@media (prefers-reduced-motion: reduce) {
  .atm-p { animation: none !important; opacity: 0.40 !important; }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  body {
    /* freeze body gradient at rest state */
    background-image:
      radial-gradient(80vmax 60vmax at 18% -10%, rgba(112,199,186,0.11), transparent 60%),
      radial-gradient(70vmax 55vmax at 92% 105%, rgba(111,168,224,0.10), transparent 60%),
      radial-gradient(50vmax 40vmax at 50% 55%, rgba(167,232,156,0.04), transparent 70%),
      radial-gradient(55vmax 42vmax at 88% 8%, rgba(167,139,250,0.055), transparent 65%);
  }
}


/* ============================================================
   POLISH LAYER 4 — NAV HEADER
   Scroll-aware glass, "K" logo-mark glyph, FAQ gradient, refined pill
   Appended 2026-05-09
   ============================================================ */

/* ── Scroll-progress bar ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 200;
  background: linear-gradient(90deg,
    var(--teal-vivid) 0%,
    var(--teal-bright) 55%,
    var(--blue) 100%);
  box-shadow: 0 0 8px var(--teal-glow), 0 0 18px var(--teal-glow-lg);
  pointer-events: none;
  will-change: width;
  transition: width 80ms linear;
}

/* ── Nav entrance: slide down 180ms on first paint ── */
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.site-nav {
  animation: navSlideDown 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
  /* Always opaque — content must never underlap the nav */
  background: rgba(7, 16, 26, 0.96) !important;
  border-bottom: 1px solid rgba(112, 199, 186, 0.18) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  transition: box-shadow 300ms ease;
}
/* JS adds .is-scrolled once user scrolls past 20px */
.site-nav.is-scrolled {
  background: rgba(7, 16, 26, 0.86) !important;
  border-bottom-color: rgba(112, 199, 186, 0.18) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: 0 1px 28px rgba(0, 0, 0, 0.30);
}

/* ── Logo mark — "K" glyph with teal core + spinning halo ── */
.nav-logo-mark {
  width: 26px;
  height: 26px;
  border: none !important;
  border-radius: 6px;
  background:
    radial-gradient(ellipse 60% 60% at 38% 38%, rgba(94, 224, 203, 0.22) 0%, transparent 70%),
    rgba(112, 199, 186, 0.07);
  box-shadow:
    0 0 0 1px rgba(112, 199, 186, 0.36),
    0 0 12px rgba(112, 199, 186, 0.20),
    inset 0 0 6px rgba(112, 199, 186, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow 220ms ease, background 220ms ease;
}
/* K glyph with luminous teal glow */
.nav-logo-mark::before {
  content: 'K';
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-vivid);
  letter-spacing: 0;
  line-height: 1;
  /* Reset geometry from old dot rule */
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow:
    0 0 6px rgba(94, 224, 203, 0.72),
    0 0 14px rgba(94, 224, 203, 0.32);
  animation: navMarkPulse 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
/* Spinning conic halo overlay */
.nav-logo-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(94, 224, 203, 0.16) 0deg,
    transparent 80deg,
    rgba(111, 168, 224, 0.10) 180deg,
    transparent 260deg,
    rgba(94, 224, 203, 0.16) 360deg
  );
  animation: navMarkSpin 9s linear infinite;
  pointer-events: none;
}
@keyframes navMarkPulse {
  0%, 100% { text-shadow: 0 0 6px rgba(94,224,203,0.72), 0 0 14px rgba(94,224,203,0.32); }
  50%       { text-shadow: 0 0 12px rgba(94,224,203,0.98), 0 0 24px rgba(111,168,224,0.36); }
}
@keyframes navMarkSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Logo text: semibold Kaspa, gradient FAQ ── */
.nav-logo {
  font-weight: 600;
  letter-spacing: 0.10em;
  gap: 0.55rem;
  transition: transform 200ms ease;
}
.nav-logo-faq {
  background: linear-gradient(115deg, var(--teal) 0%, var(--teal-bright) 55%, #8ec5f4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  letter-spacing: 0.14em;
  filter: drop-shadow(0 0 5px rgba(112, 199, 186, 0.32));
  transition: filter 220ms ease;
}

/* ── Logo hover: scale + mark/FAQ intensify ── */
.nav-logo:hover {
  transform: scale(1.035);
}
.nav-logo:hover .nav-logo-mark {
  box-shadow:
    0 0 0 1px rgba(112, 199, 186, 0.60),
    0 0 22px rgba(112, 199, 186, 0.44),
    inset 0 0 10px rgba(112, 199, 186, 0.16);
  background:
    radial-gradient(ellipse 60% 60% at 38% 38%, rgba(94, 224, 203, 0.36) 0%, transparent 70%),
    rgba(112, 199, 186, 0.13);
}
.nav-logo:hover .nav-logo-faq {
  filter: drop-shadow(0 0 10px rgba(112, 199, 186, 0.66));
}

/* ── Submit a Question — refined pill button ── */
.nav-submit-link {
  border: 1px solid rgba(112, 199, 186, 0.26) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.36rem 1rem !important;
  color: var(--ink-dim);
  background: transparent;
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}
.nav-submit-link:hover {
  border-color: rgba(112, 199, 186, 0.60) !important;
  color: var(--teal-bright);
  background: rgba(112, 199, 186, 0.07);
  box-shadow:
    0 0 0 3px rgba(112, 199, 186, 0.10),
    0 0 20px rgba(112, 199, 186, 0.14);
}

/* ── Reduced-motion guard for layer 4 — NAV ── */
@media (prefers-reduced-motion: reduce) {
  .site-nav              { animation: none !important; }
  .nav-logo-mark::before { animation: none !important; }
  .nav-logo-mark::after  { animation: none !important; }
  .scroll-progress       { transition: none !important; }
}

/* ============================================================
   POLISH LAYER 3 — BROWSE TOPICS  (cinematic glassmorphic rewrite)
   Surface: dark midnight glass, teal accent, per-card hue vars
   Atmosphere: deep-space radials + faint node-network pulse
   ============================================================ */

/* ── Per-card accent colours via data-accent ── */
.topic-btn[data-accent="cyan"]   { --accent: 94, 224, 203;  --accent-hex: #5EE0CB; }
.topic-btn[data-accent="blue"]   { --accent: 100, 160, 240; --accent-hex: #64A0F0; }
.topic-btn[data-accent="violet"] { --accent: 160, 120, 255; --accent-hex: #A078FF; }
.topic-btn[data-accent="amber"]  { --accent: 240, 185,  80; --accent-hex: #F0B950; }
.topic-btn[data-accent="green"]  { --accent: 120, 220, 160; --accent-hex: #78DCA0; }

/* ── Band atmosphere — deep-space ── */
.topicsband {
  position: relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%,  rgba(94,224,203,0.09),   transparent 65%),
    radial-gradient(ellipse 60% 50% at 15% 110%,  rgba(100,160,240,0.06),  transparent 60%),
    radial-gradient(ellipse 55% 45% at 88%  90%,  rgba(160,120,255,0.05),  transparent 60%),
    radial-gradient(ellipse 40% 35% at 50%  50%,  rgba(94,224,203,0.03),   transparent 70%),
    linear-gradient(180deg, #050C14 0%, #071018 50%, #050C14 100%);
  border-block: 1px solid rgba(94,224,203,0.08);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* Faint node-network geometric overlay — pure CSS, pointer-events none */
.topicsband::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1px at 18% 28%, rgba(94,224,203,0.18) 0%, transparent 1px),
    radial-gradient(circle 1px at 35% 68%, rgba(94,224,203,0.12) 0%, transparent 1px),
    radial-gradient(circle 1px at 52% 22%, rgba(100,160,240,0.15) 0%, transparent 1px),
    radial-gradient(circle 1px at 68% 78%, rgba(160,120,255,0.12) 0%, transparent 1px),
    radial-gradient(circle 1px at 82% 35%, rgba(94,224,203,0.14) 0%, transparent 1px),
    radial-gradient(circle 1px at 12% 82%, rgba(100,160,240,0.10) 0%, transparent 1px),
    radial-gradient(circle 1px at 92% 72%, rgba(94,224,203,0.11) 0%, transparent 1px);
  pointer-events: none;
  animation: nodeBreath 8s ease-in-out infinite alternate;
  z-index: 0;
}

/* Subtle top-edge luminous bar */
.topicsband::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,224,203,0.40), rgba(100,160,240,0.28), rgba(94,224,203,0.40), transparent);
  pointer-events: none;
  z-index: 0;
}

@keyframes nodeBreath {
  0%   { opacity: 0.55; }
  100% { opacity: 1.00; }
}

/* ── Band label — futurist uppercase ── */
.topicsband-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(94,224,203,0.82);
  margin-bottom: 2.25rem;
  position: relative;
  z-index: 1;
  display: inline-block;
}
/* Thin glowing underline */
.topicsband-label::after {
  content: '';
  display: block;
  margin-top: 0.45rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(94,224,203,0.70), rgba(100,160,240,0.50), transparent);
  border-radius: 1px;
}

/* ── Grid ── */
.topics-grid {
  gap: clamp(1rem, 2vw, 1.75rem);
  position: relative;
  z-index: 1;
}

/* ── Card base — midnight glass ── */
.topic-btn {
  /* Reset layered legacy fills */
  background:
    /* per-card accent bloom at rest — top-right corner wash */
    radial-gradient(ellipse 70% 55% at 85% 0%, rgba(var(--accent, 94,224,203), 0.08) 0%, transparent 70%),
    /* top-edge gloss strip — lit-from-above glassmorphic highlight */
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.00) 6%),
    linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.010) 40%, transparent 70%),
    linear-gradient(180deg, rgba(10,22,38,0.92) 0%, rgba(6,14,26,0.96) 100%);
  border: 1px solid rgba(var(--accent, 94,224,203), 0.18);
  border-radius: 20px;
  min-height: 140px;
  padding: 1.75rem 1.25rem 1.5rem;
  gap: 0.875rem;
  /* Rest-state: luminous border ring at ~30% + accent shadow halo */
  box-shadow:
    inset 0  1px 0    rgba(255,255,255,0.10),
    inset 0 -1px 0    rgba(0,0,0,0.30),
    inset 1px 0 0     rgba(255,255,255,0.04),
    inset -1px 0 0    rgba(0,0,0,0.18),
    0 4px 24px -6px   rgba(0,0,0,0.60),
    0 0   0   1px     rgba(var(--accent, 94,224,203), 0.18),
    0 0  22px -6px    rgba(var(--accent, 94,224,203), 0.20);
  animation: topicBreath 5s ease-in-out infinite;
  transition:
    transform    300ms cubic-bezier(0.34, 1.45, 0.64, 1),
    box-shadow   280ms ease,
    border-color 260ms ease,
    filter       240ms ease;
  will-change: transform, box-shadow;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-body);
}

/* Idle breathing — accent shadow pulses opacity, stagger across cards */
@keyframes topicBreath {
  0%,  100% { box-shadow:
    inset 0  1px 0    rgba(255,255,255,0.10),
    inset 0 -1px 0    rgba(0,0,0,0.30),
    inset 1px 0 0     rgba(255,255,255,0.04),
    inset -1px 0 0    rgba(0,0,0,0.18),
    0 4px 24px -6px   rgba(0,0,0,0.60),
    0 0   0   1px     rgba(var(--accent, 94,224,203), 0.18),
    0 0  22px -6px    rgba(var(--accent, 94,224,203), 0.20); }
  50% { box-shadow:
    inset 0  1px 0    rgba(255,255,255,0.10),
    inset 0 -1px 0    rgba(0,0,0,0.30),
    inset 1px 0 0     rgba(255,255,255,0.04),
    inset -1px 0 0    rgba(0,0,0,0.18),
    0 4px 24px -6px   rgba(0,0,0,0.60),
    0 0   0   1px     rgba(var(--accent, 94,224,203), 0.28),
    0 0  32px -4px    rgba(var(--accent, 94,224,203), 0.32); }
}
.topic-btn:nth-child(1) { animation-delay:  0.00s; }
.topic-btn:nth-child(2) { animation-delay: -1.20s; }
.topic-btn:nth-child(3) { animation-delay: -2.40s; }
.topic-btn:nth-child(4) { animation-delay: -3.60s; }
.topic-btn:nth-child(5) { animation-delay: -4.80s; }

/* Cursor-aware radial highlight — ::after */
.topic-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent, 94,224,203), 0.13) 0%,
    transparent 62%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 0;
}

/* Conic border sweep — ::before */
@property --topic-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.topic-btn::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: conic-gradient(
    from var(--topic-angle, 0deg),
    transparent                              50%,
    rgba(var(--accent, 94,224,203), 0.55)   68%,
    rgba(255,255,255,0.22)                   73%,
    rgba(var(--accent, 94,224,203), 0.35)   78%,
    transparent                             100%
  );
  pointer-events: none;
  /* Visible at rest at low opacity — discovery sweep activates fully on hover */
  opacity: 0.20;
  transition: opacity 380ms ease;
  z-index: -1;
  clip-path: inset(0 round 20px);
}

/* ── Hover state ── */
.topic-btn:hover {
  transform: translateY(-5px) scale(1.022);
  border-color: rgba(var(--accent, 94,224,203), 0.35);
  filter: brightness(1.06);
  box-shadow:
    inset 0  1px 0    rgba(255,255,255,0.16),
    inset 0 -1px 0    rgba(0,0,0,0.35),
    inset 1px 0 0     rgba(255,255,255,0.06),
    inset -1px 0 0    rgba(0,0,0,0.22),
    0 18px 48px -14px rgba(0,0,0,0.70),
    0  0   0   1px    rgba(var(--accent, 94,224,203), 0.32),
    0  0  52px -8px   rgba(var(--accent, 94,224,203), 0.38),
    0  0  20px -6px   rgba(var(--accent, 94,224,203), 0.22);
}
.topic-btn:hover::after  { opacity: 1; }
.topic-btn:hover::before {
  opacity: 1;
  animation: topicConicSweep 2.8s linear infinite;
}

@keyframes topicConicSweep {
  from { --topic-angle:   0deg; }
  to   { --topic-angle: 360deg; }
}

/* Active */
.topic-btn:active {
  transform: translateY(-2px) scale(1.010);
  filter: brightness(0.97);
  transition-duration: 90ms;
}

/* Focus */
.topic-btn:focus-visible {
  outline: 2px solid rgba(var(--accent, 94,224,203), 0.80);
  outline-offset: 3px;
}

/* ── Ripple (JS-injected) ── */
@keyframes topicRipple {
  0%   { transform: scale(0);   opacity: 0.45; }
  100% { transform: scale(4.2); opacity: 0;    }
}
.topic-ripple {
  position: absolute;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(var(--accent, 94,224,203), 0.28);
  pointer-events: none;
  z-index: 1;
  animation: topicRipple 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Icon ── */
.topic-btn-icon {
  width: 32px; height: 32px;
  opacity: 1;
  color: rgba(255,255,255,0.90);
  /* Accent-tinted halo at rest — each icon feels alive */
  filter:
    drop-shadow(0 1px 4px rgba(0,0,0,0.35))
    drop-shadow(0 0 12px rgba(var(--accent, 94,224,203), 0.25));
  animation: topicIconSway 7.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform;
  transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 260ms ease;
  position: relative;
  z-index: 1;
}
.topic-btn:nth-child(1) .topic-btn-icon { animation-delay:  0.00s; }
.topic-btn:nth-child(2) .topic-btn-icon { animation-delay: -1.44s; }
.topic-btn:nth-child(3) .topic-btn-icon { animation-delay: -2.88s; }
.topic-btn:nth-child(4) .topic-btn-icon { animation-delay: -4.32s; }
.topic-btn:nth-child(5) .topic-btn-icon { animation-delay: -5.76s; }

@keyframes topicIconSway {
  0%   { transform: translateY(0)      rotate(0deg);    }
  25%  { transform: translateY(-2.5px) rotate(-1.6deg); }
  50%  { transform: translateY(0)      rotate(0deg);    }
  75%  { transform: translateY(1.5px)  rotate(1.2deg);  }
  100% { transform: translateY(0)      rotate(0deg);    }
}

.topic-btn:hover .topic-btn-icon {
  transform: scale(1.12) translateY(-1px);
  filter:
    drop-shadow(0 0 10px rgba(var(--accent, 94,224,203), 0.70))
    drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  animation: none;
}

/* ── Button name ── */
.topic-btn-name {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.022em;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 4px rgba(0,0,0,0.40);
  line-height: 1.2;
  position: relative;
  z-index: 1;
  transition: color 220ms ease;
}
.topic-btn:hover .topic-btn-name {
  color: #fff;
  text-shadow:
    0 0 18px rgba(var(--accent, 94,224,203), 0.55),
    0 1px 4px rgba(0,0,0,0.40);
}

/* ── Count pill ── */
.topic-btn-count {
  font-family: var(--font-mono);
  font-size: 0.575rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  background: rgba(var(--accent, 94,224,203), 0.09);
  border: 1px solid rgba(var(--accent, 94,224,203), 0.18);
  border-radius: var(--radius-pill);
  padding: 0.12em 0.65em;
  line-height: 1.7;
  pointer-events: none;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease 80ms, transform 280ms ease 80ms;
}
.topic-btn:hover .topic-btn-count {
  opacity: 1;
  transform: translateY(0);
  color: rgba(var(--accent, 94,224,203), 0.80);
}

/* ── Reduced motion guard ── */
@media (prefers-reduced-motion: reduce) {
  .topicsband::before { animation: none !important; }
  .topic-btn-icon     { animation: none !important; }
  .topic-btn {
    animation: none !important;   /* kills topicBreath */
    transition: box-shadow 200ms ease, border-color 200ms ease !important;
    will-change: auto !important;
  }
  .topic-btn:hover    { transform: none !important; filter: none !important; }
  /* keep conic sweep faintly visible at rest but no spin — freeze it */
  .topic-btn::before  { animation: none !important; opacity: 0.15 !important; }
  .topic-btn::after   { display: none !important; }
  .topic-btn-count    { opacity: 1 !important; transform: none !important; transition: none !important; }
  .topic-ripple       { display: none !important; }
}

/* ============================================================
   POLISH LAYER 3 — GETTING STARTED + WALLETS
   Appended 2026-05-09
   ============================================================ */

/* ── Step cards: deeper lift + per-color glow on hover ── */
.gs-card--teal:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 56px -20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(112,199,186,0.34),
    0 0 54px rgba(112,199,186,0.18),
    0 0 88px rgba(112,199,186,0.08);
}
.gs-card--blue:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 56px -20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(111,168,224,0.34),
    0 0 54px rgba(111,168,224,0.20),
    0 0 88px rgba(111,168,224,0.09);
}
.gs-card--green:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 56px -20px rgba(0,0,0,0.55),
    0 0 0 1px rgba(167,232,156,0.28),
    0 0 54px rgba(167,232,156,0.16),
    0 0 88px rgba(167,232,156,0.07);
}

/* Per-color cursor-aware spotlight radials */
.gs-card--teal::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(112,199,186,0.16), transparent 58%);
}
.gs-card--blue::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(111,168,224,0.16), transparent 58%);
}
.gs-card--green::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(167,232,156,0.13), transparent 58%);
}

/* ── Number badge: refined breathing + halo expands on card hover ── */
.gs-card-num-wrap {
  transition: box-shadow 480ms var(--ease-out-elegant), transform 320ms var(--ease-out-elegant);
  animation: badgePulseGS 5.4s ease-in-out infinite;
  will-change: box-shadow;
}
@keyframes badgePulseGS {
  0%, 100% { box-shadow: 0 0 0 0px rgba(112,199,186,0.0), 0 0 10px rgba(112,199,186,0.18); }
  50%      { box-shadow: 0 0 0 4px rgba(112,199,186,0.07), 0 0 22px rgba(112,199,186,0.38); }
}
.gs-card-num-wrap--blue {
  animation-name: badgePulseGSBlue;
  animation-delay: -1.8s;
}
@keyframes badgePulseGSBlue {
  0%, 100% { box-shadow: 0 0 0 0px rgba(111,168,224,0.0), 0 0 10px rgba(111,168,224,0.18); }
  50%      { box-shadow: 0 0 0 4px rgba(111,168,224,0.07), 0 0 22px rgba(111,168,224,0.42); }
}
.gs-card-num-wrap--green {
  animation-name: badgePulseGSGreen;
  animation-delay: -3.6s;
}
@keyframes badgePulseGSGreen {
  0%, 100% { box-shadow: 0 0 0 0px rgba(167,232,156,0.0), 0 0 10px rgba(167,232,156,0.16); }
  50%      { box-shadow: 0 0 0 4px rgba(167,232,156,0.06), 0 0 22px rgba(167,232,156,0.36); }
}
.gs-card--teal:hover .gs-card-num-wrap {
  box-shadow: 0 0 0 7px rgba(112,199,186,0.09), 0 0 30px rgba(112,199,186,0.48) !important;
  transform: scale(1.06);
}
.gs-card--blue:hover .gs-card-num-wrap {
  box-shadow: 0 0 0 7px rgba(111,168,224,0.09), 0 0 30px rgba(111,168,224,0.52) !important;
  transform: scale(1.06);
}
.gs-card--green:hover .gs-card-num-wrap {
  box-shadow: 0 0 0 7px rgba(167,232,156,0.07), 0 0 30px rgba(167,232,156,0.42) !important;
  transform: scale(1.06);
}

/* gs-num digit: inner glow brightens on hover */
.gs-num {
  text-shadow: 0 0 10px currentColor;
  transition: text-shadow 380ms var(--ease-out-elegant);
}
.gs-card:hover .gs-num {
  text-shadow: 0 0 18px currentColor, 0 0 38px currentColor;
}

/* ── Step illustrations: ambient motion at rest ── */
.gs-card--teal .gs-card-illo svg {
  animation: gsWalletBob 5.0s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}
@keyframes gsWalletBob {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-4px); }
}

.gs-card--blue .gs-card-illo svg {
  animation: gsCoinOrbit 7.0s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes gsCoinOrbit {
  0%, 100% { transform: rotate(-2deg) scale(1.00); }
  50%      { transform: rotate(2deg)  scale(1.05); }
}

.gs-card--green .gs-card-illo svg {
  animation: gsArrowNudge 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes gsArrowNudge {
  0%, 100% { transform: translateX(0px); }
  55%      { transform: translateX(3px); }
}

/* Scale + glow on card hover (pauses idle animation) */
.gs-card:hover .gs-card-illo svg {
  animation-play-state: paused;
  transform: scale(1.10) !important;
  filter: drop-shadow(0 0 14px rgba(112,199,186,0.30)) !important;
  transition: transform 480ms var(--ease-out-elegant),
              filter  480ms var(--ease-out-elegant);
}
.gs-card--blue:hover .gs-card-illo svg {
  filter: drop-shadow(0 0 14px rgba(111,168,224,0.40)) !important;
}
.gs-card--green:hover .gs-card-illo svg {
  filter: drop-shadow(0 0 14px rgba(167,232,156,0.32)) !important;
}

/* ── CTAs: refined gloss sweep ── */
.gs-card-cta::after {
  width: 42%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.12) 25%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.12) 75%,
    transparent 100%);
}
@keyframes shineSweepCTA {
  0%   { transform: translateX(-145%) skewX(-18deg); }
  100% { transform: translateX(350%)  skewX(-18deg); }
}
.gs-card-cta:hover::after {
  animation: shineSweepCTA 820ms var(--ease-out-elegant) forwards;
}

/* ── Connector beams: two short glowing beams sitting only in the gaps ── */
/* Gap value mirrors .gs-steps gap: clamp(1rem, 2.5vw, 1.75rem)           */
@media (min-width: 860px) {
  .gs-steps {
    position: relative;
  }
  /* Shared beam shape */
  .gs-steps::before,
  .gs-steps::after {
    content: '';
    position: absolute;
    top: 33px;
    height: 3px;
    border-radius: 99px;
    pointer-events: none;
    z-index: 2;
    transform: scaleX(0);
    opacity: 0;
  }
  /* Gap 1: between card 1 and card 2 (centered at 33.333%) */
  .gs-steps::before {
    left:  calc(33.333% - clamp(0.5rem, 1.25vw, 0.875rem));
    right: calc(66.667% - clamp(0.5rem, 1.25vw, 0.875rem));
    transform-origin: left center;
    background: linear-gradient(
      90deg,
      rgba(112,199,186,0.00)  0%,
      rgba(112,199,186,0.65) 30%,
      rgba(111,168,224,0.70) 70%,
      rgba(111,168,224,0.00) 100%
    );
    filter: blur(0px) drop-shadow(0 0 6px rgba(112,199,186,0.55))
                      drop-shadow(0 0 14px rgba(111,168,224,0.30));
    animation:
      gsConnectorReveal 1.0s 0.9s var(--ease-out-elegant) forwards,
      gsConnectorFlow   3.2s 2.1s ease-in-out infinite;
  }
  /* Gap 2: between card 2 and card 3 (centered at 66.667%) */
  .gs-steps::after {
    left:  calc(66.667% - clamp(0.5rem, 1.25vw, 0.875rem));
    right: calc(33.333% - clamp(0.5rem, 1.25vw, 0.875rem));
    transform-origin: left center;
    background: linear-gradient(
      90deg,
      rgba(111,168,224,0.00)  0%,
      rgba(111,168,224,0.65) 30%,
      rgba(167,232,156,0.68) 70%,
      rgba(167,232,156,0.00) 100%
    );
    filter: blur(0px) drop-shadow(0 0 6px rgba(111,168,224,0.50))
                      drop-shadow(0 0 14px rgba(167,232,156,0.30));
    /* 150ms stagger after the first beam */
    animation:
      gsConnectorReveal 1.0s 1.05s var(--ease-out-elegant) forwards,
      gsConnectorFlow   3.2s 2.25s ease-in-out infinite;
  }
}
@keyframes gsConnectorReveal {
  0%   { opacity: 0; transform: scaleX(0); }
  18%  { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}
/* Slow energy-pulse along the beam */
@keyframes gsConnectorFlow {
  0%   { filter: blur(0px) drop-shadow(0 0 5px rgba(112,199,186,0.45))
                            drop-shadow(0 0 12px rgba(111,168,224,0.25)); }
  50%  { filter: blur(0px) drop-shadow(0 0 9px rgba(112,199,186,0.75))
                            drop-shadow(0 0 22px rgba(111,168,224,0.50))
                            drop-shadow(0 0 36px rgba(167,232,156,0.25)); }
  100% { filter: blur(0px) drop-shadow(0 0 5px rgba(112,199,186,0.45))
                            drop-shadow(0 0 12px rgba(111,168,224,0.25)); }
}

/* ── walletband label: refined mono typography with leading rule ── */
.walletband-label {
  display: inline-flex;
  align-items: center;
  gap: 0.60rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 1.25rem;
}
.walletband-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(112,199,186,0.85), rgba(111,168,224,0.60));
  flex-shrink: 0;
}

/* ── Hot wallet: warm ambient glow at rest ── */
.wallet-card--hot {
  box-shadow:
    0 4px 20px -6px rgba(0,0,0,0.30),
    0 0 0 1px rgba(251,146,60,0.14),
    0 0 32px rgba(251,146,60,0.10);
  transition: transform 360ms var(--ease-out-elegant),
              box-shadow 480ms var(--ease-out-elegant),
              border-color var(--transition-glam);
}
.wallet-card--hot:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 50px -14px rgba(0,0,0,0.50),
    0 0 0 1px rgba(251,146,60,0.32),
    0 0 54px rgba(251,146,60,0.24),
    0 0 84px rgba(251,191,36,0.10);
}

/* Flame: flicker with micro-scale variation */
.wallet-card--hot .wallet-card-illo svg {
  animation: gsFlickerFlame 2.6s ease-in-out infinite !important;
  transform-origin: center bottom;
}
@keyframes gsFlickerFlame {
  0%   { filter: drop-shadow(0 0 5px rgba(251,146,60,0.45)) drop-shadow(0 0 10px rgba(251,146,60,0.20));
         transform: scaleY(1.00) rotate(-0.5deg); }
  22%  { filter: drop-shadow(0 0 9px rgba(251,146,60,0.68)) drop-shadow(0 0 20px rgba(251,191,36,0.28));
         transform: scaleY(1.04) rotate(0.6deg); }
  47%  { filter: drop-shadow(0 0 6px rgba(251,146,60,0.52)) drop-shadow(0 0 14px rgba(251,146,60,0.22));
         transform: scaleY(0.97) rotate(-0.4deg); }
  70%  { filter: drop-shadow(0 0 11px rgba(251,191,36,0.65)) drop-shadow(0 0 22px rgba(251,146,60,0.28));
         transform: scaleY(1.06) rotate(0.9deg); }
  100% { filter: drop-shadow(0 0 5px rgba(251,146,60,0.45)) drop-shadow(0 0 10px rgba(251,146,60,0.20));
         transform: scaleY(1.00) rotate(-0.5deg); }
}

/* ── Cold wallet: cool ambient glow at rest ── */
.wallet-card--cold {
  box-shadow:
    0 4px 20px -6px rgba(0,0,0,0.30),
    0 0 0 1px rgba(147,197,253,0.12),
    0 0 30px rgba(111,168,224,0.09);
  transition: transform 360ms var(--ease-out-elegant),
              box-shadow 480ms var(--ease-out-elegant),
              border-color var(--transition-glam);
}
.wallet-card--cold:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 50px -14px rgba(0,0,0,0.50),
    0 0 0 1px rgba(147,197,253,0.30),
    0 0 54px rgba(111,168,224,0.24),
    0 0 84px rgba(167,139,250,0.09);
}

/* Snowflake: slow rotation */
.wallet-card--cold .wallet-card-illo svg {
  animation: gsSnowSpin 14s linear infinite !important;
  transform-origin: center center;
}
@keyframes gsSnowSpin {
  from { transform: rotate(0deg);   filter: drop-shadow(0 0 6px rgba(147,197,253,0.35)); }
  50%  { transform: rotate(180deg); filter: drop-shadow(0 0 14px rgba(147,197,253,0.55)); }
  to   { transform: rotate(360deg); filter: drop-shadow(0 0 6px rgba(147,197,253,0.35)); }
}

/* ── Wallet card: 3D tilt layers (transform injected by JS) ── */
.wallet-card {
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}
.wallet-card-illo,
.wallet-card-title {
  transition: transform 340ms var(--ease-out-elegant);
}
.wallet-card:hover .wallet-card-illo { transform: translateZ(16px) scale(1.10); }
.wallet-card:hover .wallet-card-title { transform: translateZ(8px); }
.wallet-card--hot:hover  .wallet-card-link { color: #FBBF24; gap: 0.65rem; }
.wallet-card--cold:hover .wallet-card-link { color: #93C5FD; gap: 0.65rem; }

/* ── Reduced motion guard — GS + Wallets ── */
@media (prefers-reduced-motion: reduce) {
  .gs-card--teal .gs-card-illo svg,
  .gs-card--blue .gs-card-illo svg,
  .gs-card--green .gs-card-illo svg,
  .wallet-card--hot .wallet-card-illo svg,
  .wallet-card--cold .wallet-card-illo svg,
  .gs-card-num-wrap {
    animation: none !important;
    transition: none !important;
  }
  .gs-card:hover .gs-card-illo svg,
  .wallet-card:hover .wallet-card-illo svg {
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .gs-steps::before,
  .gs-steps::after {
    opacity: 0.25 !important;
    transform: scaleX(1) !important;
    animation: none !important;
    filter: none !important;
  }
  .wallet-card--hot,
  .wallet-card--cold { box-shadow: 0 4px 20px -6px rgba(0,0,0,0.30); }
  .wallet-card:hover .wallet-card-illo,
  .wallet-card:hover .wallet-card-title { transform: none !important; }
}


/* ============================================================
   POLISH LAYER 3 — TOOLS + SHARE + FOOTER
   Appended 2026-05-09 under KF1 oversight
   ============================================================ */

/* New keyframes */
@keyframes illoBreath {
  0%, 100% { transform: scale(1) translateY(0); opacity: 1; }
  50%      { transform: scale(1.04) translateY(-1.5px); opacity: 0.90; }
}
@keyframes illoBreathAlt {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.03) translateY(-2px); }
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
@keyframes checkmarkDraw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}
@keyframes shareGlowDot {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(112,199,186,0.55); }
  50%      { box-shadow: 0 0 10px 3px rgba(112,199,186,0.90), 0 0 20px 6px rgba(112,199,186,0.30); }
}
@keyframes redditBlink {
  0%, 80%, 100% { opacity: 1; }
  86%           { opacity: 0.15; }
  93%           { opacity: 0.85; }
}
@keyframes telegramFly {
  0%   { transform: translate(0, 0);       opacity: 1; }
  55%  { transform: translate(7px, -6px);  opacity: 0; }
  56%  { transform: translate(-6px, 5px);  opacity: 0; }
  100% { transform: translate(0, 0);       opacity: 1; }
}
@keyframes logoTealPulse3 {
  0%, 100% { text-shadow: 0 0 8px rgba(112,199,186,0.28); }
  50%      { text-shadow: 0 0 20px rgba(112,199,186,0.65), 0 0 36px rgba(112,199,186,0.18); }
}

/* ── Tool card illustrations: breathing at rest (scale-based, staggered) ── */
.tool-card-illo {
  transition: transform 540ms var(--ease-out-elegant), filter var(--transition-glam);
  will-change: transform, filter;
  position: relative;
  z-index: 1;
}
.tool-card-illo svg {
  animation: illoBreath 5.8s ease-in-out infinite;
  will-change: transform;
}
.tool-card--blue .tool-card-illo svg {
  animation: illoBreathAlt 6.4s ease-in-out infinite;
  animation-delay: -2.1s;
}
.tool-card--violet .tool-card-illo svg {
  animation: illoBreath 7.2s ease-in-out infinite;
  animation-delay: -3.6s;
}
/* Rest-state: per-card accent drop-shadow halo on illo */
.tool-card--teal   .tool-card-illo { filter: drop-shadow(0 0 10px rgba(112,199,186,0.28)); }
.tool-card--blue   .tool-card-illo { filter: drop-shadow(0 0 10px rgba(111,168,224,0.28)); }
.tool-card--violet .tool-card-illo { filter: drop-shadow(0 0 10px rgba(167,139,250,0.28)); }

/* Hover: illo lift + bloom */
.tool-card:hover .tool-card-illo {
  transform: scale(1.10) rotate(-1.5deg);
}
.tool-card--teal:hover   .tool-card-illo { filter: drop-shadow(0 0 18px rgba(112,199,186,0.75)) drop-shadow(0 0 36px rgba(112,199,186,0.30)); }
.tool-card--blue:hover   .tool-card-illo { filter: drop-shadow(0 0 18px rgba(111,168,224,0.80)) drop-shadow(0 0 36px rgba(111,168,224,0.32)); }
.tool-card--violet:hover .tool-card-illo { filter: drop-shadow(0 0 18px rgba(167,139,250,0.80)) drop-shadow(0 0 36px rgba(167,139,250,0.32)); }

/* Hover: stop breathing animation, freeze transform */
.tool-card:hover .tool-card-illo svg {
  animation: none;
  transform: scale(1.04) rotate(-0.5deg);
  transition: transform 380ms var(--ease-out-elegant);
}

/* ── Icon energy pulse ring (CSS-only, expands + fades on hover) ── */
.tool-card-illo::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--tool-accent, 94,224,203), 0.00);
  pointer-events: none;
  transition: none;
}
.tool-card:hover .tool-card-illo::after {
  animation: illoRingPulse 1.4s ease-out infinite;
  border-color: rgba(var(--tool-accent, 94,224,203), 0.60);
}
@keyframes illoRingPulse {
  0%   { transform: scale(0.85); opacity: 0.80; border-color: rgba(var(--tool-accent, 94,224,203), 0.60); }
  100% { transform: scale(1.55); opacity: 0.00; border-color: rgba(var(--tool-accent, 94,224,203), 0.00); }
}

/* ── Tool card name accent on hover ── */
.tool-card-name { transition: color 280ms var(--ease-out-elegant); }
.tool-card--teal:hover   .tool-card-name { color: var(--teal-bright); }
.tool-card--blue:hover   .tool-card-name { color: #93C5FD; }
.tool-card--violet:hover .tool-card-name { color: #C4B5FD; }

/* ── Price Watch: peak dot pulse ── */
.chart-peak-dot {
  animation: peakDotPulse 1.6s ease-in-out infinite;
  transform-origin: 34px 18px;
  transform-box: fill-box;
}
@keyframes peakDotPulse {
  0%,  100% { transform: scale(1);    opacity: 0.97; }
  50%        { transform: scale(1.30); opacity: 0.65; }
}

/* ── AI orb: ring slow rotation (ring only, not orb) ── */
.orb-ring {
  animation: orbRingSpin 8s linear infinite;
  transform-origin: 28px 24px;
  transform-box: fill-box;
}
@keyframes orbRingSpin {
  from { transform: rotate(-20deg); }
  to   { transform: rotate(340deg); }
}

/* ── Connecting beam behind tools grid ── */
.tools-grid {
  position: relative;
}
.tools-grid::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 10%;
  right: 10%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(94,224,203,0.12) 20%,
    rgba(100,160,240,0.14) 50%,
    rgba(160,120,255,0.12) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px) { .tools-grid::before { display: none; } }

/* ── Share band: subtle teal/blue gradient wash ── */
.shareband {
  background:
    radial-gradient(70% 130% at 0% 50%,   rgba(112,199,186,0.07), transparent 55%),
    radial-gradient(55% 110% at 100% 50%, rgba(111,168,224,0.05), transparent 55%),
    linear-gradient(180deg, var(--surface-mid) 0%, var(--void) 100%);
  border-block: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* ── Share label: mono + glowing dot ── */
.shareband-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-right: 0.25rem;
}
.shareband-label::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: shareGlowDot 3.2s ease-in-out infinite;
}
.shareband-inner { position: relative; z-index: 1; }

/* ── Share buttons: multi-layer shadow + shine sweep ── */
.sbtn {
  position: relative;
  overflow: hidden;
  transition:
    background   var(--transition-glam),
    border-color var(--transition-glam),
    color        var(--transition-glam),
    box-shadow   var(--transition-glam),
    transform    220ms var(--ease-out-soft);
}
.sbtn:hover {
  background: linear-gradient(135deg, var(--teal) 0%, #3FBFAD 100%);
  border-color: var(--teal);
  color: var(--void);
  box-shadow:
    0 0 0 1px rgba(112,199,186,0.45),
    0 0 18px rgba(112,199,186,0.32),
    0 0 40px rgba(112,199,186,0.10),
    0 6px 20px rgba(0,0,0,0.28);
  transform: translateY(-2px);
}
.sbtn:active { transform: translateY(0); }
.sbtn::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.sbtn:hover::after { animation: shineSweep 750ms var(--ease-out-elegant); }

/* X: soft teal glow on icon */
.sbtn--icon-only .sbtn-icon {
  transition: filter 320ms var(--ease-out-elegant);
}
.sbtn--icon-only:hover .sbtn-icon {
  filter: drop-shadow(0 0 7px rgba(112,199,186,0.90));
}

/* Reddit: blink on hover */
a[aria-label="Share on Reddit"]:hover .sbtn-icon {
  animation: redditBlink 1.3s ease-in-out 1;
}

/* Telegram: paper-plane fly-out */
a[aria-label="Share on Telegram"] .sbtn-icon {
  display: inline-block;
  will-change: transform;
}
a[aria-label="Share on Telegram"]:hover .sbtn-icon {
  animation: telegramFly 580ms var(--ease-out-elegant) forwards;
}

/* Copy link: clipboard to checkmark morph */
#copyLinkHomepage .sbtn-icon {
  transition: opacity 160ms ease, transform 160ms var(--ease-out-soft);
}
#copyLinkHomepage.copied .sbtn-icon {
  opacity: 0;
  transform: scale(0.65);
}
#copyLinkHomepage .sbtn-icon-check {
  position: absolute;
  width: 15px; height: 15px;
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 180ms ease 100ms, transform 200ms var(--ease-out-elegant) 100ms;
  pointer-events: none;
}
#copyLinkHomepage.copied .sbtn-icon-check {
  opacity: 1;
  transform: scale(1);
}
#copyLinkHomepage.copied {
  background: linear-gradient(135deg, var(--teal) 0%, #3FBFAD 100%);
  border-color: var(--teal);
  color: var(--void);
}

/* Refined copy toast */
.copy-toast {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(10,20,30,0.97);
  border: 1px solid rgba(112,199,186,0.30);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.875rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.42), 0 0 18px rgba(112,199,186,0.10);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.copy-toast.visible {
  display: inline-flex;
  animation: toastSlideIn 250ms var(--ease-out-elegant) both;
}
.copy-toast.hiding {
  animation: toastSlideOut 200ms ease both;
}
.copy-toast-check {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--teal);
}
.copy-toast-check polyline {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: checkmarkDraw 300ms 80ms var(--ease-out-elegant) both;
}

/* ── Footer column headings: mono-caps + teal accent underline ── */
.footer-col-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.125rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid rgba(112,199,186,0.16);
  position: relative;
}
.footer-col-heading::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 18px; height: 1px;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(112,199,186,0.55);
}

/* ── Footer links: teal slide-in underline on hover ── */
.footer-col-list a {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  transition: color var(--transition-glam);
}
.footer-col-list a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms var(--ease-out-elegant);
}
.footer-col-list a:hover { color: var(--teal-bright); }
.footer-col-list a:hover::after { transform: scaleX(1); }

/* ── Disclaimer block: inner border + teal left kicker ── */
.footer-disclaimer-block {
  background:
    linear-gradient(135deg, rgba(112,199,186,0.032) 0%, rgba(111,168,224,0.018) 100%),
    rgba(255,255,255,0.010);
  border: 1px solid rgba(112,199,186,0.13);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 4px 20px rgba(0,0,0,0.18);
  padding: 1.375rem 1.5rem 1.375rem 1.75rem;
  position: relative;
  overflow: hidden;
}
.footer-disclaimer-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--teal) 0%, rgba(111,168,224,0.60) 100%);
  opacity: 0.55;
}
.footer-disclaimer-block::after {
  content: '';
  position: absolute;
  top: 0; left: 3px; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(112,199,186,0.28), rgba(112,199,186,0.04) 60%, transparent);
}

/* ── Footer logo FAQ span: glow pulse ── */
.footer-logo span {
  color: var(--teal);
  animation: logoTealPulse3 5.2s ease-in-out infinite;
}

/* ── Footer attribution links: slide-in underline ── */
.footer-attribution a {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
  color: var(--teal);
  transition: color var(--transition-glam);
  text-decoration: none;
}
.footer-attribution a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 290ms var(--ease-out-elegant);
}
.footer-attribution a:hover { color: var(--teal-bright); text-decoration: none; }
.footer-attribution a:hover::after { transform: scaleX(1); }

/* ── Reduced motion guard: tools + share + footer ── */
@media (prefers-reduced-motion: reduce) {
  /* Tools section */
  .toolsband::before              { animation: none !important; }
  .tool-card                      { animation: none !important; }
  .tool-card::before              { animation: none !important; opacity: 0.15 !important; }
  .tool-card:hover::before        { animation: none !important; opacity: 0.50 !important; }
  .tool-card-illo svg             { animation: none !important; }
  .tool-card:hover .tool-card-illo::after { animation: none !important; }
  /* SVG internal animations (peak pulse, ring rotation) */
  .tool-card-illo svg *           { animation: none !important; }
  /* Share + footer */
  .shareband-label::before        { animation: none !important; }
  .footer-logo span               { animation: none !important; }
  .sbtn::after                    { display: none !important; }
  .sbtn:hover::after              { animation: none !important; }
  a[aria-label="Share on Reddit"]:hover .sbtn-icon   { animation: none !important; }
  a[aria-label="Share on Telegram"]:hover .sbtn-icon { animation: none !important; }
  .copy-toast.visible             { animation: none !important; }
  .copy-toast-check polyline      { animation: none !important; stroke-dashoffset: 0 !important; }
  #copyLinkHomepage .sbtn-icon,
  #copyLinkHomepage .sbtn-icon-check { transition: none !important; }
}

/* ── HARD OVERRIDE: nuke any gradient/translucent fill on the search bar ── */
.hero-search-form,
.hero-search-form:hover,
.hero-search-form:focus,
.hero-search-form:focus-within {
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hero-search-form { background: #0B1218 !important; }
.hero-search-form:focus-within { background: #0E1620 !important; }
.hero-search-form::before,
.hero-search-form::after {
  background-image: none !important;
}
.hero-search-form:not(:focus-within)::before,
.hero-search-form:not(:focus-within)::after {
  opacity: 0 !important;
}

/* ===== END PROTOTYPE STYLES.CSS APPEND ===== */

/* ── Submit a Question CTA band — sits above footer on home ──────────────── */
.submit-cta-band {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(112, 199, 186, 0.14);
  border-bottom: 1px solid rgba(112, 199, 186, 0.14);
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(94, 224, 203, 0.08), transparent 70%),
    rgba(11, 18, 24, 0.55);
}
.submit-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.submit-cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.submit-cta-desc {
  font-size: 1.05rem;
  color: var(--ink-mid, #B5C2CE);
  max-width: 56ch;
  margin: 0;
}
.submit-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--teal);
  border-radius: 100px;
  padding: 14px 32px;
  margin-top: 0.5rem;
  text-decoration: none;
  box-shadow:
    0 0 0 4px rgba(112, 199, 186, 0.10),
    0 0 28px rgba(112, 199, 186, 0.30),
    0 8px 24px rgba(0, 0, 0, 0.40);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.submit-cta-btn:hover {
  background: var(--teal-bright);
  box-shadow:
    0 0 0 5px rgba(112, 199, 186, 0.16),
    0 0 40px rgba(112, 199, 186, 0.50),
    0 10px 28px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .submit-cta-btn { transition: none; }
  .submit-cta-btn:hover { transform: none; }
}

/* ── Premium testimonial / pull-quote card — replaces old .pqband-quote ──── */
.pqband {
  padding: clamp(3rem, 6vw, 5rem) 0;
  position: relative;
}
.pqcard {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  padding: 3rem clamp(2rem, 4vw, 3.25rem) 3rem clamp(3.5rem, 6vw, 5rem);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 8%),
    linear-gradient(160deg, rgba(94,224,203,0.08) 0%, rgba(11,18,24,0.92) 60%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(156, 231, 218, 0.18),
    inset 0 0 0 1px rgba(94, 224, 203, 0.22),
    0 0 0 1px rgba(94, 224, 203, 0.10),
    0 0 48px rgba(94, 224, 203, 0.18),
    0 18px 60px rgba(0, 0, 0, 0.55);
  animation: pqcard-breathe 6s ease-in-out infinite;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pqcard:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(156, 231, 218, 0.28),
    inset 0 0 0 1px rgba(94, 224, 203, 0.40),
    0 0 0 1px rgba(94, 224, 203, 0.20),
    0 0 72px rgba(94, 224, 203, 0.36),
    0 22px 72px rgba(0, 0, 0, 0.60);
}
@keyframes pqcard-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(156, 231, 218, 0.18),
      inset 0 0 0 1px rgba(94, 224, 203, 0.22),
      0 0 0 1px rgba(94, 224, 203, 0.10),
      0 0 48px rgba(94, 224, 203, 0.18),
      0 18px 60px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(156, 231, 218, 0.24),
      inset 0 0 0 1px rgba(94, 224, 203, 0.30),
      0 0 0 1px rgba(94, 224, 203, 0.14),
      0 0 64px rgba(94, 224, 203, 0.30),
      0 18px 60px rgba(0, 0, 0, 0.55);
  }
}

.pqcard-mark {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #9CE7DA 0%, #5EE0CB 50%, #70C7BA 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(94, 224, 203, 0.50));
  pointer-events: none;
  user-select: none;
  animation: pqcard-mark-breathe 6s ease-in-out infinite;
}
.pqcard-mark--open {
  top: -0.35em;
  left: clamp(0.75rem, 1.5vw, 1.5rem);
}
.pqcard-mark--close {
  bottom: -0.6em;
  right: clamp(0.75rem, 1.5vw, 1.5rem);
}
@keyframes pqcard-mark-breathe {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(94, 224, 203, 0.50)); }
  50%      { filter: drop-shadow(0 0 32px rgba(94, 224, 203, 0.80)); }
}

.pqcard-text {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1.4vw + 0.6rem, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin: 0;
  text-align: left;
  background: linear-gradient(135deg, #F4F8FB 0%, #C9E5DD 35%, #5EE0CB 70%, #C9D6DB 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(156, 231, 218, 0.16));
  animation: pqcard-text-breathe 6s ease-in-out infinite;
  font-style: normal;
}
@keyframes pqcard-text-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(156, 231, 218, 0.16)); }
  50%      { filter: drop-shadow(0 0 22px rgba(156, 231, 218, 0.30)); }
}

@media (prefers-reduced-motion: reduce) {
  .pqcard,
  .pqcard-mark,
  .pqcard-text { animation: none !important; transition: none !important; }
  .pqcard:hover { transform: none !important; }
}

/* ── Submit-a-Question form — premium style ─────────────────────────────── */
.submit-form {
  position: relative;
  margin: 2rem 0 2.5rem;
  padding: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.00) 8%),
    linear-gradient(160deg, rgba(94,224,203,0.06) 0%, rgba(11,18,24,0.90) 60%);
  box-shadow:
    inset 0 1px 0 rgba(156, 231, 218, 0.14),
    inset 0 0 0 1px rgba(94, 224, 203, 0.18),
    0 0 32px rgba(94, 224, 203, 0.10),
    0 12px 40px rgba(0, 0, 0, 0.45);
}
.submit-form-row {
  margin-bottom: 1.25rem;
}
.submit-form-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal, #70C7BA);
  margin-bottom: 0.5rem;
}
.submit-form-optional {
  color: var(--ink-mid, #6B7886);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.submit-form-input,
.submit-form-textarea {
  width: 100%;
  background: #0B1218;
  border: 2px solid rgba(94, 224, 203, 0.30);
  border-radius: 10px;
  color: var(--ink, #F4F8FB);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  padding: 12px 16px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.submit-form-input::placeholder,
.submit-form-textarea::placeholder {
  color: var(--ink-dim, #6B7886);
  font-style: italic;
}
.submit-form-input:focus,
.submit-form-textarea:focus {
  border-color: var(--teal-vivid, #5EE0CB);
  background: #0E1620;
  box-shadow:
    0 0 0 4px rgba(94, 224, 203, 0.15),
    0 0 28px rgba(94, 224, 203, 0.25);
}
.submit-form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}
.submit-form-input:invalid:not(:focus):not(:placeholder-shown),
.submit-form-textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: rgba(239, 95, 95, 0.55);
}
.submit-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.submit-form-btn {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--void, #0A1620);
  background: var(--teal, #70C7BA);
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow:
    0 0 0 4px rgba(112, 199, 186, 0.10),
    0 0 24px rgba(112, 199, 186, 0.30),
    0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.submit-form-btn:hover {
  background: var(--teal-bright, #92DCC8);
  box-shadow:
    0 0 0 5px rgba(112, 199, 186, 0.16),
    0 0 36px rgba(112, 199, 186, 0.50),
    0 8px 22px rgba(0, 0, 0, 0.40);
  transform: translateY(-1px);
}
.submit-form-btn:active { transform: translateY(0); }
.submit-form-note {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-mid, #6B7886);
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .submit-form-input,
  .submit-form-textarea,
  .submit-form-btn { transition: none; }
  .submit-form-btn:hover { transform: none; }
}

/* ── Submit-form result banners ──────────────────────────────────────────── */
.submit-banner {
  margin: 1.25rem 0 1.5rem;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1.5px solid transparent;
}
.submit-banner--ok {
  color: #C9F2E6;
  background: rgba(94, 224, 203, 0.10);
  border-color: rgba(94, 224, 203, 0.40);
  box-shadow: 0 0 24px rgba(94, 224, 203, 0.15);
}
.submit-banner--err {
  color: #FFD9D2;
  background: rgba(239, 95, 95, 0.10);
  border-color: rgba(239, 95, 95, 0.45);
}

/* Hide the migrated WordPress excerpt block — it duplicates the article body and
   29/249 entries have unconverted markdown leakage (escaped angle brackets, truncated
   `[!NOTE]` blocks). Fix at extraction time later if a real summary is wanted. */
.faq-entry-excerpt { display: none !important; }

/* ── 30. Site-wide left sidebar ─────────────────────────────────────────────── */
.site-main--has-sidebar {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.site-main-content { min-width: 0; }
.site-sidebar {
  position: sticky;
  top: var(--space-8);
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.site-sidebar__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-xmuted);
  margin: 0 0 var(--space-2) var(--space-2);
}
.site-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}
.site-sidebar__list a {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-base);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.site-sidebar__list a:hover {
  background: var(--color-bg-card);
  color: var(--color-link);
}
.site-sidebar__list a[aria-current="page"] {
  background: var(--color-teal-subtle);
  color: var(--color-teal-dim);
  font-weight: 600;
}
.site-sidebar__browse {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  display: block;
  padding: var(--space-1) var(--space-2);
  transition: color var(--transition-fast);
}
.site-sidebar__browse:hover { color: var(--color-link); }
@media (max-width: 860px) {
  .site-main--has-sidebar {
    grid-template-columns: 1fr;
  }
  .site-sidebar { display: none; }
}

/* ── 31. Knowledgebase / wiki page layout ───────────────────────────────────── */
.category-layout {
  display: grid;
  grid-template-columns: 220px 1fr 180px;
  grid-template-areas: "sidebar main toc";
  gap: var(--space-8);
  align-items: start;
}
.category-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: var(--space-8);
}
.wiki-main { grid-area: main; min-width: 0; }
.wiki-toc {
  grid-area: toc;
  position: sticky;
  top: var(--space-8);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
}
.wiki-toc-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-xmuted);
  margin: 0 0 var(--space-2) 0;
}
.wiki-toc-link {
  display: block;
  padding: var(--space-1) var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.wiki-toc-link:hover { color: var(--color-link); }
.wiki-toc-link.toc-active { color: var(--color-teal); border-left-color: var(--color-teal); }
.sidebar-box {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-4);
}
.sidebar-box-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-xmuted);
  margin: 0 0 var(--space-2) var(--space-2);
}
.sidebar-box-list { list-style: none; padding: 0; margin: 0; }
.sidebar-box-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-base);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-box-link:hover { background: var(--color-bg-card); color: var(--color-link); }
.sidebar-box-link-count { color: var(--color-text-xmuted); }
.sidebar-most-viewed-list { list-style: none; padding: 0; margin: 0; }
.sidebar-most-viewed-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-base);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color var(--transition-fast);
}
.sidebar-most-viewed-list a:hover { color: var(--color-link); }
.sidebar-mv-rank { font-size: 0.65rem; font-weight: 700; color: var(--color-teal-dim); min-width: 1.5em; }
.sidebar-mv-stub-note { font-size: 0.7rem; color: var(--color-text-xmuted); padding: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; }
.wiki-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.wiki-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.wiki-breadcrumb a:hover { color: var(--color-link); }
.wiki-breadcrumb-sep { color: var(--color-text-xmuted); }
.wiki-breadcrumb-current { color: var(--color-text); }
.wiki-page-title { font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-6); }
.wiki-filter-wrap { margin-bottom: var(--space-6); }
.wiki-filter-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
}
.wiki-filter-icon { width: 15px; height: 15px; color: var(--color-text-xmuted); flex-shrink: 0; }
.wiki-filter-input { flex: 1; background: none; border: none; outline: none; color: var(--color-text); font-size: 0.875rem; }
.wiki-filter-count { font-size: 0.75rem; color: var(--color-text-xmuted); }
.wiki-section { margin-bottom: var(--space-8); }
.wiki-section h2 { margin: 0 0 var(--space-3); }
.wiki-section-banner { font-size: 1.25rem; font-weight: 700; color: var(--color-teal); }
.wiki-section-banner--secondary { color: var(--color-text); }
.wiki-section-underline {
  display: block;
  height: 2px;
  background: var(--color-teal);
  width: 0;
  margin-top: 4px;
  transition: width 0.4s ease;
}
.wiki-section.is-visible .wiki-section-underline { width: 100%; }
.wiki-entry-list { list-style: none; padding: 0; margin: 0; }
.wiki-entry-list li { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
.wiki-entry-list li:last-child { border-bottom: none; }
.wiki-entry-list a { color: var(--color-text); text-decoration: none; font-size: 0.9rem; transition: color var(--transition-fast); }
.wiki-entry-list a:hover { color: var(--color-link); }
@media (max-width: 1100px) {
  .category-layout {
    grid-template-columns: 200px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wiki-toc { display: none; }
}
@media (max-width: 720px) {
  .category-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  .category-sidebar { display: none; }
}