/* ==========================================================================
   Binary Innovations — shared stylesheet
   Design language: "datasheet" — a nod to the chip/circuit mark in the
   logo. Hairline borders, corner tooling-marks on panels, monospace used
   for labels/numbers the way a component datasheet would, Inter for
   reading copy. One accent color (circuit blue), used sparingly.
   Sections below are ordered to mirror the page structure and are safe
   to lift out independently (each is marked with a header comment).
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------- */
:root {
  --bg: #0a0a0a;
  --bg-raised: #111113;
  --bg-panel: #0d0d0f;
  --border: #1f1f23;
  --border-strong: #2c2c32;
  --text: #ededec;
  --text-secondary: #9c9ca0;
  --text-tertiary: #6a6a6e;
  --accent: #4c7cff;
  --accent-dim: #345bd6;
  --accent-soft: rgba(76, 124, 255, 0.12);
  --accent-glow: rgba(76, 124, 255, 0.35);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 3px;
  --container: 1120px;
}

/* ---- Reset ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent-soft); color: var(--text); }

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

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* Faint fixed backdrop grid — evokes PCB gridlines without being loud */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 70%);
}

/* ---- Type scale -------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
h1, .h1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h3, .h3 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
}
.lede {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 62ch;
}
p.body, .prose p {
  color: var(--text-secondary);
  max-width: 68ch;
}
.prose p + p { margin-top: 16px; }
.mono-label {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Header / Nav — shared across all pages
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.brand-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--accent); }

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  margin-left: 6px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.icon-link:hover { color: var(--text); border-color: var(--border-strong); }
.icon-link svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-links a { padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .nav-links .icon-link { margin: 10px 0 0; width: 100%; height: 40px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: #060812;
  font-weight: 500;
}
.btn-primary:hover { background: #6f97ff; }
.btn-secondary {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 96px 0 88px;
  position: relative;
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero-copy .eyebrow { display: block; margin-bottom: 20px; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 36px; }
.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.rd-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-tertiary);
}
.rd-note .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Hero schematic — the one deliberate motion moment on the page */
.hero-diagram {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}
.hero-diagram svg { width: 100%; height: 100%; }
.hero-diagram .die { fill: var(--bg-panel); stroke: var(--border-strong); }
.hero-diagram .pin { stroke: var(--border-strong); }
.hero-diagram .trace-active {
  stroke: var(--accent);
  stroke-dasharray: 6 10;
  animation: trace 3.6s linear infinite;
}
.hero-diagram .node-active {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
@keyframes trace {
  to { stroke-dashoffset: -160; }
}
.hero-diagram .glyph { fill: none; stroke: var(--text-tertiary); }

/* ==========================================================================
   Feature grid
   ========================================================================== */
.features { padding: 8px 0 96px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.feature-card {
  background: var(--bg);
  padding: 32px 28px;
  position: relative;
}
.feature-card .mono-label { display: block; margin-bottom: 18px; }
.feature-card svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
  margin-bottom: 20px;
}
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { color: var(--text-secondary); font-size: 14.5px; }

@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Panel section (Problem / Approach / Status use this shell)
   ========================================================================== */
.panel-section { padding: 72px 0; border-top: 1px solid var(--border); }
.panel-section.alt { background: var(--bg-panel); }
.panel-head { margin-bottom: 28px; }
.panel-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
}
@media (max-width: 780px) {
  .panel-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Corner tooling-marks — the recurring structural motif, used on framed
   panels to read like a component on a schematic sheet. */
.framed {
  position: relative;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 32px;
}
.framed::before, .framed::after,
.framed .tick-tl, .framed .tick-br {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--border-strong);
}
.framed::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.framed::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.status-framed {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.status-badge {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  background: var(--accent-soft);
  padding: 5px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  padding: 80px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { color: var(--text-secondary); margin-bottom: 32px; }

/* ==========================================================================
   Footer — shared across all pages
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
}
.footer-links a:hover { color: var(--text); }
.footer-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ==========================================================================
   Page header (used on Approach / Blog / Contact interior pages)
   ========================================================================== */
.page-header { padding: 64px 0 48px; }
.page-header .eyebrow { display: block; margin-bottom: 16px; }
.page-header h1 { margin-bottom: 18px; }

/* ==========================================================================
   Approach page specifics
   ========================================================================== */
.pillars {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.pillar {
  background: var(--bg);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: start;
}
.pillar .index {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  padding-top: 3px;
}
.pillar h3 { margin-bottom: 8px; }
.pillar p { color: var(--text-secondary); font-size: 15px; }
@media (max-width: 600px) {
  .pillar { grid-template-columns: 1fr; gap: 8px; }
}

/* ==========================================================================
   Blog listing + post
   ========================================================================== */
.post-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.post-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.post-row .mono-label { padding-top: 4px; }
.post-row h3 { margin-bottom: 8px; }
.post-row h3 a:hover { color: var(--accent); }
.post-row p { color: var(--text-secondary); font-size: 15px; }
@media (max-width: 600px) {
  .post-row { grid-template-columns: 1fr; gap: 6px; }
}

.empty-state {
  margin-top: 24px;
  border: 1px dashed var(--border-strong);
  padding: 36px 32px;
  color: var(--text-secondary);
  font-size: 15px;
}
.empty-state strong { color: var(--text); display: block; margin-bottom: 8px; font-family: var(--mono); font-weight: 500; }

.post-article { padding: 48px 0 96px; }
.post-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 18px;
}
.post-article h1 { margin-bottom: 28px; max-width: 20ch; }
.post-article .prose { max-width: 68ch; }
.post-article h2 { margin: 40px 0 16px; font-size: 21px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 14px; height: 14px; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.contact-panel { background: var(--bg); padding: 36px; }
.contact-panel h3 { margin-bottom: 8px; }
.contact-panel p { color: var(--text-secondary); font-size: 14.5px; margin-bottom: 24px; }

.field {
  margin-bottom: 20px;
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 11px 12px;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 14px;
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 14.5px;
}
.contact-line:first-of-type { border-top: none; }
.contact-line svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.contact-line a:hover { color: var(--accent); }
.copy-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: var(--radius);
}
.copy-btn:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-diagram { max-width: 300px; margin: 40px auto 0; order: -1; }
}