/* VAERN v1.8.0 (24/10-2026) · Tegnmatrix »fra støj til én datavej« (forsiden lige under heroen og en kompakt
   udgave på investorsiden). Lærredet tegnes af assets/js/data-matrix.js og læser farverne nedenfor (--dm-*),
   så paletten følger Night Ops: stålblå på mørk bund, guld kun som lille markør.
   Uden JavaScript vises .data-matrix-static (samme tekster, stillestående). Når lærredet kører, får figuren
   .is-live; den statiske udgave lægges da usynligt bag lærredet, så sektionen ikke hopper.
   v1.8.0 QA: ærlighedsmærket står i .7rem på alle bredder (før .6rem på mobil); figurteksten højst 66ch (ca. 85–90 tegn i den lille skrift). */

.software-site main>.data-matrix-section{background:#050f19;border-bottom:1px solid var(--line);padding-block:clamp(56px,6.5vw,96px)}
.software-site main>.data-matrix-section--compact{background:#06111c;border-top:1px solid var(--line);padding-block:clamp(48px,5.5vw,80px)}
.data-matrix-section .visual-section-title{margin-bottom:34px}

.data-matrix{--dm-bg:#040c15;--dm-noise:#7fa6cc;--dm-dim:#2f4b61;--dm-red:#e2566c;--dm-cyan:#5fd6f2;--dm-clean:#d5eef7;--dm-soft:#8fb3c7;--dm-gold:#d0b586;--dm-line:#3c6178;margin:0;min-width:0}
.data-matrix-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;margin:0 0 12px;color:var(--ink-3);font-size:.7rem;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.data-matrix-tag{display:flex;align-items:center;gap:9px}
.data-matrix-tag::before{content:"";flex:none;width:5px;height:5px;background:var(--gold)}
.data-matrix-toggle{flex:none;text-transform:none}
.data-matrix-toggle[hidden],.data-matrix-toggle [hidden]{display:none}

.data-matrix-stage{position:relative;isolation:isolate;min-height:380px;border:1px solid var(--line);border-radius:6px;background:var(--dm-bg);overflow:hidden}
.data-matrix--compact .data-matrix-stage{min-height:262px}
/* Skanlinjer og en svag vignet over lærredet — ren CSS, koster intet i tegningen. */
.data-matrix-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(2,8,14,.55) 100%)}
.data-matrix-canvas{display:none;position:absolute;inset:0;z-index:1;width:100%;height:100%}
.data-matrix.is-live .data-matrix-canvas{display:block}
.data-matrix.is-live .data-matrix-static{position:absolute;inset:0;visibility:hidden;overflow:hidden}

/* Statisk udgave (uden JavaScript): fire baner → VAERN → ordnede felter → eksisterende C2 */
.data-matrix-static{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(56px,.32fr) minmax(0,1.55fr) minmax(0,.55fr);gap:22px;align-items:center;min-height:inherit;padding:26px 24px;font-family:var(--data);font-size:12px;line-height:1.45}
.dm-lanes{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.dm-lanes li{display:grid;gap:3px;min-width:0}
.dm-lane-name{font:600 .66rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dm-soft)}
.dm-noise{display:block;overflow:hidden;white-space:nowrap;color:var(--dm-noise);font:inherit;opacity:.9;text-shadow:-1.5px 0 rgba(226,86,108,.45),1.5px 0 rgba(95,214,242,.4)}
.dm-gate{align-self:stretch;display:flex;align-items:center;justify-content:center;border-inline:1px solid var(--dm-line);background:rgba(127,166,204,.06)}
.dm-gate-name{color:var(--dm-clean);letter-spacing:.12em}
.dm-gate-name::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;vertical-align:middle;background:var(--dm-gold)}
/* Tabellen deler ét gitter (rækkerne er display:contents), så kolonnerne flugter og overskrifterne ikke klippes. */
.dm-out{display:grid;grid-template-columns:repeat(4,max-content) minmax(0,1fr);row-gap:5px;min-width:0;color:var(--dm-clean)}
.dm-row{display:contents}
.dm-row>span{overflow:hidden;padding-right:1.3ch;white-space:nowrap;text-overflow:ellipsis}
.dm-row.dm-head>span{padding-bottom:6px;border-bottom:1px solid var(--dm-line);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dm-soft)}
.dm-row:not(.dm-head)+.dm-row>span{color:var(--dm-soft)}
.dm-c2{padding:16px 10px;border:1px solid var(--dm-line);text-align:center;font:600 .74rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dm-clean)}

/* Forklaringen under lærredet: de tre zoner i datavejens rækkefølge, som et flow med pile */
.data-matrix-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0;list-style:none}
.data-matrix-legend li{display:flex;align-items:baseline;gap:10px;min-width:0;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.data-matrix-legend li:not(:last-child)::after{content:"→";content:"→"/"";margin-left:8px;color:var(--ink-3)}
.data-matrix-legend .dm-n{flex:none;font:.66rem var(--data);color:var(--gold)}
.data-matrix figcaption{max-width:66ch;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;line-height:1.6;color:var(--ink-3)}
.data-matrix figcaption strong{color:#b6ccd6;font-weight:600}

@media(max-width:1000px){
 .data-matrix-stage{min-height:420px}
 .data-matrix--compact .data-matrix-stage{min-height:330px}
 .data-matrix-static{grid-template-columns:1fr;gap:14px;align-content:center}
 .dm-gate{min-height:40px;border-inline:0;border-block:1px solid var(--dm-line)}
 .dm-out{grid-template-columns:repeat(3,max-content) minmax(0,1fr)}
 .dm-row .dm-c-time{display:none}
}
@media(max-width:760px){
 .data-matrix-stage{min-height:440px}
 .data-matrix--compact .data-matrix-stage{min-height:340px}
 .data-matrix-top{align-items:flex-start}
 .data-matrix-legend{display:grid;gap:6px}
 .data-matrix-legend li::after{display:none}
 .data-matrix-static{padding:20px 16px;font-size:11px}
 .dm-lanes{grid-template-columns:1fr 1fr;gap:10px 14px}
 .dm-row>span:last-child{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.data-matrix-toggle{display:none}}