/* VAERN v1.8.1 · AI-genererede baggrundsbilleder (OpenAI-billedgenerering, okt. 2026); WebP i assets/img/v181-bg/.
   url() står i stilarket; billede og slør ligger i samme ::before (background-image: var(--scrim), var(--bgimg)).
   Sløret er sitets baggrundsfarve #081522 med målt dækning (WCAG AA). Mærkatet .ai-bg-tag
   (»AI-generated background« / »AI-genereret baggrund«) står i hver sektion med billede og linker til FAQ #images.
   Under folden (forsidens kontekstsektion og afslutningsbåndene) hentes billedet først, når siden er indlæst:
   site.js sætter .ai-bg-late på <html>. */

.ai-bg{position:relative;isolation:isolate;overflow:hidden}
.ai-bg::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
 background-color:#081522;background-image:var(--scrim),var(--bgimg);
 background-size:var(--bgsize,cover);background-position:var(--bgpos,center);background-repeat:no-repeat}
/* Indholdet ligger altid over billedet (vp-heroens og CTA-båndenes indhold er ellers ikke positioneret). */
.ai-bg>.wrap{position:relative;z-index:1}

/* Mærkatet: samme sted i alle sektioner — øverst til højre, flugter med indholdets højre kant. */
.ai-bg-tag{position:absolute;z-index:3;top:12px;right:calc(max(0px,(100% - var(--wrap,1320px)) / 2) + clamp(24px,4vw,54px));
 display:inline-flex;align-items:center;min-height:24px;padding:3px 9px;border:1px solid rgba(173,209,226,.24);border-radius:3px;
 background:rgba(8,21,34,.84);color:#c2d3dc;font-family:var(--sans);font-size:.72rem;font-weight:500;line-height:1.4;
 letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.ai-bg-tag:hover{color:#edf4f7;border-color:rgba(169,221,237,.55)}
.software-site .ai-bg-tag:focus-visible{outline-offset:3px}

/* 1 · Forsiden, hero. Diagrammet står til højre oven på billedet, så sløret er tungt dér også;
   billedet læses som stemning (kyst, fjern mast). Under 801 px stables tekst og diagram. */
.ai-bg-index-hero{--bgimg:url('../img/v181-bg/bg-01-index-hero.webp');--bgpos:76% 46%;
 --scrim:linear-gradient(90deg,rgba(8,21,34,.93) 0%,rgba(8,21,34,.88) 38%,rgba(8,21,34,.74) 54%,rgba(8,21,34,.7) 100%),
  linear-gradient(180deg,rgba(8,21,34,0) 62%,rgba(8,21,34,.72) 100%)}

/* 2 · Forsiden, kontekstsektionen. Lukket er den et lavt bånd; åben vises billedet kun øverst og toner ud. */
.ai-bg-index-context{--bgimg:url('../img/v181-bg/bg-02-index-context.webp');--bgpos:60% 54%;
 --scrim:linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.86) 42%,rgba(8,21,34,.6) 72%,rgba(8,21,34,.55) 100%)}
.ai-bg-index-context:has(details[open])::before{bottom:auto;height:min(100%,560px)}
/* Udtoningen ligger øverst og ender i sektionens egen farve (#0b1b28), så der ikke opstår en kant. */
.ai-bg-index-context:has(details[open]){--scrim:linear-gradient(180deg,rgba(11,27,40,0) 22%,rgba(11,27,40,.75) 60%,#0b1b28 100%),
  linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.86) 42%,rgba(8,21,34,.6) 72%,rgba(8,21,34,.55) 100%)}

/* 3 · Afslutningsbåndet (forsiden, softwaresiden, løsningssiden, investorsiden). */
.ai-bg-cta{--bgimg:url('../img/v181-bg/bg-03-cta-band.webp');--bgpos:72% 50%;
 --scrim:linear-gradient(90deg,rgba(8,21,34,.93) 0%,rgba(8,21,34,.86) 45%,rgba(8,21,34,.8) 62%,rgba(8,21,34,.74) 100%)}
.ai-bg-cta .vp-next-card{background:rgba(13,32,48,.78)}
/* 2–3 ligger under folden: indtil siden er indlæst, vises kun sløret, så heroens billede ikke deler båndbredde. */
html:not(.ai-bg-late) .ai-bg-index-context::before,html:not(.ai-bg-late) .ai-bg-cta::before{background-image:var(--scrim)}

/* 4–9 · Heroer på indersiderne. */
/* Softwaresiden: teksten står i begge kolonner, så billedet tilpasses heroens højde og forankres til højre;
   masten med radar og kamera står dermed uden for tekstspalterne i stedet for bag brødteksten. Sløret er
   næsten tæt op til 62 %, så billedets venstre kant (som flytter sig med heroens højde) ikke ses som en kant. */
.ai-bg-platform-hero{--bgimg:url('../img/v181-bg/bg-04-platform-hero.webp');--bgsize:cover,cover,auto 100%;--bgpos:center,center,right -83px center;
 --scrim:linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.9) 62%,rgba(8,21,34,.6) 84%,rgba(8,21,34,.55) 100%),
  linear-gradient(180deg,rgba(8,21,34,0) 16%,rgba(8,21,34,.58) 40%,rgba(8,21,34,.64) 100%)}
.ai-bg-solutions-hero{--bgimg:url('../img/v181-bg/bg-05-solutions-hero.webp');--bgpos:70% 52%;
 --scrim:linear-gradient(90deg,rgba(8,21,34,.9) 0%,rgba(8,21,34,.84) 45%,rgba(8,21,34,.6) 100%),
  linear-gradient(180deg,rgba(8,21,34,0) 16%,rgba(8,21,34,.58) 40%,rgba(8,21,34,.64) 100%)}
.ai-bg-hammer-hero{--bgimg:url('../img/v181-bg/bg-06-hammer-hero.webp');--bgpos:70% 30%}
.ai-bg-company-hero{--bgimg:url('../img/v181-bg/bg-07-company-hero.webp');--bgpos:70% 55%}
.ai-bg-investors-hero{--bgimg:url('../img/v181-bg/bg-08-investors-hero.webp');--bgpos:70% 52%}
.ai-bg-contact-hero{--bgimg:url('../img/v181-bg/bg-09-contact-hero.webp');--bgpos:70% 48%}
.ai-bg.inner-hero{--scrim:linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.86) 46%,rgba(8,21,34,.62) 62%,rgba(8,21,34,.55) 100%)}
.ai-bg.inner-hero .path-strip{background:rgba(8,21,34,.62)}

/* 10 · Trusselsbilledet. Heroen er meget høj (forklaringen af mærkerne står nederst), så billedet
   dækker kun den øverste del og toner ud i sidens baggrund. */
.ai-bg-threats-hero{--bgimg:url('../img/v181-bg/bg-10-threats-hero.webp');--bgpos:70% 30%;
 --scrim:linear-gradient(180deg,rgba(8,21,34,0) 45%,rgba(8,21,34,.7) 80%,#081522 100%),
  linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.86) 50%,rgba(8,21,34,.55) 72%,rgba(8,21,34,.4) 100%)}
.ai-bg-threats-hero::before{bottom:auto;height:min(100%,900px)}
/* Sektionens grund er sat til samme farve, som udtoningen ender i (ellers en synlig kant ved billedets bund). */
.software-site .phero.ai-bg.ai-bg-threats-hero{background:#081522}

/* Mellembredder (761–1100 px): heroen er lavere, så masten kommer tættere på brødteksten; tættere slør dér,
   og billedet skubbes længere ud til højre, så masten står ved kanten og ikke bag højrespaltens tekst. */
@media(min-width:761px) and (max-width:1100px){
 .ai-bg-platform-hero{--bgpos:center,center,right -200px center;--scrim:linear-gradient(90deg,rgba(8,21,34,.92) 0%,rgba(8,21,34,.9) 70%,rgba(8,21,34,.76) 90%,rgba(8,21,34,.7) 100%),
  linear-gradient(180deg,rgba(8,21,34,0) 16%,rgba(8,21,34,.58) 40%,rgba(8,21,34,.64) 100%)}
}

/* Indeks-heroen stables allerede ved 800 px. */
@media(max-width:800px){
 .ai-bg-index-hero{--bgimg:url('../img/v181-bg/bg-01-index-hero-m.webp');--bgpos:69% 40%;
  --scrim:linear-gradient(180deg,rgba(8,21,34,.86) 0%,rgba(8,21,34,.82) 40%,rgba(8,21,34,.86) 70%,rgba(8,21,34,.92) 100%)}
}
@media(max-width:760px){
 .ai-bg-tag{top:8px}
 /* Luft mellem mærkatet og CTA-kortet på software- og løsningssiden (før kun 3 px). */
 .vp-page .vp-next-section.ai-bg-cta{padding-top:51px}
 .ai-bg-index-context{--bgimg:url('../img/v181-bg/bg-02-index-context-m.webp');--bgpos:40% 50%;
  --scrim:linear-gradient(90deg,rgba(8,21,34,.9) 0%,rgba(8,21,34,.84) 60%,rgba(8,21,34,.7) 100%)}
 .ai-bg-index-context:has(details[open])::before{height:min(100%,420px)}
 .ai-bg-index-context:has(details[open]){--scrim:linear-gradient(180deg,rgba(11,27,40,0) 22%,rgba(11,27,40,.75) 60%,#0b1b28 100%),
   linear-gradient(90deg,rgba(8,21,34,.9) 0%,rgba(8,21,34,.84) 60%,rgba(8,21,34,.7) 100%)}
 .ai-bg-cta{--bgimg:url('../img/v181-bg/bg-03-cta-band-m.webp');--bgpos:60% 50%;
  --scrim:linear-gradient(180deg,rgba(8,21,34,.88) 0%,rgba(8,21,34,.82) 50%,rgba(8,21,34,.9) 100%)}
 /* Smalt udsnit med masten ved ca. 85 % af bredden: den står ude ved højre kant, ikke bag overskriften. */
 .ai-bg-platform-hero{--bgimg:url('../img/v181-bg/bg-04-platform-hero-m.webp');--bgsize:cover;--bgpos:70% 30%}
 .ai-bg-solutions-hero{--bgimg:url('../img/v181-bg/bg-05-solutions-hero-m.webp');--bgpos:60% 50%}
 .ai-bg-hammer-hero{--bgimg:url('../img/v181-bg/bg-06-hammer-hero-m.webp');--bgpos:55% 30%}
 .ai-bg-company-hero{--bgimg:url('../img/v181-bg/bg-07-company-hero-m.webp');--bgpos:55% 50%}
 .ai-bg-investors-hero{--bgimg:url('../img/v181-bg/bg-08-investors-hero-m.webp');--bgpos:60% 50%}
 .ai-bg-contact-hero{--bgimg:url('../img/v181-bg/bg-09-contact-hero-m.webp');--bgpos:60% 48%}
 .ai-bg-platform-hero,.ai-bg-solutions-hero,.ai-bg.inner-hero{
  --scrim:linear-gradient(180deg,rgba(8,21,34,.86) 0%,rgba(8,21,34,.82) 45%,rgba(8,21,34,.88) 100%)}
 .ai-bg-threats-hero{--bgimg:url('../img/v181-bg/bg-10-threats-hero-m.webp');--bgpos:77% 30%;
  --scrim:linear-gradient(180deg,rgba(8,21,34,.86) 0%,rgba(8,21,34,.82) 45%,rgba(8,21,34,.9) 80%,#081522 100%)}
 .ai-bg-threats-hero::before{height:min(100%,820px)}
}
@media print{.ai-bg::before,.ai-bg-tag{display:none}}