/* ==========================================================================
   THEHUB — site.css
   Single source of truth for site-wide styling.

   Before this file existed, every page in the repo carried its own inline
   <style> block. There were two whole token systems in play — a cyan one on
   the homepage and the 137 review pages, and a purple one on the pillar,
   alternative, about and contact pages — with different backgrounds, text
   colours, container widths and navigation. This file collapses both into
   one system, on the cyan palette the THEHUB logo mark already uses.

   Structure:
     01  Tokens
     02  Legacy token aliases
     03  Reset and base
     04  Layout containers
     05  Brand lockup
     06  Navigation
     07  Buttons
     08  Badges, pills and tags
     09  Hero
     10  Section headers
     11  Cards
     12  Bento grid (homepage)
     13  Editorial prose
     14  Tables
     15  FAQ
     16  Ad slots
     17  Footer
     18  Search modal and toast
     19  Cookie banner
     20  Responsive
     21  Neon
     22  Deep field

   Class names from all three original templates are supported, so this sheet
   drops into existing pages without touching their markup.
   ========================================================================== */


/* 01  TOKENS ============================================================== */

:root {
  /* Surfaces — near-black base, three raised steps */
  --bg-base:    #0A0A0B;
  --surface-1:  #111113;
  --surface-2:  #18181B;
  --surface-3:  #1F1F23;

  /* Accent — cyan, matching the glow on the logo mark */
  --accent-cyan:   #22D3EE;
  --accent-blue:   #38BDF8;
  --accent-deep:   #0E7490;
  --accent-wash:   rgba(34, 211, 238, 0.08);
  --accent-wash-2: rgba(34, 211, 238, 0.14);

  /* Borders */
  --border-subtle:       rgba(255, 255, 255, 0.08);
  --border-strong:       rgba(255, 255, 255, 0.14);
  --border-subtle-hover: rgba(34, 211, 238, 0.40);

  /* Text */
  --text-primary:   #F4F4F5;
  --text-secondary: #A1A1AA;
  --text-muted:     #71717A;

  /* Semantic — used by the comparison matrices, not as brand colour */
  --pos:  #34D399;
  --warn: #FBBF24;
  --neg:  #F87171;

  /* Radii */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-bento: 16px;
  --radius-lg:    18px;
  --radius-pill:  9999px;

  /* Container scale — one system across every page type */
  --w-wide:  1320px;  /* grids and directory layouts */
  --w-page:  1160px;  /* standard content pages */
  --w-prose:  820px;  /* reading columns: reviews, policies */

  /* Elevation */
  --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.40);
  --shadow-lift:  0 10px 30px rgba(0, 0, 0, 0.50), 0 0 20px rgba(34, 211, 238, 0.10);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.70), 0 0 30px rgba(34, 211, 238, 0.15);

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* 02  LEGACY TOKEN ALIASES ================================================
   The pillar / alternative / about / contact pages carry inline style=""
   attributes referring to the old purple-system variable names. Pointing
   those names at the unified values turns that markup cyan on its own,
   with no per-page edits.
   ======================================================================== */

:root {
  --bg:           var(--bg-base);
  --bg2:          var(--surface-1);
  --bg-2:         var(--surface-1);
  --card:         var(--surface-2);
  --text:         var(--text-primary);
  --text-2:       var(--text-secondary);
  --text-3:       var(--text-muted);
  --muted:        var(--text-secondary);
  --line:         var(--border-subtle);
  --border:       var(--border-subtle);
  --border-2:     var(--border-strong);
  --accent:       var(--accent-cyan);
  --accent-hover: var(--accent-blue);
  --cyan:         var(--accent-cyan);
  --green:        var(--pos);
  --r:            var(--radius-md);
  --r-lg:         var(--radius-lg);
  --font:         var(--font-sans);
}


/* 03  RESET AND BASE ====================================================== */

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

/* The page background lives on html, and body is transparent.

   This matters more than it looks. .fx-field — the ambient layer motion.js
   injects, carrying the grid, aurora, scan sweep and the constellation canvas
   — sits at z-index:-1. In CSS paint order, negative z-index descendants are
   painted BEFORE the backgrounds of block-level in-flow descendants, so an
   opaque background on body covers them completely.

   With backgrounds on both html and body (as this site had), body's copy no
   longer propagates to the canvas and instead paints in body's own box, on
   top of the entire ambient layer. Measured: 4 visible field pixels in the
   page margins with body's background on, 248 with it off. Keep body
   transparent, or the ambient layer silently stops rendering everywhere. */

html {
  font-family: var(--font-sans);
  color: var(--text-primary);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34, 211, 238, 0.09), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 60%, rgba(56, 189, 248, 0.04), transparent 60%);
  background-attachment: fixed;
}

body {
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--accent-wash-2); color: var(--text-primary); }

/* One visible focus treatment sitewide. The originals had none — keyboard
   users got the browser default on some pages and nothing on others. */
:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.mono { font-family: var(--font-mono); }

.grain-overlay {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 999; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}


/* 04  LAYOUT CONTAINERS ===================================================
   Three widths, one scale. `.app-wrapper`, `.wrap` and `.max-w` were 1240px,
   1100–1320px and 860px respectively across the old templates.
   ======================================================================== */

.app-wrapper { max-width: var(--w-wide); margin: 0 auto; padding: 0 1.5rem; }
.wrap        { max-width: var(--w-page); margin: 0 auto; padding: 0 1.5rem; }
.max-w       { max-width: var(--w-prose); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.section { padding: 3rem 0; }


/* 05  BRAND LOCKUP ======================================================== */

@keyframes emblemPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(34, 211, 238, 0.40), 0 0 24px rgba(34, 211, 238, 0.15); }
  50%      { box-shadow: 0 0 22px rgba(34, 211, 238, 0.80), 0 0 40px rgba(34, 211, 238, 0.35); }
}

.brand-lockup {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(34, 211, 238, 0.22);
  padding: 5px 16px 5px 6px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.brand-lockup:hover {
  background: var(--accent-wash);
  border-color: rgba(34, 211, 238, 0.65);
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.25);
  text-decoration: none;
}
.brand-lockup .brand-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  animation: emblemPulse 3.5s ease-in-out infinite;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.brand-lockup:hover .brand-mark {
  transform: scale(1.12) rotate(360deg);
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.95));
}
.brand-lockup .brand-text {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
}
.brand-lockup .brand-text .hub-highlight {
  background: linear-gradient(135deg, #22D3EE 0%, #38BDF8 60%, #60A5FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.50));
  margin-left: 1px;
}


/* 06  NAVIGATION =========================================================
   One bar for the whole site. The floating pill from the homepage is the
   canonical form; `nav` / `.nav-inner` from the pillar pages and
   `.nav-header` from the reviews are mapped onto the same treatment so all
   three page families read as one site.
   ======================================================================== */

.navbar-fixed {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  width: calc(100% - 3rem); max-width: var(--w-page); z-index: 1000;
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: rgba(7, 11, 19, 0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lift);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.navbar-fixed:hover {
  border-color: rgba(34, 211, 238, 0.30);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.60), 0 0 25px rgba(34, 211, 238, 0.12);
}

/* Sticky bar used by the pillar / alternative / about / contact pages */
nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(4, 6, 11, 0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner {
  height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}

/* Header used by the review pages */
.nav-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2.5rem;
}

.nav-brand, .brand {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-decoration: none;
}
.nav-brand:hover, .brand:hover { text-decoration: none; }

.nav-links, .nav-links-group {
  display: flex; align-items: center; gap: 1.25rem;
  list-style: none; flex-wrap: wrap;
}
.links { display: flex; gap: 1.15rem; flex-wrap: wrap; }

.nav-link,
.nav-links a,
.links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover,
.nav-links a:hover,
.links a:hover {
  color: var(--accent-cyan);
  background: var(--accent-wash);
  text-decoration: none;
}

.nav-right-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

.search-trigger-btn {
  flex: 1; max-width: 440px; margin: 0 1.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-secondary);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.search-trigger-btn:hover {
  border-color: rgba(34, 211, 238, 0.55);
  color: var(--text-primary);
  background: var(--accent-wash);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
}
.search-btn-left { display: flex; align-items: center; gap: 0.6rem; color: var(--text-secondary); }
.search-icon { color: var(--accent-cyan); flex-shrink: 0; }

.kbd-tag {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--accent-cyan);
  border: 1px solid rgba(34, 211, 238, 0.20);
}

.breadcrumb { font-size: 0.84rem; color: var(--text-muted); padding-top: 1.25rem; }
.breadcrumb a { color: var(--text-secondary); }


/* 07  BUTTONS ============================================================ */

.btn-accent, .btn-link {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-cyan);
  color: #000;
  font-weight: 700; font-size: 0.85rem;
  padding: 0.55rem 1.25rem;
  border: none; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.btn-accent:hover, .btn-link:hover {
  background: var(--accent-blue);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.40);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-secondary-hero {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 600; font-size: 0.85rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn-secondary-hero:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  transform: translateY(-1px);
  text-decoration: none;
}

.btn-try-tool {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.8rem; font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.btn-try-tool:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: var(--accent-wash);
  text-decoration: none;
}


/* 08  BADGES, PILLS AND TAGS ============================================= */

.badge-row, .badges, .card-tag-group {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.15rem;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-wash-2);
  color: var(--accent-cyan);
  border: 1px solid rgba(34, 211, 238, 0.30);
}

.pill, .card-tag, .card-license-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}
.pill { margin-right: 0.5rem; color: var(--text-secondary); }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: var(--accent-wash-2);
  border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 600;
  color: var(--accent-cyan);
}


/* 09  HERO =============================================================== */

.hero-container {
  padding: 8.5rem 0 2.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero { position: relative; padding: 5rem 0 3rem; text-align: center; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
  width: 850px; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.18), rgba(56, 189, 248, 0.06) 42%, transparent 72%);
}
.hero > * { position: relative; }

.hero-eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.85rem;
}

.hero-kinetic-headline {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  max-width: 900px; margin-bottom: 1rem;
  text-wrap: balance;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 1.1rem 0; letter-spacing: -0.02em; text-wrap: balance; }
.hero h1 span { color: var(--accent-cyan); }

.hero-subtext, .hero-sub, .lead {
  font-size: 1.05rem; line-height: 1.55;
  color: var(--text-secondary);
  max-width: 640px; margin-left: auto; margin-right: auto;
  margin-bottom: 1.75rem;
  text-wrap: pretty;
}

.hero-cta-group {
  display: flex; align-items: center; justify-content: center;
  gap: 0.85rem; margin-bottom: 1.75rem; flex-wrap: wrap;
}

.hero-stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; width: 100%; max-width: 900px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-bento);
  padding: 1.25rem; margin-bottom: 2.5rem;
  transition: border-color 0.15s ease;
}
.hero-stats-strip:hover { border-color: var(--border-strong); }
.stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-val { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--accent-cyan); }
.stat-lbl { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

.disclosure {
  margin: 1.4rem auto 0; max-width: 760px;
  font-size: 0.85rem; color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-cyan);
  border-radius: 10px;
  padding: 0.75rem 1rem; text-align: left;
}

/* Immersive hero — full-bleed, canvas-backed. Used on the homepage. */
.hero-immersive {
  position: relative;
  isolation: isolate;
  padding: 9rem 0 3rem;
}
/* Lift the hero's content above the canvas. .hero-hud is excluded because it
   is absolutely positioned by motion.css: forcing position:relative on it
   collapsed its four corner brackets into a single cross over the headline. */
.hero-immersive > *:not(.fx-canvas):not(.hero-hud) { position: relative; z-index: 1; }

.hero-status {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: rgba(7, 11, 19, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* The hero's own search entry — a command line rather than a form field,
   which suits a directory people arrive at knowing what they want. */
.hero-command {
  display: flex; align-items: center; gap: 0.9rem;
  width: 100%; max-width: 560px;
  margin: 0 auto 1.75rem;
  padding: 0.85rem 0.85rem 0.85rem 1.15rem;
  background: rgba(7, 11, 19, 0.72);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: text; text-align: left;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.hero-command:hover, .hero-command:focus-visible {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(7, 11, 19, 0.88);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(34, 211, 238, 0.12);
}
.hero-command-prompt {
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700;
  color: var(--accent-cyan); flex: 0 0 auto;
}
.hero-command-text {
  flex: 1;
  font-family: var(--font-mono); font-size: 0.86rem;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.code-install-block {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  max-width: 540px; width: 100%; margin-bottom: 1.75rem;
  transition: border-color 0.15s ease;
}
.code-install-block:hover { border-color: var(--border-subtle-hover); }
.code-install-text { font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-primary); }
.code-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.3rem 0.65rem; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.code-copy-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.code-copy-btn.copied { background: var(--accent-wash-2); color: var(--accent-cyan); border-color: var(--accent-cyan); }


/* 10  SECTION HEADERS ==================================================== */

.section-header-quiet { margin-bottom: 1.25rem; }
.section-tag {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--accent-cyan); text-transform: uppercase; letter-spacing: 0.08em;
}
.section-title {
  font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em;
  margin-top: 0.25rem;
}
.section-readout {
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
}


/* 11  CARDS ============================================================== */

.bento-card, .card, .pair-card, .related-card {
  background-color: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-bento);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.bento-card:hover, .related-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-subtle-hover);
  box-shadow: var(--shadow-card), 0 0 15px rgba(34, 211, 238, 0.08);
}

.card      { padding: 1.75rem; margin-bottom: 1.35rem; }
.pair-card { padding: 1.6rem; margin: 1.35rem 0; }
.pair-kicker {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-cyan); margin-bottom: 0.4rem;
}
.pair-card h2 { font-size: 1.5rem; margin-bottom: 0.6rem; color: var(--text-primary); }
.fit { font-size: 0.92rem; color: var(--text-muted); }
.official-links { margin-bottom: 0.6rem; font-size: 0.85rem; }
.official-links a { color: var(--accent-cyan); border-bottom: 1px solid rgba(34, 211, 238, 0.30); text-decoration: none; }

.grid, .related-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem; margin-top: 1.1rem;
}
.related-card { display: block; padding: 1.1rem; border-radius: var(--radius-md); }
.related-card strong { display: block; color: var(--accent-cyan); margin-bottom: 0.35rem; }
.related-card span { color: var(--text-secondary); font-size: 0.88rem; }

.card-top-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
.card-tool-name { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.card-tool-desc { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; margin-bottom: 1.15rem; }
.card-action-bar {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.85rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
}
.github-stars { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }

.category-chip-card {
  padding: 1rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--text-primary);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.category-chip-card:hover { border-color: var(--accent-cyan); background: var(--accent-wash); text-decoration: none; }
.category-chip-card.active-pill { border-color: var(--accent-cyan); background: var(--accent-wash-2); }
.cat-name  { font-weight: 600; font-size: 0.88rem; }
.cat-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }


/* 12  BENTO GRID (homepage) ============================================== */

.bento-grid-featured {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 1rem; margin-bottom: 3.5rem;
}
.bento-card-large  { grid-column: span 8; padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; }
.bento-card-medium { grid-column: span 4; padding: 1.5rem;  display: flex; flex-direction: column; justify-content: space-between; }
.bento-card-small  { grid-column: span 4; padding: 1.35rem; display: flex; flex-direction: column; justify-content: space-between; }

.bento-grid-categories {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem; margin-bottom: 2rem;
}


/* 13  EDITORIAL PROSE ====================================================
   The review pages are the largest body of content on the site and had the
   thinnest styling of the three templates.
   ======================================================================== */

h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--text-primary); margin-bottom: 0.75rem;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-top: 2.5rem; margin-bottom: 0.85rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.08rem; font-weight: 700; line-height: 1.35;
  color: var(--text-primary); margin-top: 1.5rem; margin-bottom: 0.5rem;
}

/* Section rule on editorial h2s — replaces colouring every heading cyan,
   which flattened the hierarchy and left nothing for real links to signal. */
.max-w h2 { padding-top: 0.85rem; border-top: 1px solid var(--border-subtle); }
.max-w h2::before {
  content: ''; display: block;
  width: 34px; height: 2px; margin-bottom: 0.7rem;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.55);
}

p, ul, ol { color: var(--text-secondary); margin-bottom: 1.25rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }
strong, b { color: var(--text-primary); font-weight: 700; }

blockquote {
  border-left: 3px solid var(--accent-cyan);
  background: var(--surface-1);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary);
}

code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); color: var(--accent-cyan);
  padding: 0.1rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

hr { border: none; border-top: 1px solid var(--border-subtle); margin: 2.5rem 0; }

a.qh-review-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted rgba(34, 211, 238, 0.55);
  transition: color 0.15s ease, border-color 0.15s ease;
}
a.qh-review-link:hover { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); text-decoration: none; }


/* 14  TABLES ============================================================= */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
}
table, .comparison-table {
  width: 100%; border-collapse: collapse;
}

/* min-width belongs only to a table that sits inside something that can
   scroll it. Applying it to every table put a 560px floor on tables whose
   parent was a plain container, which overflowed the page by 209px at 390px
   wide. motion.js wraps any unwrapped table in .table-scroll so this holds
   everywhere. */
.table-wrap table,
.table-scroll table,
.content-table-wrap table {
  min-width: 560px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.table-scroll > table { margin: 0; }
th, td, .comparison-table th, .comparison-table td {
  padding: 0.85rem 1rem; text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}
th, .comparison-table th {
  background: var(--surface-2);
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}
td, .comparison-table td { color: var(--text-secondary); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }


/* 15  FAQ =============================================================== */

.faq-item { border-top: 1px solid var(--border-subtle); padding: 1.15rem 0; }
.faq-item h3 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--text-primary); }
.faq-item p  { color: var(--text-secondary); margin-bottom: 0; }


/* 16  AD SLOTS ===========================================================
   min-height is a hard requirement in AGENTS.md §5 — unreserved units cause
   layout shift. Do not remove it.
   ======================================================================== */

.ad-slot-container {
  min-height: 250px;
  background: var(--surface-1);
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  padding: 1.25rem; text-align: center;
  margin: 2.5rem 0;
}
.ad-slot-container span {
  display: block;
  font-size: 0.68rem; font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.5rem;
}


/* 17  FOOTER ============================================================= */

footer, .footer-quiet {
  border-top: 1px solid var(--border-subtle);
  margin-top: 4rem; padding: 2.25rem 0;
  color: var(--text-muted); font-size: 0.85rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1.25rem;
}
.footer-note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-link, footer a {
  color: var(--text-secondary); text-decoration: none;
  font-size: 0.82rem; cursor: pointer;
  transition: color 0.15s ease;
}
.footer-link:hover, footer a:hover { color: var(--accent-cyan); text-decoration: none; }


/* 18  SEARCH MODAL AND TOAST ============================================ */

.search-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4, 6, 11, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.search-modal-overlay.open { opacity: 1; pointer-events: auto; }
.search-modal-container {
  width: 90%; max-width: 640px;
  background: var(--surface-1);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-modal);
  overflow: hidden; display: flex; flex-direction: column; max-height: 75vh;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.2s ease;
}
.search-modal-overlay.open .search-modal-container { transform: translateY(0) scale(1); }
.search-modal-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(14, 20, 32, 0.6);
}
.search-modal-header input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font-sans);
  font-size: 1.05rem; font-weight: 500;
}
.search-modal-kbd {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.08); padding: 3px 8px; border-radius: 4px;
}
.search-modal-results { overflow-y: auto; max-height: 50vh; padding: 8px; }
.search-result-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md);
  text-decoration: none; color: var(--text-primary);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.search-result-item:hover, .search-result-item.active {
  background: var(--accent-wash-2);
  border-left-color: var(--accent-cyan);
  text-decoration: none;
}
.search-result-title { font-weight: 600; font-size: 0.95rem; display: block; }
.search-result-desc  { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-top: 2px; }
.search-modal-footer {
  display: flex; gap: 16px; padding: 10px 18px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(7, 11, 19, 0.9);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted);
}
.search-modal-footer kbd {
  background: rgba(255, 255, 255, 0.10); padding: 2px 5px;
  border-radius: 3px; color: var(--text-secondary);
}

.qf-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 10000;
  background: var(--surface-2);
  border: 1px solid var(--accent-cyan);
  color: var(--text-primary);
  font-family: var(--font-mono); font-size: 0.8rem;
  padding: 10px 18px; border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(34, 211, 238, 0.25);
  opacity: 0; transform: translateY(15px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.qf-toast.show { opacity: 1; transform: translateY(0); }


/* 19  COOKIE BANNER ====================================================== */

#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(7, 11, 19, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
}
#cookie-banner p { margin: 0; }
#cookie-banner a { color: var(--accent-cyan); text-decoration: none; }
#cookie-banner button {
  background: var(--accent-cyan); color: #000;
  border: none; padding: 8px 20px; border-radius: var(--radius-sm);
  font-weight: 700; cursor: pointer;
  transition: background 0.15s ease;
}
#cookie-banner button:hover { background: var(--accent-blue); }


/* 20  RESPONSIVE ========================================================= */

@media (max-width: 992px) {
  .bento-card-large, .bento-card-medium, .bento-card-small { grid-column: span 12; }
  .hero-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .search-trigger-btn { margin: 0 0.75rem; }
}

@media (max-width: 640px) {
  /* The bar carries brand + search + a nav link + a CTA. Below 640px that
     does not fit in one row: measured 579px of content in a 390px viewport,
     which pushed the page into horizontal scroll. The secondary nav link goes
     — its destination is a section further down the same page — and the
     search field gives up its fixed margins. */
  .navbar-fixed { width: calc(100% - 1.5rem); padding: 0.6rem 0.75rem; gap: 0.6rem; }
  .navbar-fixed .nav-link { display: none; }
  .nav-right-actions { gap: 0.5rem; }
  /* The label must never wrap: squeezed between the brand and the CTA it
     used to fold into a four-line circle. It truncates instead. */
  .search-trigger-btn { margin: 0 0.4rem; min-width: 0; padding: 0.5rem 0.8rem; overflow: hidden; }
  .search-btn-left { min-width: 0; overflow: hidden; }
  /* `span:first-child` never matched here: the icon precedes the label. */
  .search-btn-left span { font-size: 0.72rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn-accent { padding: 0.5rem 0.85rem; font-size: 0.78rem; white-space: nowrap; }
  .brand-lockup { padding: 4px 10px 4px 4px; gap: 7px; }
  .brand-lockup .brand-mark { width: 26px; height: 26px; }
  .kbd-tag { display: none; }
  .hero-container { padding-top: 5.75rem; }   /* clears the 78px floating bar */
  .hero-kinetic-headline { font-size: 2.2rem; }
  .app-wrapper, .wrap { padding: 0 1rem; }
  .max-w { padding: 1.5rem 1rem 3rem; }
  .card, .pair-card { padding: 1.25rem; }
  footer, .footer-quiet { flex-direction: column; align-items: flex-start; }
  .brand-lockup .brand-text { font-size: 1.15rem; }
  /* The injected SVG mark's small-screen size lives in motion.css, next to
     its base rule — motion.css loads after this file, so an override here
     would be beaten by the unconditional 34px rule there. */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* The sticky bar on the about / contact / policy pages carries up to nine
   links. Its inline CSS pins `.nav-inner` to 58px, so on a phone the wrapped
   links spilled out of the bar and over the hero with no background behind
   them. The bar grows to hold them instead. `nav .nav-inner` outranks the
   page's own `.nav-inner`. */
@media (max-width: 760px) {
  nav .nav-inner { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 0.2rem; padding: 0.55rem 0 0.7rem; }
  nav .links, nav .nav-links { gap: 0.1rem 0.5rem; }
  nav .links a, nav .nav-links a { font-size: 0.74rem; padding: 0.22rem 0.4rem; }
}


/* 21  NEON ================================================================
   The glow layer. Everything on the site that carries the accent now emits
   it: controls cast light, chips and labels burn, headings bloom, cards and
   bars light their edges. Intensity lives in the tokens, so it is one place
   to turn up or down. Loaded last so it wins on order alone; the few
   selectors below with extra specificity are beating a page's own inline
   <style> block, not this file.
   ======================================================================== */

:root {
  --accent-violet: #818CF8;   /* second hue — already in the Q avatar gradient */
  --neon-text:    0 0 14px rgba(34, 211, 238, 0.55);
  --neon-text-lg: 0 0 28px rgba(34, 211, 238, 0.35);
  --glow-sm: 0 0 14px rgba(34, 211, 238, 0.22);
  --glow-md: 0 0 24px rgba(34, 211, 238, 0.32), 0 0 48px rgba(34, 211, 238, 0.12);
  --glow-lg: 0 0 34px rgba(34, 211, 238, 0.55), 0 0 80px rgba(34, 211, 238, 0.22);
  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.50), 0 0 26px rgba(34, 211, 238, 0.16);
  --border-subtle-hover: rgba(34, 211, 238, 0.55);
}

/* --- controls ----------------------------------------------------------- */
.btn-accent, .btn-link {
  background: linear-gradient(135deg, #67E8F9 0%, var(--accent-cyan) 45%, var(--accent-blue) 100%);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.30), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.btn-accent:hover, .btn-link:hover {
  background: linear-gradient(135deg, #A5F3FC 0%, #67E8F9 45%, var(--accent-blue) 100%);
  box-shadow: var(--glow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.btn-secondary-hero:hover, .btn-try-tool:hover, .code-copy-btn:hover {
  box-shadow: var(--glow-sm);
  text-shadow: var(--neon-text);
}
.search-trigger-btn:hover { box-shadow: var(--glow-md); }
.kbd-tag {
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.18), inset 0 0 0 1px rgba(34, 211, 238, 0.08);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
}

/* --- chips and labels --------------------------------------------------- */
.badge, .hero-badge {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.16), inset 0 0 0 1px rgba(34, 211, 238, 0.06);
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}
.section-tag, .hero-eyebrow, .eyebrow, .pair-kicker { text-shadow: var(--neon-text); }
/* about.html and contact.html carry an inline `.eyebrow{color:var(--green)}`
   from the old system; the compound selector outranks it. */
.hero .eyebrow, .hero .hero-eyebrow { color: var(--accent-cyan); }
.stat-val { text-shadow: 0 0 16px rgba(34, 211, 238, 0.6); }
code { text-shadow: 0 0 8px rgba(34, 211, 238, 0.35); }

/* --- type --------------------------------------------------------------- */
h1 { text-shadow: 0 0 44px rgba(34, 211, 238, 0.16); }
.hero h1 span { text-shadow: 0 0 24px rgba(34, 211, 238, 0.55), 0 0 60px rgba(34, 211, 238, 0.25); }
.hero::before {
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.26), rgba(56, 189, 248, 0.08) 42%, transparent 72%);
}
.max-w h2::before { box-shadow: 0 0 14px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.3); }
blockquote, .disclosure { box-shadow: inset 12px 0 18px -14px rgba(34, 211, 238, 0.9); }
p a:hover, li a:hover, .official-links a:hover { text-shadow: 0 0 10px rgba(34, 211, 238, 0.5); }

/* --- surfaces ----------------------------------------------------------- */
.bento-card:hover, .related-card:hover, .card:hover, .pair-card:hover, html .review-card:hover {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: var(--shadow-card), 0 0 30px rgba(34, 211, 238, 0.16), inset 0 0 0 1px rgba(34, 211, 238, 0.06);
}
.hero-stats-strip:hover { border-color: rgba(34, 211, 238, 0.4); box-shadow: 0 0 30px rgba(34, 211, 238, 0.14); }
.hero-status {
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.12), inset 0 0 12px rgba(34, 211, 238, 0.05);
}
.hero-command { border-color: rgba(34, 211, 238, 0.22); box-shadow: 0 0 22px rgba(34, 211, 238, 0.10); }
.hero-command:hover, .hero-command:focus-visible {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(34, 211, 238, 0.22);
}
.category-chip-card.active-pill { box-shadow: 0 0 22px rgba(34, 211, 238, 0.18), inset 0 0 0 1px rgba(34, 211, 238, 0.12); }
.brand-lockup { border-color: rgba(34, 211, 238, 0.32); box-shadow: 0 0 16px rgba(34, 211, 238, 0.12); }

/* --- bars --------------------------------------------------------------- */
.navbar-fixed {
  border-color: rgba(34, 211, 238, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 30px rgba(34, 211, 238, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.navbar-fixed:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.60), 0 0 40px rgba(34, 211, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
nav {
  border-bottom-color: rgba(34, 211, 238, 0.18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 1px 18px -6px rgba(34, 211, 238, 0.45);
}
.nav-header { border-bottom-color: rgba(34, 211, 238, 0.2); box-shadow: 0 1px 18px -8px rgba(34, 211, 238, 0.5); }
.nav-link:hover, .nav-links a:hover, .links a:hover, .footer-links a:hover { text-shadow: var(--neon-text); }

/* --- modal and toast ---------------------------------------------------- */
.search-modal-container { box-shadow: var(--shadow-modal), 0 0 60px rgba(34, 211, 238, 0.18); }
.search-result-item:hover, .search-result-item.active { box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.06); }
.qf-toast { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(34, 211, 238, 0.4); }


/* 22  DEEP FIELD ==========================================================
   The colour system under the neon. The old base was a neutral grey-black
   (#0A0A0B): cyan light on neutral grey reads flat, because nothing in the
   dark shares its hue. The base is now a blue-black and every surface step
   is tinted toward it, so the glow in §21 has a dark that belongs to it.
   Borders and secondary text move cool for the same reason.

   `html:root` (0,1,1) rather than `:root` on purpose: about forty pages
   re-declare the old greys in their own inline `:root{}` — --bg:#0A0A0B,
   --bg2:#111113, --card:#18181B — and those blocks come later in source
   order. The extra type selector outranks them without touching the pages.
   ======================================================================== */

html:root {
  --bg-base:   #04060B;
  --surface-1: #090D15;
  --surface-2: #0E1420;
  --surface-3: #141C2B;

  --accent-ion: #CFFAFE;      /* the white-hot end of the cyan */

  --border-subtle: rgba(125, 190, 255, 0.10);
  --border-strong: rgba(125, 190, 255, 0.18);

  --text-secondary: #A3AEC2;
  --text-muted:     #6F7C94;

  --shadow-card:  0 10px 30px rgba(1, 3, 8, 0.55);
  --shadow-modal: 0 20px 60px rgba(1, 3, 8, 0.75), 0 0 30px rgba(34, 211, 238, 0.15);

  /* legacy names, re-pointed past the inline blocks */
  --bg: var(--bg-base);  --bg2: var(--surface-1);  --bg-2: var(--surface-1);
  --card: var(--surface-2);
  --muted: var(--text-secondary);  --text-2: var(--text-secondary);  --text-3: var(--text-muted);
  --line: var(--border-subtle);  --border: var(--border-subtle);  --border-2: var(--border-strong);
}

html {
  background-color: var(--bg-base);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(34, 211, 238, 0.16), transparent 70%),
    radial-gradient(ellipse 55% 45% at 100% 55%, rgba(129, 140, 248, 0.10), transparent 62%),
    radial-gradient(ellipse 50% 40% at 0% 88%, rgba(14, 116, 144, 0.16), transparent 60%);
}

/* Surfaces pick up a faint lit corner and a top hairline, so a card reads as
   glass catching the field rather than a flat panel. */
.bento-card, .card, .pair-card, .related-card, .hero-stats-strip {
  background-image: linear-gradient(158deg, rgba(34, 211, 238, 0.05), transparent 36%);
  box-shadow: inset 0 1px 0 rgba(165, 243, 252, 0.06);
}