/* ============================================================
   GhostTool — Ghost Design System
   Hand-written CSS. No frameworks. No external requests.
   Dark default · light opt-in · privacy-first ghost identity.
   Self-hosted Inter (woff2) — zero third-party font requests.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ---- Ghost accent system (shared across themes) ---- */
  --accent: #9B6BFF;        /* ghost violet */
  --accent-light: #B794FF;
  --accent-dark: #7A4DE6;
  --accent-rgb: 155, 107, 255;
  --ghost-aqua: #00E5FF;    /* aqua ghost (secondary) */
  --ghost-aqua-rgb: 0, 229, 255;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --maxw: 1140px;
  --nav-h: 64px;

  /* ---- Light theme surfaces (opt-in) ---- */
  --bg: #F7F7F7;
  --bg-soft: #FFFFFF;
  --bg-elev: #FFFFFF;
  --text: #1A1A1A;
  --text-soft: #2E2E2E;
  --text-mute: #6A6A6A;
  --border: rgba(0, 0, 0, 0.08);
  --border-soft: rgba(0, 0, 0, 0.05);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.06);
  --code-bg: #F1F1F4;
  --input-bg: #FCFCFD;

  /* ---- Ghost effect tokens (shared) ---- */
  --glow-violet: rgba(155, 107, 255, 0.25);
  --glow-aqua: rgba(0, 229, 255, 0.22);
  --glow-violet-strong: rgba(155, 107, 255, 0.42);
  --glow-aqua-strong: rgba(0, 229, 255, 0.38);
  --ease-spectral: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ghost: cubic-bezier(0.16, 1, 0.3, 1);
  --t-spectral: 0.25s var(--ease-spectral);
  --mist: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  --mist-soft: rgba(255, 255, 255, 0.08);
  --mist-mid: rgba(255, 255, 255, 0.10);
  /* Spectral gradient sweep used for shimmer / hairline accents */
  --spectral-sweep: linear-gradient(110deg, transparent 25%, rgba(var(--accent-rgb), 0.55) 48%, rgba(var(--ghost-aqua-rgb), 0.55) 58%, transparent 80%);
  /* Premium spectral ring border-image */
  --spectral-ring: linear-gradient(135deg, rgba(var(--accent-rgb), .85) 0%, rgba(var(--ghost-aqua-rgb), .55) 40%, transparent 70%);

  /* ---- Unified spacing scale (px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Motion tokens ---- */
  --t-fast: .15s;
  --t-base: .2s;
  --t-slow: .3s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- Layered shadow system (bold depth) ---- */
  --ring: 0 0 0 1px rgba(0, 0, 0, .03);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
  --shadow: 0 4px 8px -4px rgba(0, 0, 0, .06), 0 12px 28px -10px rgba(0, 0, 0, .12);
  --shadow-md: 0 6px 14px -6px rgba(0, 0, 0, .08), 0 20px 40px -16px rgba(0, 0, 0, .16);
  --shadow-lg: 0 10px 24px -10px rgba(0, 0, 0, .10), 0 32px 64px -24px rgba(0, 0, 0, .22);
  --shadow-glow: 0 0 44px rgba(var(--accent-rgb), .22);

  /* ---- Status colors (tokenized for re-skin) ---- */
  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
}

html.dark {
  --bg: #0A0A0A;
  --bg-soft: #101012;
  --bg-elev: #111;
  --text: #E6E6E6;
  --text-soft: #C8C8D0;
  --text-mute: #8B8B97;
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.05);
  --glass: rgba(10, 10, 10, 0.72);
  --glass-border: rgba(255, 255, 255, 0.08);
  --code-bg: rgba(255, 255, 255, 0.04);
  --input-bg: rgba(255, 255, 255, 0.04);

  /* Heavier, deeper shadows for dark surfaces */
  --ring: 0 0 0 1px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow: 0 4px 10px -4px rgba(0, 0, 0, .5), 0 12px 30px -10px rgba(0, 0, 0, .6);
  --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, .55), 0 22px 44px -16px rgba(0, 0, 0, .7);
  --shadow-lg: 0 12px 28px -10px rgba(0, 0, 0, .6), 0 36px 72px -24px rgba(0, 0, 0, .8);
  --shadow-glow: 0 0 48px rgba(var(--accent-rgb), .3);
  /* Spectral ghost shadows for floating dark cards */
  --shadow-spectral: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  /* Layered spectral card shadow: violet ring + deep void + aqua base */
  --shadow-card-spectral:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 12px 32px -12px rgba(0, 0, 0, 0.65),
    0 32px 64px -28px rgba(var(--accent-rgb), 0.18);
  --shadow-card-quiet:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px -14px rgba(0, 0, 0, 0.55);
  /* Hover-lift spectral: violet bloom + aqua rim + body shadow */
  --shadow-card-hover:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(var(--ghost-aqua-rgb), 0.18),
    0 24px 48px -16px rgba(0, 0, 0, 0.7),
    0 0 56px -8px rgba(var(--accent-rgb), 0.32),
    0 0 96px -24px rgba(var(--ghost-aqua-rgb), 0.24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Inter self-hosted (woff2, zero third-party requests). OS fallback below. */
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
  position: relative;
}
/* Ambient spectral coronas — fixed, drift-free, pure atmosphere.
   Two ultra-soft radial blobs (violet + aqua) live behind everything
   and give the dark canvas depth without any DOM markup. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(50% 38% at 12% 8%,  rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(46% 34% at 88% 92%, rgba(var(--ghost-aqua-rgb), 0.07) 0%, transparent 65%);
  opacity: 1;
  transition: opacity .4s ease;
}
/* Faint spectral grid weave — premium SaaS texture (subtle in dark, invisible-ish in light) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 78%);
  opacity: 0.6; transition: opacity .4s ease;
}
html:not(.dark) body::before {
  background:
    radial-gradient(50% 38% at 12% 8%,  rgba(var(--accent-rgb), 0.06) 0%, transparent 60%),
    radial-gradient(46% 34% at 88% 92%, rgba(var(--ghost-aqua-rgb), 0.05) 0%, transparent 65%);
}
html:not(.dark) body::after { opacity: 0.3; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.025em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0 0 1em; color: var(--text-soft); }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .4em; color: var(--text-soft); }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: var(--code-bg); padding: 2px 6px; border-radius: 6px; font-size: .88em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.text-accent { color: var(--accent); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.center { text-align: center; }
.gradient-text {
  background: linear-gradient(120deg, var(--accent-light), var(--accent), var(--accent-dark));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }

/* ---- Decorative glow ---- */
.glow {
  position: fixed; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16) 0%, transparent 65%);
  pointer-events: none; z-index: 0; filter: blur(20px);
}

/* ---- Navigation ---- */
.nav {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  background: var(--glass); border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 4px 16px -8px rgba(0, 0, 0, .08);
  isolation: isolate;
}
html.dark .nav {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.62) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 24px -10px rgba(0, 0, 0, 0.6);
  border-bottom-color: rgba(var(--accent-rgb), 0.14);
}
/* Drifting fog behind the bar — pure atmosphere, no DOM */
html.dark .nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 140% at 18% 50%, rgba(var(--accent-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(50% 140% at 82% 50%, rgba(var(--ghost-aqua-rgb), 0.07) 0%, transparent 60%);
  animation: nav-fog-drift 90s linear infinite;
  opacity: 0.85;
}
@keyframes nav-fog-drift {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 30% 0%, -30% 0%; }
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative; z-index: 1; }
.nav-brand { font-size: 1.3rem; font-weight: 800; display: flex; align-items: center; gap: 10px; letter-spacing: -0.02em; }
.nav-brand .dot {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark));
  display: grid; place-items: center; position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(var(--accent-rgb), .45);
}
/* Aqua halo behind the ghost mark — pulses softly */
html.dark .nav-brand .dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 12px; z-index: -1;
  background: radial-gradient(circle, rgba(var(--ghost-aqua-rgb), 0.55) 0%, transparent 70%);
  filter: blur(6px); opacity: 0.7;
  animation: brand-halo 5s var(--ease-ghost) infinite;
}
@keyframes brand-halo {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.08); }
}
.nav-brand .dot svg { width: 16px; height: 16px; color: #fff; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-weight: 500; color: var(--text-mute); transition: color var(--t-base); position: relative; }
.nav-links a:hover { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-burger { display: none; background: none; border: none; cursor: pointer; color: var(--text); padding: 6px; border-radius: var(--radius-sm); }
.nav-burger:hover { background: rgba(var(--accent-rgb), .08); }
.nav-burger svg { width: 24px; height: 24px; }

/* ---- Theme toggle ---- */
.theme-toggle { width: 56px; height: 28px; border-radius: 999px; position: relative; cursor: pointer; background: var(--border); transition: background .3s; flex-shrink: 0; }
html.dark .theme-toggle { background: rgba(var(--accent-rgb), .35); }
.theme-toggle .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); display: grid; place-items: center; transition: transform .3s cubic-bezier(.4,0,.2,1); }
html.dark .theme-toggle .knob { transform: translateX(28px); }
.theme-toggle svg { width: 14px; height: 14px; position: absolute; transition: opacity .25s, transform .3s; }
.theme-toggle .sun { color: #f59e0b; }
.theme-toggle .moon { color: var(--accent); opacity: 0; }
html.dark .theme-toggle .sun { opacity: 0; }
html.dark .theme-toggle .moon { opacity: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-weight: 600; font-size: .95rem; padding: 12px 22px; border-radius: 14px;
  border: none; cursor: pointer; transition: transform var(--t-fast) ease, box-shadow var(--t-base), background var(--t-base), border-color var(--t-base), filter var(--t-base);
  font-family: inherit; position: relative; white-space: nowrap; overflow: hidden;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--ghost-aqua-rgb), .45), 0 0 24px -4px rgba(var(--accent-rgb), .4); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dark) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px -6px rgba(var(--accent-rgb), .55), 0 2px 4px rgba(var(--accent-rgb), .25);
}
/* Aqua glow ring on hover (premium SaaS) */
.btn-primary:hover {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 45%, var(--accent-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 0 0 3px rgba(var(--ghost-aqua-rgb), .35),
    0 12px 30px -8px rgba(var(--accent-rgb), .65),
    0 0 36px -4px rgba(var(--ghost-aqua-rgb), .45);
  transform: translateY(-2px);
}
.btn-secondary {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .06));
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .25);
}
.btn-secondary:hover { background: rgba(var(--accent-rgb), .16); border-color: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: var(--bg-soft); color: var(--text-soft); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-lg { padding: 14px 30px; font-size: 1.02rem; border-radius: 12px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; }

/* ---- Hero ---- */
.hero { position: relative; text-align: center; padding: 96px 0 64px; isolation: isolate; }
/* Fog drifting behind the hero — pure atmosphere */
.hero::before {
  content: ''; position: absolute; left: 50%; top: 12%; width: 1200px; height: 600px;
  transform: translateX(-50%); z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 30% 40%, rgba(var(--accent-rgb), 0.12) 0%, transparent 65%),
    radial-gradient(36% 46% at 70% 60%, rgba(var(--ghost-aqua-rgb), 0.10) 0%, transparent 65%),
    radial-gradient(60% 40% at 50% 100%, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
  filter: blur(18px);
  animation: hero-fog-drift 60s linear infinite;
}
@keyframes hero-fog-drift {
  0%   { transform: translateX(-50%) translateY(0);   opacity: 0.85; }
  50%  { transform: translateX(-50%) translateY(-12px); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0);   opacity: 0.85; }
}
.hero .badge {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .3); background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .05));
  color: var(--accent); font-size: .8rem; font-weight: 600; margin-bottom: var(--space-6); letter-spacing: .02em;
  box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb), .2), inset 0 1px 0 rgba(255, 255, 255, .25);
  animation: ghost-materialize 1.1s var(--ease-ghost) both;
}
.hero .badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); animation: pulse 2s infinite; }
.hero h1 { margin-bottom: var(--space-5); animation: ghost-materialize 1.1s var(--ease-ghost) .05s both; }
.hero .sub { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--accent); font-weight: 600; margin-bottom: var(--space-2); animation: ghost-materialize 1.1s var(--ease-ghost) .12s both; }
.hero p.lead { font-size: 1.1rem; max-width: 640px; margin: 0 auto 28px; animation: ghost-materialize 1.1s var(--ease-ghost) .2s both; }
.hero .cta-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: 28px; animation: ghost-materialize 1.1s var(--ease-ghost) .28s both; }
.hero .pills { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; animation: ghost-materialize 1.1s var(--ease-ghost) .34s both; }

/* Ghost materialization — staged fade-in + soft spectral bloom */
@keyframes ghost-materialize {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(180deg, var(--bg-soft), var(--bg-elev)); border: 1px solid var(--border);
  font-size: .82rem; font-weight: 500; color: var(--text-mute); box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.pill:hover { border-color: rgba(var(--accent-rgb), .4); color: var(--accent); transform: translateY(-1px); }
.pill svg { width: 15px; height: 15px; color: var(--accent); }

@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }

/* ---- Section heading ---- */
.section-head { margin-bottom: 44px; }
.section-head .eyebrow {
  display: inline-block; color: var(--accent); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .05));
  border: 1px solid rgba(var(--accent-rgb), .2);
}
.section-head h2 { margin-top: var(--space-3); }
.section-head p { max-width: 600px; }
.section-head.center { text-align: center; }
.section-head.center .eyebrow { display: inline-block; }
.section-head.center p { margin-left: auto; margin-right: auto; }

/* ---- Tool grid + cards ---- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.tool-card {
  display: flex; flex-direction: column; padding: var(--space-6); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease, border-color var(--t-slow) ease;
  position: relative; overflow: hidden;
}
html.dark .tool-card { background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, transparent 6%), var(--bg-elev); box-shadow: var(--shadow-card-quiet); }
.tool-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), .5); }
.tool-card:hover { box-shadow: var(--shadow-card-hover); }
html.dark .tool-card:hover { box-shadow: var(--shadow-card-hover); }
.tool-card .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08)); color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), .12);
  transition: box-shadow var(--t-base) ease, border-color var(--t-base) ease;
}
.tool-card:hover .icon { border-color: rgba(var(--ghost-aqua-rgb), .3); box-shadow: 0 0 18px -2px rgba(var(--accent-rgb), .35); }
.tool-card .icon svg { width: 22px; height: 22px; }
.tool-card h3 { margin-bottom: var(--space-2); }
.tool-card p { font-size: .9rem; margin-bottom: 0; flex: 1; }
.tool-card .open {
  margin-top: 18px; font-size: .88rem; font-weight: 600; color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px; transition: gap var(--t-base), text-shadow var(--t-base);
}
.tool-card:hover .open { gap: 8px; text-shadow: 0 0 14px rgba(var(--accent-rgb), .5); }
.tool-card .cat {
  position: absolute; top: 16px; right: 16px; font-size: .65rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute); padding: 3px 8px; border-radius: 6px; background: var(--code-bg);
  transition: color var(--t-base), border-color var(--t-base);
}
/* Ghost accent on hover for category label */
.tool-card:hover .cat { color: var(--ghost-aqua); text-shadow: 0 0 8px rgba(var(--ghost-aqua-rgb), .35); }

/* ---- Featured cards (bigger, glow) ---- */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-6); }
.featured-card {
  position: relative; padding: 28px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, transparent 8%), linear-gradient(160deg, rgba(var(--accent-rgb), .1), var(--bg-elev) 58%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease, border-color var(--t-slow) ease;
}
html.dark .featured-card { background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 8%), linear-gradient(160deg, rgba(var(--accent-rgb), .1), var(--bg-elev) 58%); box-shadow: var(--shadow-card-spectral); }
.featured-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg); padding: 1px;
  background: var(--spectral-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--t-slow);
}
.featured-card:hover { transform: translateY(-8px); }
html.dark .featured-card:hover { box-shadow: var(--shadow-card-hover); }
.featured-card:hover::before { opacity: 1; }
.featured-card .icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-dark)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px -4px rgba(var(--accent-rgb), .5);
}
.featured-card .icon svg { width: 24px; height: 24px; }
.featured-card h3 { font-size: 1.2rem; }
.featured-card p { font-size: .92rem; }
.featured-card .open { margin-top: var(--space-4); font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }

/* ---- Tool page layout ---- */
.tool-page { padding: 48px 0 24px; }
.tool-hero { margin-bottom: 32px; }
.tool-hero .crumbs { font-size: .82rem; color: var(--text-mute); margin-bottom: 16px; }
.tool-hero .crumbs a:hover { color: var(--accent); }
.tool-hero .icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; background: rgba(var(--accent-rgb), .1); color: var(--accent); }
.tool-hero .icon svg { width: 28px; height: 28px; }
.tool-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.tool-hero p { font-size: 1.05rem; max-width: 680px; }

.tool-shell {
  display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start;
}
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 4%), var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
html.dark .panel { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 4%), var(--bg-elev); }
.sidebar { display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: calc(var(--nav-h) + 20px); }
.side-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
html.dark .side-card { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 6%), var(--bg-elev); }
.side-card h4 { font-size: .95rem; margin-bottom: var(--space-3); }
.side-card a.related { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; transition: background var(--t-base); }
.side-card a.related:hover { background: rgba(var(--accent-rgb), .07); }
.side-card a.related .ic { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .07)); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.side-card a.related .ic svg { width: 16px; height: 16px; }
.side-card a.related .nm { font-size: .88rem; font-weight: 600; }

.info-section { padding: 56px 0; border-top: 1px solid var(--border); }
.info-section h2 { margin-bottom: 16px; font-size: 1.6rem; }
.info-section h3 { margin: 24px 0 10px; font-size: 1.1rem; color: var(--text); }

/* ---- FAQ ---- */
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform .2s; color: var(--accent); flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { padding-bottom: 16px; margin: 0; }

/* ---- Forms ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-mute); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .04em; }
.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--input-bg); color: var(--text); font-family: inherit; font-size: .95rem; font-weight: 500;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base); outline: none;
}
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--accent); background: var(--bg-elev);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14), 0 1px 2px rgba(0, 0, 0, .04);
}
textarea.input { resize: vertical; min-height: 120px; }
select.input { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { font-size: .8rem; color: var(--text-mute); margin-top: 6px; }
.row-gap { display: flex; flex-direction: column; gap: 14px; }

/* ---- Toggle switch (checkbox styling) ---- */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .25s; cursor: pointer; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s; }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); }
.check-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.check-row span { font-size: .9rem; font-weight: 500; }

/* ---- Output / result blocks ---- */
.output { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; font-family: ui-monospace, Menlo, monospace; font-size: .88rem; white-space: pre-wrap; word-break: break-word; min-height: 56px; }
.result-big { font-size: 2rem; font-weight: 800; color: var(--accent); }
.kvs { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; }
.kvs .k { color: var(--text-mute); font-weight: 600; font-size: .85rem; }
.kvs .v { font-family: ui-monospace, Menlo, monospace; }

/* ---- Dropzone ---- */
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 40px 20px; text-align: center; cursor: pointer; transition: border-color var(--t-base), background var(--t-base), transform var(--t-base); background: var(--input-bg); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); transform: translateY(-1px); }
.dropzone svg { width: 48px; height: 48px; color: var(--text-mute); margin: 0 auto 12px; transition: color var(--t-base); }
.dropzone:hover svg, .dropzone.drag svg { color: var(--accent); }
.dropzone p { margin: 0; }

/* ---- Status / badge states ---- */
.status { text-align: center; font-weight: 600; font-size: .9rem; padding: 10px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); border: 1px solid transparent; }
.status-ok { color: var(--ok); background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.18); }
.status-warn { color: var(--warn); background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.18); }
.status-err { color: var(--err); background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.18); }
.status-info { color: var(--accent); background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .18); }

/* ---- Privacy / feature grids ---- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.feature-card {
  padding: var(--space-6); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease, border-color var(--t-slow) ease;
}
html.dark .feature-card { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 6%), var(--bg-elev); }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--shadow-md); }
.feature-card .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08)); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .12); }
.feature-card .icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p { font-size: .9rem; margin: 0; }

/* ---- Socials ---- */
.socials { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.social {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--text-mute); background: var(--bg-elev);
  box-shadow: var(--shadow-sm); transition: all var(--t-base);
}
.social:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); box-shadow: 0 0 18px rgba(var(--accent-rgb), .35), var(--shadow); }

/* ---- Crypto / support cards ---- */
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); max-width: 720px; margin: 0 auto; }
.support-card { text-align: left; padding: 16px 20px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.dark .support-card { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 6%), var(--bg-elev); }
.support-card.full { grid-column: 1 / -1; }
.support-card .lbl { font-size: .78rem; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.support-card .addr { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--text-mute); word-break: break-all; cursor: pointer; transition: color var(--t-base); }
.support-card .addr:hover { color: var(--accent); }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 64px 0 44px; position: relative; isolation: isolate; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .3), transparent); }
html.dark .footer { background: linear-gradient(180deg, var(--bg) 0%, #060606 100%); }
footer.footer .footer-grid { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .nav-brand { margin-bottom: var(--space-3); }
.footer-brand p { font-size: .9rem; max-width: 360px; }
.footer-index h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-mute); margin-bottom: var(--space-3); }
.footer-index ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--space-6); }
.footer-index li { margin-bottom: 7px; break-inside: avoid; }
.footer-index a { font-size: .88rem; color: var(--text-soft); transition: color var(--t-base), text-shadow var(--t-base); }
.footer-index a:hover { color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .35); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: var(--space-6); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.footer-bottom p { margin: 0; font-size: .85rem; }
/* Soft brand ghost glow at rest in footer */
html.dark .footer .footer-brand .nav-brand .dot::after { opacity: 0.4; animation-duration: 7s; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(140px);
  padding: 14px 22px; border-radius: var(--radius-sm); color: #fff; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 100; opacity: 0; transition: transform var(--t-slow) ease, opacity var(--t-slow) ease;
  display: flex; align-items: center; gap: 10px; max-width: 90vw;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.info { background: var(--accent); }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Scroll reveal (progressive enhancement: only hide when JS is active) ---- */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Tooltip ---- */
.tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--code-bg); color: var(--text-mute); font-size: 10px; cursor: help; margin-left: 5px; }
.tip .box { visibility: hidden; position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); width: 200px; background: var(--text); color: var(--bg); padding: 7px 10px; border-radius: 8px; font-size: .78rem; font-weight: 500; opacity: 0; transition: opacity .25s; z-index: 20; text-align: center; }
.tip:hover .box { visibility: visible; opacity: 1; }

/* ---- Progress bar ---- */
.progress { height: 8px; background: var(--code-bg); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .tool-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .side-card { flex: 1; min-width: 240px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  /* Premium spectral spacing on tablet grids */
  .preview-grid, .featured-grid, .tool-grid { gap: calc(var(--space-5) + 2px); }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 48px; }
  /* Fog gradient behind stacked header — denser on mobile */
  html.dark .nav::before { opacity: 1; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 12px; padding: 8px; color: var(--text); }
  .nav-burger:hover { background: rgba(var(--accent-rgb), .08); box-shadow: 0 0 14px -6px rgba(var(--accent-rgb), .35); }
  .nav-burger svg { width: 22px; height: 22px; }
  .nav-links.open {
    display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 16px 24px 24px; gap: 16px; box-shadow: var(--shadow-md);
  }
  /* Stacked cards with spectral spacing */
  .tool-grid { grid-template-columns: 1fr; gap: 18px; }
  .featured-grid { grid-template-columns: 1fr; gap: 18px; }
  .feature-grid { grid-template-columns: 1fr; }
  .preview-grid { gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-index ul { columns: 2; }
  .support-grid { grid-template-columns: 1fr; }
  .input-row { grid-template-columns: 1fr; }
  /* tap targets + mobile refinements (consolidated) */
  .nav-links a, .nav-burger, .theme-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { min-height: 48px; }
  .seo-cat-grid { grid-template-columns: 1fr; }
  .geo-grid { grid-template-columns: 1fr; }
  .footer-index ul { columns: 1; }
  .faq-item summary { padding: 18px 0; }
  .panel { padding: 20px; }
  .hero { padding-top: 40px; }
  .preview-grid { grid-template-columns: 1fr; }
  .search input { padding: 14px 18px 14px 46px; }
}
@media (max-width: 480px) {
  .container { padding: 0 18px; }
}

/* ---- Markdown preview styling ---- */
#md-preview h1, #md-preview h2, #md-preview h3 { margin-top: 0.6em; }
#md-preview h1 { font-size: 1.6rem; }
#md-preview h2 { font-size: 1.3rem; }
#md-preview h3 { font-size: 1.1rem; }
#md-preview p { color: var(--text); margin: 0 0 .8em; }
#md-preview ul, #md-preview ol { color: var(--text); }
#md-preview a { color: var(--accent); text-decoration: underline; }
#md-preview code { background: var(--code-bg); padding: 2px 6px; border-radius: 5px; font-size: .88em; }
#md-preview pre { background: var(--code-bg); padding: 14px; border-radius: 10px; overflow: auto; margin: 0 0 1em; }
#md-preview pre code { background: none; padding: 0; }
#md-preview blockquote { border-left: 3px solid var(--accent); margin: 0 0 1em; padding: 4px 14px; color: var(--text-mute); }
#md-preview table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
#md-preview th, #md-preview td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
#md-preview th { background: var(--code-bg); }
#md-preview img { border-radius: 8px; }

/* ---- CSV / data table ---- */
.data-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table.data-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.data-table th, table.data-table td { border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; white-space: nowrap; }
table.data-table th { background: var(--code-bg); font-weight: 700; cursor: pointer; position: sticky; top: 0; user-select: none; }
table.data-table th:hover { color: var(--accent); }
table.data-table tr:hover td { background: rgba(var(--accent-rgb), .04); }

/* ---- Range styling refinement ---- */
input[type="range"] { height: 6px; border-radius: 999px; }

/* ---- SEO category grid (keyword clusters) ---- */
.seo-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.seo-cat { padding: var(--space-6); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.dark .seo-cat { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 6%), var(--bg-elev); }
.seo-cat h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.seo-cat > p { font-size: .9rem; margin-bottom: var(--space-3); }
.seo-cat ul { list-style: none; padding: 0; margin: 0; }
.seo-cat li { margin-bottom: var(--space-2); }
.seo-cat a { display: inline-block; font-size: .9rem; font-weight: 500; color: var(--text-soft); padding: 6px 0; transition: color var(--t-base); min-height: 32px; }
.seo-cat a:hover { color: var(--accent); }

/* ---- GEO grid ---- */
.geo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.geo-card { padding: var(--space-6); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0%, transparent 6%), var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
html.dark .geo-card { background: linear-gradient(180deg, rgba(255, 255, 255, .025) 0%, transparent 6%), var(--bg-elev); }
.geo-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.geo-card p { font-size: .9rem; margin: 0; }

/* ---- SEO copy block ---- */
.seo-copy p { font-size: .98rem; line-height: 1.75; color: var(--text-soft); }
.seo-copy strong { color: var(--text); font-weight: 600; }

/* ---- FAQ list ---- */
.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item summary { font-size: 1rem; min-height: 48px; }

/* ---- Custom scrollbar ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .35) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .6); }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   Premium Preview Cards — $1M flagship entry points
   Fluid 5→3→2→1 grid, no breakpoint needed
   ============================================================ */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: var(--space-5);
}
.preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 28px 24px 24px;
  min-height: 280px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, transparent 8%),     /* glossy top sheen */
    linear-gradient(160deg, rgba(var(--accent-rgb), .16) 0%, var(--bg-elev) 62%);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out), border-color var(--t-slow) ease;
}
html.dark .preview-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, transparent 8%),
    linear-gradient(160deg, rgba(var(--accent-rgb), .14) 0%, var(--bg-elev) 62%);
  box-shadow: var(--shadow-card-spectral);
}
/* gradient border-ring on hover */
.preview-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--spectral-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-slow) ease;
  pointer-events: none;
}
/* soft accent glow blob top-right */
.preview-card::after {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .32) 0%, transparent 65%);
  filter: blur(14px);
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--t-slow) ease, transform var(--t-slow) ease;
}
.preview-card:hover {
  transform: translateY(-10px);
}
.preview-card:hover::before { opacity: 1; }
.preview-card:hover::after { opacity: 1; transform: scale(1.18); }
html.dark .preview-card:hover {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: var(--shadow-card-hover);
}
.preview-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .4), var(--shadow-lg); }
.preview-card .pv-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent) 45%, var(--accent-dark));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(0, 0, 0, .15), 0 10px 24px -4px rgba(var(--accent-rgb), .5);
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.preview-card h3 { font-size: 1.12rem; font-weight: 700; margin: 2px 0 0; position: relative; z-index: 1; }
.preview-card .pv-desc { font-size: .88rem; color: var(--text-mute); margin: 0; flex-grow: 1; position: relative; z-index: 1; }
.preview-card .pv-open {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-weight: 600; font-size: .9rem;
  color: var(--accent);
  padding: 8px 0;
  transition: gap var(--t-base) ease;
  position: relative; z-index: 1;
}
.preview-card:hover .pv-open { gap: 10px; }
.preview-card .pv-tag {
  position: absolute; top: 16px; right: 18px;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .08));
  border: 1px solid rgba(var(--accent-rgb), .18);
  padding: 3px 9px; border-radius: 20px;
  z-index: 2;
}

/* ============================================================
   Search bar — instant tool filtering
   ============================================================ */
.search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.search input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.search input::placeholder { color: var(--text-mute); }
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14), var(--shadow-md);
}
.search .s-ic {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
  pointer-events: none;
}
.search .s-count {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: .78rem; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Category chips — filter pills
   ============================================================ */
.cat-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.chip {
  padding: 8px 16px;
  font-size: .85rem; font-weight: 600; font-family: inherit;
  color: var(--text-soft);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  min-height: 38px;
  display: inline-flex; align-items: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base) ease;
}
.chip:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); transform: translateY(-1px); }
.chip.active {
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 55%, var(--accent-dark));
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -4px rgba(var(--accent-rgb), .45);
}

/* ---- Tool count indicator + empty state ---- */
.tool-count { text-align: center; font-size: .85rem; color: var(--text-mute); margin: 0; }
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-mute);
}
.empty-state svg { color: var(--accent); opacity: .5; margin-bottom: 12px; }

/* ---- Preview/feature cards: tablet + wide-screen balance ---- */
@media (min-width: 761px) and (max-width: 980px) {
  .preview-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* On ultra-wide screens, cap the flagship grid at 3 columns (premium ghost layout) */
@media (min-width: 1180px) {
  .preview-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Subtle utility: live region announces filter results to screen readers ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   GHOST IDENTITY LAYER — stealth SaaS accents
   (Decorative only. Layout/DOM/structure untouched.)
   ----------------------------------------------------------------
   NOTE: navbar fog, footer mist, hero fog, dark card shadows,
   and button shimmer are defined inline at their primary rules
   above. This layer holds only the unique premium accents that
   don't have a natural primary home.
   ============================================================ */

/* Brand mark: aqua bloom behind the ghost silhouette (sits on top of the .dot halo set in .nav) */
.nav-brand .dot svg { filter: drop-shadow(0 0 6px var(--glow-aqua)); position: relative; z-index: 1; }
.footer .footer-brand .nav-brand .dot svg { filter: drop-shadow(0 0 5px var(--glow-aqua)); }

/* Reusable mist gradient section divider */
.mist-divider {
  height: 1px; width: 100%; border: 0; margin: 0;
  background: var(--mist); opacity: 0.8;
}

/* ---- Hero ghost mascot ---- */
.ghost-hero {
  display: flex; justify-content: center; margin-bottom: 28px;
  animation: ghost-pulse 4s var(--ease-ghost) infinite;
}
.ghost-hero svg {
  width: 180px; height: 180px; color: var(--text);
  filter: drop-shadow(0 0 40px var(--glow-violet-strong)), drop-shadow(0 0 80px var(--glow-aqua-strong));
}
html.dark .ghost-hero svg { color: var(--text); opacity: 0.95; }

@keyframes ghost-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.01); opacity: 1;    }
}

/* ---- Privacy chips (badge row) — premium SaaS lockup ---- */
.privacy-chips {
  display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap;
  margin: 18px 0 4px;
}
.p-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  color: var(--accent); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  transition: border-color var(--t-base) ease, color var(--t-base) ease, transform var(--t-base) ease;
}
.p-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ghost-aqua); box-shadow: 0 0 6px var(--glow-aqua);
}
.p-chip:hover { border-color: rgba(var(--ghost-aqua-rgb), .4); color: var(--ghost-aqua); transform: translateY(-1px); }

/* Navbar inline "No upload" chip (desktop only) */
.nav-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  color: var(--ghost-aqua); border: 1px solid rgba(var(--ghost-aqua-rgb), 0.3);
  background: rgba(var(--ghost-aqua-rgb), 0.06);
}
.nav-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ghost-aqua); box-shadow: 0 0 6px var(--glow-aqua);
}

/* ---- Ghost-shimmer card hover (preview + tool + featured cards) ----
   The card is rendered with a first child <span class="ghost-shimmer">
   by app.js renderGrid(); premium cards already include it inline. */
.ghost-shimmer {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ghost-aqua), transparent);
  transform: scaleX(0); transform-origin: left; opacity: 0;
  transition: transform .5s var(--ease-ghost), opacity .4s ease;
  pointer-events: none;
}
.preview-card:hover .ghost-shimmer,
.tool-card:hover .ghost-shimmer,
.featured-card:hover .ghost-shimmer {
  transform: scaleX(1); opacity: 0.95;
}

/* Spectral sweep on primary button — animated sweep on click + a quiet hover lumen */
html.dark .btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--spectral-sweep);
  background-size: 220% 100%; background-position: 200% 0;
  opacity: 0; pointer-events: none; mix-blend-mode: screen;
  transition: opacity .4s ease;
}
html.dark .btn-primary:hover::after { opacity: 0.18; background-position: 80% 0; }
html.dark .btn-primary:active::after { opacity: 0.5; animation: spectral-shimmer 1s var(--ease-ghost); }
@keyframes spectral-shimmer {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

/* ---- Tool-page sidebar Privacy lockup (5-badge) ---- */
.side-card .privacy-lockup {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.side-card .privacy-lockup .p-chip { font-size: .72rem; padding: 4px 9px; }

/* ---- Heading violet glow (premium dark typography) ---- */
html.dark h1 { text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25); }
html.dark h2 { text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.18); }
html.dark .gradient-text { text-shadow: 0 0 28px var(--glow-violet); }
html.dark .hero .gradient-text { text-shadow: 0 0 38px var(--glow-violet-strong); }

/* ---- Section-head eyebrow: aqua rim on hover (premium ghost accent) ---- */
.section-head .eyebrow { transition: border-color var(--t-base), color var(--t-base), box-shadow var(--t-base); }
.section-head .eyebrow:hover { border-color: rgba(var(--ghost-aqua-rgb), .4); color: var(--ghost-aqua); box-shadow: 0 0 18px -2px rgba(var(--ghost-aqua-rgb), .3); }

/* ---- Category chips: aqua accent on hover ---- */
.chip:hover { border-color: rgba(var(--accent-rgb), .5); color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 16px -4px rgba(var(--accent-rgb), .35); }
.chip.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px -4px rgba(var(--accent-rgb), .5), 0 0 22px -6px rgba(var(--ghost-aqua-rgb), .35); }

/* ---- Search input: aqua spectral focus ---- */
.search input:focus { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14), 0 0 28px -8px rgba(var(--ghost-aqua-rgb), .35), var(--shadow-md); }

/* ---- Footer: rising mist --- already defined top hairline; here the violet→aqua rising bloom */
html.dark .footer::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 140px; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(var(--ghost-aqua-rgb), 0.03) 40%, transparent 100%);
  pointer-events: none;
}
footer.footer .footer-bottom { border-top-color: rgba(var(--accent-rgb), 0.12); }

/* ---- Mobile / coarse-pointer fallback ---- */
@media (max-width: 900px) {
  .nav-chip { display: none; }
  .ghost-hero svg { width: 120px; height: 120px; }
  /* Privacy chips: 2-per-row wrap on small screens */
  .privacy-chips .p-chip { font-size: .72rem; padding: 5px 10px; flex: 0 1 auto; }
  .privacy-chips { gap: 8px; }
  /* Premium full-width CTAs on mobile */
  .cta-row .btn { flex: 1 1 auto; min-width: 0; }
}
@media (hover: none) and (pointer: coarse) {
  /* Coarse pointers get instant fade-in instead of hover shimmer/glow */
  .preview-card:hover .ghost-shimmer,
  .tool-card:hover .ghost-shimmer,
  .featured-card:hover .ghost-shimmer { transform: scaleX(0); opacity: 0; }
  html.dark .btn-primary::after { display: none; }
  /* Cards fall back to a passive mist fade on tap */
  .preview-card:hover, .tool-card:hover, .featured-card:hover {
    transform: none;
    box-shadow: var(--shadow-card-quiet);
  }
  html.dark .preview-card:hover,
  html.dark .tool-card:hover,
  html.dark .featured-card:hover { box-shadow: var(--shadow-card-quiet); }
}

/* ---- Honor reduced-motion globally for ghost effects ---- */
@media (prefers-reduced-motion: reduce) {
  .ghost-hero { animation: none; }
  .ghost-shimmer { transition: none !important; }
  html.dark .btn-primary::after { display: none; }
  .nav::before, .nav-brand .dot::after, body::before, body::after,
  .hero::before, html.dark .footer::after { animation: none !important; }
  /* Keep reveal hiding disabled (already handled above) */
  .hero .badge, .hero h1, .hero .sub, .hero p.lead, .hero .cta-row, .hero .pills {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}