/* ==========================================================================
   Kuncu Teknoloji - Precision Analog & Data Acquisition Systems
   Palette sampled from logo: near-black #17130A, green #1E8E00, amber #F09000
   ========================================================================== */

/* Self-hosted Ubuntu fonts (Ubuntu Font License; latin subset from fontsource) */
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ubuntu-400.woff2") format("woff2");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ubuntu-500.woff2") format("woff2");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ubuntu-700.woff2") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ubuntu-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ubuntu-mono-700.woff2") format("woff2");
}

:root {
  --bg: #FBFAF6;
  --surface: #FFFFFF;
  --ink: #17130A;
  --body: #3F3B2F;
  --muted: #5D5849;
  --line: #E8E4D5;
  --green: #1E8E00;
  --green-deep: #146600;
  --green-tint: #EDF6E8;
  --green-light: #6FD94A;
  --amber: #F09000;
  --amber-deep: #B96D00;
  --amber-tint: #FCF2DE;
  --dark: #17130A;
  --radius: 12px;
  --sans: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--green); color: #fff; }

:focus-visible {
  outline: 3px solid rgba(30, 142, 0, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ============ Header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 12px;
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo { height: 42px; width: auto; display: block; }

.brand-name {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease;
}

.site-nav a:hover { color: var(--ink); }
.site-nav a.btn { border-bottom: none; color: #fff; }
.site-nav a.btn:hover { color: #fff; }

/* "From the Bench" nav link: the logo's waveform in front, to set it apart */
.site-nav a.nav-bench {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}
.site-nav a.nav-bench::before {
  content: "";
  flex: none;
  width: 26px;
  height: 13px;
  background: url("nav-wave.svg") center / contain no-repeat;
}
.site-nav a.nav-bench:hover { color: var(--ink); border-bottom-color: var(--green); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  font-family: var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
  background: var(--green);
  color: #fff;
}

.btn-primary:hover {
  background: var(--green-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(30, 142, 0, 0.28);
}

.btn-ghost {
  border-color: rgba(23, 19, 10, 0.2);
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green-deep);
}

.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }

/* ============ Hero ============ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 88px;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(30, 142, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 142, 0, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Owner-supplied PCB macro, kept as a whisper: blurred, desaturated, masked to
   the top-right so the copy column stays clean. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -8% -8%;       /* no upward bleed: the picture starts at the header's bottom edge */
  pointer-events: none;
  background: url("bg-pcb-light.webp") center top / cover no-repeat;
  opacity: 0.13;
  filter: saturate(0.8) contrast(0.94) blur(2px);
  -webkit-mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 42%, transparent 72%);
  mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 42%, transparent 72%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 250, 246, 0) 55%, #FBFAF6 100%);
}

.hero .container { position: relative; z-index: 1; }

/* Hero: copy left (read first), symbols right over a stronger PCB photo */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px;
  align-items: start;
}

.hero-layout .hero-copy {
  grid-column: 1;
  grid-row: 1;
}

.hero-layout .stats {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 1081px) {
  /* PCB photo shows more strongly behind the symbols on the right */
  .hero::before {
    opacity: 0.3;
    -webkit-mask-image: radial-gradient(90% 110% at 85% 45%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
    mask-image: radial-gradient(90% 110% at 85% 45%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
  }
  .hero-layout .hero-copy h1 { font-size: clamp(34px, 3.2vw, 44px); }
  .hero-layout .eyebrow { font-size: 15px; letter-spacing: 0.06em; }
}

/* Top label: normal font, bold green caps */
.eyebrow {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-deep);
  margin: 0 0 18px;
}

/* Multi-item labels break only between items, in balanced lines */
.eyebrow-text { text-wrap: balance; }

.hero h1 {
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
  max-width: 800px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(var(--amber), var(--amber)) no-repeat bottom center / 100% 6px;
  padding-bottom: 3px;
}

.lede {
  font-size: 18px;
  line-height: 1.68;
  color: var(--muted);
  max-width: 740px;
  margin: 0;
}

.lede strong { color: var(--ink); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.stat-value {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  letter-spacing: -0.02em;
}

.stat-label {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.stats figure { position: relative; margin: 0; }
.stats img { display: block; width: 90%; height: auto; margin-inline: auto; }
.stats .stat-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  transform: translate(-50%, 50%);
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}

/* ============ From the Bench strip (home, under the hero) ============ */

.bench-strip {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding: 56px 0 48px;
  scroll-margin-top: 80px;
}

.bench-strip-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* Same size as the other section headings (.section h2) */
.bench-strip-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}

/* Same waveform as the "From the Bench" nav link */
.bench-strip-label::before {
  content: "";
  flex: none;
  width: 1.4em;
  height: 0.7em;
  background: url("nav-wave.svg") center / contain no-repeat;
}

/* Same size as .section-lede */
.bench-strip-text {
  margin: 0;
  max-width: 660px;
  color: var(--muted);
  font-size: 17px;
}

.bench-deck-controls { display: flex; gap: 8px; flex: none; }

.bench-deck-controls[hidden] { display: none; }

.bench-deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.bench-deck-btn:hover:not(:disabled) {
  color: var(--green-deep);
  border-color: rgba(30, 142, 0, 0.4);
}

.bench-deck-btn:disabled { opacity: 0.35; cursor: default; }

/* The deck bleeds through the container padding so a card can peek in from
   the edge; scroll-snap keeps each card aligned when swiped or arrowed. */
.bench-deck {
  display: flex;
  gap: 16px;
  margin: 18px -24px 0;
  padding: 4px 24px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bench-deck::-webkit-scrollbar { display: none; }

.bench-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 10px;
  width: min(280px, calc(100vw - 64px));
  padding: 8px 8px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bench-item:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 142, 0, 0.35);
  box-shadow: 0 10px 26px rgba(23, 19, 10, 0.07);
}

/* Board photo across the top of the card */
.bench-item-icon {
  display: block;
  width: 100%;
  height: 120px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
}

.bench-item-body { display: block; padding: 0 8px; }

.bench-item-spec {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.bench-item-title {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.bench-item-link {
  display: block;
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-deep);
}

.bench-item:hover .bench-item-link { color: var(--green); }

@media (max-width: 720px) {
  .bench-strip { padding: 44px 0 36px; }
  .bench-strip-head { display: block; }
  .bench-deck-controls { display: none; }
}

/* ============ Sections ============ */

.section { padding: 88px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

/* Second owner macro (BGA pads through the microscope), on the right, continuing
   below where the hero picture ends. The image is opaque and fades exactly to the
   page colour at its edges, so no mask, filter or transparency is needed. */
.section-macro {
  position: relative;
  overflow: hidden;
}

.macro-bga {
  position: absolute;
  bottom: 0;
  right: -5%;
  width: clamp(280px, 38.89%, 560px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.section-macro > .container { position: relative; z-index: 1; }

.section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-deep);
  margin: 0 0 14px;
}

.section-index::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--green);
}

/* Green labels run a bit larger on desktop (owner request) */
@media (min-width: 901px) {
  .eyebrow { font-size: 20px; }
  .section-index { font-size: 18px; }
}

/* Process label: larger and bold (owner request) */
.section-index-lg { font-size: 22px; font-weight: 700; }

@media (min-width: 901px) {
  .section-index-lg { font-size: 26px; }
}

.section h2 {
  font-size: clamp(21px, 2.3vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.section-lede {
  color: var(--muted);
  max-width: 660px;
  margin: 0 0 44px;
  font-size: 17px;
}

/* ============ Cards ============ */

.cards { display: grid; gap: 20px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.section-alt .card { background: var(--bg); }

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(23, 19, 10, 0.07);
  border-color: #D9D4C2;
}

.card h3 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.card p { color: var(--muted); font-size: 14.8px; line-height: 1.62; margin: 8px 0 0; }
.card p strong { color: var(--ink); }

.card-wide { grid-column: span 2; }

.system-spec {
  font-family: var(--sans);
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 0 0 4px;
}

.system-spec span { color: var(--green); }

.engage-example {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

/* ============ Tick lists ============ */

.ticks {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.ticks li {
  position: relative;
  padding-left: 22px;
  margin: 11px 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.ticks li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--green);
  font-size: 13px;
}

/* ============ Toolchain ============ */

.toolchain { margin-top: 56px; }

.toolchain-label {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 14px;
}

.toolchain-list {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--muted);
  margin: 0;
  max-width: 920px;
}

/* ============ Process ============ */

/* "How we work" timeline: numbered circles joined by a line */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  padding: 0;
  margin: 40px 0 44px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 17px;
  height: 2px;
  background: var(--line);
}

.timeline li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.timeline-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: var(--surface);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 15px;
}

@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; margin: 28px 0 36px; }
  .timeline::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; }
  .timeline li { flex-direction: row; gap: 14px; padding: 7px 0; text-align: left; }
}

/* Orange underline accent, same as "end to end" in the hero heading */
.accent-underline {
  font-style: normal;
  background: linear-gradient(var(--amber), var(--amber)) no-repeat bottom center / 100% 3px;
  padding-bottom: 1px;
}

.process-note { margin: 34px 0 0; color: var(--muted); font-size: 14.5px; }

/* ============ About ============ */

.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.about-grid p { color: var(--muted); font-size: 16px; line-height: 1.68; }

.lab-card {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #E9E6DC;
  border-radius: var(--radius);
  padding: 26px 26px 18px;
}

/* Dark surfaces reuse the branded board, darkened into a low green/gold sheen.
   (Image 1 has a blue screen reflection that is off-palette, so it is not used.) */
.lab-card::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("bg-pcb-light.webp") center 55% / cover no-repeat;
  opacity: 0.35;
  filter: brightness(0.5) saturate(0.85) blur(2px);
  -webkit-mask-image: radial-gradient(130% 150% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 78%);
  mask-image: radial-gradient(130% 150% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.4) 48%, transparent 78%);
}

/* The lab card is small, so the texture stays even fainter there. */
.lab-card::before { opacity: 0.26; }

.lab-card > * { position: relative; z-index: 1; }

.lab-title {
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-light);
  margin: 0 0 10px;
}

.lab-list { list-style: none; padding: 0; margin: 0; }

.lab-list li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14.5px;
}

.lab-list li:last-child { border-bottom: none; }

.lab-list li::before {
  content: "\25B8";
  color: var(--green-light);
  font-size: 12px;
}

/* ============ Contact ============ */

.contact { text-align: center; padding: 100px 0; }

.contact .section-index { justify-content: center; }
.contact .section-lede { margin-inline: auto; }
.contact .hero-cta { justify-content: center; }

/* Contact band: full-width dark band, copper-trace photo (contact-bg.webp) fading
   in from the right, with a faint green glow left and a copper glow right */
.contact-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 80px 0;
  background: var(--dark);
  color: #fff;
  scroll-margin-top: 80px;
}

.contact-band::before,
.contact-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.contact-band::before {
  background: url("contact-bg.webp") 60% 22% / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 15%, #000 85%);
}

.contact-band::after {
  background:
    radial-gradient(55% 90% at 8% 110%, rgba(111, 217, 74, 0.14), transparent 70%),
    radial-gradient(45% 80% at 82% 40%, rgba(240, 144, 0, 0.14), transparent 70%);
}

.contact-band-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-band h2 {
  margin: 0 0 10px;
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

.contact-band-lede { margin: 0 0 26px; font-size: 17px; color: rgba(255, 255, 255, 0.8); }

/* Video call note: highlighted so it stands out under the email button */
.contact-video {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(111, 217, 74, 0.35);
  border-radius: 10px;
  background: rgba(111, 217, 74, 0.1);
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.45;
}

.contact-video strong { color: #fff; }

.contact-video-icon { flex: none; color: var(--green-light); }

.contact-band-title {
  margin: 0 0 10px;
  color: var(--green-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-list { list-style: none; padding: 0; margin: 0; }

.contact-list li {
  position: relative;
  padding: 9px 0 9px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 14.5px;
}

.contact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-light);
}

.contact-facts { margin: 18px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; }

/* Thin divider so the band and the dark footer read as two blocks */
main:has(> .contact-band:last-child) + .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); }

@media (max-width: 900px) {
  .contact-band { padding: 56px 0; }
  .contact-band-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============ Footer ============ */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: #D8D4C7;
}

.site-footer > .container { position: relative; z-index: 1; }

.footer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 0;
}

.footer-brand { display: flex; align-items: center; gap: 16px; }

.footer-logo {
  height: 46px;
  width: auto;
  background: #fff;
  padding: 6px;
  border-radius: 10px;
  display: block;
}

.footer-name { color: #fff; font-weight: 700; margin: 0; }
.footer-tag { font-size: 13px; color: #9A9587; margin: 2px 0 0; }

.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }

.footer-links a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 2px;
  font-size: 14.5px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.footer-links a:hover { color: var(--green-light); border-color: var(--green-light); }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 0 22px;
}

.footer-legal p { margin: 0; font-size: 12.5px; color: #8A8577; }
.footer-legal a {
  color: #E9E6DC;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 1px;
}
.footer-legal a:hover { color: var(--green-light); border-color: var(--green-light); }

/* ============ Responsive ============ */

@media (max-width: 1080px) {
  .hero-layout { grid-template-columns: 1fr; gap: 0; }
  .hero-layout .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-layout .stats {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 48px;
  }
}

@media (max-width: 960px) {
  .cards-3 { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 1; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
  .hero-layout .stats { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    box-shadow: 0 18px 40px rgba(23, 19, 10, 0.15);
  }

  .site-nav a { padding: 12px 16px; border-radius: 10px; }
  .site-nav a.btn { margin-top: 6px; text-align: center; }

  .site-nav.open { display: flex; }

  .hero { padding: 64px 0 64px; }
  .section { padding: 64px 0; }
}

/* ============ Motion preferences ============ */

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

/* ============ Founder (About page) ============ */

/* ============ About page rhythm ============ */

/* The About page reads as one continuous column: no alternating white bands,
   and tighter section padding so the blocks flow instead of sitting in panels. */
.page-about .section { padding: 44px 0; }
.page-about .section.contact { padding: 64px 0 88px; }

/* With the white bands gone, cards need their own surface or they vanish into
   the page colour (the .card default is --bg, same as the page). */
.page-about .card { background: var(--surface); }

/* The home page's background treatment (green grid + blurred PCB macro) is
   lifted off the intro and onto the page itself, so it runs behind the intro
   AND the founder block and fades out once, with no seam between them. */
.page-about {
  position: relative;
  overflow: hidden;
}

.page-about > section { position: relative; z-index: 1; }

/* The intro no longer paints its own layers; otherwise it would cover the
   page-level texture with an opaque box. */
.page-about .page-hero { background: none; }
.page-about .page-hero::before,
.page-about .page-hero::after { display: none; }

/* Grid: identical gradients to the home hero, faded out by distance rather
   than by element height. */
.page-about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 142, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 142, 0, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 300px, transparent 640px);
  mask-image: linear-gradient(to bottom, #000 0, #000 300px, transparent 640px);
}

/* PCB macro: same values as the home hero, but its radial mask ends earlier
   (58% instead of 72%) so it is fully gone before the bottom of its box and
   needs no separate colour overlay to hide an edge. */
.page-about::after {
  content: "";
  position: absolute;
  inset: 0 -8% auto -8%;
  height: 640px;
  pointer-events: none;
  background: url("bg-pcb-light.webp") center top / cover no-repeat;
  opacity: 0.13;
  filter: saturate(0.8) contrast(0.94) blur(2px);
  -webkit-mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 58%);
  mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 58%);
}

.founder-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  align-items: start;
}

.founder-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.founder-body h2 { margin-bottom: 4px; }

.founder-body .founder-role {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Body copy matches the site's base text (body{}: 16.5px, --ink) rather than
   the lighter --muted used in cards, so it does not read thin on the white band. */
.founder-body p { color: var(--ink); font-size: 16.5px; line-height: 1.7; }

.founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
}

.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--green-deep);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--green);
}

.founder-link:hover { color: var(--green); }

.founder-badge {
  display: inline-block;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
}

/* Inline links in body copy had no rule, so browsers rendered them default blue.
   Only unstyled anchors are targeted; anything with a class keeps its own look. */
main p a:not([class]),
main li a:not([class]) {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

main p a:not([class]):hover,
main li a:not([class]):hover { color: var(--green); }

/* ============ Card links (home system cards) ============ */

.card-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: 2px;
}

.card-link:hover { color: var(--green); }

/* ============ Inner pages ============ */

.breadcrumb {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0 0 26px;
}

.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-deep); }
.breadcrumb span[aria-hidden="true"] { color: var(--green); margin: 0 9px; }

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 10px;
  /* Same background treatment as the home hero: warm base + faint green grid.
     The PCB macro is the single shared ::before below. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(30, 142, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 142, 0, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 -8% -8%;       /* no upward bleed: the picture starts at the header's bottom edge */
  pointer-events: none;
  background: url("bg-pcb-light.webp") center top / cover no-repeat;
  opacity: 0.13;
  filter: saturate(0.8) contrast(0.94) blur(2px);
  -webkit-mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 42%, transparent 72%);
  mask-image: radial-gradient(120% 130% at 88% 18%, #000 0%, rgba(0, 0, 0, 0.45) 42%, transparent 72%);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(251, 250, 246, 0) 55%, #FBFAF6 100%);
}

.page-hero > .container { position: relative; z-index: 1; }

.page-hero h1 {
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 860px;
}

.page-hero .lede { font-size: 17.5px; }

/* ============ Bench showcase page ============ */

.showcase-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}

.showcase-hero-grid h1 .nowrap { white-space: nowrap; }

.showcase-board {
  min-width: 0;
  margin: 0;
  background: transparent;
}

.showcase-board img {
  display: block;
  width: 100%;
  height: auto;
}

/* Top and back of the board sit side by side; the transparent cutouts stay
   unframed. Scroll-snap keeps one side centred when swiped or arrowed. */
.showcase-slider { position: relative; min-width: 0; }

.showcase-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.showcase-track::-webkit-scrollbar { display: none; }

.showcase-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
}

.showcase-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.showcase-slider-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
}

/* ============ Startup terminal ============ */

.terminal {
  position: relative;
  max-width: 900px;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid rgba(111, 217, 74, 0.18);
  border-top: 2px solid rgba(111, 217, 74, 0.55);
  border-radius: 8px;
  background: var(--dark);
  box-shadow:
    0 26px 60px rgba(23, 19, 10, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 75% at 50% 0%, rgba(111, 217, 74, 0.09), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
}

.terminal-bar,
.terminal-body { position: relative; z-index: 1; }

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  color: #A9A496;
  font-family: var(--mono);
  font-size: 12px;
}

.terminal-shell {
  flex: none;
  color: var(--green-light);
  font-size: 13px;
  letter-spacing: 0;
}

.terminal-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #D8D4C7;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terminal-badge {
  flex: none;
  padding: 2px 8px;
  border: 1px solid rgba(111, 217, 74, 0.28);
  border-radius: 999px;
  color: var(--green-light);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.terminal-body {
  margin: 0;
  padding: 22px 24px 26px;
  overflow-x: auto;
  color: #D8D4C7;
  font-family: var(--mono);
  font-size: 14.5px;
  line-height: 1.7;
  tab-size: 8;
  text-shadow: 0 0 16px rgba(111, 217, 74, 0.08);
}

.terminal-line {
  display: block;
  min-height: 1.7em;
  white-space: pre;
}

.terminal-line--indent { padding-left: 8ch; }

.terminal.is-armed .terminal-line {
  opacity: 0;
  transform: translateY(4px);
}

.terminal-line.is-shown,
.terminal.is-armed .terminal-line.is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.term-dim { color: #6F6A5C; }
.term-cmd { color: #F2EFE6; }
.term-value,
.term-ok { color: var(--green-light); }

.terminal-cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.05em;
  margin-top: 0.15em;
  background: var(--green-light);
  vertical-align: -0.18em;
  animation: terminal-blink 1.1s steps(1) infinite;
}

@keyframes terminal-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-note {
  max-width: 900px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .terminal { margin-top: 28px; border-radius: 6px; }
  .terminal-bar { gap: 10px; padding: 9px 12px; font-size: 11px; }
  .terminal-body { padding: 18px 16px 22px; font-size: 12.5px; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .terminal.is-armed .terminal-line { opacity: 1; transform: none; }
}

/* Empty measurement slot, sized like the plot that will replace it. */
.result-card {
  margin: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.result-slot {
  display: grid;
  place-content: center;
  gap: 4px;
  aspect-ratio: 4 / 3;
  border: 1px dashed #D9D4C2;
  border-radius: 8px;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(30, 142, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 142, 0, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  text-align: center;
}

.result-slot-note {
  font-family: var(--sans);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.result-title {
  display: block;
  margin: 14px 6px 0;
  font-weight: 700;
  font-size: 15.5px;
}

.result-desc {
  display: block;
  margin: 3px 6px 4px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .showcase-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .showcase-slider,
  .showcase-board { max-width: 560px; }
}

/* ============ Spec table ============ */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: none; }

/* Row labels read as body copy now: same font, same size, same colour as the
   paragraph above the table. Only the weight separates label from value. */
.spec-table th {
  width: 32%;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}

.spec-table td { font-weight: 600; }

/* ============ FAQ ============ */

.faq { max-width: 780px; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  padding: 16px 32px 16px 0;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  color: var(--green);
  font-size: 18px;
}

.faq details[open] summary::after { content: "\2212"; }

.faq details p {
  color: var(--muted);
  font-size: 14.8px;
  margin: 0 0 16px;
  line-height: 1.62;
}

/* ============ Mobile experience ============ */

html { -webkit-tap-highlight-color: rgba(30, 142, 0, 0.15); }

@media (max-width: 720px) {
  /* Keep the mobile footer airy: brand + legal only, no link wall */
  .footer-links { display: none; }
  /* Extra inset so the footer logo/brand is never near the screen edge */
  .footer-wrap { padding: 36px 16px 28px; }
  .footer-legal { padding: 18px 16px 22px; }
  /* Founder block stacks; portrait stays modest so it does not dominate */
  .founder-grid { grid-template-columns: 1fr; gap: 24px; }
  .founder-photo { width: 132px; }
}

/* ============ 4K / very large native-resolution desktops ============ */

/* On a 3840x2160 display running at 100% OS scaling the layout reads small.
   This reproduces the browser's 120% zoom, which is the size the owner prefers
   on that class of screen. Displays where the OS already scales are excluded
   (dppx above 1.1), so text is never scaled twice; 1440p and laptops are
   untouched because the width condition requires a 4K-class viewport. */
@media (min-width: 3000px) and (max-resolution: 1.1dppx) {
  html { zoom: 1.2; }
}