/* GimmickHub — "electric carbon": near-black slate, cyan/lime accent, square
   corners, technical mono labels. Reads like hardware, not a boutique. */
:root {
  --bg: #0b0f14; --fg: #e6edf3; --card: #121821; --surface: #121821;
  --secondary: #172030; --muted-fg: #8b9bb0;
  --primary: #22d3ee; --primary-fg: #04121a; --accent: #a3e635; --accent-soft: #101c26;
  --border: #23303d; --danger: #f87171; --star: #a3e635;
  --radius: 4px; --radius-sm: 3px; --radius-lg: 6px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body { background: var(--bg); color: var(--fg); }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.2rem); }
.topbar { background: #070a0d; color: var(--primary); font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; }
.topbar a { color: var(--primary); }
header.site { background: rgba(11,15,20,.94); border-bottom: 1px solid var(--border); }
.logo { font-family: var(--mono); font-weight: 700; letter-spacing: -.02em; }
.logo .mark { background: var(--primary); color: var(--primary-fg); border-radius: 3px; }
nav.main a { color: #b9c7d6; font-size: .88rem; }
nav.main a:hover, nav.main a[aria-current="page"] { background: #172030; color: var(--primary); }
.hero { background:
  linear-gradient(180deg, rgba(34,211,238,.07), transparent 60%),
  repeating-linear-gradient(90deg, transparent 0 39px, rgba(34,211,238,.05) 39px 40px);
  border-bottom: 1px solid var(--border); }
.hero .kicker { background: transparent; border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); letter-spacing: .12em; }
.hero .lede { color: #a9b8c7; }
.btn { background: var(--primary); color: var(--primary-fg); border: 0; border-radius: 3px;
  font-weight: 700; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(34,211,238,.35); }
.btn:hover { box-shadow: 0 0 18px rgba(34,211,238,.35); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); box-shadow: none; }
.pcard .btn.small.wide { background: var(--primary); color: var(--primary-fg); border-radius: 3px; }
.catcard, .postcard, .pcard, .deal, .tool { background: var(--card); border: 1px solid var(--border); border-radius: 4px; }
.pcard:hover { box-shadow: 0 0 0 1px var(--primary), 0 8px 24px rgba(0,0,0,.5); }
.pcard .thumb { background: #ffffff; }
.pcard .price { font-family: var(--mono); font-weight: 700; color: var(--primary); }
.catcard .ico { background: #101c26; color: var(--primary); border-radius: 3px; }
.chip { background: #101c26; color: var(--accent); font-family: var(--mono); }
section.tint { background: #0e141b; }
footer.site { background: #070a0d; color: #8b9bb0; }
footer.site h4 { color: var(--primary); font-family: var(--mono); letter-spacing: .12em; }
footer.site a { color: #d7e3ee; }
footer.site .logo .mark { background: var(--primary); color: var(--primary-fg); }
.searchbox { background: #121821; border-color: var(--border); }
.answer, .callout.info { background: #101c26; border-color: var(--border); }
.answer strong, .callout.info > strong { color: var(--primary); }
.prose table th { background: #172030; }
details.faq { background: var(--card); border-color: var(--border); }