/* ============================================================
   ZENCOV  |  13411-zencov.com  |  v1
   Static, framework-free. Dark-first by brand identity.
   Radius lock: 0. One accent (industrial blue), locked.
   Shares the group component grammar with 13410.
   ============================================================ */

:root{
  --bg:        #0A111E;
  --surface:   #101A2C;
  --surface-2: #152238;
  --text:      #E9EEF6;
  --muted:     #97A5BD;
  --line:      #23314C;
  --line-soft: #1B2740;
  --accent:    #2F6FC4;   /* industrial blue fill, white text passes AA */
  --accent-hi: #8FB6EE;   /* label/link blue on dark */
  --accent-ink:#FFFFFF;
  --maxw: 1160px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7rem);
  --font-sans: "Segoe UI", "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- type roles ---------- */
.kicker{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-hi);
}
h1,h2,h3{ margin:0; font-weight:800; letter-spacing:-0.022em; line-height:1.06; color:#F4F7FC; }
h1{ font-size:clamp(2.5rem, 6.2vw, 4.3rem); }
h2{ font-size:clamp(1.8rem, 3.8vw, 2.7rem); }
h3{ font-size:1.12rem; letter-spacing:-0.01em; line-height:1.3; }
p{ margin:0; }
.lede{ color:var(--muted); max-width:34rem; }
.mono{ font-family:var(--font-mono); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  padding:.85rem 1.4rem;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid var(--text);
  color:var(--text);
  background:transparent;
  transition:transform .15s ease, background-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{ filter:brightness(1.1); }
.btn-ghost:hover{ background:var(--text); color:var(--bg); }
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:3px;
}

/* ---------- top strip ---------- */
.topstrip{ border-bottom:1px solid var(--line); background:var(--surface); }
.topstrip .container{
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.45rem;
  font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.topstrip span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.nav .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; font-weight:800; letter-spacing:.08em;
  font-size:1.02rem; color:#F4F7FC;
}
.brand-mark{ width:.98em; height:1.08em; flex:none; color:#F4F7FC; }
.nav-links{
  display:flex; align-items:center; gap:1.4rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{ text-decoration:none; font-size:.93rem; color:var(--muted); font-weight:600; }
.nav-links a:hover{ color:var(--text); }
.nav-links .btn{ padding:.55rem 1rem; font-size:.88rem; }
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color:var(--text);
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  padding:.5rem .8rem; cursor:pointer;
}
@media (max-width: 820px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ border-top:1px solid var(--line-soft); }
  .nav-links a{ display:block; padding:1rem var(--pad); }
  .nav-links .btn{ margin:1rem var(--pad); text-align:center; }
}

/* ---------- hero ---------- */
.hero{ padding-block:clamp(3.5rem, 8vw, 6.5rem); }
.hero .container{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.hero h1{ margin:.9rem 0 1.1rem; max-width:12ch; }
.hero .lede{ margin-bottom:1.8rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; }

.spec{ border:1px solid var(--accent-hi); background:var(--surface); }
.spec-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--accent-hi);
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:#DCE6F5;
}
.spec-row{
  display:grid; grid-template-columns:7.4rem 1fr;
  gap:1rem; padding:1rem;
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{ border-bottom:0; }
.spec-key{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-hi); padding-top:.2rem;
}
.spec-row strong{ display:block; font-size:.98rem; letter-spacing:-0.01em; color:#F4F7FC; }
.spec-row span{ display:block; color:var(--muted); font-size:.88rem; line-height:1.5; }
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero h1{ max-width:none; }
}

/* ---------- sections ---------- */
section{ padding-block:var(--section); }
.section-head{ max-width:42rem; margin-bottom:clamp(2rem,5vw,3.5rem); }
.section-head h2{ margin-top:.8rem; }
.section-head .lede{ margin-top:1rem; }

/* ---------- line card grid (shared .kit grammar with 13410) ---------- */
.linecard{ background:var(--surface); border-block:1px solid var(--line); }
.kits-grid{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fill, minmax(255px, 1fr));
}
.kit{
  background:var(--surface-2);
  padding:1.4rem 1.3rem 1.2rem;
  display:flex; flex-direction:column; gap:.85rem;
}
.kit h3{ min-height:2.6em; }
.kit p{ color:var(--muted); font-size:.92rem; flex-grow:1; }
.kit-specs{ margin:0; padding:0; border-top:1px solid var(--line-soft); }
.kit-specs div{
  display:grid; grid-template-columns:4.6rem 1fr; gap:.7rem;
  padding-block:.42rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.8rem;
}
.kit-specs dt{
  margin:0; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding-top:.12rem;
}
.kit-specs dd{ margin:0; }
.kit a{ font-weight:700; font-size:.9rem; text-decoration:none; color:var(--accent-hi); }
.kit a:hover{ text-decoration:underline; }
.kits-note{ margin-top:1.4rem; color:var(--muted); font-size:.88rem; max-width:46rem; }

/* ---------- capabilities ledger ---------- */
.cap{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding-block:clamp(1.8rem,4vw,2.6rem);
  border-top:1px solid var(--line);
}
.cap-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-hi); margin-bottom:.7rem;
}
.cap h3{ font-size:clamp(1.25rem,2.4vw,1.6rem); margin-bottom:.7rem; }
.cap p{ color:var(--muted); max-width:36rem; }
.cap-facts{ align-self:center; display:grid; gap:.9rem; }
.cap-facts div{ display:grid; grid-template-columns:5.8rem 1fr; gap:.9rem; font-size:.88rem; }
.cap-facts dt{
  margin:0; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  padding-top:.15rem;
}
.cap-facts dd{ margin:0; }
@media (max-width: 820px){ .cap{ grid-template-columns:1fr; } }

/* ---------- monitoring band ---------- */
.band-deep{ background:#070D17; }
.band-deep .soft-rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.band-deep .soft-row{
  background:var(--surface);
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:1.5rem; padding:1.5rem 1.4rem;
}
.band-deep .soft-row p{ color:var(--muted); max-width:44rem; }
.band-note{
  margin-top:1.3rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.band-note a{ color:var(--accent-hi); }
@media (max-width: 720px){ .band-deep .soft-row{ grid-template-columns:1fr; gap:.5rem; } }

/* ---------- compatibility strip ---------- */
.compat{ border-block:1px solid var(--line); background:var(--surface); }
.compat .container{ max-width:820px; }
.compat p{ color:var(--muted); font-size:1.05rem; line-height:1.7; }
.compat strong{ color:#F4F7FC; }

/* ---------- facts ---------- */
.facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.fact{ background:var(--surface); padding:1.2rem 1.3rem; }
.fact dt{
  margin:0 0 .45rem; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.fact dd{ margin:0; font-weight:700; font-size:.95rem; color:#F4F7FC; }
.about-copy{ margin-top:1.6rem; color:var(--muted); max-width:46rem; }

/* ---------- contact ---------- */
.contact{ background:var(--surface); border-top:1px solid var(--line); }
.contact .container{ max-width:760px; }
.contact-ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.contact-meta{ margin-top:1.6rem; font-size:.88rem; color:var(--muted); }

/* ---------- footer ---------- */
footer{
  background:#070D17; color:var(--muted);
  padding-block:3rem 2rem; font-size:.88rem;
  border-top:1px solid var(--line);
}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
  gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--line);
}
.foot-grid h4{
  margin:0 0 .8rem; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.foot-grid a{ color:#DCE4F0; text-decoration:none; }
.foot-grid a:hover{ text-decoration:underline; }
.foot-brand{ color:#F4F7FC; font-weight:800; letter-spacing:.08em; display:flex; align-items:center; gap:.55rem; margin-bottom:.7rem; }
.legal{ padding-top:1.4rem; color:#6E7F9D; font-size:.78rem; line-height:1.7; }
@media (max-width: 820px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------- reveal ---------- */

/* ---------- FAQ ---------- */
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer;
  padding-block:1.05rem;
  font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--font-mono); color:var(--accent-hi, var(--accent));
  font-weight:400; flex:none;
}
.faq details[open] summary::after{ content:"-"; }
.faq .faq-a{ padding:0 0 1.2rem; color:var(--muted); max-width:46rem; }

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:none; }
}

.nav-links a.btn,
.nav-links a.btn-primary{
  color:#fff;
  background:var(--accent,#2F6FC4);
  border-color:var(--accent,#2F6FC4);
}
.nav-links a.btn:hover,
.nav-links a.btn-primary:hover{
  color:#fff;
  filter:brightness(.94);
}

