/* Apex Algo — agentic systems studio.
   Committed single-theme "dark operator": cool blue-black ground, one warm amber
   SIGNAL accent (= live / dispatched / active). Mono-forward, instrument-panel layout. */

:root {
  --bg:      #0b0d12;   /* cool near-black */
  --bg-2:    #0f131b;   /* raised panel */
  --line:    #1b2130;   /* hairline */
  --line-2:  #283040;   /* brighter hairline */
  --ink:     #e6e8ef;   /* cool off-white */
  --muted:   #808b9e;   /* cool grey */
  --faint:   #566072;   /* dim */
  --accent:  #f6a623;   /* amber signal — the only color */
  --accent-soft: rgba(246, 166, 35, 0.14);
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* instrument frame — hairline rails on the sides */
.frame {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  min-height: 100vh;
}

/* mono utility labels */
.eyebrow, .rail, .tag, .k, .nav-links, .mark, .cta, .foot-links, figcaption, .fine {
  font-family: var(--mono);
}

/* nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.mark { font-size: .82rem; letter-spacing: .16em; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(246,166,35,.35); } 70%,100% { box-shadow: 0 0 0 7px rgba(246,166,35,0); } }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: .76rem; letter-spacing: .04em; }
.nav-links a { color: var(--muted); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { color: var(--accent) !important; }

/* hero */
.hero { padding: clamp(48px, 9vw, 104px) 0 clamp(36px, 6vw, 64px); }
.eyebrow { color: var(--accent); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 24px; }
h1 {
  font-size: clamp(2.3rem, 6.2vw, 4rem); line-height: 1.02; letter-spacing: -.025em;
  font-weight: 680; margin: 0; max-width: 16ch; text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); max-width: 54ch; margin: 26px 0 34px; }

/* cta */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .82rem; letter-spacing: .05em; color: var(--accent);
  border: 1px solid var(--line-2); border-radius: 3px; padding: 12px 20px;
  transition: background .16s, border-color .16s, color .16s;
}
.cta span { transition: transform .16s; }
.cta:hover { background: var(--accent); border-color: var(--accent); color: #120d02; }
.cta:hover span { transform: translateX(3px); }

/* dispatch diagram */
.dispatch { margin: clamp(44px, 7vw, 72px) 0 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); overflow: hidden; }
#dispatch { display: block; width: 100%; height: 210px; }
figcaption {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: .72rem; color: var(--muted); letter-spacing: .04em;
}
figcaption .k { color: var(--faint); text-transform: uppercase; margin-right: 6px; }
figcaption b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
figcaption .live { color: var(--accent); }

/* section blocks */
.block { padding: clamp(52px, 8vw, 88px) 0; border-top: 1px solid var(--line); }
.rail { color: var(--faint); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 34px; }

/* practice rows — spec-sheet layout */
.rows { display: flex; flex-direction: column; gap: 4px; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 4vw, 48px); padding: 26px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row h2 { margin: 0; }
.tag { display: inline-block; color: var(--accent); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.row p { margin: 0; color: var(--muted); max-width: 52ch; }

/* what we build — hairline instrument grid (not cards) */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
.cell { background: var(--bg); padding: 24px clamp(16px, 2.4vw, 26px); }
.cell h3 { margin: 0 0 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.cell p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

/* proof */
.claim { font-size: clamp(1.35rem, 3.2vw, 2rem); line-height: 1.25; letter-spacing: -.015em; margin: 0 0 40px; max-width: 24ch; text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 4vw, 40px); margin: 0 0 28px; }
.stats div { border-top: 1px solid var(--line-2); padding-top: 16px; }
.stats dt { font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats dd { margin: 6px 0 0; font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.fine { font-size: .74rem; color: var(--faint); letter-spacing: .02em; }

/* what we ship */
.ships { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ships li { border-top: 1px solid var(--line); }
.ships a { display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 4vw, 48px); padding: 24px 0; transition: background .15s; }
.ships a:hover { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.repo { font-family: var(--mono); color: var(--accent); font-size: 1rem; letter-spacing: .02em; }
.what { color: var(--muted); }

/* pov pull-quote */
.pov { text-align: left; }
.pov-line { font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.35; font-weight: 480; letter-spacing: -.01em; margin: 0; max-width: 30ch; text-wrap: balance; color: var(--ink); }

/* closing cta */
.cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.big-cta { font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 660; letter-spacing: -.02em; margin: 0; text-wrap: balance; }

/* footer */
footer {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
  padding: 28px 0 40px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem; color: var(--faint); letter-spacing: .04em;
}
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: var(--muted); transition: color .15s; }
.foot-links a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .frame { border-left: 0; border-right: 0; }
  .nav-links a:not(.nav-cta):first-child { display: none; }
  .row, .ships a { grid-template-columns: 1fr; gap: 8px; }
  .stats { grid-template-columns: 1fr; gap: 0; }
  .stats div { border-top: 1px solid var(--line); padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .cta span { transition: none; }
}