/* FAKTIVE sektion 8 2026: "FAKTIVE Engine" som ét regnskab på mørk flade.
   Hører sammen med assets/sektion8-2026.js. Al tekst er originalens; uden JavaScript
   står sektionen, som den gjorde før.

   Sektionen er husets maskinrum: mørk aubergine som sektion 6, så den står som sit eget
   kapitel mellem den lyse "Sådan virker det" og den cremefarvede "Integrationer".
   Til venstre sektionens bevis, tallet 9 af 28, med en lineal af 28 hårfine streger.
   Til højre et regnskab i to spalter: det, vi driver, og det, platformen dermed måler.
   Support har intet at måle og står for sig selv under regnskabet.

   Kontrast mod #3C2A44: creme #FDF8F2 12:1, brødtekst #DCC8BC 8,4:1, dæmpet #B9A69B 5,6:1,
   kobber #F2A17E 6,1:1. Kobber er eneste accent. Ingen kort, ingen glød, ingen mærkater.
   Reglerne beskriver det færdige billede; GSAP-tidslinjen i JS spiller hen til det. */

#engine.s8e-klar{
  --s8e-creme:#FDF8F2; --s8e-tekst:#DCC8BC; --s8e-daemp:#B9A69B; --s8e-kobber:#F2A17E;
  --s8e-haar:rgba(242,231,220,.16); --s8e-haar-svag:rgba(242,231,220,.09);
  position:relative;overflow:clip;isolation:isolate;color:var(--s8e-creme);
  background:radial-gradient(110% 70% at 88% 0%,#4A3453 0%,rgba(74,52,83,0) 60%),
    radial-gradient(90% 70% at 0% 100%,#2C1E33 0%,rgba(44,30,51,0) 70%),#3C2A44 !important;
}

/* ---------- den levende baggrund: to bløde lyspletter, der driver meget langsomt ---------- */
.s8e-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.s8e-bg::before,.s8e-bg::after{content:"";position:absolute;border-radius:50%;aspect-ratio:1}
.s8e-bg::before{width:min(62vw,860px);left:-12%;top:18%;
  background:radial-gradient(closest-side,rgba(242,161,126,.11),rgba(242,161,126,0));
  animation:s8e-drift1 26s ease-in-out infinite alternate}
.s8e-bg::after{width:min(56vw,760px);right:-10%;bottom:-8%;
  background:radial-gradient(closest-side,rgba(196,164,214,.12),rgba(196,164,214,0));
  animation:s8e-drift2 32s ease-in-out infinite alternate}
@keyframes s8e-drift1{to{transform:translate3d(14%,-10%,0) scale(1.1)}}
@keyframes s8e-drift2{to{transform:translate3d(-12%,-14%,0) scale(1.08)}}

/* ---------- hovedet ---------- */
#engine.s8e-klar .eyeline{color:var(--s8e-kobber) !important}
#engine.s8e-klar h2.big{color:var(--s8e-creme);max-width:15em}
#engine.s8e-klar .lede{color:var(--s8e-tekst);max-width:34em}

/* ---------- beviset til venstre, regnskabet til højre ---------- */
.s8e{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,104px);
  margin-top:clamp(48px,5.5vw,80px);align-items:start}

.s8e-bevis{position:sticky;top:max(110px,calc(50vh - 200px))}
.s8e-tal{display:flex;align-items:baseline;gap:14px;margin:0}
.s8e-tal b{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(96px,10vw,152px);
  line-height:.82;letter-spacing:-.045em;color:var(--s8e-creme);min-width:1ch}
.s8e-tal span{font-family:var(--font-display);font-stretch:125%;font-weight:400;font-size:clamp(24px,2.2vw,32px);
  letter-spacing:-.01em;color:var(--s8e-daemp)}
/* linealen: én hårfin streg pr. sikkerhedskontrol; de målte står i kobber og er højere */
.s8e-lineal{display:flex;align-items:flex-end;justify-content:space-between;height:30px;margin:26px 0 22px;max-width:380px}
.s8e-lineal i{display:block;width:1.5px;height:62%;border-radius:1px;background:var(--s8e-haar);transform-origin:50% 100%}
.s8e-lineal i.maalt{height:100%;background:var(--s8e-kobber)}
.s8e-bevis p{margin:0;max-width:24em;font-size:16px;line-height:1.6;font-weight:300;color:var(--s8e-tekst)}

/* regnskabet: to spalter over hver række, hårfine linjer imellem */
.s8e-kolonner,.s8e-raekke,.s8e-support{display:grid;grid-template-columns:minmax(0,1.2fr) 40px minmax(0,1fr)}
.s8e-kolonner{padding-bottom:14px;border-bottom:1px solid var(--s8e-haar)}
.s8e-kolonner span{white-space:nowrap;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--s8e-daemp)}
.s8e-kolonner span:first-child{padding-left:46px}
.s8e-kolonner span:last-child{grid-column:3}
.s8e-raekke{align-items:start;padding:26px 0;border-bottom:1px solid var(--s8e-haar-svag)}
.s8e-drift h3,.s8e-support h3{margin:0 0 6px;font-family:var(--font-display);font-stretch:125%;font-weight:400;
  font-size:clamp(19px,1.5vw,22px);line-height:1.2;letter-spacing:-.01em;color:var(--s8e-creme)}
/* ydelsen: symbolet i sin egen smalle spalte, titel og tekst ved siden af */
.s8e-drift{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:16px;align-content:start}
.s8e-drift h3,.s8e-drift p{grid-column:2}
.s8e-drift p{margin:0;font-size:15px;line-height:1.58;font-weight:300;color:var(--s8e-tekst)}
/* fagordet på sin egen lille linje under titlen */
.s8e-drift h3 small{display:block;margin-top:3px;font-family:var(--font-text);font-stretch:100%;font-size:13px;font-weight:400;
  letter-spacing:.02em;line-height:1.3;color:var(--s8e-daemp)}
/* symbolerne: TrendAI's eget i sin egen farve, de øvrige Lucide-ikoner i hårfine streger i creme */
.s8e-ikon{grid-column:1;grid-row:1 / span 2;width:30px;height:30px;margin-top:-2px}
.s8e-ikon img,.s8e-ikon svg{display:block;width:30px;height:30px}
.s8e-ikon svg{fill:none;stroke:var(--s8e-creme);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
/* hver streg har pathLength=1; tidslinjen tegner dem frem ved at føre stroke-dashoffset fra 1 til 0 */
.s8e-ikon svg *{stroke-dasharray:1;stroke-dashoffset:0}
/* målingerne står i tredje spalte, på linje med ydelsens titel; fluebenene hænger ud i
   mellemrummet, så teksten flugter med spalteoverskriften */
.s8e-maal{grid-column:3;list-style:none;margin:0;padding:5px 0 0;display:grid;gap:12px}
.s8e-maal li{margin-left:-26px}
.s8e-maal li{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:baseline}
.s8e-maal svg{width:15px;height:15px;align-self:center;fill:none;stroke:var(--s8e-kobber);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:0}
.s8e-maal span{font-size:16px;line-height:1.4;color:var(--s8e-creme)}
.s8e-maal em{grid-column:2;font-style:normal;font-size:13px;line-height:1.4;color:var(--s8e-kobber)}

/* support: intet at måle, et menneske i den anden ende */
.s8e-support{padding-top:26px}
.s8e-support .s8e-drift{grid-column:1 / -1}
.s8e-support p{max-width:40em}
.s8e-tel{color:var(--s8e-creme);font-weight:500;white-space:nowrap;text-decoration:none;
  border-bottom:1px solid rgba(253,248,242,.35);transition:border-color .25s ease}
.s8e-tel:hover{border-color:var(--s8e-creme)}
.s8e-tel:focus-visible{outline:2px solid var(--s8e-kobber);outline-offset:3px;border-radius:2px}

/* ---------- afslutningen: hvem der leverer, og vejen videre ---------- */
.s8e-fod{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:18px 48px;
  margin-top:clamp(56px,6vw,88px);padding-top:26px;border-top:1px solid var(--s8e-haar)}
.s8e-fod p{margin:0;max-width:40em;font-size:15px;line-height:1.6;font-weight:300;color:var(--s8e-daemp)}
.s8e-handling{display:grid;justify-items:end;gap:10px;max-width:24em}
.s8e-handling p{font-size:13.5px;text-align:right}
.s8e-fod a{flex:none;justify-self:end;display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--s8e-creme);
  text-decoration:none;border-bottom:1px solid rgba(253,248,242,.35);padding-bottom:3px;
  transition:border-color .25s ease,gap .25s ease}
.s8e-fod a:hover{border-color:var(--s8e-creme);gap:14px}
.s8e-fod a:focus-visible{outline:2px solid var(--s8e-kobber);outline-offset:4px;border-radius:2px}

/* ---------- under 1000 px: beviset over regnskabet ---------- */
@media (max-width:999px){
  .s8e{grid-template-columns:1fr;gap:44px}
  .s8e-bevis{position:static}
}
/* ---------- under 700 px: hver række står i én spalte ---------- */
@media (max-width:699px){
  .s8e-kolonner{display:none}
  .s8e-raekke,.s8e-support{grid-template-columns:1fr}
  .s8e-maal{grid-column:1;padding:16px 0 0 46px}
  .s8e-maal li{margin-left:-26px}
  .s8e-handling{justify-items:start}
  .s8e-handling p{text-align:left}
  .s8e-fod a{justify-self:start}
  .s8e-raekke{padding:24px 0}
}
@media (prefers-reduced-motion:reduce){
  .s8e-bg::before,.s8e-bg::after{animation:none}
}