/* ==========================================================================
   TuringDB v2 — linkup.so layout · black + dark gray · terminal green
   sharp corners · minimalistic
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monaspace Neon';
  src: url('fonts/MonaspaceNeon-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Monaspace Neon';
  src: url('fonts/MonaspaceNeon.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #000000;
  --bg-1:      #080808;
  --bg-2:      #0c0c0c;
  --bg-3:      #141414;
  --panel:     #0a0a0a;
  --ink:       #f2f2f0;
  --ink-dim:   #8f8f8c;
  --ink-mute:  #585856;
  --rule:      #1c1c1a;
  --rule-lit:  #2c2c2a;
  --green:     #46f28a;
  --green-dim: rgba(70, 242, 138, 0.10);
  --accent:    #80c0eb;

  --font-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --dot:  rgba(255, 255, 255, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--green); color: #04130a; }

h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
em { font-style: italic; font-weight: 300; color: var(--green); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- type utilities ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.mono-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
  text-decoration: none;
}

/* pixelated arrow (kept — graphic, not text) */
.px-arrow {
  display: inline-block;
  width: 14px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='%23f2f2f0' shape-rendering='crispEdges'><rect x='0' y='4' width='8' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/><rect x='8' y='4' width='2' height='2'/><rect x='10' y='2' width='2' height='2'/><rect x='10' y='6' width='2' height='2'/><rect x='12' y='4' width='2' height='2'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.2s ease;
}
.px-arrow.dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='%23000000' shape-rendering='crispEdges'><rect x='0' y='4' width='8' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/><rect x='8' y='4' width='2' height='2'/><rect x='10' y='2' width='2' height='2'/><rect x='10' y='6' width='2' height='2'/><rect x='12' y='4' width='2' height='2'/></svg>");
}
.px-arrow.green {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10' fill='%23f2f2f0' shape-rendering='crispEdges'><rect x='0' y='4' width='8' height='2'/><rect x='6' y='2' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/><rect x='8' y='4' width='2' height='2'/><rect x='10' y='2' width='2' height='2'/><rect x='10' y='6' width='2' height='2'/><rect x='12' y='4' width='2' height='2'/></svg>");
}

/* ---------- buttons (sharp) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-solid { background: var(--ink); color: #000; }
.btn-solid:hover { background: #ffffff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover .px-arrow { transform: translateX(3px); }
.btn-sm { padding: 8px 15px; font-size: 13.5px; }

/* text-link CTA with underline-on-hover + pixel arrow */
.txt-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 3px;
}
.txt-link.green { color: var(--ink); }
.txt-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1.5px; width: 0;
  background: currentColor;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.txt-link:hover::after { width: 100%; }
.txt-link:hover .px-arrow { transform: translateX(4px); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { max-width: none; margin: 0; padding: 13px 40px; display: flex; align-items: center; gap: 32px; }
.brand-img { height: 40px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a { color: var(--ink-dim); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--ink); }

/* nav dropdown (Use cases) */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-trigger { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.nav-caret { width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-dd:hover .nav-caret, .nav-dd:focus-within .nav-caret { transform: translateY(0) rotate(225deg); opacity: 1; }
.nav-menu {
  position: absolute; top: 100%; left: 50%; margin-top: 10px;
  transform: translateX(-50%) translateY(-4px);
  min-width: 320px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: var(--bg-2); border: 1px solid var(--rule-lit); padding: 6px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 80;
}
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-dd:hover .nav-menu, .nav-dd:focus-within .nav-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-menu a { display: block; padding: 9px 13px; font-size: 13.5px; font-weight: 500; color: var(--ink-dim); white-space: nowrap; transition: color 0.16s ease, background 0.16s ease; }
.nav-menu a:hover { color: var(--ink); background: var(--bg-3); }
.nav-right { margin-left: 0; display: flex; align-items: center; gap: 18px; }
.nav-gh { color: var(--ink-dim); display: inline-flex; align-items: center; transition: color 0.2s ease; }
.nav-gh:hover { color: var(--ink); }
.nav-gh svg { width: 20px; height: 20px; display: block; }
.menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ---------- dot-grid backdrops ---------- */

.hero-dots, .cta-dots, .footer-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}

/* ---------- hero (text left · graph right) ---------- */

.hero {
  position: relative;
  padding: 220px 0 200px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: #000;
}
.hero-dither, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-dither { z-index: 0; }
.hero-gl { z-index: 1; opacity: 0; transition: opacity 0.6s ease; }
.hero-gl.is-on { opacity: 1; }
.hero-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.22) 36%, rgba(0,0,0,0.06) 66%, rgba(0,0,0,0.26) 100%);
}
.hero-grid {
  position: relative;
  z-index: 3;
  display: block;
}
.hero-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hero-title {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 24px;
  max-width: 30ch;
}
.hero-title .nowrap { white-space: nowrap; }
.hero-sub { color: var(--ink-dim); font-size: 18px; max-width: 44ch; margin-bottom: 36px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/*
 * Thin unbroken outline on the hero CTAs, with a one-pixel stepped corner.
 *
 * Twelve segments: four edges, plus two per corner that stair from one edge to
 * the next. Every segment is axis-aligned and meets its neighbours exactly, so
 * the loop is closed and nothing anti-aliases. A stepped corner is what makes
 * it read as pixel art, where border-radius or a clipped chamfer would soften.
 *
 * Drawn as backgrounds and not with the outer/inner fill trick used elsewhere,
 * because these sit over the hero gradient and canvas. Any fill would punch an
 * opaque rectangle into it, so the interior has to stay transparent.
 *
 * --px-step is the corner size, the one value worth tuning.
 */
.hero-cta .txt-link {
  --px-line: rgba(242, 242, 240, 0.5);
  --px-step: 3px;
  padding: 12px 17px;
  background-image:
    linear-gradient(var(--px-line), var(--px-line)), /* top edge */
    linear-gradient(var(--px-line), var(--px-line)), /* bottom edge */
    linear-gradient(var(--px-line), var(--px-line)), /* left edge */
    linear-gradient(var(--px-line), var(--px-line)), /* right edge */
    linear-gradient(var(--px-line), var(--px-line)), /* top-left step, across */
    linear-gradient(var(--px-line), var(--px-line)), /* top-left step, up */
    linear-gradient(var(--px-line), var(--px-line)), /* top-right step, across */
    linear-gradient(var(--px-line), var(--px-line)), /* top-right step, up */
    linear-gradient(var(--px-line), var(--px-line)), /* bottom-left step, across */
    linear-gradient(var(--px-line), var(--px-line)), /* bottom-left step, down */
    linear-gradient(var(--px-line), var(--px-line)), /* bottom-right step, across */
    linear-gradient(var(--px-line), var(--px-line)); /* bottom-right step, down */
  background-size:
    calc(100% - var(--px-step) * 2) 1px,
    calc(100% - var(--px-step) * 2) 1px,
    1px calc(100% - var(--px-step) * 2),
    1px calc(100% - var(--px-step) * 2),
    var(--px-step) 1px,
    1px var(--px-step),
    var(--px-step) 1px,
    1px var(--px-step),
    var(--px-step) 1px,
    1px var(--px-step),
    var(--px-step) 1px,
    1px var(--px-step);
  background-position:
    var(--px-step) 0,
    var(--px-step) 100%,
    0 var(--px-step),
    100% var(--px-step),
    0 var(--px-step),
    var(--px-step) 0,
    100% var(--px-step),
    calc(100% - var(--px-step)) 0,
    0 calc(100% - var(--px-step)),
    var(--px-step) 100%,
    100% calc(100% - var(--px-step)),
    calc(100% - var(--px-step)) 100%;
  background-repeat: no-repeat;
}
/* the sliding underline is redundant once the link is boxed */
.hero-cta .txt-link::after { display: none; }
.hero-cta .txt-link:hover { --px-line: var(--green); }

/* graph floats freely — no frame, no clipping */
.hero-art {
  position: relative;
  height: 480px;
  border: 0;
  background: transparent;
  overflow: visible;
}
#gl { position: absolute; inset: -10% -15%; width: 130%; height: 120%; image-rendering: pixelated; }

/* ---------- logos marquee ---------- */

.band-logos { padding: 54px 0; border-bottom: 1px solid var(--rule); }
.logos-label { text-align: center; font-size: 17px; color: var(--ink-mute); margin-bottom: 34px; padding: 0 28px; }
.logos-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.logos-row img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; }
.logos-row img.logo-roche { height: 50px; }
.logos-row img.logo-oxford { height: 50px; }
@media (max-width: 940px) { .logos-row { flex-wrap: wrap; justify-content: center; gap: 30px 44px; } }

/* ---------- sections ---------- */

.section { padding: 104px 0; border-bottom: 1px solid var(--rule); }
.section-alt { background: var(--bg-1); }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 52px; }
.sec-head.center { align-items: center; text-align: center; }
.sec-head h2 { font-size: clamp(30px, 4vw, 50px); max-width: 20ch; }
.sec-head h2.nowrap-h { white-space: nowrap; max-width: none; }
.sec-lead { color: var(--ink-dim); font-size: 17px; max-width: 60ch; }
.card-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.card-link:hover .px-arrow { transform: translateX(4px); }

/* ---------- interactive feature tabs ---------- */

/* dark-gray feature section (mesh now lives only in the panel) */
#product { background-color: #131313; position: relative; }

.ftabs {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 72px;
  align-items: stretch;
  padding: 0 64px;
}
.ftabs-left { display: flex; flex-direction: column; align-items: flex-start; }
.ftabs-h { font-size: clamp(28px, 3.2vw, 42px); max-width: 16ch; }
.ftabs-intro { color: var(--ink-dim); font-size: 17px; margin-top: 18px; max-width: 38ch; }
.ftabs-detail { margin-top: auto; padding-top: 40px; width: 100%; }
.ft-text { display: none; }
.ft-text.is-active { display: block; }
.ft-text h3 { font-size: 26px; margin-bottom: 12px; }
.ft-text p { color: var(--ink-dim); font-size: 15.5px; max-width: 44ch; }
.ftabs-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.ftabs-right { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 800px; justify-self: end; }
.ft-boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ft-box {
  min-height: 218px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 22px 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ft-box:hover { border-color: rgba(255, 255, 255, 0.62); background: rgba(255, 255, 255, 0.02); }
.ft-box.is-active { border-color: #ffffff; background: rgba(255, 255, 255, 0.03); }
.ft-box:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.ft-box-ico { width: 34px; height: 34px; color: var(--ink-dim); }
.ft-box.is-active .ft-box-ico { color: #ffffff; }
.ft-box-ico svg { width: 100%; height: 100%; display: block; }
.ft-box-meta { display: flex; flex-direction: column; gap: 7px; }
.ft-box-t { font-size: 16.5px; font-weight: 500; color: var(--ink); }
.ft-box-s { font-size: 13.5px; line-height: 1.42; color: var(--ink-dim); }

/* the rectangle under the boxes — fixed size + mesh background */
.ft-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: #0a0a0a;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.ft-pane { display: none; width: 100%; align-items: center; justify-content: center; }
.ft-pane.is-active { display: flex; }
.ft-pane[data-pane="latency"] { align-items: stretch; justify-content: flex-start; align-self: stretch; }

/* laptop terminal (latency) */
/* latency — standalone macbook terminal window (bigger) */
.term { width: 100%; background: #000; border: 1px solid var(--rule-lit); overflow: hidden; font-family: 'Monaspace Neon', var(--font-mono); }
.term-lg { max-width: 100%; }
.term-bar { display: flex; align-items: center; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
.sq { width: 10px; height: 10px; background: var(--rule-lit); }
.term-title { margin-left: 10px; font-family: inherit; font-size: 12.5px; color: var(--ink-mute); }
.term-body { padding: 22px 24px 24px; font-family: inherit; font-weight: 300; font-size: 13px; line-height: 1.9; color: var(--ink-dim); }
.t-prompt { color: var(--ink-dim); }
.t-dim { color: var(--ink-mute); }
.t-spacer { height: 14px; }
.t-kw { color: var(--ink); }
.t-out { color: var(--ink-mute); }
.t-ok { color: var(--ink-dim); margin-top: 6px; }
.t-green { color: var(--green); }
.c-kw { color: var(--accent); }
.c-id { color: var(--ink); }

/* versioning viz */
.ver-viz { width: 100%; height: auto; max-width: 440px; max-height: 360px; }
.ver-guide { fill: none; stroke: rgba(255, 255, 255, 0.06); }
.ve { stroke: #44443f; stroke-width: 1; opacity: 0.5; transition: opacity 0.35s ease, stroke 0.35s ease; }
.ve.future { opacity: 0.06; }
.ve.cur { stroke: #cfcfcc; opacity: 0.6; }
.vn { fill: #6a6a66; transition: fill 0.35s ease, opacity 0.35s ease; }
.vn.future { opacity: 0.1; }
.vn.cur { fill: #ffffff; }
.vtrunk-bg { stroke: #2a2a28; stroke-width: 2; }
.vtrunk-on { stroke: #8a8a86; stroke-width: 2; transition: all 0.35s ease; }
.vbarc { stroke: #44443f; stroke-width: 1.5; fill: none; opacity: 0; transition: opacity 0.35s ease; }
.vbarc.show { opacity: 0.65; }
.vc { fill: #44443f; transition: fill 0.25s ease; pointer-events: none; }
.vc.on { fill: #cfcfcc; }
.vc.cur { fill: var(--green); }
.vc-hit { fill: transparent; cursor: pointer; }
.vbl { fill: var(--ink-mute); font-family: var(--font-mono); font-size: 9px; text-anchor: middle; }

/* RAM viz (scale) */
.mem-viz { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.mem-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  aspect-ratio: 10 / 6;
  border: 1px solid var(--rule-lit);
  padding: 6px;
}
.mem-cell { background: rgba(210, 210, 204, 0.82); }
.mem-cell.mem-keep { background: #f0f0ec; }
.ram-legend { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); }
.ram-dot { width: 9px; height: 9px; background: var(--ink-mute); }

/* ---------- production-grade performance (granulated) ---------- */

.perf-grain { position: relative; background-color: var(--bg-1); }
.perf-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  mix-blend-mode: overlay;   /* tone-neutral: keeps the section the same #080808 gray as the others, adds texture only */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
.perf-grain > .container { position: relative; z-index: 1; }

.perf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1.15fr 0.85fr;
  gap: 16px;
  min-height: 540px;
}
.pc-rt { grid-column: 1; grid-row: 1; }
.pc-zl { grid-column: 1; grid-row: 2; }
.pc-si { grid-column: 2; grid-row: 1; }
.pc-rm { grid-column: 2; grid-row: 2; }
.pc-os { grid-column: 3; grid-row: 1 / 3; }

.perf-card {
  position: relative;
  border: 1px solid var(--rule-lit);
  background: rgba(6, 6, 6, 0.55);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.perf-ico { width: 22px; height: 22px; color: var(--ink-dim); }
.perf-ico svg { width: 100%; height: 100%; display: block; }
.perf-viz { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 14px 0; min-height: 0; }
.perf-viz svg { display: block; width: auto; height: auto; max-width: 72%; max-height: 100%; color: #d2d2cc; }
.pc-rt .perf-viz svg { max-width: 76%; }

.perf-title {
  align-self: flex-start;
  position: relative;
  margin-top: 12px;
  max-width: 18ch;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.perf-title::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: currentColor; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.perf-title:hover::after { width: 100%; }

/* open-source tall card */
.pc-os { align-items: stretch; }
.os-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 0; }
.os-mark { color: var(--ink); display: flex; }
.os-mark svg { width: 120px; height: 120px; display: block; }
.os-subs { display: flex; gap: 36px; margin-top: 26px; }
.os-sub { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.os-sub-ico { width: 34px; height: 34px; border: 1px solid var(--rule-lit); display: flex; align-items: center; justify-content: center; color: var(--ink-dim); }
.os-sub-ico svg { width: 18px; height: 18px; }
.os-sub-label { font-size: 12px; color: var(--ink-dim); }
.os-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.os-foot .perf-title { margin-top: 0; }

/* perf-card hover — subtle green hint on the main icons/images only (no glow, no outline, corner/sub icons stay neutral) */
.perf-viz svg, .os-mark { transition: color 0.32s ease; }
.perf-card:hover .perf-viz svg { color: #8fdcb0; }
.perf-card:hover .os-mark { color: #8fdcb0; }

/* ---------- enterprise trust ---------- */

.trust-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.trust-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.trust-copy h2 { font-size: clamp(26px, 3vw, 40px); }
.trust-copy p { color: var(--ink-dim); font-size: 16px; max-width: 48ch; }

/* ---------- about / manifesto ---------- */
.manifesto-inner { padding: 0 64px; }

/*
 * Two panels split by a diagonal seam: outlined text card on the left, paired
 * photos on the right. Both panels are clip-path polygons whose facing edges
 * share the same slope, so the gap between them stays constant.
 *
 * Each panel width is 50% + (skew - gap) / 2, which makes the seam exactly
 * --mf-gap wide at every height regardless of container width.
 *
 * The outline follows the diagonal because a bordered element cannot: a border
 * gets clipped away with the corner. Instead the outer element is the line
 * colour and an inner element inset by 1px paints the fill back over it.
 * Corners stay square, matching the rest of the site rather than the rounded
 * reference.
 */
.mf-split {
  --mf-skew: 58px;
  --mf-gap: 14px;
  --mf-line: var(--rule-lit);
  position: relative;
  display: flex;
  min-height: clamp(330px, 29vw, 400px);
}
.mf-card,
.mf-media {
  width: calc(50% + (var(--mf-skew) - var(--mf-gap)) / 2);
  background: var(--mf-line);
}
/* The card stays in normal flow so its content sets the section height. If it
   were absolutely positioned like the media, the panel would take the
   container's height instead, and text that wraps to more lines on a narrower
   screen would overflow the clip and be sliced off. min-height is only a floor. */
.mf-card {
  position: relative;
  display: flex;
  padding: 1px;
  clip-path: polygon(0 0, calc(100% - var(--mf-skew)) 0, 100% 100%, 0 100%);
}
.mf-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mf-skew) 100%);
}
.mf-card-inner {
  flex: 1;
  background: var(--bg);
  clip-path: polygon(0 0, calc(100% - var(--mf-skew)) 0, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* right padding clears the diagonal so text never runs under it */
  padding: 38px calc(var(--mf-skew) + 30px) 34px 44px;
}
.mf-media-inner {
  position: absolute;
  inset: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mf-skew) 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--mf-line);
}
/* the wrapper clips, so a photo can be zoomed past cover without bleeding
   over its neighbour in the grid */
.mf-shot { position: relative; overflow: hidden; }
.mf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the panel is portrait and this source is landscape, so cover already fits the
   full height and crops the width. Zoom past cover and pull the window down so
   the titration reads: funnel, pink column, and the flask it drips into. */
.mf-shot--pharma img { object-position: 25% center; transform: scale(1.44); transform-origin: 57% 93%; }

.mf-card-inner h2 {
  font-size: clamp(22px, 2.05vw, 28px);
  line-height: 1.22;
  letter-spacing: -0.024em;
  max-width: none;
}
/* block keeps the intended two-line break, but no nowrap: the card is narrower
   than the old full-width column, so a long line must be allowed to wrap
   rather than overflow into the diagonal and get clipped */
.mf-card-inner h2 .m-line { display: block; }
.mf-body { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.mf-body p { color: var(--ink-dim); font-size: 15.5px; line-height: 1.68; max-width: 52ch; }
.mf-more {
  margin-top: auto;
  padding-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.16s ease;
}
.mf-more:hover { color: var(--green); }
.mf-more:hover .px-arrow { transform: translateX(4px); }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.trust-logos img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; }
.trust-more { color: var(--ink-mute); }

/* ---------- deployment ---------- */

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.plan-card {
  background: var(--bg-2);
  border: 1px solid var(--rule-lit);
  padding: 32px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 460px;
  transition: border-color 0.2s ease;
}
.plan-card:hover { border-color: rgba(255, 255, 255, 0.4); }
.plan-ico svg { width: 40px; height: 40px; display: block; image-rendering: pixelated; transition: filter 0.22s ease; }
/* Community terminal: frame brightens, the code glyphs highlight bright green */
.plan-ico-term .glow { fill: #d6d6d2; transition: fill 0.22s ease; }
.plan-card:hover .plan-ico-term svg { filter: brightness(1.12); }
.plan-card:hover .plan-ico-term .glow { fill: var(--green); }
/* Enterprise & Custom: lowkey, muted green colour-up on hover */
.plan-card:hover .plan-ico-soft svg { filter: brightness(1.02) sepia(0.55) saturate(1.85) hue-rotate(73deg); }
.plan-head { display: flex; flex-direction: column; gap: 7px; }
.plan-name { font-size: 30px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.plan-tier { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-mute); }
.plan-tier-alt { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.plan-meta { display: flex; flex-direction: column; }
.plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.plan-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-mute); }
.plan-val { font-size: 14px; color: var(--ink); line-height: 1.3; text-align: right; }
.plan-price { font-size: 16px; }
.plan-includes { display: flex; flex-direction: column; gap: 13px; }
.plan-feats-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.plan-feats li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; }
.plan-feats li::before { content: ''; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; background: var(--green); }
.plan-cta { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: auto; font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; position: relative; }
.plan-cta::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0; background: currentColor; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.plan-cta:hover::after { width: 100%; }
.plan-cta:hover .px-arrow { transform: translateX(4px); }

/* ---------- integrate ---------- */

.integrate-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.integrate-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.integrate-copy h2 { font-size: clamp(28px, 3.4vw, 46px); }
.integrate-copy p { color: var(--ink-dim); font-size: 16px; max-width: 46ch; }
.integrate-cta { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 8px; }
.integrate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.int-chip {
  display: flex; align-items: center; justify-content: center;
  height: 76px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-dim);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.int-chip:hover { border-color: rgba(255, 255, 255, 0.5); color: var(--ink); background: rgba(255, 255, 255, 0.04); }

/* ---------- start building ---------- */

.build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.build-card {
  background: var(--bg-2);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.build-card:hover { border-color: var(--rule-lit); transform: translateY(-3px); }
.build-card:hover .px-arrow { transform: translateX(4px); }

/* minimalist glassmorphism visuals */
.build-viz {
  position: relative;
  width: 100%;
  height: 176px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #121212, #070707);
}
.bv-glow { display: none; }
.build-ico { position: relative; z-index: 1; display: flex; }
.build-ico svg { width: 66px; height: 66px; display: block; image-rendering: pixelated; }

/* rocket flames — 2-frame pixel flicker */
@keyframes flameA { 0%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes flameB { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } }
.rocket-ico .flame-a { animation: flameA 0.24s linear infinite; }
.rocket-ico .flame-b { animation: flameB 0.24s linear infinite; }
/* demos screen — play <-> pause, a few seconds each */
@keyframes scrPlay  { 0%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes scrPause { 0%, 48% { opacity: 0; } 50%, 100% { opacity: 1; } }
.scr-play  { animation: scrPlay 6s linear infinite; }
.scr-pause { animation: scrPause 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .rocket-ico .flame-a, .scr-play { opacity: 1; }
  .rocket-ico .flame-b, .scr-pause { opacity: 0; }
  .rocket-ico .flame-a, .rocket-ico .flame-b, .scr-play, .scr-pause { animation: none; }
}
.build-card:hover .build-ico { transform: translateY(-3px); transition: transform 0.25s ease; }
.build-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.build-meta { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-mute); }
.build-card h3 { font-size: 19px; font-weight: 400; line-height: 1.3; flex: 1; }
.build-card .card-link { margin-top: 2px; }

/* ---------- cta ---------- */

.cta { position: relative; overflow: hidden; text-align: center; }
.cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0.4; }
.cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cta h2 { font-size: clamp(38px, 5.4vw, 74px); letter-spacing: -0.035em; font-weight: 300; }
.cta-inner p { color: var(--ink-dim); font-size: 18px; }
.cta-row { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }

/* ---------- footer ---------- */

.footer {
  position: relative;
  overflow: hidden;
  padding: 84px 0 32px;
  background:
    radial-gradient(120% 80% at 50% 135%, rgba(70, 242, 138, 0.10), transparent 58%),
    linear-gradient(180deg, #060606, #0c0c0c);
}
/* granulated grain */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* pixel grid */
.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%, #000);
          mask-image: linear-gradient(180deg, transparent, #000 55%, #000);
}
.footer-inner { position: relative; z-index: 2; }
.foot-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
.foot-brand img { height: 28px; margin-bottom: 16px; }
.foot-brand p { font-size: 13.5px; color: var(--ink-mute); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h4 { text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.foot-col a { color: var(--ink-mute); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.foot-col a:hover { color: var(--ink); }

.foot-wordmark {
  font-family: var(--font-mono);
  font-size: clamp(44px, 15vw, 200px);
  line-height: 0.92;
  letter-spacing: 0.04em;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  margin: 52px 0 44px;
  user-select: none;
  color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.015));
  -webkit-background-clip: text;
          background-clip: text;
}

.foot-bottom { display: flex; justify-content: space-between; padding-top: 40px; }
.lang { color: var(--ink-mute); text-decoration: none; }
.lang.active, .lang:hover { color: var(--ink); }

/* ---------- standalone pages (pricing / contact) ---------- */
.page-top { padding-top: 150px; }

.contact-main { padding: 150px 0 110px; background: #131313; }
.contact-main .container { max-width: 1340px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.contact-box { border: 1px solid var(--rule-lit); background: rgba(6, 6, 6, 0.55); padding: 44px 46px; display: flex; flex-direction: column; }
.contact-col-h { font-size: clamp(30px, 3.5vw, 46px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
.contact-sub { color: var(--ink-dim); font-size: 16.5px; line-height: 1.6; margin-top: 22px; max-width: 38ch; }
.contact-links { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.contact-links li { display: flex; align-items: center; gap: 12px; color: var(--ink-dim); font-size: 16px; }
.contact-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-links a:hover { color: var(--green); }
.c-bullet { width: 9px; height: 9px; background: var(--ink); flex: none; }
.contact-offices { display: flex; align-items: center; gap: 40px; margin-top: auto; padding-top: 56px; flex-wrap: wrap; }
.office { display: flex; align-items: center; gap: 10px; }
.office-city { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.office-country { color: var(--ink-dim); font-size: 14px; }

/* mini calendar → Google Calendar booking page */
.cal { margin-top: 26px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--rule-lit); }
.cal-month { font-size: 17px; font-weight: 500; color: var(--ink); }
.cal-year { color: var(--ink-mute); font-weight: 400; }
.cal-nav { display: flex; gap: 4px; }
.cal-arrow { background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 18px; line-height: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; transition: color 0.16s ease; }
.cal-arrow:hover { color: var(--ink); }
.cal-arrow:disabled { opacity: 0.28; cursor: default; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 18px; }
.cal-dow span { text-align: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-mute); padding-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { aspect-ratio: 1.3 / 1; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink-dim); position: relative; user-select: none; }
.cal-empty { visibility: hidden; }
.cal-weekend { color: var(--ink-mute); }
.cal-past { color: var(--ink-mute); opacity: 0.45; }
.cal-avail { background: var(--bg-3); color: var(--ink); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
a.cal-avail:hover { background: var(--green); color: #04130a; }
.cal-today { background: var(--green); color: #04130a; font-weight: 600; }
a.cal-today:hover { background: var(--green); color: #04130a; }
.cal-dot { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(4, 19, 10, 0.8); }

@media (max-width: 860px) {
  .contact-main { padding: 120px 0 80px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-offices { margin-top: 56px; }
}

@media (max-width: 540px) {
  .logos-row { flex-wrap: wrap; justify-content: center; gap: 30px 40px; }
}

/* ---------- performance page ---------- */
.perf-hero { position: relative; min-height: 58vh; display: flex; align-items: center; overflow: hidden; }
.perf-hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.6) 100%), url("fast1-web.jpg"); background-size: cover; background-position: center; }
.perf-hero-media::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='ph'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ph)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 190px 190px; }
.perf-hero-overlay { position: relative; z-index: 2; width: 100%; padding-top: 40px; }
.perf-hero h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; color: #fff; max-width: 16ch; }
.perf-explain { padding: 76px 0 100px; }
.perf-intro { max-width: 940px; margin-bottom: 62px; }
.perf-intro p { color: var(--ink-dim); font-size: 16.5px; line-height: 1.75; max-width: 860px; }

/* accordion spans the full width */
.perf-accrow { display: block; }

/* accordion (bigger, longer) */
.acc { min-width: 0; }
.acc-item { border-top: 2px solid var(--rule-lit); transition: border-color 0.2s ease; }
.acc-item:last-child { border-bottom: 2px solid var(--rule-lit); }
.acc-item:hover, .acc-item.is-open { border-top-color: var(--green); }
.acc-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; text-align: left; background: none; border: 0; padding: 32px 4px; font-family: var(--font-sans); font-size: 33px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-dim); cursor: pointer; transition: color 0.18s ease; }
.acc-item:hover .acc-head, .acc-item.is-open .acc-head { color: var(--ink); }
.acc-head-l { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.acc-ico { display: inline-flex; flex: 0 0 auto; opacity: 0.8; transition: opacity 0.18s ease; }
.acc-ico svg { width: 22px; height: 22px; image-rendering: pixelated; display: block; }
.acc-item:hover .acc-ico, .acc-item.is-open .acc-ico { opacity: 1; }
.acc-head::after { content: '+'; font-family: var(--font-mono); font-size: 24px; line-height: 1; color: var(--ink-mute); transition: color 0.18s ease; }
.acc-item:hover .acc-head::after { color: var(--green); }
.acc-item.is-open .acc-head::after { content: '\2212'; color: var(--green); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.acc-inner { padding: 0 4px 30px; max-width: 940px; }
.acc-inner p { color: var(--ink-dim); font-size: 16.5px; line-height: 1.7; }
.acc-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.acc-list li { position: relative; padding-left: 18px; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.acc-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; background: var(--green); }
.acc-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.acc-link:hover { color: var(--green); }
.acc-link:hover .px-arrow { transform: translateX(4px); }

/* square visual box beside the accordion */
.perf-visual { position: sticky; top: 130px; display: flex; justify-content: center; padding-top: 20px; }
.perf-visual-ico svg { width: 132px; height: 132px; image-rendering: pixelated; display: block; }

/* benchmarks section — gray, grain kept subtle so it matches the flat #131313 sections */
.perf-bench {
  position: relative;
  padding: 84px 0 106px;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, #060606, #0c0c0c);
}
/* film grain, like the footer */
.perf-bench::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* pixel grid, like the footer */
.perf-bench::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.perf-bench .container { position: relative; z-index: 1; }
/* everything sits inside one dark gray panel */
.perf-panel { background: #131313; border: 1px solid var(--rule-lit); padding: 46px 48px 54px; }
.perf-benchhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 46px; }
.perf-eyebrow { display: block; font-family: var(--font-sans); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 16px; }
.perf-bench-h { font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.perf-report-link { margin-top: 0; white-space: nowrap; }

/* interactive terminal (left) + results table (right) — equal heights */
.perf-benchgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 52px; align-items: stretch; }
.perf-tableblock { display: flex; }
.perf-table { width: 100%; height: 100%; border-collapse: collapse; border: 1px solid var(--rule-lit); background: rgba(0, 0, 0, 0.32); }
.perf-table th, .perf-table td { padding: 13px 16px; border-bottom: 1px solid var(--rule); text-align: right; }
.perf-table th:first-child, .perf-table td:first-child { text-align: left; }
.perf-table th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); }
.perf-table td { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.perf-table td:first-child { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-dim); }
.perf-table tbody tr:last-child td { border-bottom: 0; }
.perf-table td.pt-t { color: var(--green); }

/* interactive terminal */
.perf-benchblock { min-width: 0; display: flex; }
.perf-chartrow { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: stretch; flex: 1 1 auto; }
.perf-toggles { display: flex; flex-direction: column; gap: 4px; }
.perf-toggle { text-align: left; white-space: nowrap; padding: 10px 14px; background: none; border: 0; color: var(--ink-mute); font-family: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, monospace; font-weight: 400; font-size: 13px; letter-spacing: 0.01em; cursor: pointer; transition: color 0.16s ease, background 0.16s ease; }
.perf-toggle::before { content: '>  '; white-space: pre; color: var(--ink-mute); transition: color 0.16s ease; }
.perf-toggle:hover { color: var(--ink); }
.perf-toggle.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.045); }
.perf-toggle.is-active::before { content: '>  '; color: var(--ink); }
.perf-chart { border: 1px solid var(--rule-lit); border-radius: 10px; background: #000; padding: 0; min-width: 0; height: 100%; min-height: 390px; display: flex; flex-direction: column; overflow: hidden; }
.perf-macbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #161616; border-bottom: 1px solid var(--rule); }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-r { background: #ff5f57; }
.mac-y { background: #febc2e; }
.mac-g { background: #28c840; }
.perf-mactitle { margin-left: 8px; font-family: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, monospace; font-weight: 400; font-size: 12px; color: var(--ink-mute); }
.perf-term-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 20px 24px; font-family: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, monospace; font-weight: 400; }
.perf-cmd { flex: 0 0 auto; font-size: 13px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; margin-bottom: 10px; }
.perf-cmd .t-kw { color: var(--ink); }
.perf-cmd-flag { color: var(--accent); }
.perf-prompt { color: var(--green); }
.perf-query { display: block; flex: 0 0 auto; font-family: inherit; font-weight: 400; font-size: 12px; line-height: 1.6; color: #f2f2f0; margin-bottom: 18px; white-space: pre-wrap; word-break: break-all; min-height: 3.2em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; letter-spacing: 0.02em; }
.perf-rows { display: flex; flex-direction: column; justify-content: center; gap: 20px; flex: 1 1 auto; }
.perf-row { display: grid; grid-template-columns: 84px 1fr 92px; align-items: center; gap: 12px; }
.perf-name { font-family: inherit; font-size: 12.5px; color: var(--ink-dim); }
/* blinking prompt at the bottom, like a live shell */
.perf-cursorline { flex: 0 0 auto; margin-top: 14px; display: flex; align-items: center; font-size: 13px; }
.perf-caret { display: inline-block; width: 8px; height: 15px; margin-left: 9px; background: #c9c9c4; animation: perfCaret 1.1s steps(1) infinite; }
@keyframes perfCaret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .perf-caret { animation: none; } }
/* bare terminal bars: one row of thin rectangles filling up */
.perf-track { height: 11px; background: none; border: 0; position: relative; overflow: hidden; }
.perf-fill {
  height: 100%; width: 0; min-width: 5px;
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, #f2f2f0 0 4px, transparent 4px 7px);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.perf-val { text-align: right; font-family: inherit; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.perf-turing .perf-name { color: var(--green); }
.perf-turing .perf-fill { background-image: repeating-linear-gradient(90deg, var(--green) 0 4px, transparent 4px 7px); }
.perf-turing .perf-val { color: var(--green); }

/* specs — one horizontal rectangle, spanning full width */
.perf-methodblock { margin-top: 56px; }
.perf-specs { display: flex; flex-wrap: nowrap; border: 1px solid var(--rule-lit); background: rgba(0, 0, 0, 0.32); }
.spec-cell { flex: 1 1 0; min-width: 0; padding: 15px 16px; border-left: 1px solid var(--rule); display: flex; flex-direction: column; gap: 7px; }
.spec-cell:first-child { border-left: 0; }
.spec-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.spec-v { font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.method-notes { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.method-notes p { color: var(--ink-dim); font-size: 14px; line-height: 1.65; }
.method-notes strong { color: var(--ink); font-weight: 500; }
.method-notes code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: var(--bg-3); padding: 1px 6px; }

@media (max-width: 1150px) {
  .perf-benchgrid { grid-template-columns: 1fr; gap: 44px; }
  .perf-panel { padding: 32px 26px 40px; }
}
@media (max-width: 900px) {
  .perf-accrow { grid-template-columns: 1fr; gap: 40px; }
  .perf-visual { position: static; width: 100%; max-width: 300px; }
  .perf-intro, .acc-inner, .perf-benchblock, .perf-methodblock { max-width: none; }
  .acc-head { font-size: 24px; padding: 24px 2px; }
  .perf-chartrow { grid-template-columns: 1fr; gap: 16px; }
  .perf-toggles { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .perf-toggle { border-left: 0; border: 1px solid var(--rule-lit); padding: 9px 14px; }
  .perf-toggle.is-active { border-color: var(--green); }
  .perf-specs { flex-wrap: wrap; }
  .spec-cell { flex: 1 1 40%; border-left: 1px solid var(--rule); }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { height: 320px; }
  .ftabs { grid-template-columns: 1fr; gap: 40px; padding: 0 32px; }
  .ftabs-right { max-width: none; }
  .plan-grid, .trust-inner, .integrate-inner { grid-template-columns: 1fr; gap: 16px; }
  .manifesto-inner { padding: 0 32px; }
  /* stacked: no diagonal, no clipping, photos become a band under the card */
  .mf-split { --mf-skew: 0px; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
  .mf-card, .mf-media { position: static; width: 100%; clip-path: none; }
  .mf-card-inner, .mf-media-inner { position: static; inset: auto; clip-path: none; }
  .mf-card-inner { padding: 34px 26px 30px; }
  /* padding keeps the 1px outline now that the inner is no longer inset */
  .mf-media { height: 300px; padding: 1px; }
  .mf-media-inner { height: 100%; }
  .mf-card-inner h2 { white-space: normal; }
  .mf-card-inner h2 .m-line { display: inline; white-space: normal; }
  .mf-body p { max-width: none; }
  .perf-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; min-height: 0; }
  .pc-rt, .pc-zl, .pc-si, .pc-rm, .pc-os { grid-column: auto; grid-row: auto; }
  .pc-os { grid-column: 1 / 3; }
  .perf-card { min-height: 240px; }
  .build-grid { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 680px) {
  .nav-links, .nav-right { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .nav-links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .nav-links.open a { padding: 13px 28px; }
  /* dropdown expands inline inside the mobile menu */
  .nav-links.open .nav-dd { flex-direction: column; align-items: stretch; }
  .nav-links.open .nav-menu { position: static; transform: none; margin: 0; min-width: 0; display: block; opacity: 1; visibility: visible; pointer-events: auto; background: none; border: 0; padding: 0; }
  .nav-links.open .nav-menu a { padding: 11px 28px 11px 44px; font-size: 14px; }
  .nav-links.open .nav-caret { display: none; }
  .hero { padding: 120px 0 64px; }
  .hero-title .nowrap { white-space: normal; }
  .ftabs { padding: 0 20px; }
  .manifesto-inner { padding: 0 20px; }
  .perf-grid { grid-template-columns: 1fr; }
  .pc-os { grid-column: auto; }
  .ft-boxes { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ft-box { padding: 12px; }
  .ft-box-s { display: none; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- about page ---------- */
.about-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.about-hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.58) 100%), url("aboutus1.avif"); background-size: cover; background-position: center; }
.about-hero-media::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='an'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23an)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 190px 190px; }
.about-hero-overlay { position: relative; z-index: 2; width: 100%; }
.about-hero-h { color: #fff; font-size: clamp(28px, 4vw, 48px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.14; max-width: 1080px; margin: 0 auto; text-align: center; }

.about-believe { padding: 92px 0; }
.about-believe p { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.6; color: var(--ink-dim); max-width: none; }
.about-believe strong { color: var(--ink); font-weight: 500; }

.about-quote { padding: 76px 0 96px; border-top: 1px solid var(--rule); }
.about-quote-inner { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.about-quote-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.about-quote-meta { font-size: 15px; line-height: 1.55; color: var(--ink-dim); margin-top: 6px; }
.about-quote-text { font-size: clamp(22px, 3vw, 38px); line-height: 1.3; letter-spacing: -0.012em; font-weight: 300; color: var(--ink); max-width: 700px; }

.about-story {
  padding: 90px 0;
  border-top: 1px solid var(--rule);
  background-color: #131313;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='sn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sn)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 170px 170px;
}
.about-story-inner { display: grid; grid-template-columns: 640px 1fr; grid-template-rows: auto auto; gap: 46px 60px; align-items: start; }
.about-story-title { grid-column: 1 / -1; grid-row: 1; text-align: left; white-space: nowrap; font-size: clamp(40px, 5vw, 74px); line-height: 1.0; font-weight: 300; letter-spacing: -0.03em; color: var(--ink); }
.about-story-photo { grid-column: 1; grid-row: 2; margin: 0; position: relative; align-self: stretch; }
.about-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid var(--rule-lit); }
.about-story-year { position: absolute; top: 14px; left: 16px; z-index: 1; font-family: var(--font-sans); font-weight: 300; font-size: 15px; letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.about-story-body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 20px; max-width: 700px; }
.about-story-body p { font-size: 16.5px; line-height: 1.78; color: var(--ink-dim); }

.about-team { background: #0c0c0c; border-top: 1px solid var(--rule); padding: 96px 0 112px; }
.about-team-h { font-size: clamp(30px, 4vw, 50px); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 46px; }
.team-group + .team-group { margin-top: 58px; }
.team-group-label { font-size: 18px; color: var(--ink); margin-bottom: 26px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { display: flex; flex-direction: column; }
.team-photo { aspect-ratio: 1 / 1; background: var(--bg-3); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
.team-initials { font-family: var(--font-mono); font-size: 30px; letter-spacing: 0.06em; color: var(--ink-mute); }
.team-name { font-size: 20px; color: var(--ink); margin-top: 16px; letter-spacing: -0.01em; }
.team-role { font-size: 15px; color: var(--ink-dim); margin-top: 4px; }

@media (max-width: 860px) {
  .about-hero { min-height: 66vh; }
  .about-hero-h br { display: none; }
  .about-believe p { max-width: none; }
  .about-quote-inner { grid-template-columns: 1fr; gap: 22px; }
  .about-quote-text { max-width: none; }
  .about-story-inner { grid-template-columns: 1fr; grid-template-rows: none; gap: 24px; }
  .about-story-title { grid-column: 1; grid-row: 1; text-align: left; }
  .about-story-photo { grid-column: 1; grid-row: 2; max-width: 440px; }
  .about-story-body { grid-column: 1; grid-row: 3; max-width: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-initials { font-size: 24px; }
}

/* ---------- use cases page ---------- */
.uc-hero .container, .uc-industries .container { max-width: 1560px; padding: 0 18px; }

/* hero — banner boxed to the same width as the frame below, copy overlaid */
.uc-hero { padding: 0 0 110px; }
.uc-hero-box { position: relative; min-height: 70vh; display: flex; align-items: center; overflow: hidden; }
.uc-hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.6) 100%), url("usecases-hero2.jpg"); background-size: cover; background-position: center; }
.uc-hero-media::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='un'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23un)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 190px 190px; }
.uc-hero-overlay { position: relative; z-index: 2; width: 100%; padding: 48px 64px; }
.uc-hero h1 { font-size: clamp(34px, 4.6vw, 62px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; color: #fff; max-width: 14ch; }
.uc-hero-overlay p { color: rgba(242, 242, 240, 0.72); font-size: 16.5px; line-height: 1.72; margin: 24px 0 34px; max-width: 560px; }

/* industries — sharp-cornered frame */
.uc-industries { padding: 122px 0 84px; }   /* first section: clears the fixed nav */
.uc-frame { border: 1px solid var(--rule-lit); background: rgba(10, 10, 10, 0.55); padding: 20px 34px 52px; }

/* tabs */
.uc-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 46px; border-bottom: 1px solid var(--rule); }
.uc-tab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 2px 20px; color: var(--ink-dim); font-family: var(--font-sans); font-size: 14px; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; }
.uc-tab-ico svg { width: 26px; height: 26px; image-rendering: pixelated; display: block; }
.uc-tab:hover { color: var(--ink); }
.uc-tab.is-active { color: var(--ink); border-bottom-color: var(--ink); }

/* panels — image left (copy overlaid), examples right */
.uc-panel { display: none; padding-top: 52px; }
.uc-panel.is-active { display: block; }
.uc-panel-inner { display: grid; grid-template-columns: 580px 1fr; gap: 52px; align-items: start; }
.uc-panel-media { position: relative; aspect-ratio: 3 / 4; background-size: cover; background-position: center; border: 1px solid var(--rule-lit); display: flex; align-items: flex-end; overflow: hidden; }
.uc-panel-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.55) 68%, rgba(0, 0, 0, 0.85) 100%); }
.uc-panel-copy { position: relative; z-index: 1; padding: 30px 32px 34px; }
.uc-panel-copy h2 { font-size: clamp(24px, 2.4vw, 33px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.12; color: #fff; }
.uc-panel-copy p { color: rgba(242, 242, 240, 0.78); font-size: 14.5px; line-height: 1.62; margin: 14px 0 24px; }

/* example accordion */
.uc-examples { display: flex; flex-direction: column; align-self: stretch; }
.uc-ex { border-top: 1px solid var(--rule-lit); transition: border-color 0.2s ease; }
.uc-ex:last-child { border-bottom: 1px solid var(--rule-lit); }
.uc-ex:hover, .uc-ex.is-open { border-top-color: rgba(70, 242, 138, 0.4); }
.uc-ex-head { display: flex; align-items: center; gap: 18px; width: 100%; background: none; border: 0; padding: 34px 2px; cursor: pointer; text-align: left; }
.uc-ex-headtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.uc-ex-title { font-size: 28px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink-dim); transition: color 0.18s ease; }
.uc-ex-sub { font-size: 15.5px; line-height: 1.45; color: var(--ink-mute); transition: color 0.18s ease; }
.uc-ex:hover .uc-ex-sub, .uc-ex.is-open .uc-ex-sub { color: var(--ink-dim); }
.uc-ex-head::after { content: '+'; flex: 0 0 auto; font-family: var(--font-mono); font-size: 20px; line-height: 1; color: var(--ink-mute); transition: color 0.18s ease; }
.uc-ex:hover .uc-ex-title, .uc-ex.is-open .uc-ex-title { color: var(--ink); }
.uc-ex:hover .uc-ex-head::after { color: var(--green); }
.uc-ex.is-open .uc-ex-head::after { content: '\2212'; color: var(--green); }
.uc-ex-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.uc-ex-inner { padding: 0 2px 24px; }
.uc-ex-inner p { color: var(--ink-dim); font-size: 15px; line-height: 1.7; max-width: 640px; }
.uc-ex-note { margin-top: auto; padding-top: 28px; font-size: 15.5px; line-height: 1.65; color: var(--ink-mute); max-width: 620px; }
.uc-ex-note a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; transition: color 0.16s ease; }
.uc-ex-note a:hover { color: var(--green); }

/* link from each vertical tab out to its long-form page */
.uc-more { margin-top: auto; padding-top: 26px; }
.uc-more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-lit);
  padding-bottom: 6px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.uc-more a:hover { color: var(--green); border-color: var(--green); }
.uc-more a:hover .px-arrow { transform: translateX(3px); }
.uc-more + .uc-ex-note { margin-top: 22px; padding-top: 0; }

@media (max-width: 1120px) {
  .uc-panel-inner { grid-template-columns: 1fr; gap: 36px; }
  .uc-panel-media { max-width: 520px; }
}
@media (max-width: 860px) {
  .uc-hero { padding: 0 0 72px; }
  .uc-industries { padding: 96px 0 56px; }
  .uc-hero-box { min-height: 56vh; }
  .uc-hero-overlay { padding: 32px 24px; }
  .uc-hero h1 { max-width: none; }
  .uc-frame { padding: 10px 20px 36px; }
  .uc-tabs { gap: 26px; overflow-x: auto; }
}

/* ==========================================================================
   404 — copy block over a pixel mesh that spells the code
   Cell size and column count are set inline by app.js so the green squares
   land exactly on the grid lines at every viewport width.
   ========================================================================== */

.nf-main { min-height: 100vh; display: flex; flex-direction: column; padding-top: 150px; }
.nf-copy { width: 100%; padding-bottom: 64px; }   /* flex item: needs an explicit width or the container's auto margins shrink-wrap it */
.nf-copy-inner { max-width: 620px; }
.nf-title {
  font-size: clamp(24px, 2.7vw, 37px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.nf-sub { margin-top: 18px; max-width: 44ch; color: var(--ink-dim); font-size: 15px; line-height: 1.65; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.nf-mesh {
  --nf-cell: 22px;
  --nf-green: #93c3a8;         /* site green, desaturated and lightened for the mesh */
  margin-top: auto;
  width: 100%;
  height: clamp(200px, 42vh, 520px);
  overflow: hidden;
  display: grid;
  grid-auto-rows: var(--nf-cell);
  align-content: start;
  border-top: 1px solid var(--rule-lit);
}
.nf-cell { border-right: 1px solid var(--rule-lit); border-bottom: 1px solid var(--rule-lit); }
.nf-cell.nf-on { opacity: 1; background: var(--nf-green); }
/* intro only on the first build, so a resize rebuild does not replay it */
.nf-cell.nf-on.nf-in {
  animation: nfPop 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: var(--nf-d, 0s);
}
.nf-cell.nf-dim { background: var(--nf-green); opacity: 0.18; }

@keyframes nfPop {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .nf-main { padding-top: 104px; }
  .nf-copy { padding-bottom: 44px; }
  .nf-copy-inner { max-width: none; }
}

/* ==========================================================================
   GEO/SEO long-form pages — generated from content/geo by tools/build-geo.mjs
   Prose styles only. The markdown is rendered as-is, so every element the
   renderer can emit needs a rule here.
   ========================================================================== */

.geo-main { padding: 150px 0 100px; }

/* ---------- vertical pages: hero, alternating bands, use-case grid ---------- */

.geo-vertical { padding: 0 0 40px; }

/*
 * Split hero: copy on the left, photo filling the right half and bleeding to
 * the viewport edge. The band height is fixed rather than driven by the title,
 * so the photo occupies an identical box on every vertical page — a taller
 * title would otherwise change the crop from page to page.
 *
 * The row track is explicit rather than a height on the container: an implicit
 * auto row would size itself from the photo's intrinsic ratio, and the image's
 * height:100% would then resolve against that instead of the band.
 *
 * Like the homepage hero canvas, the top of the photo sits behind the
 * translucent fixed nav.
 */
.geo-hero {
  /* Matches .uc-panel-media on /use-cases exactly: 580px wide at a 3/4 ratio.
     A portrait box matters here. Six of the seven source photos are portrait
     (0.56 to 0.75), so a landscape box crops about 45% of their height and
     upscales the narrower ones past their native width. At 3/4 every source
     downscales instead, and container.avif fits with no crop at all. */
  --geo-img-w: min(580px, 43vw);
  --geo-hero-h: calc(var(--geo-img-w) * 4 / 3);
  display: grid;
  grid-template-columns: 1fr var(--geo-img-w);
  grid-template-rows: var(--geo-hero-h);
}
.geo-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* left padding lines the copy up with the container edge used by every other
     section, while the grid itself spans the full viewport so the photo bleeds */
  padding: 40px 60px 40px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
}
.geo-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.geo-hero-title {
  margin-top: 20px;
  font-size: clamp(27px, 3.3vw, 41px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
  max-width: 19ch;
}
.geo-hero-sub {
  margin-top: 20px;
  max-width: 46ch;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.62;
}
.geo-hero-cta { margin-top: 32px; }
.geo-hero-media { min-height: 0; overflow: hidden; }
.geo-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* black / dark grey banding. #131313 is the site's flat grey section colour,
   shared with #product on the landing page, .contact-main and .perf-panel. */
.geo-band { padding: 68px 0; }
.geo-band:nth-of-type(even) { background: #131313; }
/* full container width, so a band lines up with the use-case grid and has
   equal padding either side rather than stopping mid-page */
.geo-band-inner { overflow-wrap: break-word; }
.geo-band-inner > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.geo-lead .geo-band-inner p { font-size: 17.5px; line-height: 1.7; }
.geo-lead .geo-band-inner strong { color: var(--ink); }

/* use-case grid: three columns, no rules between cells */
.geo-band--uc .geo-uc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 46px;
  margin-top: 46px;
}
.geo-uc-icon { display: block; color: var(--ink-dim); }
.geo-uc-icon svg { width: 30px; height: 30px; display: block; }
.geo-uc h3 {
  margin: 20px 0 0;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.geo-uc p { margin-top: 11px; font-size: 15.5px; line-height: 1.65; color: var(--geo-ink, #c4c4c0); }

@media (max-width: 980px) {
  .geo-band--uc .geo-uc-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
}
@media (max-width: 860px) {
  /* stacked: the band no longer has a fixed height, so the photo goes back to
     a plain square block rather than filling the band */
  /* stacked: photo full width on top, copy below it */
  .geo-hero { --geo-hero-h: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .geo-hero-media { order: 1; }
  .geo-hero-media img { aspect-ratio: 16 / 10; height: auto; }
  .geo-hero-copy { order: 2; padding: 34px 24px 48px; }
  .geo-hero-title { max-width: none; }
  .geo-hero-sub { max-width: none; font-size: 16px; }
  .geo-band { padding: 52px 0; }
  .geo-band--uc .geo-uc-grid { grid-template-columns: 1fr; gap: 38px; }
}
.geo-prose {
  --geo-ink: #c4c4c0;                 /* body copy: readable over long form, softer than --ink */
  color: var(--geo-ink);
  font-size: 16.5px;
  line-height: 1.75;
  overflow-wrap: break-word;          /* the content cites long bare URLs */
}
.geo-article { max-width: 820px; }
.geo-prose > *:first-child { margin-top: 0; }

.geo-prose h1 {
  font-size: clamp(29px, 3.8vw, 45px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.14;
  color: var(--ink);
  margin-bottom: 30px;
}
.geo-prose h2 {
  margin-top: 58px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  font-size: clamp(22px, 2.5vw, 29px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}
.geo-prose h3 {
  margin-top: 34px;
  font-size: 18.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.geo-prose h4, .geo-prose h5, .geo-prose h6 {
  margin-top: 26px;
  font-size: 16.5px;
  font-weight: 500;
  color: var(--ink);
}
.geo-prose h2 + h3 { margin-top: 26px; }

.geo-prose p { margin-top: 17px; }
.geo-prose strong { color: var(--ink); font-weight: 500; }
/* the global `em` rule paints italics green — too loud inside body prose */
.geo-prose em { color: inherit; font-weight: inherit; font-style: italic; }

.geo-prose ul, .geo-prose ol { margin: 18px 0 18px 4px; padding-left: 22px; }
.geo-prose li { margin-bottom: 11px; }
.geo-prose ul li::marker { color: var(--green); }
.geo-prose ol li::marker { color: var(--ink-mute); font-family: var(--font-mono); font-size: 13px; }

.geo-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color 0.16s ease; }
.geo-prose a:hover { color: var(--green); }

.geo-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--green);
  background: var(--bg-3);
  padding: 2px 6px;
}
.geo-prose pre {
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--rule-lit);
  overflow-x: auto;
}
.geo-prose pre code { background: none; padding: 0; color: var(--ink); font-size: 13.5px; line-height: 1.65; }

.geo-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }

/* tables: the comparison grids run to seven columns, so they scroll rather
   than force the page sideways */
.geo-table { margin: 28px 0; border: 1px solid var(--rule-lit); overflow-x: auto; }
.geo-table table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14.5px; }
.geo-table th {
  text-align: left;
  padding: 12px 15px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule-lit);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.geo-table td { padding: 12px 15px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
.geo-table tr:last-child td { border-bottom: 0; }
.geo-table td:first-child { color: var(--ink); }
/* many-column comparisons need more room than the prose measure allows */
.geo-table--wide table { min-width: 720px; }
@media (min-width: 1120px) {
  /* only the article layout still has a narrow measure to break out of */
  .geo-article .geo-table--wide { margin-left: -112px; margin-right: -112px; }
}

/* standalone /faq page: heading left, wry subtitle under it, questions below */
.geo-faq-page { padding: 0 0 40px; }
/* same photo as the about hero, with the site's darkening gradient over it so
   the heading stays legible */
.geo-faq-hero {
  position: relative;
  padding: 150px 0 64px;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.78) 100%),
    url("aboutus1.avif");
  background-size: cover;
  background-position: center;
}
.geo-faq-title {
  font-size: clamp(31px, 4vw, 50px);
  font-weight: 300;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--ink);
}
.geo-faq-sub {
  margin-top: 16px;
  max-width: 54ch;
  color: var(--ink-dim);
  font-size: 17px;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .geo-faq-hero { padding: 104px 0 44px; }
  .geo-faq-sub { font-size: 16px; }
}

/* FAQ disclosures — native <details>, no JS. Answers stay in the DOM so they
   are still indexed and still match the FAQPage JSON-LD. */
.geo-faq { border-bottom: 1px solid var(--rule); }
.geo-faq:first-of-type { border-top: 1px solid var(--rule); margin-top: 26px; }
.geo-faq > summary {
  display: block;                       /* also hides the default marker in Firefox */
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 17px 42px 17px 0;
}
.geo-faq > summary::-webkit-details-marker { display: none; }
.geo-faq > summary h3 { margin: 0; font-size: 17px; font-weight: 500; transition: color 0.16s ease; }
.geo-faq > summary:hover h3 { color: var(--green); }
.geo-faq > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.geo-faq > summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 15px;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--green);
}
.geo-faq[open] > summary::after { content: '−'; }
.geo-faq-a { padding-bottom: 20px; }
.geo-faq-a > *:first-child { margin-top: 0; }

/* inside a banded vertical page the band edge is the separator, so the
   article-style rule above each h2 is redundant */
.geo-vertical .geo-prose h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.geo-band--uc .geo-band-inner { margin-bottom: 0; }

.geo-md-note {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
}
.geo-md-note a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.geo-md-note a:hover { color: var(--green); }

@media (max-width: 860px) {
  .geo-main { padding: 104px 0 72px; }
  .geo-prose { font-size: 16px; }
  .geo-prose h2 { margin-top: 44px; padding-top: 24px; }
}

/* ============================================================
   WAITLIST  ·  unlisted /waitlist page
   Split screen: copy on the dark left, form on a green right.
   ============================================================ */
.wl {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---------- left: copy ---------- */
.wl-left {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px clamp(32px, 4.6vw, 76px) 30px;
  background: var(--bg);
}
.wl-brand { align-self: flex-start; }
.wl-copy { margin: auto 0; padding: 40px 0; }
.wl-title {
  font-size: clamp(30px, 3.5vw, 52px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
.wl-sub {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1.68;
}
/* ---------- right: dithered green panel ---------- */
.wl-right {
  position: relative;
  display: grid;
  place-items: center;
  padding: 48px clamp(24px, 3.4vw, 56px);
  overflow: hidden;
  /* fallback only, sits under .wl-dither. Visible if canvas is unavailable. */
  background: linear-gradient(158deg, #102e1e 0%, #17402a 46%, #0a1d14 100%);
}
/* pixelated so the CSS upscale keeps the chunky dither instead of smoothing it */
.wl-dither {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* ---------- card ---------- */
.wl-card {
  position: relative;
  width: 100%;
  max-width: 424px;
  padding: 30px 30px 32px;
  background: rgba(6, 12, 8, 0.72);
  border: 1px solid rgba(242, 242, 240, 0.14);
  backdrop-filter: blur(6px);
}
.wl-label {
  display: block;
  margin-bottom: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.wl-req { color: var(--green); }
.wl-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(242, 242, 240, 0.18);
  border-radius: 0;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.wl-input::placeholder { color: var(--ink-mute); }
.wl-input:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(0, 0, 0, 0.6);
}
.wl-input[aria-invalid='true'] { border-color: #f2695f; }

.wl-submit {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}
.wl-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.wl-msg {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #f2695f;
}
.wl-msg[data-tone='ok'] { color: var(--green); }

/* honeypot: off-canvas rather than display:none, which some bots skip */
.wl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- success ---------- */
.wl-done { text-align: left; }
.wl-tick {
  display: block;
  width: 22px;
  height: 11px;
  margin-bottom: 20px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.wl-done-title {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.wl-done-sub {
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.66;
}

@media (max-width: 860px) {
  /* stack, and give the green panel the leftover height so a short page fills
     the viewport instead of trailing off into the body background */
  .wl { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wl-left { padding: 26px 24px 34px; }
  .wl-copy { margin: 0; padding: 34px 0 0; }
  .wl-right { padding: 40px 24px 56px; }
}

/* ---------- booking dialog ----------
   Google's appointment scheduler is cross origin, so its interior cannot be
   themed. It is presented as a light sheet inside our own dark chrome, which
   reads as deliberate, rather than dropped inline where it would look broken. */
.bk-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(0px, 3vw, 40px);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
}
/* author display would otherwise beat the UA [hidden] rule */
.bk-overlay[hidden] { display: none; }
body.bk-open { overflow: hidden; }

.bk-modal {
  width: min(720px, 100%);
  height: min(780px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--rule-lit);
}
.bk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px 13px 18px;
  border-bottom: 1px solid var(--rule-lit);
  flex: none;
}
.bk-title { font-size: 15px; font-weight: 500; color: var(--ink); }
.bk-bar-right { display: flex; align-items: center; gap: 16px; }
.bk-out { font-size: 13px; color: var(--ink-dim); text-decoration: none; white-space: nowrap; }
.bk-out:hover { color: var(--green); }
.bk-close {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-dim); font-size: 24px; line-height: 1;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  transition: color 0.16s ease;
}
.bk-close:hover { color: var(--ink); }

.bk-body { position: relative; flex: 1; min-height: 0; }
/* Google's scheduler has no dark mode and ignores prefers-color-scheme, and
   being cross origin nothing of ours can style its interior. A filter is the
   one lever left: the compositor applies it to the rendered pixels without
   touching their DOM. invert flips the white ground, hue-rotate puts the blues
   back roughly where they started. Tune with --bk-invert, 1 is pure black
   ground, lower keeps it nearer our panel grey. */
.bk-frame {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border: 0;
  background: #fff;
  --bk-invert: 0.93;
  /* 180deg would leave Google's blue blue. 96.5deg lands it on the same hue as
     --green (144deg), computed against the feColorMatrix hueRotate matrix
     rather than eyeballed. The ground and the text are near grey after invert,
     so they barely move. */
  --bk-hue: 96.5deg;
  filter: invert(var(--bk-invert)) hue-rotate(var(--bk-hue));
}
/* sits behind the iframe, so it only shows when the iframe paints nothing */
.bk-blocked {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; padding: 40px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--ink-dim); font-size: 14px; line-height: 1.7;
}
.bk-blocked a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bk-blocked a:hover { color: var(--green); }

@media (max-width: 640px) {
  /* edge to edge sheet: the gutter has to go too, or the borderless panel
     still floats inside an 11px frame */
  .bk-overlay { padding: 0; }
  .bk-modal { width: 100%; height: 100%; border: 0; }
}