/* =============================================================
   Velund site — shared chrome & layout
   Single source of truth for every page in ui_kits/site/.
   Load AFTER ./colors_and_type.css (which defines the --vl-* tokens).

   Contains: --lt-* surface tokens, base reset, .wrap, sticky header +
   Solutions dropdown, buttons, type scale, sections, three-up cards,
   alternating .zrow feature rows, FAQ, CTA band, footer, breakpoints.

   NOT here: the pipeline / bubble-map styles — those live in
   argus-map-lab.html, the only page that renders them.

   GENERATED from the rules that were identical across all five product
   pages. Edit this file directly from now on; the pages no longer
   carry their own copies.
   ============================================================= */

:root {
  --lt-bg:#202023; --lt-alt:#1A1A1D; --lt-ink:#fff; --lt-body:#C9CACC; --lt-mute:#828282;
  --lt-line:rgba(255,255,255,0.09); --lt-line2:rgba(255,255,255,0.18);
  --lt-panel:#26262B; --lt-box:#2C2C31;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--lt-bg); color:var(--lt-body); font-family:var(--vl-ff-data); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--lt-ink); }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px; }
/* header */
header { position:sticky; top:0; z-index:40; background:rgba(32,32,35,0.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--lt-line); }
.hrow { display:flex; align-items:center; gap:34px; height:70px; }
.hrow > a[aria-label] { flex-shrink:0; }
.hnav { display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--lt-body); margin-left:8px; flex-shrink:0; }
.hnav a { white-space:nowrap; }
.hnav a:hover { color:var(--lt-ink); }
/* dropdown nav */
.ndrop { position:relative; }
.ntrig { display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; padding:0;
  font-family:inherit; font-size:14px; font-weight:500; color:var(--lt-body); }
.ntrig svg { transition:transform var(--vl-dur-1) var(--vl-ease); }
.ndrop.open .ntrig, .ntrig:hover { color:var(--lt-ink); }
.ndrop.open .ntrig svg { transform:rotate(180deg); }
.npanel { position:absolute; top:calc(100% + 18px); left:-20px; display:flex; gap:0; padding:8px;
  background:#26262B; border:1px solid var(--lt-line2); border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.5); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--vl-dur-1) var(--vl-ease), transform var(--vl-dur-1) var(--vl-ease), visibility var(--vl-dur-1); }
.ndrop.open .npanel { opacity:1; visibility:visible; transform:translateY(0); }
.ncol { padding:14px 18px; min-width:268px; }
.ncol.nborder { border-left:1px solid var(--lt-line); }
.nhead { font-family:var(--vl-ff-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--lt-mute); margin-bottom:12px; }
.nitem { display:block; padding:9px 11px; border-radius:9px; transition:background var(--vl-dur-1) var(--vl-ease); }
a.nitem:hover { background:rgba(255,255,255,0.06); }
.nitem .nt { display:block; font-family:var(--vl-ff-data); font-weight:700; font-size:14.5px; color:var(--lt-ink); }
.nitem .nd { display:block; font-size:12px; color:var(--lt-mute); margin-top:3px; line-height:1.4; }
.nitem.nsoon { cursor:default; opacity:.45; }
.nitem.ncur { background:rgba(224,255,30,0.09); }
.nitem.ncur .nt { color:var(--vl-lime); }
@media (max-width:1000px) { .npanel { display:none; } }
.hspacer { flex:1; }
.btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--vl-ff-data); font-weight:700; font-size:14px; border:0; cursor:pointer; border-radius:var(--vl-r-pill); padding:11px 20px; transition:all var(--vl-dur-1) var(--vl-ease); white-space:nowrap; flex-shrink:0; }
.btn-p { background:var(--vl-lime); color:var(--vl-bg-ink); }
.btn-p:hover { background:#CCE91C; }
.btn-ink { background:var(--vl-bg-ink); color:#fff; }
.btn-ink:hover { background:#000; }
.btn-g { background:transparent; color:var(--lt-ink); border:1px solid var(--lt-line2); }
.btn-g:hover { border-color:var(--lt-ink); }
/* type */
.eyebrow { font-family:var(--vl-ff-data); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lt-mute); }
h1 { font-family:var(--vl-ff-display); font-weight:700; letter-spacing:-.028em; color:var(--lt-ink); font-size:62px; line-height:1.04; margin:16px 0 0; }
h2 { font-family:var(--vl-ff-display); font-weight:700; letter-spacing:-.022em; color:var(--lt-ink); font-size:40px; line-height:1.1; margin:14px 0 0; }
h3 { font-family:var(--vl-ff-data); font-weight:700; color:var(--lt-ink); font-size:18px; line-height:1.3; margin:0 0 8px; letter-spacing:-.005em; }
.lead { font-size:19px; line-height:1.55; color:var(--lt-body); margin:20px 0 0; max-width:620px; }
.shead { max-width:720px; margin-bottom:48px; }
.shead p { font-size:16px; line-height:1.6; margin:16px 0 0; }
section { padding:96px 0; }
.alt { background:var(--lt-alt); }
/* hero */
.hero { padding-top:72px; padding-bottom:72px; min-height:calc(100vh - 70px); display:flex; flex-direction:column; justify-content:center; }
/* three-up */
.three { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tc { background:rgba(255,255,255,0.035); border:1px solid var(--lt-line); border-radius:16px; padding:28px; transition:all var(--vl-dur-2) var(--vl-ease); }
.tc:hover { border-color:var(--lt-line2); background:rgba(255,255,255,0.055); }
.tc .n { font-family:var(--vl-ff-mono); font-size:11px; color:var(--lt-mute); margin-bottom:20px; }
.tc p { font-size:14.5px; line-height:1.55; margin:0; }
.alt .tc { background:rgba(255,255,255,0.035); }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chip { font-family:var(--vl-ff-data); font-size:11.5px; font-weight:600; color:var(--lt-body); background:rgba(255,255,255,0.07); border:1px solid var(--lt-line); border-radius:var(--vl-r-pill); padding:4px 10px; cursor:default; transition:all var(--vl-dur-1) var(--vl-ease); }
.chip:hover { background:var(--vl-lime); border-color:var(--vl-lime); color:var(--vl-bg-ink); }
/* features — alternating rows */
.zrow { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.zrow.rev .ztext { order:2; }
.zrow.rev .zvis { order:1; }
.ztext { max-width:440px; }
.ztext h3 { font-family:var(--vl-ff-display); font-weight:700; font-size:33px; line-height:1.12; letter-spacing:-.022em; color:var(--lt-ink); margin:0 0 18px; }
.ztext p { font-size:16px; line-height:1.62; margin:0; color:var(--lt-body); }
.zvis { background:var(--lt-panel); border-radius:20px; padding:30px; display:flex; align-items:center; }
.zvis svg { width:100%; height:auto; display:block; overflow:visible; }
.zvis .t9 { font-family:var(--vl-ff-mono); font-size:9px; fill:var(--lt-body); }
.zvis .t10 { font-family:var(--vl-ff-data); font-size:10.5px; font-weight:600; fill:var(--lt-body); }
.zvis .t11 { font-family:var(--vl-ff-data); font-size:11.5px; font-weight:700; fill:var(--lt-ink); }
.zvis .t13 { font-family:var(--vl-ff-data); font-size:13px; font-weight:700; fill:var(--lt-ink); }
.zvis .mn { font-family:var(--vl-ff-mono); font-size:10px; fill:var(--lt-ink); }
.zvis .box { fill:var(--lt-box); stroke:rgba(255,255,255,0.13); }
.zvis .card { fill:#33333A; stroke:rgba(255,255,255,0.17); filter:drop-shadow(0 5px 16px rgba(0,0,0,0.55)); }
.zvis .lnk { stroke:rgba(255,255,255,0.24); fill:none; }
.zvis .sk { fill:rgba(255,255,255,0.12); }
@media (prefers-reduced-motion:reduce) { .zvis .dl { display:none; } }
.zvis .trk { fill:rgba(255,255,255,0.16); }
.spill { font-size:10.5px; font-weight:700; color:var(--vl-bg-ink); background:var(--vl-lime); padding:4px 10px; border-radius:var(--vl-r-pill); white-space:nowrap; }
.lab { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; margin-top:7px; padding:2px 8px; border-radius:var(--vl-r-pill); background:rgba(255,255,255,0.08); color:var(--lt-body); }
.lab .d { width:6px; height:6px; border-radius:50%; }
.mnote { font-size:13.5px; line-height:1.65; color:var(--lt-body); max-width:760px; margin:26px 0 0; }
.mnote b { color:var(--lt-ink); font-weight:600; }
/* faq */
.faq { max-width:800px; }
.fq { border-bottom:1px solid var(--lt-line); }
.fq summary { list-style:none; cursor:pointer; padding:20px 0; font-family:var(--vl-ff-data); font-weight:700; font-size:16.5px; color:var(--lt-ink); display:flex; justify-content:space-between; gap:20px; align-items:center; }
.fq summary::-webkit-details-marker { display:none; }
.fq summary::after { content:'+'; font-family:var(--vl-ff-mono); font-size:20px; color:var(--lt-mute); flex-shrink:0; }
.fq[open] summary::after { content:'−'; }
.fq p { font-size:15px; line-height:1.65; margin:0 0 22px; max-width:660px; }
/* cta */
.ctaband { background:var(--vl-lime); border-radius:22px; padding:60px 56px; margin-top:96px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.ctaband h2 { color:var(--vl-bg-ink); font-size:38px; max-width:520px; margin:0; }
.ctaband p { color:rgba(21,23,4,0.72); font-size:15px; margin:12px 0 0; max-width:460px; line-height:1.55; }
footer { border-top:1px solid var(--lt-line); padding:44px 0; margin-top:96px; }
.frow { display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; font-size:13px; color:var(--lt-mute); }
.frow .mail { font-family:var(--vl-ff-display); font-weight:700; font-size:19px; color:var(--lt-ink); letter-spacing:-.01em; }
@media (max-width:1000px) { .hnav { display:none; } }
@media (max-width:1080px) { .zrow{grid-template-columns:1fr; gap:34px} .zrow.rev .ztext{order:1} .zrow.rev .zvis{order:2} .zz{gap:28px} .ztext{max-width:none} }
@media (max-width:900px) { h1{font-size:44px} h2{font-size:31px} .three{grid-template-columns:1fr} .ztext h3{font-size:26px} .wrap{padding:0 24px} section{padding:66px 0} .ctaband{padding:40px 30px} .zvis{padding:20px} }

/* The shared chrome custom elements render into light DOM; display:contents
   keeps <header>/<footer> as direct layout children, so position:sticky
   behaves exactly as it did when the markup was inline on each page. */
velund-header, velund-footer { display: contents; }