:root{
  --bg:#ffffff; --surface:#f0f7fb; --surface-2:#e2eff6;
  --line:#cfe3ec; --line-soft:#e2eef4;
  --text:#0f172a; --text-dim:#475569; --text-faint:#94a3b8;
  --accent:#0284c7; --accent-ink:#ffffff;
  --structural:#0369a1; --danger:#dc2626; --good:#16a34a; --focus:#0284c7;
  --radius-s:3px; --radius-m:6px;
  --font-display:'IBM Plex Sans Condensed','Arial Narrow',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','Consolas',monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
}
::selection{ background:var(--accent); color:var(--accent-ink); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
img,svg{ max-width:100%; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--structural); display:flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width:14px; height:1px; background:var(--structural); display:inline-block; }

/* ---------- header / nav ---------- */
header.site-header{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:24px; max-width:1120px; margin:0 auto; position:relative; }
.logo{ display:flex; align-items:center; gap:.6em; text-decoration:none; }
.site-logo-img{ height:64px; width:auto; display:block; }
nav.site-nav{ display:flex; gap:28px; }
nav.site-nav a{ font-family:var(--font-mono); font-size:.82rem; text-decoration:none; color:var(--text-dim); letter-spacing:.02em; padding:4px 0; border-bottom:1px solid transparent; }
nav.site-nav a:hover{ color:var(--text); }
nav.site-nav a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--accent); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-s); color:var(--text); width:38px; height:38px; align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle svg{ width:18px; height:18px; }
@media (max-width:760px){
  nav.site-nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); padding:8px 24px;
    display:none;
  }
  nav.site-nav.open{ display:flex; }
  nav.site-nav a{ padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .nav-toggle{ display:inline-flex; }
  .header-cta{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono); font-size:.86rem; font-weight:500; padding:13px 22px; border-radius:var(--radius-s);
  text-decoration:none; display:inline-flex; align-items:center; gap:.5em; border:1px solid transparent; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:none; }
.btn-ghost:hover{ border-color:var(--text-dim); }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- trust bar ---------- */
.trust-bar{ background:var(--text); }
.trust-bar ul{ list-style:none; margin:0; padding:18px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; }
@media (max-width:860px){ .trust-bar ul{ grid-template-columns:repeat(2,1fr); } }
.trust-bar li{ display:flex; align-items:center; gap:10px; font-size:.84rem; color:var(--accent-ink); }
.trust-bar svg{ width:18px; height:18px; flex:none; color:#38bdf8; }

/* ---------- generic section shell ---------- */
section{ padding:64px 0; border-top:1px solid var(--line); }
section.no-border{ border-top:none; }
.section-head{ margin-bottom:36px; }
.section-head h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:10px; }
.page-hero{ padding:56px 0 40px; }
@media (max-width:860px){ .hero-grid-home{ grid-template-columns:1fr !important; gap:40px !important; } }
.page-hero h1{ font-size:clamp(2rem,3.8vw,2.8rem); margin:14px 0 16px; }
.page-hero p.lede{ color:var(--text-dim); font-size:1.05rem; max-width:60ch; }

/* ---------- diagram card (home) ---------- */
.diagram-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px; }
.diagram-card svg{ display:block; width:100%; height:auto; }
.diagram-caption{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint); }
.diagram-caption .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:6px; }

/* ---------- product spec sheet ---------- */
.spec-sheet{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.spec-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:28px 28px 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.spec-top h3{ font-size:1.9rem; }
.spec-top .cmd{ font-family:var(--font-mono); color:var(--structural); font-size:.95rem; }
.spec-top p{ color:var(--text-dim); max-width:52ch; margin:12px 0 0; }
.price-block{ text-align:right; font-family:var(--font-mono); flex:none; }
.price-block .status{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--structural); }
.price-block .price{ font-size:1.6rem; color:var(--text); margin-top:4px; font-variant-numeric:tabular-nums; }
.spec-body{ display:grid; grid-template-columns:1.3fr 1fr; }
@media (max-width:760px){ .spec-body{ grid-template-columns:1fr; } }
.spec-fields{ padding:24px 28px; border-right:1px solid var(--line); }
@media (max-width:760px){ .spec-fields{ border-right:none; border-bottom:1px solid var(--line); } }
.field-row{ display:grid; grid-template-columns:150px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.field-row:last-child{ border-bottom:none; }
.field-row dt{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0; padding-top:2px; }
.field-row dd{ margin:0; color:var(--text); }
dl.spec-fields-list{ margin:0; }
.spec-cta{ padding:24px 28px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.spec-cta .note{ font-size:.78rem; color:var(--text-faint); line-height:1.5; }
#paypal-button-container{ min-height:45px; }
.result-panel{ border:1px solid var(--structural); background:color-mix(in srgb, var(--structural) 10%, var(--surface)); border-radius:var(--radius-m); padding:16px 18px; font-size:.9rem; }
.result-panel .key{ font-family:var(--font-mono); font-size:1.05rem; color:var(--good); margin-top:6px; word-break:break-all; }
.error-panel{ border:1px solid var(--danger); background:color-mix(in srgb, var(--danger) 10%, var(--surface)); border-radius:var(--radius-m); padding:14px 18px; font-size:.88rem; color:var(--danger); }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
@media (max-width:860px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--surface); padding:26px 22px; }
.step .num{ font-family:var(--font-mono); color:var(--accent); font-size:.85rem; }
.step h4{ font-family:var(--font-display); font-size:1.05rem; margin:14px 0 8px; font-weight:600; }
.step p{ font-size:.88rem; color:var(--text-dim); }

/* ---------- BOM / roadmap table ---------- */
.bom{ width:100%; border-collapse:collapse; font-size:.92rem; }
.bom caption{ text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
.bom th{ text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:10px 14px; border-bottom:1px solid var(--line); }
.bom td{ padding:14px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.bom tbody tr:last-child td{ border-bottom:1px solid var(--line); }
.bom .item-id{ font-family:var(--font-mono); color:var(--text-dim); }
.bom .ghost{ color:var(--text-faint); }
.pill{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:20px; display:inline-block; }
.pill-live{ background:color-mix(in srgb, var(--structural) 18%, transparent); color:var(--structural); }
.pill-wip{ background:color-mix(in srgb, var(--text-faint) 16%, transparent); color:var(--text-faint); border:1px dashed var(--line); }
.bom-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); }
.bom-wrap .bom{ min-width:520px; background:var(--surface); }

/* ---------- product teaser card (home) ---------- */
.teaser-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.teaser-card .cmd{ font-family:var(--font-mono); color:var(--structural); font-size:.85rem; }
.teaser-card h3{ font-size:1.4rem; margin:8px 0 6px; }
.teaser-card p{ color:var(--text-dim); font-size:.92rem; max-width:48ch; }
.teaser-price{ font-family:var(--font-mono); font-size:1.3rem; text-align:right; flex:none; }

/* ---------- identity plate (about page) ---------- */
.identity-plate{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
.identity-plate .plate-fields{ padding:24px 28px; }
.plate-row{ display:grid; grid-template-columns:170px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.plate-row:last-child{ border-bottom:none; }
.plate-row dt{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0; }
.plate-row dd{ margin:0; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; }
@media (max-width:760px){ .values-grid{ grid-template-columns:1fr; } }
.value-card{ background:var(--surface); padding:26px 24px; }
.value-card h4{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:8px; }
.value-card p{ font-size:.88rem; color:var(--text-dim); }

.prose{ max-width:68ch; color:var(--text-dim); font-size:1rem; line-height:1.75; }
.prose p + p{ margin-top:1em; }
.prose strong{ color:var(--text); }

/* ---------- contact form ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:40px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.form-field input, .form-field textarea{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s); color:var(--text);
  font-family:var(--font-body); font-size:.95rem; padding:11px 13px; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:transparent; }
.contact-side{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; align-self:start; }
.contact-side .cmd{ font-family:var(--font-mono); font-size:.8rem; color:var(--structural); }
.contact-side dl{ margin:16px 0 0; }
.contact-side .plate-row{ grid-template-columns:90px 1fr; }

/* ---------- footer ---------- */
footer.site-footer{ border-top:1px solid var(--line); background:var(--surface); padding:40px 0 32px; }
.footer-inner{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer-col h5{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin:0 0 12px; }
.footer-col a{ display:block; font-size:.86rem; color:var(--text-dim); text-decoration:none; margin-bottom:8px; }
.footer-col a:hover{ color:var(--text); }
.footer-col p{ color:var(--text-faint); font-size:.82rem; margin-top:4px; }
.footer-bottom{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--text-faint); }
.status-bar{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-s); padding:9px 14px; display:inline-flex; align-items:center; gap:8px; }
.status-bar .caret{ display:inline-block; width:7px; height:1em; background:var(--accent); vertical-align:middle; animation:blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce){ .status-bar .caret{ animation:none; } }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- admin ---------- */
.login-card{ max-width:360px; margin:80px auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px; }
.login-card h1{ font-size:1.4rem; margin-bottom:20px; }
.admin-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.admin-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:40px; }
table.admin-table{ width:100%; border-collapse:collapse; font-size:.88rem; background:var(--surface); min-width:720px; }
table.admin-table th{ text-align:left; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:10px 12px; border-bottom:1px solid var(--line); }
table.admin-table td{ padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.admin-table tr:last-child td{ border-bottom:none; }
.admin-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; }
.admin-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width:640px){ .admin-form-grid{ grid-template-columns:1fr; } }
.admin-form-grid .form-field.span-2{ grid-column:1 / -1; }
.checkbox-field{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.checkbox-field label{ font-family:var(--font-mono); font-size:.8rem; color:var(--text-dim); }
.badge-active{ color:var(--good); font-family:var(--font-mono); font-size:.78rem; }
.badge-inactive{ color:var(--text-faint); font-family:var(--font-mono); font-size:.78rem; }

/* ---------- legal page ---------- */
.legal h2{ font-size:1.2rem; margin:36px 0 12px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--text-dim); margin-bottom:12px; line-height:1.7; }
.legal .placeholder{ color:var(--accent); }

[hidden]{ display:none !important; }