@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Geist:wght@500..700&family=Caveat:wght@500;600&display=swap");

:root {
  --background: oklch(0.995 0 0);
  --foreground: oklch(0.17 0.003 260);
  --muted: oklch(0.955 0.001 260);
  --muted-foreground: oklch(0.52 0.006 260);
  --ink: oklch(0.64 0.19 42);
  --success: oklch(0.62 0.13 155);
  --button-top: oklch(0.34 0.004 260);
  --button-bottom: oklch(0.16 0.003 260);
  --button-edge: oklch(0.1 0.002 260);
  --button-highlight: oklch(1 0 0 / 0.24);
  --button-glow: oklch(0.17 0.003 260 / 0.28);
  --primary-foreground: oklch(0.99 0 0);
  --topbar: oklch(0.995 0 0 / 0.72);
  --radius: 0.625rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.155 0.002 260);
    --foreground: oklch(0.97 0.001 260);
    --muted: oklch(0.21 0.003 260);
    --muted-foreground: oklch(0.66 0.008 260);
    --ink: oklch(0.76 0.16 55);
    --success: oklch(0.74 0.13 155);
    --button-top: oklch(1 0 0);
    --button-bottom: oklch(0.84 0.004 260);
    --button-edge: oklch(1 0 0 / 0.55);
    --button-highlight: oklch(1 0 0 / 0.95);
    --button-glow: oklch(1 0 0 / 0.16);
    --primary-foreground: oklch(0.155 0.002 260);
    --topbar: oklch(0.155 0.002 260 / 0.72);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "cv01", "cv02", "cv11", "ss03";
  letter-spacing: -0.006em;
  line-height: 1.65;
  overflow-x: clip;
  scroll-behavior: smooth;
}

::selection { background: var(--foreground); color: var(--background); }
:focus { outline: none; }
:focus-visible { outline: 1.5px solid color-mix(in oklch, var(--foreground) 28%, transparent); outline-offset: 2px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1040px; margin: 0 auto; padding: 14px 16px;
  background: var(--topbar);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.035em; color: inherit; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }

.page { max-width: 640px; margin: 0 auto; padding: 72px 16px 96px; text-align: center; font-size: 16px; }
section { margin-top: 112px; }
.hero { margin-top: 0; }

h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.04em; margin: 0; font-weight: 700; text-wrap: balance; }
h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 12px; font-weight: 650; text-wrap: balance; }
p { margin: 8px 0; text-wrap: pretty; }
.lead { font-size: 18px; color: var(--muted-foreground); max-width: 32em; margin: 20px auto 0; }

.button-solid {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--primary-foreground);
  background-image: linear-gradient(to bottom, var(--button-top), var(--button-bottom));
  box-shadow: inset 0 1px 0 var(--button-highlight), 0 0 0 1px var(--button-edge), 0 1px 2px oklch(0 0 0 / 0.18), 0 8px 20px -8px var(--button-glow);
  transition: filter 0.2s, transform 0.15s var(--ease-out);
}
.button-solid.small { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.button-solid:hover { filter: brightness(1.06); }
.button-solid:active { transform: scale(0.97); }

.note { font-family: "Caveat", cursive; font-size: 23px; color: var(--ink); line-height: 1.1; rotate: -2deg; margin-top: 18px; }
.note code { font-size: 14px; }

.agents { list-style: none; padding: 0; margin: 40px 0 0; display: flex; justify-content: center; align-items: center; gap: 14px; }
.agents li { transition: transform 0.35s var(--ease-out); }
.agents svg, .agents img { display: block; width: 34px; height: 34px; color: var(--foreground); }
.agents img { border-radius: 9px; }
.agents li:hover { transform: translateY(-4px) scale(1.08); }

.mark { position: relative; display: inline-block; }
.scribble { position: absolute; overflow: visible; pointer-events: none; }
.scribble path {
  fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards paused;
}
.drawn .scribble path { animation-play-state: running; }
.underline { left: -2%; bottom: -6px; width: 104%; height: 14px; }
.underline path { stroke-width: 3; }
.circle { left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); }
.circle path { stroke-width: 2; animation-delay: 0.25s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.callout { text-align: left; display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--muted); margin: 20px 0 0; }
.callout p { margin: 0; }
.callout-icon { font-size: 18px; line-height: 1.5; }

.todo { list-style: none; padding: 0; margin: 20px auto 0; display: grid; gap: 12px; text-align: left; max-width: 520px; }
.todo li { display: flex; gap: 12px; align-items: flex-start; }
.check { flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 4px; background: var(--foreground); position: relative; }
.check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; border: solid var(--background); border-width: 0 2px 2px 0; transform: rotate(45deg); }

code { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.88em; background: var(--muted); padding: 1px 5px; border-radius: 4px; }

.compare { --w: min(calc(100vw - 32px), 800px); width: var(--w); margin-left: calc(50% - var(--w) / 2); margin-top: 24px; overflow-x: auto; text-align: left; border-radius: var(--radius); background: var(--muted); }
.compare table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; min-width: 520px; }
.compare th, .compare td { padding: 12px 14px; vertical-align: top; }
.compare thead th { font-weight: 600; font-size: 13px; color: var(--muted-foreground); }
.compare tbody th { font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
.compare tbody tr + tr > * { box-shadow: inset 0 1px 0 color-mix(in oklch, var(--foreground) 7%, transparent); }
.compare .us { background: color-mix(in oklch, var(--foreground) 5%, transparent); color: var(--foreground); font-weight: 550; }
.compare thead .us { color: var(--foreground); }
.compare code { background: color-mix(in oklch, var(--foreground) 8%, transparent); }
.vendor { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vendor img { width: 20px; height: 20px; border-radius: 6px; }
.compare td, .compare thead th { white-space: nowrap; }
.yes { color: var(--success); font-weight: 700; }
.no { color: var(--muted-foreground); opacity: 0.6; }

.terminal {
  margin-top: 28px; text-align: left; border-radius: 12px; overflow: hidden;
  background: oklch(0.13 0.003 260); color: oklch(0.92 0.003 260);
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.06), 0 24px 48px -24px oklch(0 0 0 / 0.55);
}
.terminal-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: oklch(0.17 0.003 260); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.32 0.004 260); }
.dots i:nth-child(1) { background: oklch(0.68 0.19 25); }
.dots i:nth-child(2) { background: oklch(0.82 0.15 85); }
.dots i:nth-child(3) { background: oklch(0.74 0.16 150); }
.terminal-title { flex: 1; font-size: 12px; color: oklch(0.6 0.006 260); text-align: center; margin-right: 12px; }
.copy {
  font: inherit; font-size: 12px; color: oklch(0.85 0.003 260); background: oklch(1 0 0 / 0.07);
  border: 0; border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: background 0.2s, transform 0.15s var(--ease-out);
}
.copy:hover { background: oklch(1 0 0 / 0.12); }
.copy:active { transform: scale(0.95); }
.terminal pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; }
.terminal code { background: none; padding: 0; font-size: 13px; line-height: 1.9; color: inherit; }
.prompt { color: var(--ink); margin-right: 6px; user-select: none; }
.out { color: oklch(0.62 0.006 260); }
.out.ok { color: oklch(0.78 0.14 155); }

.faq { display: grid; gap: 6px; justify-items: center; }
details { width: min(100%, 520px); text-align: left; border-radius: var(--radius); background: var(--muted); }
summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; font-weight: 550; border-radius: var(--radius);
  transition: background 0.2s;
}
summary::-webkit-details-marker { display: none; }
summary:hover { background: color-mix(in oklch, var(--foreground) 4%, transparent); }
summary:focus-visible { outline: none; background: color-mix(in oklch, var(--foreground) 6%, transparent); }
.chevron { flex: none; color: var(--muted-foreground); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
details[data-state="open"] .chevron { transform: rotate(180deg); }
.answer { overflow: hidden; }
.answer p { margin: 0; padding: 0 16px 16px; color: var(--muted-foreground); }

.founder .note { margin-bottom: 20px; }
.founder-card {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 10px 10px 10px 10px; border-radius: 999px; background: var(--muted); text-align: left;
}
.founder-card img { border-radius: 50%; background: var(--background); }
.founder-card > span { display: grid; line-height: 1.25; font-size: 14px; margin-right: 6px; }
.founder-card small { color: var(--muted-foreground); font-size: 12px; }
.founder-card .button-solid { border-radius: 999px; }

.js [data-reveal] { opacity: 0; }

@media (max-width: 560px) {
  .page { padding-top: 48px; }
  h1 { font-size: 40px; }
  h2 { font-size: 24px; }
  section { margin-top: 88px; }
  .founder-card { border-radius: 20px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .scribble path { animation: none; stroke-dashoffset: 0; }
}