/* Option A — "Run Log"
   Near-black ink with a blue undertone. A live run trace in the hero, a 12-column
   bento with one demo per capability, and the wire running down the left gutter.
   Soft 10px corners; green is reserved for "live" state. Linear-style. */

:root {
  --bg: #060b14;
  --bg-blur: rgba(6, 11, 20, 0.78);
  --surface: #0a1220;
  --surface-2: #0e182a;
  --surface-3: #14223c;
  --band: #0a1220;
  --line: rgba(148, 170, 205, 0.13);
  --line-strong: rgba(148, 170, 205, 0.27);
  --text: #e9eef6;
  --muted: #93a2b8;
  --faint: #74849c;
  --accent: #02d198;
  --focus: #6cb0ff;
  --ring: rgba(108, 176, 255, 0.28);
  --danger: #ff8f85;
  --field-border: #6b7b93;
}

.hero { padding: clamp(40px, 6vw, 80px) 0 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero h1 { margin: 18px 0 20px; font-size: clamp(2.45rem, 5vw, 3.9rem); line-height: 1.03; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.hero h1 .dim { color: var(--muted); }
.hero .lede { max-width: 38ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.hero .stats { margin-top: clamp(40px, 6vw, 72px); }

.section { padding-top: clamp(56px, 8vw, 104px); }
.ftr { margin-top: 0; }

/* bento placement */
.b-leads { grid-column: span 7; }
.b-ops { grid-column: span 5; }
.b-assist, .b-hub, .b-seq, .b-sec { grid-column: span 4; }
.b-custom { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "head code"; gap: 24px 32px; align-items: start; }
.b-custom .card__head { grid-area: head; }
.b-custom .widget { grid-area: code; }

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; }
  .b-leads, .b-ops, .b-assist, .b-custom { grid-column: span 12; }
  .b-hub, .b-seq { grid-column: span 6; }
  .b-sec { grid-column: span 12; }
}
@media (max-width: 720px) {
  .b-hub, .b-seq { grid-column: span 12; }
  .b-custom { grid-template-columns: 1fr; grid-template-areas: "head" "code"; }
  .card { padding: 20px; }
}