/* =====================================================================
   nfoo.com

   Ikke v3's stilark. Appen er tæt og effektiv, fordi den bruges i
   timevis. Det her bliver set i tyve sekunder af en der overvejer at
   ringe, og skal noget andet: luft, store bogstaver, og én ting at
   gøre pr. skærmfuld.

   FULL WIDTH
   Båndene går fra kant til kant og skifter mellem to bundfarver.
   Teksten inde i dem holdes på en læsbar bredde - en linje på 1600 px
   kan ikke læses - men baggrunden stopper ikke ved containeren. Det er
   dét der giver en side luft frem for en kasse midt på skærmen.

   ÉN ACCENTFARVE
   Grøn, som i produktet. To accentfarver på en salgsside betyder
   altid, at ingen af dem betyder noget.
   ===================================================================== */

:root {
    --ink:      #05070d;     /* bunden */
    --ink-2:    #0a0f1c;     /* hævet bånd */
    --ink-3:    #0f1626;     /* kort */
    --line:     rgba(140, 180, 230, 0.16);
    --line-2:   rgba(140, 180, 230, 0.30);

    --paper:    #eef3fb;
    --dim:      #93a3bd;
    --accent:   #4cf5c5;
    --accent-2: #56a4ff;

    --wrap:     1180px;
    --gap:      clamp(64px, 9vw, 132px);   /* luft over og under et bånd */

    --skrift:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display:  "Space Grotesk", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--skrift);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Tastaturet skal kunne komme forbi menuen. */
.skip {
    position: absolute; left: -9999px;
    padding: 12px 18px; border-radius: 0 0 10px 0;
    background: var(--accent); color: var(--ink);
    font-weight: 600; text-decoration: none;
    z-index: 200;
}
.skip:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------------
   Toppen

   Sticky og gennemsigtig. Den må ikke stjæle fra heroen, men skal være
   der når man har rullet.
   --------------------------------------------------------------------- */
.top {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5, 7, 13, 0.72);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
}
.top.is-stuck {
    border-bottom-color: var(--line);
    background: rgba(5, 7, 13, 0.92);
}

.top-in {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex; align-items: center; gap: 28px;
}

.logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; font-family: var(--display);
    font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
}
.logo-mark {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(140deg, var(--accent), var(--accent-2));
    color: var(--ink); font-family: var(--display);
    font-weight: 700; font-size: 20px; line-height: 1;
}

.nav {
    margin-left: auto;
    display: flex; align-items: center; gap: 4px;
    font-size: 15px;
}
.nav a {
    padding: 9px 14px; border-radius: 9px;
    color: var(--dim); text-decoration: none;
    transition: color 140ms ease, background 140ms ease;
}
.nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.05); }
.nav a.is-here { color: var(--paper); }

.nav a.nav-lang {
    margin-left: 8px;
    border: 1px solid var(--line);
}
/* Selektoren, ikke !important. `.nav a` er to klasser vaerd, saa
   knappen skal ogsaa vaere det - ellers vinder farven fra linjen
   ovenfor. */
.nav a.nav-login {
    margin-left: 4px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 600;
}
.nav a.nav-login:hover { background: var(--accent); filter: brightness(1.08); }

.burger { display: none; }

/* ---------------------------------------------------------------------
   Båndene
   --------------------------------------------------------------------- */
.band { padding: var(--gap) 24px; }
.band-lift { background: var(--ink-2); }

.wrap { max-width: var(--wrap); margin: 0 auto; }

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.06;
    margin: 0;
    text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.4vw, 78px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }

p { margin: 0; }

.over {
    margin-bottom: 20px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
}

.lead {
    margin-top: 22px;
    max-width: 62ch;
    font-size: 18px;
    color: var(--dim);
    text-wrap: pretty;
}
.lead-big { font-size: clamp(19px, 2vw, 22px); }

/* ---------------------------------------------------------------------
   Heroen

   Lyset bag overskriften er to store, bløde cirkler. Ikke et billede:
   det skalerer til hver skærm, vejer ingenting, og kan ikke komme til
   at se strakt ud.
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    padding: clamp(80px, 12vw, 170px) 24px clamp(64px, 8vw, 110px);
    overflow: hidden;
}
.hero::before, .hero::after {
    content: ""; position: absolute; border-radius: 50%;
    pointer-events: none; filter: blur(90px);
}
.hero::before {
    width: 52vw; height: 52vw; max-width: 760px; max-height: 760px;
    top: -18vw; left: -10vw;
    background: rgba(76, 245, 197, 0.13);
}
.hero::after {
    width: 46vw; height: 46vw; max-width: 660px; max-height: 660px;
    top: -6vw; right: -12vw;
    background: rgba(86, 164, 255, 0.13);
}
.hero > .wrap { position: relative; }

/* ---------------------------------------------------------------------
   Heroen med video

   Plakaten ligger som baggrund og er der ALTID - 73 kB. Videoen laegges
   ovenpaa af JavaScriptet, og kun paa en stor skaerm: 3,4 MB paa en
   telefon i en butik er en halv times ventetid paa noget der kunne
   have vaeret et billede.

   Filteret er ikke pynt. Uden det kan overskriften ikke laeses, naar
   videoen bliver lys - og en video er lys paa de forkerte tidspunkter.
   --------------------------------------------------------------------- */
.hero.has-video {
    background-image: var(--plakat);
    background-size: cover;
    background-position: center;
}

/* Cirklerne er der I STEDET FOR en video, ikke oven paa den. Med begge
   dele laa der to lag farvet slør hen over billedet. */
.hero.has-video::before, .hero.has-video::after { display: none; }

.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 900ms ease;
    /* Daemp billedet HER frem for med endnu et sort lag ovenpaa. Et
       laag paa 70% skjuler bevaegelsen; et filter lader den vaere. */
    filter: saturate(0.9) contrast(1.05) brightness(0.8);
}
.hero-video.is-paa { opacity: 1; }

/*
 * Laaget mellem videoen og teksten.
 *
 * Kun saa moerkt som teksten kraever. Foerste udgave laa paa 73% sort
 * foroven og helt sort forneden - saa koerte videoen, men ingen kunne
 * se det.
 *
 * Bunden gaar i eet med sidens farve, saa der ikke er en kant hvor
 * videoen stopper. Det sker sent, saa der er billede at se hele vejen
 * ned til tallene.
 */
.hero-shade {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        rgba(5, 7, 13, 0.40) 0%,
        rgba(5, 7, 13, 0.52) 42%,
        rgba(5, 7, 13, 0.86) 84%,
        var(--ink) 100%);
}

/* Og en smule ekstra bag selve teksten, saa den kan laeses uanset hvad
   videoen finder paa lige dér. */
.hero.has-video > .wrap {
    z-index: 2;
    text-shadow: 0 1px 24px rgba(5, 7, 13, 0.55);
}

/*
 * Knappen der slaar baggrunden til og fra.
 *
 * Den sidder i hjoernet, ikke i vejen. Men den ER der - en video paa
 * 52 sekunder der koerer i ring skal kunne stoppes, og den skal kunne
 * naas med tabulator.
 */
.hero-toggle {
    position: absolute; right: 20px; bottom: 20px; z-index: 3;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(5, 7, 13, 0.55);
    color: var(--paper);
    font: 500 13px/1 var(--sans);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 180ms ease, border-color 180ms ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hero-toggle:hover, .hero-toggle:focus-visible {
    opacity: 1;
    border-color: var(--accent);
}
/* Hviler videoen, er knappen det eneste der fortaeller hvorfor. Saa
   skal den ikke gemme sig. */
.hero:not(.viser-video) .hero-toggle { opacity: 0.9; }

@media (max-width: 860px) {
    .hero-toggle { display: none; }
}

.hero .lead { font-size: clamp(19px, 2.1vw, 23px); max-width: 58ch; }

.hero-actions {
    margin-top: 40px;
    display: flex; flex-wrap: wrap; gap: 14px;
}

.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px;
    border: 1px solid transparent; border-radius: 12px;
    background: var(--accent); color: var(--ink);
    font: 600 16px/1 var(--skrift);
    text-decoration: none;
    transition: transform 140ms ease, filter 140ms ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost {
    background: transparent; color: var(--paper);
    border-color: var(--line-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); filter: none; }
.btn-big { padding: 18px 34px; font-size: 17px; }

/* Tallene. De skal kunne læses på afstand - det er dem der siger at
   der er nogen der bruger det her. */
.facts {
    margin-top: clamp(56px, 7vw, 92px);
    padding-top: 36px;
    border-top: 1px solid var(--line);
    display: grid; gap: 32px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.fact-n {
    font-family: var(--display);
    font-size: clamp(32px, 3.4vw, 44px); font-weight: 700;
    line-height: 1; letter-spacing: -0.03em;
}
.fact-t { margin-top: 8px; font-size: 14px; color: var(--dim); }

/* ---------------------------------------------------------------------
   Rettighederne

   To spalter: overskriften til venstre, argumentet til hoejre. Det er
   dét der adskiller os fra en telefon i en dock, saa det skal ikke se
   ud som et punkt i en liste.
   --------------------------------------------------------------------- */
.band-rights {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--ink-2);
}
.rights {
    display: grid; gap: 28px 64px;
    grid-template-columns: minmax(260px, 0.8fr) 1.2fr;
    align-items: start;
}
.rights .lead { margin-top: 0; max-width: 58ch; color: var(--paper); }

@media (max-width: 860px) {
    .rights { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------------------------------------------------------------------
   Logobaandet

   Raekken staar fire gange i traek, og vi flytter sporet praecis det
   halve af dets egen bredde. Fire ens gennemloeb gentager sig selv
   efter to, saa den ender noejagtig dér hvor den startede.

   Fire og ikke to, fordi de otte logoer kun fylder omkring 1.000 px.
   Med to gennemloeb er det halve spor smallere end en almindelig
   skaerm, og saa kommer der et tomt hul forbi hver gang.

   Ingen JavaScript. Det er ren CSS, og det koster ingenting.
   --------------------------------------------------------------------- */
.logoband {
    margin-top: clamp(36px, 4vw, 56px);
    /* Sporet er bredere end siden - uden den her skubber det en
       vandret rullebjaelke frem. */
    overflow: hidden;
}

.logoband-hoved {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 20px;
}

.logoband-over {
    margin: 0;
    color: var(--dim);
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
}

.logoband-spor {
    display: flex; width: max-content;
    animation: glid 80s linear infinite;
}

/*
 * Tre maader at stoppe det paa.
 *
 * Musen er den aabenlyse, men den findes ikke paa en telefon og
 * hjaelper ikke den der bruger tastatur. Derfor ogsaa fokus - saa
 * standser baandet af sig selv, naar man tabber ind i det - og en
 * knap, der bliver ved med at holde det stille.
 */
.logoband:hover .logoband-spor,
.logoband:focus-within .logoband-spor,
.logoband.staar-stille .logoband-spor { animation-play-state: paused; }

/* Knappen der holder det stille. Diskret, men ikke skjult - og stor
   nok til at blive ramt med en finger. */
.logoband-stop {
    flex: none;
    padding: 4px 12px; min-height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--dim);
    font: 600 11px/1 var(--sans);
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 180ms ease, color 180ms ease, border-color 180ms ease;
}
.logoband-stop:hover, .logoband-stop:focus-visible {
    opacity: 1; color: var(--paper); border-color: var(--accent);
}
/* Staar baandet stille, er knappen den eneste forklaring paa hvorfor.
   Saa skal den ikke gemme sig. */
.logoband-stop[aria-pressed="true"] { opacity: 1; color: var(--paper); }

.logoband-raekke {
    display: flex; align-items: center;
    gap: clamp(38px, 5vw, 110px);
    margin: 0; padding: 0 clamp(38px, 5vw, 110px) 0 0;
    list-style: none;
}
.logoband-raekke li { flex: none; }

.logoband img {
    display: block;
    width: auto; height: clamp(32px, 3.2vw, 42px);
    opacity: 0.72;
    transition: opacity 200ms ease;
}
.logoband img:hover { opacity: 1; }

@keyframes glid {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Kanterne toner ud, saa logoerne ikke bliver klippet midt over af
   skaermkanten.

   MASKEN LAA FOER PAA .logoband, OG DEN TOG ETIKETTEN MED.
   "Vi har aftalerne paa plads med" begynder i venstre kant, og de
   foerste to ord stod derfor halvt gennemsigtige - man kunne ikke
   laese dem. Etiketten skal ikke tones; det skal kun de logoer der
   glider ud over kanten.

   Den kan heller ikke ligge paa .logoband-spor. Det element glider, og
   en maske foelger sit elements koordinatsystem - saa ville tonen
   rejse med logoerne i stedet for at blive staaende ved kanten.
   Derfor en rude imellem, der hverken flytter sig eller rummer tekst. */
.logoband-rude {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/*
 * Her stod foer en regel om, at baandet ikke maatte glide, hvis
 * browseren sagde prefers-reduced-motion.
 *
 * Fagligt er det rigtigt - et baand der koerer i ring er praecis dét,
 * den indstilling handler om. I praksis er knappen i Windows en
 * fartknap, som folk slaar fra af helt andre grunde, og saa stod
 * baandet stille for en stor del af de besoegende uden at nogen havde
 * bedt om det. Samme fejl som med heroens video.
 *
 * Saa det glider for alle - og kan stoppes af alle, med mus, med
 * tastatur eller med knappen. Kontrol frem for fravaer.
 */

/* ---------------------------------------------------------------------
   Gitre og kort
   --------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.band-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 720px; }

.card {
    position: relative;
    padding: 30px 28px 32px;
    border: 1px solid var(--line); border-radius: 18px;
    background: var(--ink-3);
    transition: border-color 180ms ease, transform 180ms ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--dim); font-size: 16px; }

.card-nr {
    display: block; margin-bottom: 16px;
    font-family: var(--display); font-size: 13px; font-weight: 600;
    letter-spacing: 0.1em; color: var(--accent);
}

/* Produktkortet på forsiden er et link - hele fladen skal kunne rammes. */
a.card { text-decoration: none; display: block; }
a.card::after {
    content: "→";
    display: inline-block; margin-top: 20px;
    font-size: 18px; color: var(--accent);
    transition: transform 180ms ease;
}
a.card:hover::after { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   Priskortet

   Tallet er det stoerste paa kortet. En pris man skal lede efter,
   laeses som en pris nogen ikke er stolte af.
   --------------------------------------------------------------------- */
/* Produktsidens top: teksten til venstre, tegningen til hoejre. Den
   samme figur som paa forsidens kort, bare stoerre - kommer man fra
   kortet, er det den man klikkede paa. */
.prod-top {
    display: grid; gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    align-items: center;
}
.prod-art {
    width: 100%; height: auto;
    justify-self: end;
    opacity: .92;
}
@media (max-width: 860px) {
    /* Paa en telefon er teksten det vigtige. Tegningen kommer under,
       og den fylder ikke en skaermfuld paa vejen ned. */
    .prod-top { grid-template-columns: 1fr; }
    .prod-art { max-width: 280px; justify-self: start; }
}

/* Tegningen paa produktkortet. Bred og lav, saa den ikke skubber prisen
   ned under folden - det er prisen man er kommet efter. Den er dekoration
   og har tom alt-tekst; navnet staar lige under. */
.card-art {
    display: block;
    width: 100%; max-width: 200px; height: auto;
    margin: -6px auto 18px;
    opacity: .92;
    transition: opacity 180ms ease, transform 180ms ease;
}
.card:hover .card-art { opacity: 1; transform: translateY(-1px); }

.card-pris { display: flex; flex-direction: column; text-align: center; }
.card-pris h3 { margin-bottom: 6px; }
/* min-height holder plads til TO linjer, saa de fire priser staar paa
   samme hoejde uanset hvor lang undertitlen er. Linjeafstanden staar
   her og ikke i body, saa regnestykket ikke skrider: 2 x 1.5 = 3em.
   Den stod paa 2.6em mod en arvet linjeafstand paa 1.65 - altsaa
   under to linjer, og saa virkede den ikke. */
.card-kort {
    color: var(--dim); font-size: 15px;
    line-height: 1.5; min-height: 3em;
}

.pris {
    margin-top: 22px;
    display: flex; align-items: flex-start; justify-content: center; gap: 4px;
    color: var(--accent);
    font-family: var(--display); line-height: 1;
}
.pris-kr  { font-size: 20px; font-weight: 500; margin-top: 8px; }
.pris-tal { font-size: clamp(42px, 5vw, 56px); font-weight: 700; letter-spacing: -0.03em; }
.pris-per { margin-top: 8px; color: var(--dim); font-size: 14px; }

.btn-fuld { margin-top: 22px; justify-content: center; }
.card-pris .btn-fuld { margin-top: auto; }

/* Priskortet paa forsiden er et link. Pilen fra .card ville sidde
   forkert under en centreret pris. */
a.card-pris::after { content: none; }

/* Hvad der er med i prisen. */
/* Det her er ikke en fodnote til kortene - det er det der goer prisen
   til en pris. Foer stod listen centreret i en 720 px spalte midt i en
   1180 px bred, mens kortene over og noten under laa ved kanten; den
   saa ud som om den var faldet ned fra et andet sted. Nu er den en
   plade i samme bredde som kortene, og linjerne starter til venstre
   som alt andet paa siden. */
/* Een stor plade blev til seks smaa. Rune: samme boks som paa
   produktsiderne - og det er rigtigere, for hvert punkt er sit eget
   svar, ikke en linje i en liste. */
.med {
    margin: clamp(40px, 5vw, 64px) 0 26px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
}
.med li {
    display: grid; grid-template-columns: auto 1fr; gap: 16px;
    align-items: start;
    padding: 20px 22px;
    border: 1px solid var(--line); border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(76, 245, 197, 0.05), transparent 55%),
        var(--ink-3);
    color: var(--paper); font-size: 16px; line-height: 1.5;
    transition: border-color 200ms ease, transform 200ms ease;
}
.med li:hover { border-color: var(--line-2); transform: translateY(-2px); }

/* Her stod seks ens flueben. Oejet gled forbi dem - seks gange det
   samme tegn er det samme som intet tegn. Nu har hvert punkt sit eget,
   ligesom paa produktsiderne, og saa kan man finde det man leder efter
   uden at laese alle seks. */
.med-chip {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    color: var(--accent);
    background: rgba(76, 245, 197, 0.10);
    border: 1px solid rgba(76, 245, 197, 0.26);
}
.med-chip .kort-glyf { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------
   Saadan kommer I i gang

   Det sidste spoergsmaal foer en underskrift. Tre trin bundet sammen af
   en streg, saa man kan se at der ER en ende paa det - en liste med tre
   punkter siger ikke det samme som en vej med tre skridt.

   Stregen tegnes af hvert trin og ikke af beholderen: med procenter
   ville den skride saa snart spalterne ikke er lige brede. Her loeber
   den fra tallets kant til naeste spaltes kant, og det sidste trin
   tegner ingen.
   --------------------------------------------------------------------- */
.band-trin { background: var(--ink); }
.trin-titel { margin: 0 0 clamp(32px, 4vw, 52px); }

.trin {
    margin: 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.trin-et { position: relative; }
.trin-et::after {
    content: ""; position: absolute; z-index: 0;
    top: 23px; left: 58px; right: -32px; height: 1px;
    background: var(--line);
}
.trin-et:last-child::after { content: none; }

/* Tallet ligger OVER stregen og har baandets egen bundfarve, saa
   stregen forsvinder bagved i stedet for at skaere igennem. */
.trin-nr {
    position: relative; z-index: 1;
    display: grid; place-items: center;
    width: 46px; height: 46px; margin: 0 0 22px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(76, 245, 197, 0.34);
    color: var(--accent);
    font-family: var(--display); font-weight: 700; font-size: 19px;
    line-height: 1;
}

/* Tallene lyser op efter tur: 1, 2, 3, og forfra. Det er den samme
   animation paa alle tre, forskudt med en tredjedel hver - saa er der
   altid praecis eet der lyser, og rytmen kan ikke skride.

   4,8 sekunder i alt, 1,6 pr. trin. Hurtigere ville stresse en side
   der handler om at noget passer sig selv. */
.trin-nr { animation: trin-lys 4.8s ease-in-out infinite; }
.trin-et:nth-child(2) .trin-nr { animation-delay: 1.6s; }
.trin-et:nth-child(3) .trin-nr { animation-delay: 3.2s; }

@keyframes trin-lys {
    0%, 26% {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--ink);
        box-shadow: 0 0 26px -6px rgba(76, 245, 197, 0.75);
    }
    36%, 100% {
        background: var(--ink);
        border-color: rgba(76, 245, 197, 0.34);
        color: var(--accent);
        box-shadow: 0 0 0 0 rgba(76, 245, 197, 0);
    }
}

/* Har man bedt om mindre bevaegelse, staar de tre bare taendt paa den
   rolige maade. Reglen oeverst slaar animationen fra, og grundtilstanden
   er allerede den rigtige - saa her skal der ingenting goeres. */

.trin-et h3 { margin: 0 0 8px; font-size: 19px; }
.trin-et p  { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.6; }

.band-trin .ring { margin-top: clamp(36px, 4vw, 52px); }

/* Paa en smal skaerm bliver vejen lodret. Stregen vender med. */
@media (max-width: 860px) {
    .trin { grid-template-columns: 1fr; gap: 34px; }
    .trin-et::after {
        top: 58px; bottom: -34px; left: 23px; right: auto;
        width: 1px; height: auto;
    }
}

/* ---------------------------------------------------------------------
   Det du skal vide

   Den gamle side havde seksten punkter i to spalter under "need to
   know" og "nice to know". Seksten linjer i traek er en mur, og ingen
   laeser en mur. Her staar de seks der saelger, og hver af dem har et
   tegn - oejet finder sit sted paa en raekke ikoner, ikke paa en raekke
   fluben.
   --------------------------------------------------------------------- */
.band-kort { background: var(--ink-2); }

.kort-titel { margin: 0 0 clamp(28px, 3.5vw, 44px); }

.kort {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 14px;
}

.kort-et {
    display: grid; grid-template-columns: auto 1fr; gap: 18px;
    align-items: start;
    padding: 22px 24px;
    border: 1px solid var(--line); border-radius: 16px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(76, 245, 197, 0.05), transparent 55%),
        var(--ink-3);
    transition: border-color 200ms ease, transform 200ms ease;
}
.kort-et:hover { border-color: var(--line-2); transform: translateY(-2px); }

.kort-et h3 { margin: 0 0 4px; font-size: 17px; }
.kort-et p  { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55; }

/* Tegnet sidder paa sin egen plade, saa de seks staar paa en lodret
   linje uanset hvor lange overskrifterne er. */
.kort-chip {
    display: grid; place-items: center;
    width: 44px; height: 44px; border-radius: 13px;
    color: var(--accent);
    background: rgba(76, 245, 197, 0.10);
    border: 1px solid rgba(76, 245, 197, 0.26);
    box-shadow: 0 0 0 0 rgba(76, 245, 197, 0.22);
    transition: box-shadow 220ms ease, background 220ms ease;
}
.kort-et:hover .kort-chip {
    background: rgba(76, 245, 197, 0.16);
    box-shadow: 0 0 22px -4px rgba(76, 245, 197, 0.45);
}
.kort-glyf { width: 22px; height: 22px; }

@media (max-width: 560px) {
    .kort-et { padding: 20px; gap: 14px; }
    .kort-chip { width: 38px; height: 38px; border-radius: 11px; }
    .kort-glyf { width: 19px; height: 19px; }
}

/* ---------------------------------------------------------------------
   Kunderne

   Navne, ikke logoer. Vi har ikke logoerne, og en række grå kasser der
   skal forestille dem, er værre end ingenting.
   --------------------------------------------------------------------- */
/* Bag navnene ligger et svagt punktgitter - pixels paa en LED-flade.
   Det binder afsnittet til fotoet nede i slutkaldet. Masken lader det
   doe ud mod kanterne; uden den bliver det et taeppe, og saa er det
   tapet og ikke en antydning. */
.band-names { position: relative; overflow: hidden; }
.band-names::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(140, 180, 230, 0.18) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(66% 54% at 50% 42%, #000 24%, transparent 80%);
            mask-image: radial-gradient(66% 54% at 50% 42%, #000 24%, transparent 80%);
}
.band-names > .wrap { position: relative; z-index: 1; }

/* Piller med bare et navn sagde ikke mere end navnet. Et kort kan
   baere hvad kunden ER, og det er selve pointen i afsnittet: fra et
   gymnasium til en oejenklinik. */
.names {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px;
}

.name {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 12px;
    align-items: start;
    padding: 18px 20px;
    border: 1px solid var(--line); border-radius: 14px;
    background: linear-gradient(160deg,
        rgba(15, 22, 38, 0.85), rgba(10, 15, 28, 0.45));
    transition: border-color 200ms ease, transform 200ms ease,
                background 200ms ease;
}
.name:hover {
    border-color: var(--line-2);
    transform: translateY(-3px);
    background: linear-gradient(160deg,
        rgba(21, 31, 52, 0.95), rgba(12, 18, 32, 0.6));
}

.name-navn {
    grid-column: 2;
    font-size: 15px; font-weight: 600; color: var(--paper);
}
.name-slags {
    grid-column: 2;
    font-size: 13px; color: var(--dim);
}

/* Den lille lampe. Den siger "i drift" - og det er praecis det,
   afsnittet paastaar. Den aander i stedet for at blinke: et blink
   ville vaere en alarm. */
.name-dot {
    grid-column: 1; grid-row: 1;
    width: 8px; height: 8px; margin-top: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: name-puls 4.2s ease-in-out infinite;
}
@keyframes name-puls {
    0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 rgba(76, 245, 197, 0.30); }
    50%      { opacity: 1;    box-shadow: 0 0 0 6px rgba(76, 245, 197, 0); }
}

/* Forskudt, saa de ikke aander i takt. Otte kunder, otte forskydninger
   - taeller listen anderledes en dag, gentager de sig bare. */
.name:nth-child(8n + 1) .name-dot { animation-delay: 0s; }
.name:nth-child(8n + 2) .name-dot { animation-delay: 0.5s; }
.name:nth-child(8n + 3) .name-dot { animation-delay: 1.1s; }
.name:nth-child(8n + 4) .name-dot { animation-delay: 1.7s; }
.name:nth-child(8n + 5) .name-dot { animation-delay: 2.3s; }
.name:nth-child(8n + 6) .name-dot { animation-delay: 2.9s; }
.name:nth-child(8n + 7) .name-dot { animation-delay: 3.4s; }
.name:nth-child(8n + 8) .name-dot { animation-delay: 3.9s; }

/* Har man bedt om mindre bevaegelse, staar lampen bare taendt. Reglen
   oeverst slaar animationen fra, og uden det her ville den blive
   staaende paa 0.45 - en lampe der ser halvdoed ud. */
@media (prefers-reduced-motion: reduce) {
    .name-dot { opacity: 1; }
}

/* ---------------------------------------------------------------------
   Slutkaldet
   --------------------------------------------------------------------- */
/* Delt paa midten: ordene til venstre, produktet til hoejre. Baandet
   har ingen .wrap - billedet skal helt ud til kanten, ellers er det en
   illustration og ikke en udsigt. Venstre spalte polstrer sig selv med
   (100vw - --wrap)/2, saa teksten alligevel lander paa samme lodrette
   linje som resten af siden. */
.band-cta {
    position: relative;
    background: var(--ink-2);
    border-top: 1px solid var(--line);
}

/* En haarfin accentstribe over baandet. Den siger "her slutter siden"
   uden at fylde. */
.band-cta::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px;
    height: 1px; z-index: 3;
    background: linear-gradient(90deg,
        transparent, var(--accent) 28%, var(--accent-2) 62%, transparent);
    opacity: 0.55;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(400px, 40vw, 580px);
}

.cta-text {
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    padding: clamp(64px, 7vw, 104px) clamp(32px, 4vw, 64px)
             clamp(64px, 7vw, 104px) max(24px, (100vw - var(--wrap)) / 2);
}

.cta-eyebrow {
    margin: 0 0 24px;
    display: inline-flex; align-items: center; gap: 13px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent);
}
.cta-eyebrow::before {
    content: ""; width: 30px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

/* Den store overskrift. Versaler og tæt linjeafstand - det er dem der
   giver slaget, ikke en ny skrifttype. */
.cta-title {
    /* Polstringen er ikke pynt. Med background-clip: text males
       baggrunden kun INDEN FOR elementets kasse, og med en
       linjeafstand paa 0.94 stikker bolle-A'ets ring op over den - saa
       blev den ikke malet, og A'et mistede sin bolle. Polstringen giver
       ringen plads, og den negative margen tager pladsen tilbage, saa
       afstanden til resten er uaendret. */
    margin: -0.14em 0;
    padding: 0.14em 0;
    max-width: 14ch;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(38px, 5.2vw, 82px);
    line-height: 0.94;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--paper);
}

/* Et svagt lys ovenfra, som paa en skaerm der staar taendt. Kun hvor
   browseren kan klippe en baggrund til teksten - ellers ville
   bogstaverne staa som ingenting. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cta-title {
        background: linear-gradient(180deg, #ffffff 0%, var(--paper) 55%, #c6d4e8 100%);
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
    }
}

.cta-lead {
    margin: 26px 0 0; max-width: 44ch;
    color: var(--dim); font-size: 17px;
}

.cta-link {
    margin-top: 40px;
    display: inline-flex; align-items: center; gap: 14px;
    padding-bottom: 10px;
    text-decoration: none; color: var(--paper);
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    border-bottom: 1px solid var(--line-2);
    transition: color 160ms ease, border-color 160ms ease;
}
.cta-link:hover, .cta-link:focus-visible {
    color: var(--accent); border-bottom-color: var(--accent);
}
.cta-arrow {
    width: 28px; height: 10px; flex: none;
    transition: transform 200ms ease;
}
.cta-link:hover .cta-arrow, .cta-link:focus-visible .cta-arrow {
    transform: translateX(7px);
}

.cta-shot { position: relative; overflow: hidden; }
.cta-shot img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 100% center;
}

/* Venstre kant af fotoet smelter ind i baandet. Uden det staar der en
   lodret soem midt paa siden. */
.cta-shot::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
        var(--ink-2) 0%, rgba(10, 15, 28, 0.55) 13%, transparent 38%);
}

/* Fine vandrette linjer - skaermens egne pixels, laant ud over hele
   billedet. Saa lidt at man kun maerker det. */
.cta-shot::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: repeating-linear-gradient(
        180deg, rgba(5, 7, 13, 0.30) 0 1px, transparent 1px 3px);
    opacity: 0.55;
}

/* Paa en smal skaerm falder de to spalter i een. Teksten foerst -
   budskabet skal ikke ligge under et foto - og fotoet under den med
   overgangen vendt paa hovedet. */
@media (max-width: 900px) {
    .cta-grid { grid-template-columns: 1fr; min-height: 0; }
    .cta-text { padding: clamp(56px, 9vw, 80px) 24px 44px; }
    .cta-title { max-width: none; font-size: clamp(36px, 9vw, 58px); }
    .cta-shot { aspect-ratio: 16 / 9; }
    /* Overgangen vender med: nu er det TOPPEN af fotoet der skal
       smelte ind i baandet, ikke venstre kant. */
    .cta-shot::before {
        background: linear-gradient(180deg,
            var(--ink-2) 0%, rgba(10, 15, 28, 0.55) 12%, transparent 42%);
    }
}

/* ---------------------------------------------------------------------
   Formularen
   --------------------------------------------------------------------- */
/* Kontaktformularen fylder sidens bredde som alt andet - men bredden
   bruges til at laegge felterne UD, ikke til at straekke dem. Et
   tekstfelt paa 1180 px er ikke behageligt at skrive i.

   To spalter: de fire korte felter til venstre i et 2x2-gitter,
   beskeden til hoejre i fuld hoejde. Knappen under dem begge. */
.form {
    margin-top: 40px;
    display: grid; gap: 24px 32px;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}
.form-korte { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

/* Beskeden fylder hoejden af de fire felter ved siden af. 100% af
   raekken - ikke en fast hoejde, saa de to spalter bliver ved med at
   staa lige hoejt, ogsaa hvis der kommer et felt mere. */
.felt-besked { height: 100%; grid-template-rows: auto 1fr; }
.felt-besked textarea { height: 100%; }

.form-send { grid-column: 1 / -1; }

/* Den gamle to-spaltede raekke staar stadig, hvis en anden formular
   bruger den. */
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

.felt { display: grid; gap: 8px; }
.felt span { font-size: 14px; color: var(--dim); }
.felt input, .felt textarea {
    width: 100%; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--ink-3); color: var(--paper);
    font: 400 16px/1.5 var(--skrift);
}
.felt textarea { min-height: 150px; resize: vertical; }
.felt input:focus, .felt textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(76, 245, 197, 0.16);
}

.besked {
    padding: 16px 18px; border-radius: 12px;
    border: 1px solid var(--line-2);
    background: var(--ink-3); font-size: 16px;
}
.besked.is-ok { border-color: var(--accent); }

/* ---------------------------------------------------------------------
   Bunden
   --------------------------------------------------------------------- */
/* Fire spalter: hvem, hvor, hvornaar, hvorhen. Foden er MOERKERE end
   baandet over den - det er den sidste flade, og den skal lukke siden,
   ikke fortsaette den. */
.foot {
    padding: clamp(64px, 7vw, 96px) 24px 26px;
    background: var(--ink);
}
.foot-in {
    max-width: var(--wrap); margin: 0 auto;
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.15fr 1fr;
    gap: 48px 40px;
}

.foot-h {
    margin: 0 0 18px;
    font-family: var(--display);
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--paper);
}

.foot-logo {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--display); font-weight: 700; font-size: 20px;
    letter-spacing: -0.01em;
}
.foot-brand p {
    margin: 18px 0 0; max-width: 32ch;
    color: var(--dim); font-size: 15px;
}

/* Adressen og tiderne er linjer, ikke en broedtekst. Et gitter giver
   dem den samme afstand som menupunkterne ved siden af. */
.foot-col address, .foot-lines {
    margin: 0; font-style: normal;
    display: grid; gap: 7px;
    color: var(--dim); font-size: 15px;
}

.foot-tlf { color: var(--paper); text-decoration: none; }
.foot-tlf:hover { color: var(--accent); }

/* "Eller ring paa ..." over formularen. Nummeret skal kunne ses uden at
   man leder - det er den hurtigste vej ind for den der allerede har
   besluttet sig. */
.ring {
    margin: 30px 0 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    color: var(--dim); font-size: 16px;
}
.ring a {
    font-family: var(--display); font-size: 22px; font-weight: 700;
    color: var(--paper); text-decoration: none;
    border-bottom: 1px solid var(--line-2);
    transition: color 160ms ease, border-color 160ms ease;
}
.ring a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ring-tid { font-size: 14px; }

.foot-nav { display: grid; gap: 10px; align-content: start; }
.foot-nav .foot-h { margin-bottom: 8px; }
.foot-nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
.foot-nav a:hover { color: var(--paper); }

/* Fire spalter bliver til to og saa til een. Et gitter ombryder ikke
   af sig selv - uden det her blev siden bredere end vinduet, og saa
   var alting klippet i hoejre side, ogsaa oppe i baandet. */
@media (max-width: 980px) {
    .foot-in { grid-template-columns: 1fr 1fr; gap: 44px 36px; }
    .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .foot-in { grid-template-columns: 1fr; gap: 34px; }
    .foot-brand p { max-width: none; }
}

/* Stregen hele vejen over. Den negative margen ophaever .foot's
   sidepolstring paa 24px, saa kanten naar ud til vinduet; polstringen
   laegges tilbage indeni, saa teksten ikke goer det samme. */
.foot-line {
    margin: 48px -24px 0;
    padding: 22px 24px 0;
    border-top: 1px solid var(--line);
}
.foot-line-in {
    max-width: var(--wrap); margin: 0 auto;
    display: flex; justify-content: center; align-items: center; gap: 12px;
    font-size: 14px; color: var(--dim);
}
.foot-dot { opacity: 0.45; }
.foot-line a { text-decoration: none; }
.foot-line a:hover { color: var(--paper); }

/* ---------------------------------------------------------------------
   Telefon

   Menuen foldes ud under toppen. Ikke et lag der dækker skærmen - man
   er på vej et sted hen, ikke i en dialog.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .burger {
        display: grid; gap: 5px; margin-left: auto;
        width: 42px; height: 42px; padding: 11px 9px;
        border: 1px solid var(--line); border-radius: 11px;
        background: transparent; cursor: pointer;
    }
    .burger span {
        display: block; height: 2px; border-radius: 2px;
        background: var(--paper);
        transition: transform 180ms ease, opacity 140ms ease;
    }
    .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav {
        position: absolute; left: 0; right: 0; top: 100%;
        margin: 0; padding: 12px 20px 20px;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: var(--ink-2);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 14px; font-size: 17px; }

    /* Login er VAEK paa en telefon - baade i menuen og i foden. v3 er
       bygget til en stor skaerm, og et punkt der foerer til noget man
       ikke kan bruge, er vaerre end intet punkt.

       Vaelgeren skal vaere mindst lige saa staerk som ".nav a" (0,1,1),
       ellers vinder den og logget bliver staaende. */
    .nav a.nav-login,
    .foot-nav a.foot-login { display: none; }
    .nav-lang { margin: 8px 0 0; text-align: center; }



    /* Paa en telefon falder det hele i een spalte. */
    .form { grid-template-columns: 1fr; }
    .form-korte { grid-template-columns: 1fr; }
    .felt-besked { height: auto; }
    .felt-besked textarea { height: auto; }
    .form-row { grid-template-columns: 1fr; }
    .foot-line-in { flex-wrap: wrap; }

    /* Fire priskort ved siden af hinanden bliver til fire smalle
       soejler. Under to gaar de i een kolonne af sig selv - her sikrer
       vi bare, at teksten ikke bliver klemt foerst. */
    .card-kort { min-height: 0; }
    .card { padding: 26px 22px 28px; }

    /* Et tryk skal kunne rammes. 44px er det Apple og Google er enige
       om, og en finger er ikke en musemarkoer. */
    .btn { padding: 15px 24px; min-height: 48px; }
    .nav a { min-height: 48px; display: flex; align-items: center; }
}

/* Ingen vandret rulning. Et enkelt for langt ord i en overskrift kan
   skubbe hele siden sidelaens paa en telefon, og saa ligner den
   i stykker. */
html, body { max-width: 100%; overflow-x: hidden; }
h1, h2, h3 { overflow-wrap: break-word; }