/* Babel Mesh. Same page skeleton as the other brand (site.css), a different identity:
   an infrastructure look for developers. Off-black ground, one signal accent (mint), Geist and Geist Mono,
   one corner scale (10px controls, 16px panels), motion only where it shows the network at work.
   Light and dark both follow the system. */

:root {
  --bg: #f3f6f7;
  --surface: #ffffff;
  --surface-2: #eaf0f1;
  --ink: #0c171b;
  --muted: #4b5a61;
  --line: #d6e0e3;
  --honey: #19c9a3;        /* the accent (named honey in site.css) */
  --on-honey: #04130f;
  --accent-text: #0a7a64;
  --shadow: 0 1px 2px rgb(8 20 24 / .06), 0 10px 30px rgb(8 20 24 / .08);
  --glow: radial-gradient(60% 80% at 0% 0%, rgb(25 201 163 / .14), transparent 70%);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0c0f;
    --surface: #10141a;
    --surface-2: #161c23;
    --ink: #e9eff2;
    --muted: #93a2ad;
    --line: #232b33;
    --accent-text: #3ee0b8;
    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 36px rgb(0 0 0 / .5);
    --glow: radial-gradient(60% 80% at 0% 0%, rgb(25 201 163 / .16), transparent 70%);
  }
}
::selection { background: color-mix(in srgb, var(--honey) 38%, transparent); }

/* wordmark: Babel in weight, Mesh in light */
.wm { font-weight: 650; letter-spacing: -.012em; }
.wm i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: .26em; }
.site-header .brand img, .site-footer .brand img { filter: drop-shadow(0 0 10px rgb(25 201 163 / .25)); }

/* buttons: the accent carries dark text in both themes (about 9:1) */
.btn-primary, .nav .btn { background: var(--honey); color: var(--on-honey); }
.btn-primary:hover, .nav .btn:hover { filter: brightness(1.08); }
.btn-ghost { border-color: color-mix(in srgb, var(--ink) 22%, transparent); }

/* ---- hero: the message on the left, the real call on the right, the mesh behind ---- */
.hero { border-bottom: 1px solid var(--line); background: var(--bg); }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--glow); pointer-events: none; }
.hero canvas.meshnet { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 40%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .35) 40%, #000 72%); }
.hero h1 { letter-spacing: -.035em; line-height: 1.04; }
.hero .lead { max-width: 30em; }
.hero .wrap { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); }
.hero .code { margin: 0; box-shadow: var(--shadow); border-radius: var(--r-m); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.hero .code pre { font-size: .86rem; line-height: 1.7; }
.hero .code .k { color: var(--accent-text); }
.hero .code .c { color: var(--muted); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero canvas.meshnet { opacity: .5; } }
@media (prefers-reduced-transparency: reduce) { .hero .code { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---- the live strip ---- */
.live { background: var(--surface); }
.stat .num { color: var(--accent-text); }

/* ---- the four things it runs: cells that differ in ground, not only in text ---- */
.cell { background: var(--surface); transition: border-color .2s, transform .2s; }
.cell:hover { border-color: color-mix(in srgb, var(--honey) 55%, var(--line)); transform: translateY(-2px); }
.cell .code { margin: 0 24px 24px; }
.cell .code pre { font-size: .8rem; }
.cell.tint { background: var(--glow), var(--surface); }
.cell.grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; background-color: var(--surface); }
.cell.grid-bg .copy { background: linear-gradient(var(--surface) 55%, transparent); }
.cell .vector { margin: 6px 24px 24px; font: .8rem/1.7 var(--mono); color: var(--muted); }
.cell .vector b { color: var(--accent-text); font-weight: 500; }

/* ---- how a request travels: four verbs on one line ---- */
.route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--surface); }
.route li { position: relative; padding: 28px 26px 30px; }
.route li + li { border-left: 1px solid var(--line); }
.route li::after { content: ""; position: absolute; right: -5px; top: 38px; width: 9px; height: 9px; border-top: 1.5px solid var(--honey); border-right: 1.5px solid var(--honey); transform: rotate(45deg); background: var(--surface); z-index: 1; }
.route li:last-child::after { display: none; }
.route h3 { margin-bottom: 8px; }
.route p { color: var(--muted); font-size: .96rem; }
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; }
  .route li + li { border-left: 0; border-top: 1px solid var(--line); }
  .route li::after { display: none; }
}

/* ---- lend what you have ---- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ladder li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.ladder .icon { width: 28px; height: 28px; color: var(--accent-text); margin-top: 2px; }
.ladder h3 { margin-bottom: 4px; }
.ladder p { color: var(--muted); max-width: 34em; }
.ladder .next { border-style: dashed; background: transparent; }
.ladder .next .icon { color: var(--muted); }

/* ---- closing ---- */
.closing { background: var(--glow), var(--bg); }

@media (prefers-reduced-motion: reduce) { .cell { transition: none; } .cell:hover { transform: none; } }