/* ToolCenter Design System — tokens + base styles */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Color — warm off-white base */
  --bg:        oklch(0.985 0.005 85);
  --bg-1:      oklch(0.97 0.006 85);     /* subtle sections */
  --bg-2:      oklch(0.94 0.008 85);     /* elevated */
  --ink:       oklch(0.17 0.01 80);
  --ink-2:     oklch(0.38 0.01 80);
  --ink-3:     oklch(0.55 0.01 80);
  --rule:      oklch(0.87 0.008 85);
  --rule-2:    oklch(0.78 0.008 85);

  /* Accent — electric lime + indigo */
  --lime:      oklch(0.87 0.22 128);
  --lime-ink:  oklch(0.28 0.12 130);
  --indigo:    oklch(0.50 0.22 265);
  --indigo-2:  oklch(0.40 0.22 265);
  --warn:      oklch(0.75 0.17 70);
  --ok:        oklch(0.70 0.16 155);

  /* Terminal (always dark) */
  --term-bg:   oklch(0.17 0.01 260);
  --term-2:    oklch(0.22 0.012 260);
  --term-ink:  oklch(0.92 0.01 260);
  --term-dim:  oklch(0.65 0.015 260);

  /* Type */
  --f-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Geometry */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --hair: 1px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--lime); color: var(--lime-ink); }

/* ----- Layout primitives ----- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-sm { max-width: 960px; margin: 0 auto; padding: 0 32px; }

.rule { border: 0; height: 1px; background: var(--rule); margin: 0; }
.rule-strong { background: var(--ink); }

.hairline-t { border-top: var(--hair) solid var(--rule); }
.hairline-b { border-bottom: var(--hair) solid var(--rule); }
.hairline-x { border-left: var(--hair) solid var(--rule); border-right: var(--hair) solid var(--rule); }

/* ----- Type ----- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.display {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.display em { font-style: italic; color: var(--indigo); }

.h1 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.h3 {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.lede { font-size: 19px; color: var(--ink-2); line-height: 1.5; max-width: 58ch; }
.small { font-size: 13px; color: var(--ink-3); }
.mono { font-family: var(--f-mono); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r);
  font-weight: 500;
  font-size: 14px;
  border: var(--hair) solid transparent;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover { background: var(--indigo); border-color: var(--indigo); }

.btn-lime {
  background: var(--lime);
  color: var(--lime-ink);
  border-color: var(--lime);
  font-weight: 600;
}
.btn-lime:hover { filter: brightness(0.96); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.btn-ghost:hover { background: var(--bg-1); border-color: var(--ink); }

.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ----- Badges ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: var(--hair) solid var(--rule-2);
  background: var(--bg-1);
  color: var(--ink-2);
}
.badge-lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.badge-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}

/* ----- Cards ----- */
.card {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.card:hover { border-color: var(--ink); }

/* Tile = card with no radius + hairline grid feel */
.tile {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  padding: 24px;
  position: relative;
}

/* ----- Code ----- */
.code-window {
  background: var(--term-bg);
  color: var(--term-ink);
  border-radius: var(--r);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.7;
  border: var(--hair) solid oklch(0.3 0.01 260);
}
.code-window .chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: var(--hair) solid oklch(0.28 0.01 260);
  background: var(--term-2);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--term-dim);
  letter-spacing: 0.04em;
}
.code-window .chrome .dots { display: flex; gap: 6px; }
.code-window .chrome .dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: oklch(0.35 0.01 260);
}
.code-window pre { margin: 0; padding: 20px 22px; overflow-x: auto; }
.code-window .kw { color: oklch(0.8 0.15 300); }
.code-window .str { color: oklch(0.85 0.15 130); }
.code-window .prop { color: oklch(0.78 0.12 30); }
.code-window .com { color: var(--term-dim); font-style: italic; }
.code-window .punct { color: oklch(0.7 0.01 260); }
.code-window .fn { color: oklch(0.78 0.14 220); }

/* inline code */
code.inline {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: 3px;
  border: var(--hair) solid var(--rule);
}

/* ----- Top nav ----- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: oklch(0.985 0.005 85 / 0.9);
  backdrop-filter: blur(10px);
  border-bottom: var(--hair) solid var(--rule);
  transition: background 0.25s, box-shadow 0.25s;
}
.nav.nav-scrolled {
  background: oklch(0.985 0.005 85 / 0.94);
  box-shadow: 0 1px 0 var(--rule), 0 8px 24px -12px oklch(0.2 0.01 80 / 0.08);
}
body { padding-top: 60px; }
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.nav-left { display: flex; align-items: center; gap: 40px; }
.nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--ink-2); }
.nav-links a { transition: color 0.15s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.logo-mark {
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: var(--lime);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
}

/* ----- Footer ----- */
.footer {
  border-top: var(--hair) solid var(--rule);
  background: var(--bg-1);
  padding: 64px 0 32px;
  margin-top: 120px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 48px;
}
.footer h4 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { font-size: 14px; color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer-base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: var(--hair) solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* ----- Utilities ----- */
.flex { display: flex; }
.ai-c { align-items: center; }
.ai-s { align-items: flex-start; }
.jc-sb { justify-content: space-between; }
.jc-c { justify-content: center; }
.g-8 { gap: 8px; } .g-12 { gap: 12px; } .g-16 { gap: 16px; } .g-24 { gap: 24px; } .g-32 { gap: 32px; } .g-48 { gap: 48px; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}.mt-96{margin-top:96px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.py-64 { padding-top: 64px; padding-bottom: 64px; }
.py-96 { padding-top: 96px; padding-bottom: 96px; }
.py-120 { padding-top: 120px; padding-bottom: 120px; }
.ta-c { text-align: center; }
.w-full { width: 100%; }
.grid { display: grid; }
.gc-2 { grid-template-columns: repeat(2, 1fr); }
.gc-3 { grid-template-columns: repeat(3, 1fr); }
.gc-4 { grid-template-columns: repeat(4, 1fr); }
.gc-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 800px) {
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gc-2, .gc-3, .gc-4, .gc-6 { grid-template-columns: 1fr; }
  .container, .container-sm { padding: 0 20px; }
}

/* ----- Shared animations ----- */
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fadein { animation: fadein 0.6s var(--ease) both; }
.fadein-2 { animation: fadein 0.6s 0.12s var(--ease) both; }
.fadein-3 { animation: fadein 0.6s 0.24s var(--ease) both; }

@keyframes blink { 50% { opacity: 0; } }
.caret::after { content: '▋'; margin-left: 2px; animation: blink 1s steps(1) infinite; color: var(--lime); }

/* Marquee for trusted-by */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; gap: 48px; animation: marquee 28s linear infinite; }