/* Zimmer Kit marketing site — "terminal" identity.
 *
 * Deliberately unlike the light/teal/rounded Resolve2D build: dark canvas,
 * Space Grotesk display + monospace accents, sharp corners, red-on-black.
 * Same template engine, completely different skin — that's the point.
 * Everything here overrides site.css/theme.css because custom.css loads last.
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --kit-bg: #0a0a0c;
  --kit-panel: #141418;
  --kit-line: rgba(255,255,255,0.09);
  --kit-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --kit-display: "Space Grotesk", system-ui, sans-serif;
  /* lift muted text for readability on the dark canvas (used by section
     bodies, nav, footer) */
  --color-secondary: #9aa1ac;
}

/* Dark-only brand — no light mode, so hide the theme toggle. */
[data-zk-theme] { display: none !important; }

/* ── canvas ─────────────────────────────────────────────────────────── */
body {
  background: var(--kit-bg) !important;
  color: #e8e8ec !important;
  font-family: var(--kit-display);
}
body::before {  /* faint grid texture behind everything */
  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: 46px 46px;
}

h1, h2, h3, .article h2, .article h3 { font-family: var(--kit-display); letter-spacing: -0.02em; }

/* ── header ─────────────────────────────────────────────────────────── */
header {
  background: rgba(10,10,12,0.82) !important;
  border-bottom: 1px solid var(--kit-line) !important;
}
[data-site-title] {
  font-family: var(--kit-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.navlink { font-family: var(--kit-mono); font-size: 0.82rem; letter-spacing: 0.01em; }
.navlink:hover, .navlink-active { color: #fff !important; }
.navlink-active::after { background: var(--color-primary) !important; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(120% 130% at 85% 0%, rgba(237,32,36,0.28), transparent 55%),
    radial-gradient(90% 90% at 0% 100%, rgba(237,32,36,0.10), transparent 60%),
    #08080a !important;
  border-bottom: 1px solid var(--kit-line);
}
.hero .zk-hero-content { position: relative; }
/* mono kicker above the H1 */
.hero h1::before {
  content: "// pocketbase + htmx";
  display: block;
  font-family: var(--kit-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-transform: none;
}
.hero h1 { font-weight: 700; letter-spacing: -0.035em; }
.hero p { color: rgba(255,255,255,0.72) !important; }

/* ── buttons: mono label + a Lucide arrow that nudges on hover ──────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 4px;
  font-family: var(--kit-mono);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-primary::after {  /* Lucide "arrow-right" (white, matches button text) */
  content: "";
  width: 1rem; height: 1rem; flex: 0 0 auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  transition: transform 140ms ease;
}
.btn-primary:hover::after { transform: translateX(3px); }

/* ── feature-card icon chips (dark, sharp, red) ─────────────────────── */
.zk-card-ico {
  border-radius: 7px !important;
  background: rgba(237,32,36,0.12) !important;
  border: 1px solid rgba(237,32,36,0.28);
  color: var(--color-primary) !important;
}

/* ── video player: dark frame with a red glow ──────────────────────── */
.zk-video-frame {
  border-radius: 10px !important;
  border: 1px solid rgba(237,32,36,0.40);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 30px 80px -24px rgba(237,32,36,0.40),
    0 24px 60px -24px rgba(0,0,0,0.85);
}

/* ── sections: flatten the alternating bands into one dark flow ─────── */
#app section { background: transparent !important; border-top-color: var(--kit-line) !important; }
#app section h2 { position: relative; padding-left: 1rem; }
#app section h2::before {  /* red ticker bar on every section heading */
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em;
  width: 4px; border-radius: 2px; background: var(--color-primary);
}
/* the small uppercase eyebrow inside split panels → mono red */
#app p.uppercase { font-family: var(--kit-mono); color: var(--color-primary) !important; opacity: 1 !important; }

/* ── cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--kit-panel) !important;
  border: 1px solid var(--kit-line) !important;
  border-radius: 6px !important;
  position: relative;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}
.card::before {  /* red top accent, reveals on hover */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-primary); transform: scaleX(0); transform-origin: left;
  transition: transform 180ms ease;
}
.card:hover { border-color: rgba(237,32,36,0.55) !important; transform: translateY(-3px); }
.card:hover::before { transform: scaleX(1); }
.card h3 { font-family: var(--kit-display); font-weight: 600; }
.card p { color: rgba(255,255,255,0.62) !important; }
figure.card figcaption { color: #fff !important; }

/* ── split feature panel (the dark card beside split copy) ──────────── */
#app section .rounded-2xl {
  border: 1px solid rgba(237,32,36,0.35) !important;
  border-radius: 8px !important;
  background: #101014 !important;
}

/* ── footer ─────────────────────────────────────────────────────────── */
footer { background: #060608 !important; border-top: 1px solid var(--kit-line); }
footer [data-site-title] { color: #fff; }

/* ── article prose on interior pages ────────────────────────────────── */
.article { color: rgba(255,255,255,0.74); }
.article h2 { color: #fff; padding-left: 0.9rem; position: relative; }
.article h2::before {
  content: ""; position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
  width: 3px; background: var(--color-primary); border-radius: 2px;
}
.article h3 { color: #fff; }
.article strong { color: #fff; }
.article a { color: var(--color-primary); }