/* ==========================================================================
   PixelHUD — stylesheet
   Built to art-direction.md. Every hex here is sampled from the logo.
   Do not add a color that isn't in the token block below.

   BRIGHTENED A SECOND TIME, and this pass did move the accent. The logo's
   #0072FD is still here as --blue-deep and as the head of the button gradient;
   what changed is that the accent carrying links and icons is now a lighter
   #4D9DFF, which reads calmer and buys contrast rather than spending it.

   THE GRADIENT IS TWO TOKENS ON PURPOSE. --grad is deep because a filled
   button puts WHITE on it, and white on the old cyan start was 2.31:1 -- the
   least legible thing on the page and the least businesslike. --grad-bright is
   for decoration that carries no text: the clipped heading and the step rule.
   Never put --grad-bright behind white text.

   EARLIER PASS, still true. The panels moved a long way and
   the ground barely at all, because they carry different risks: panels carry
   white and near-white text with 15:1 of headroom, while the ground carries
   the blue links, which sat at 4.83:1 on pure black and had none. Lifting the
   ground the same distance would have dropped every link under AA. --fg-3 rose
   with the panels for the same reason -- at its old value it fell to 3.2:1 on
   the lightest one.
   ========================================================================== */

:root {
  --ink: #0a0e14;
  --panel: #1a2330;
  --panel-2: #232e3d;
  --panel-3: #2f3a4a;

  --cyan: #3dc8ff;
  --blue: #4d9dff;
  --blue-deep: #0072fd;
  --grad: linear-gradient(100deg, #0072fd 0%, #0a46b8 100%);
  --grad-bright: linear-gradient(100deg, #3dc8ff 0%, #4d9dff 100%);

  --fg: #fbfbfb;
  --fg-2: #b3becd;
  --fg-3: #93a0b0;

  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.22);
  --line-hot: rgba(77, 157, 255, 0.42);

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(20px, 4vw, 40px);
  --wrap: 1160px;
  --sec: clamp(66px, 8.4vw, 116px);
  --r: 3px;

  /* Two rules depend on this: the header bar, and where the open mobile
     menu hangs from. They were separate literals and drifted apart the first
     time the header grew, putting the menu 13px up behind the header. */
  --header-h: 82px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The 44px HUD grid. This is what stops the black reading as flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
  mask-image: radial-gradient(ellipse 130% 120% at 50% 0%, #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.20) 100%);
  -webkit-mask-image: radial-gradient(ellipse 130% 120% at 50% 0%, #000 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.20) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--cyan); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(38px, 6.4vw, 74px); }
h2 { font-size: clamp(30px, 4.4vw, 50px); }
h3 { font-size: clamp(19px, 2vw, 22px); letter-spacing: -0.02em; line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--fg-2);
  max-width: 58ch;
}

.grad {
  background: var(--grad-bright);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The readout label. Mono only ever carries labels, statuses and numbers. */
.readout {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
}
.readout .dot {
  width: 6px; height: 6px; flex: none;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 182, 253, 0.16);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(0,182,253,.16); }
  50% { opacity: .55; box-shadow: 0 0 0 6px rgba(0,182,253,.05); }
}

/* --------------------------------------------------------------------------
   Motif 1 — corner reticle brackets
   -------------------------------------------------------------------------- */

.bracket { position: relative; }
.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 0 solid var(--cyan);
  opacity: .75;
  pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.bracket::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Motif 2 — pixel dissolve, straight off the logo's left edge */
.pixels { display: inline-flex; align-items: center; gap: 4px; }
.pixels i { display: block; background: var(--blue); }
.pixels i:nth-child(1) { width: 10px; height: 10px; opacity: 1; }
.pixels i:nth-child(2) { width: 7px; height: 7px; opacity: .7; }
.pixels i:nth-child(3) { width: 5px; height: 5px; opacity: .45; }
.pixels i:nth-child(4) { width: 3px; height: 3px; opacity: .25; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  padding: 14px 24px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad);
  color: #fff;
}
.btn-primary:hover { color: #fff; filter: brightness(1.12); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--fg);
}
.btn-ghost:hover { border-color: var(--line-hot); color: var(--fg); background: rgba(0, 114, 253, .07); }

.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 19, 25, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--fg); }
.brand img { width: 32px; height: 32px; border-radius: var(--r); }
.brand b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.brand b span { color: var(--blue); }

/* Bigger lockup at the top only. The footer uses .brand too and stays as it
   was -- a masthead and a sign-off are not the same job. */
.site-header .brand { gap: 13px; }
.site-header .brand img { width: 42px; height: 42px; }
.site-header .brand b { font-size: 24px; }
/* The logo is not a link to decorate. It goes home, and that is all it does.
   Without these it inherits the global `a:hover` and "Pixel" turns cyan --
   .brand only sets a resting colour, and :hover on the anchor outranks it. */
.brand:hover, .brand:hover b { color: var(--fg); }
.brand:hover b span { color: var(--blue); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: var(--fg-2);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav a:hover { color: var(--fg); }
.nav > .btn { display: none; }

.header-cta { display: flex; align-items: center; gap: 14px; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  width: 42px; height: 42px;
  color: var(--fg);
  cursor: pointer;
  align-items: center; justify-content: center;
}

@media (max-width: 940px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header-cta .btn { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: var(--header-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 22px;
  }
  .nav.open a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav.open .btn { display: inline-flex; margin-top: 16px; border-bottom: 0; color: #fff; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(64px, 9vw, 116px) clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -220px; left: 50%;
  width: min(1100px, 130%);
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(77, 157, 255, .26) 0%, rgba(77, 157, 255, .08) 42%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }

.hero h1 { margin-bottom: 22px; max-width: 17ch; }
.hero .lede { font-size: clamp(17px, 1.7vw, 20px); max-width: 54ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding: 0;
  list-style: none;
}
.chips li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.chips svg { color: var(--blue); flex: none; }

/* Hero instrument panel — the browser chrome from the logo, made literal */
.hud {
  margin-top: clamp(46px, 6vw, 72px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  overflow: hidden;
}
.hud-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.hud-bar .lights { display: flex; gap: 6px; }
.hud-bar .lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); opacity: .45; display: block; }
.hud-bar .url {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-3);
  letter-spacing: .04em;
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hud-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hud-cell {
  padding: clamp(20px, 2.6vw, 30px);
  border-right: 1px solid var(--line);
}
.hud-cell:last-child { border-right: 0; }
.hud-cell .k {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.7vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.hud-cell .v {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.5;
  display: block;
}
@media (max-width: 780px) {
  .hud-body { grid-template-columns: repeat(2, 1fr); }
  .hud-cell:nth-child(2) { border-right: 0; }
  .hud-cell:nth-child(1), .hud-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { position: relative; z-index: 1; }

.sec { padding-block: var(--sec); }
.sec-alt { background: linear-gradient(180deg, rgba(255,255,255,.040), rgba(255,255,255,.012) 70%); border-top: 1px solid var(--line); }

.sec-head { max-width: 62ch; margin-bottom: clamp(38px, 5vw, 58px); }
.sec-head h2 { margin-bottom: 16px; }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 30px);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-hot); background: var(--panel-2); transform: translateY(-2px); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--fg-2); font-size: 15.5px; margin: 0; }

.ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line-hot);
  border-radius: var(--r);
  color: var(--cyan);
  margin-bottom: 20px;
  background: rgba(0, 114, 253, .07);
}
.ico svg { width: 20px; height: 20px; }

/* Who it's for — tighter tiles, illustration slots waiting */
.tile {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 190px;
  transition: border-color .18s ease;
}
.tile:hover { border-color: var(--line-hot); }
/* Was a 62px dashed strip waiting for a drawn mark. A photograph of a person
   in a 3.3:1 letterbox is a sliver of a person, so the slot takes a real
   picture shape now. object-fit keeps faces from stretching when the tile
   width changes across breakpoints. */
.tile .art {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
  background: var(--panel-2);
}
.tile h3 { font-size: 18px; }
.tile p { color: var(--fg-2); font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------------------
   Process rail
   -------------------------------------------------------------------------- */

.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step {
  padding: clamp(28px, 3.2vw, 40px) clamp(20px, 2.4vw, 34px);
  border-right: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-right: 0; }
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 42px; height: 2px;
  background: var(--grad-bright);
}
.step .n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--blue);
  display: block;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--fg-2); font-size: 15.5px; margin: 0; }
@media (max-width: 860px) {
  .rail { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Difference list
   -------------------------------------------------------------------------- */

.diff { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 4vw, 56px); }
@media (max-width: 760px) {
  .diff { grid-template-columns: 1fr; }
  .diff-item:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .diff-item:last-child { border-bottom: 0; }
}
.diff-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.diff-item:nth-last-child(-n + 2) { border-bottom: 0; }
.diff-item svg { color: var(--blue); margin-top: 3px; }
.diff-item h3 { font-size: 17px; margin-bottom: 6px; }
.diff-item p { color: var(--fg-2); font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   Sample build slot
   -------------------------------------------------------------------------- */

.sample {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.sample .shot {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(180deg, rgba(0,114,253,.09), transparent 55%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    var(--panel-2);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  max-width: 100%;
}
.sample .meta { padding: 22px clamp(20px, 2.2vw, 26px); }
.sample .meta h3 { margin-bottom: 8px; }
.sample .meta p { color: var(--fg-2); font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   Cost panel
   -------------------------------------------------------------------------- */

.cost {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) { .cost { grid-template-columns: 1fr; } }
.cost h2 { margin-bottom: 16px; }
.cost p { color: var(--fg-2); }
.cost ul { list-style: none; margin: 0; padding: 0; }
.cost li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--fg-2);
  align-items: start;
}
.cost li:last-child { border-bottom: 0; }
.cost li svg { color: var(--blue); margin-top: 4px; }
.cost li b { color: var(--fg); font-weight: 500; }

/* --------------------------------------------------------------------------
   Lead form
   -------------------------------------------------------------------------- */

.cta-band {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 80% 120% at 50% 0%, rgba(77,157,255,.16), transparent 62%),
    var(--ink);
}
.form-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }

.form-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(22px, 3vw, 34px);
}
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: #05070a;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color .16s ease;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--blue); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: #4d5866; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 14px;
  text-align: center;
}

.form-msg {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r);
  font-size: 15px;
  border: 1px solid var(--line-2);
  display: none;
}
.form-msg.show { display: block; }
.form-msg.ok { border-color: var(--line-hot); background: rgba(0,114,253,.08); color: var(--fg); }
.form-msg.bad { border-color: rgba(253,90,90,.45); background: rgba(253,90,90,.07); color: #ffc9c9; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 5vw, 62px);
  background: var(--ink);
}
.footer-in {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-in .brand { margin-bottom: 14px; }
.footer-col p { color: var(--fg-3); font-size: 14.5px; max-width: 38ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--fg-2); font-size: 14.5px; }
.footer-links a:hover { color: var(--fg); }
.footer-meta {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}