/******************************************************** FONTE: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Transition overlay*/
#transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(89, 27%, 18%);
    z-index: 9999;
    animation: slideOut 1.0s forwards;
}

@keyframes slideOut {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* LimbathudeScript font */
@font-face {
    font-family: 'LimbathudeScript';
    src: url('../fonts/LimbathudeScript-51WLv.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Sailec Bold */
@font-face {
    font-family: 'Sailec';
    src: url('../fonts/Sailec-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* Sailec Medium */
@font-face {
    font-family: 'Sailec';
    src: url('../fonts/Sailec-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* Sailec Medium Italic */
@font-face {
    font-family: 'Sailec';
    src: url('../fonts/Sailec-Medium-Italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

/* Sailec Regular */
@font-face {
    font-family: 'Sailec';
    src: url('../fonts/Sailec-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Grundlæggende reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Rød prik der er tilføjet cursor */
.cursor-dot {
    width: 12px;
    height: 12px;
    background-color: hsl(89, 27%, 18%);
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Baggrundsfarve  */
body, header, footer {
    background-color: hsl(42, 39%, 94%);
}
 
/* Animation der loader op til de første 8 elementer på siden */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(0); }
    100% { opacity: 1; transform: translateY(0); }
}
  
.load-animation {
    opacity: 0; 
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-duration: 0.8s;
}
  
.load-1 {
    animation-name: fadeInUp;
    animation-delay: 0.2s;
}
  
.load-2 {
    animation-name: fadeInUp;
    animation-delay: 0.4s;
}
  
.load-3 {
    animation-name: fadeInUp;
    animation-delay: 0.6s;
}
  
.load-4 {
    animation-name: fadeInUp;
    animation-delay: 0.7s;
}
  
.load-5 {
    animation-name: fadeInUp;
    animation-delay: 0.8s;
}
  
.load-6 {
    animation-name: fadeInUp;
    animation-delay: 0.9s;
}
  
.load-7 {
    animation-name: fadeInUp;
    animation-delay: 1.0s;
}
  
.load-8 {
    animation-name: fadeInUp;
    animation-delay: 1.1s;
}
 
.load-9 {
    animation-name: fadeInUp;
    animation-delay: 1.2s;
}

.load-10 {
    animation-name: fadeInUp;
    animation-delay: 1.3s;
}

.load-11 {
    animation-name: fadeInUp;
    animation-delay: 1.4s;
}

.load-12 {
    animation-name: fadeInUp;
    animation-delay: 1.5s;
}

.load-13 {
    animation-name: fadeInUp;
    animation-delay: 1.6s;
}

.load-14 {
    animation-name: fadeInUp;
    animation-delay: 1.7s;
}

.load-15 {
    animation-name: fadeInUp;
    animation-delay: 1.8s;
}

.load-16 {
    animation-name: fadeInUp;
    animation-delay: 1.9s;
}

.load-17 {
    animation-name: fadeInUp;
    animation-delay: 2.0s;
}

.load-18 {
    animation-name: fadeInUp;
    animation-delay: 2.1s;
}

.load-19 {
    animation-name: fadeInUp;
    animation-delay: 2.2s;
}

.load-20 {
    animation-name: fadeInUp;
    animation-delay: 2.2s;
}

.load-21 {
    animation-name: fadeInUp;
    animation-delay: 2.3s;
}

.load-22 {
    animation-name: fadeInUp;
    animation-delay: 2.4s;
}

.load-23 {
    animation-name: fadeInUp;
    animation-delay: 2.5s;
}

.load-24 {
    animation-name: fadeInUp;
    animation-delay: 2.6s;
}

.load-25 {
    animation-name: fadeInUp;
    animation-delay: 2.7s;
}

.load-26 {
    animation-name: fadeInUp;
    animation-delay: 2.8s;
}

.load-27 {
    animation-name: fadeInUp;
    animation-delay: 2.9s;
}

.load-28 {
    animation-name: fadeInUp;
    animation-delay: 3.0s;
}

.load-29 {
    animation-name: fadeInUp;
    animation-delay: 3.1s;
}

.load-30 {
    animation-name: fadeInUp;
    animation-delay: 3.2s;
}

/* Basis typografi for websitet */
body {
    font-family: 'Sailec', Arial, sans-serif;
    font-weight: normal;
    color: hsl(89, 27%, 18%);
    background-color: hsl(42, 39%, 94%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
}

/* Overskrifter bruger Sailec Medium */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sailec', Arial, sans-serif;
    font-weight: 500;
    color: hsl(89, 27%, 18%);
}

/* Overskrifter bruger Sailec Italic Medium */
.italic {
    font-family: 'Sailec', Arial, sans-serif;
    font-weight: 500;
    color: hsl(89, 27%, 18%);
    font-style: italic;
}

/* Links */
a {
    color: hsl(89, 27%, 18%);
    text-decoration: none;
}

a:hover {
    color: hsl(89, 27%, 18%);
    text-decoration: none;
}

/******************************************************** ANIMATION AF ELEMENTER ********************************************************/

/* Animation af elementer der ikke er i view-port */
.animate-elm { 
    opacity: 0 !important;
    -webkit-transition: opacity 1.2s ease-in !important;
    -moz-transition: opacity 1.2s ease-in !important;
    -ms-transition: opacity 1.2s ease-in !important;
    -o-transition: opacity 1.2s ease-in !important;
    transition: opacity 1.2s ease-in !important;
}

.animate-elm.in-view {
    opacity: 1 !important;
}
    
/******************************************************** TRANSPARANT HEADER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Global offset til ankerscroll */
:root { --header-offset: 84px; }          /* justér til din faktiske højde */
html { scroll-padding-top: var(--header-offset); }
section[id] { scroll-margin-top: var(--header-offset); }

/* FIXED header der visuelt opfører sig som sticky */
.topbar-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  
    /* sørger for at den ligger over indhold */
    z-index: 1000;
  
    /* behold din luft rundt om pillen */
    padding: 16px;
  
    /* background følger din side (kan være gennemsigtig) */
    background: transparent;
  }
  
  /* Når headeren er fixed, skal body have plads foroven */
  :root { --header-height: 0px; }
  body{ padding-top: var(--header-height); }

.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* brand | nav | kontakt+pris */
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
  
    /* GLASS / BLUR */
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 16px 22px;
  }

/* Forstærk skygge ved scroll (JS toggler .topbar--scrolled) */
.topbar--scrolled {
  backdrop-filter: saturate(160%) blur(10px);
}

/* Brand/“logo” venstre */
.topbar__brand {
  justify-self: start;
  font-weight: 700;
  text-decoration: none;
  font-size: 20px;
  color: hsl(89, 27%, 18%);
}

@media (max-width: 680px) {
    /* Brand/“logo” venstre – kun på mobile */
    .topbar__brand {
      font-size: 18px;
    }
  }



/* Nav centreres (midten) */
.topbar__nav {
  justify-self: center;
  display: flex;
  gap: clamp(14px, 4vw, 36px);
}

/* Link-stil (nav + højre) */
.topbar__link {
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}
.topbar__link:hover,
.topbar__link:focus-visible {
  text-decoration: none;
}

/* Højre side: Kontakt + PRIS */
.topbar__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* CTA-knap (PRIS) */
.topbar__cta {
  background: hsl(89, 27%, 18%);
  color: hsl(42, 39%, 94%);
  text-decoration: none;
  border: 1px solid hsl(89, 27%, 18%);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* --- Keep topbar CTA text white on hover --- */
.topbar__cta,
.topbar__cta:visited,
.topbar__cta:focus,
.topbar__cta:active,
.topbar__cta:hover {
  color: hsl(42, 39%, 94%) !important; /* hvid tekst */
}

/* Responsiv adfærd */
@media (max-width: 900px) {
  .topbar {
    grid-template-columns: 1fr auto 1fr;
    padding: 10px 14px;
  }
  .topbar__nav { gap: 16px; }
}

@media (max-width: 680px) {
  .topbar {
    grid-template-columns: 1fr auto;  /* brand | højre */
    row-gap: 10px;
  }
  .topbar__nav {
    order: 3;                 /* læg nav ned under på små skærme */
    grid-column: 1 / -1;      /* fuld bredde */
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding-bottom: 6px;
  }
  .topbar__right .topbar__cta { padding: 9px 14px; }
}



/* Skjul midter-menu på mobil */
@media (max-width: 680px) {
    .topbar__nav {
      display: none !important;   /* skjul links helt og fjern fra tab-rækkefølgen */
    }
  }

/******************************************************** OVERSKRIFT: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.hero-heading {
    text-align: center;
  }
  
  .hero-heading h1 {
    font-family: inherit;
    font-weight: 600;
  }
  
  .hero-heading__highlight {
    font-weight: 600;
  }

/******************************************************** VIDEO: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

.hero-video {
  display: flex;
  justify-content: center;
}

.video-frame {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  background: none;
}

/* Selve videoen */
.video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Play-knap overlay */
.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2;
}

/* Den grønne cirkel */
.video-play::before {
  content: "";
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: hsl(89, 27%, 18%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Den hvide trekant – 5px mindre */
.video-play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 0;
  height: 0;
  border-left: 19px solid hsl(42, 39%, 94%);  /* før 22px */
  border-top: 10px solid transparent;          /* før 13px */
  border-bottom: 10px solid transparent;       /* før 13px */
  pointer-events: none;
}

/* Hover-effekt */
.video-play:hover::before {
  transform: scale(1.05);
}

/* Skjul overlay når videoen spiller */
.video-frame.playing .video-play {
  display: none;
}

/* Små skærme – lad højden følge bredde (16:9)
@media (max-width: 640px) {
  .video-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}
   */

/******************************************************** KNAPPER UNDER VIDEO: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

  /* Sektion under video */
.cta-section {
    text-align: center;
  }
  
  .cta-heading {
    font-weight: 600;
  }
  
  /* Knap-container */
  .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  
  /* Fælles knappestil */
  .btn {
    font-family: inherit;
    padding: 16px 24px;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  /* Globale knap-varianter (til hele sitet) */
.btn-primary {
    background: hsl(89, 27%, 18%);
    color: hsl(42, 39%, 94%);
    border: 1px solid hsl(89, 27%, 18%);
  }
  .btn-primary:hover { filter: brightness(0.95); }
  
  .btn-outline {
    background: transparent;
    color: hsl(89, 27%, 18%);
    border: 1px solid hsl(89, 27%, 18%);
  }
  .btn-outline:hover {
    background: #111;
    color: hsl(42, 39%, 94%);
  }

  /* Sørg for at CTA-knapperne altid ligger side om side – også på mobil */
@media (max-width: 680px) {
    .cta-buttons {
      flex-wrap: nowrap !important;    /* forhindrer linjeskift */
      justify-content: center !important;
      gap: 10px !important;            /* lidt mindre mellemrum på mobil */
    }
  
    .cta-buttons .btn {
      flex: 1 1 auto !important;       /* så de kan tilpasse sig bredden */
      white-space: nowrap;             /* forhindrer tekst i at bryde */
    }
  }
  
/******************************************************** LOGO BANNER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

  /* ===== Logo banner ===== */
.logo-banner {
    --logo-max-h: 40px;                 /* styr logo-højde */
    --logo-gap: 48px;                   /* vandret mellemrum */
    --logo-row-gap: 90px;               /* lodret mellemrum */
    --banner-radius: 14px;
  
    margin: 80px auto 60px;
    padding: 0 20px;
  }
  
  /* Topbar med blød gradient som i eksemplet */
  .logo-banner__topbar {
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 10px 16px 12px;
    text-align: center;
  }
  
  .logo-banner__topbar h2 {
    margin: 0;
    font-size: clamp(22px, 4vw, 36px);
    font-weight: 700;
  }
  
  /* Wrapper for grid */
  .logo-banner__wrap {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Selve logo-griddet */
  .logo-grid {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 6 per række desktop */
    column-gap: var(--logo-gap);
    row-gap: var(--logo-row-gap);
    align-items: center;
    justify-items: center;
  }
  
  .logo-grid li { display: flex; align-items: center; justify-content: center; }
  
  .logo-grid img {
    max-height: var(--logo-max-h);
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    filter: none;                      /* behold farver som i eksemplet */
    opacity: 0.95;
    transition: transform .15s ease, opacity .15s ease;
  }
  
  .logo-grid img:hover { transform: translateY(-2px); opacity: 1; }
  
  /* Responsiv: tablet & mobil */
  @media (max-width: 1024px) {
    .logo-grid { grid-template-columns: repeat(4, 1fr); }
    .logo-banner { --logo-max-h: 36px; --logo-gap: 36px; }
  }
  @media (max-width: 680px) {
    .logo-grid { grid-template-columns: repeat(3, 1fr); }
    .logo-banner { --logo-max-h: 35px; --logo-gap: 5px; --logo-row-gap: 35px; }
  }

  /* === LOGO-GRID: Perfekt mobil justering === */
@media (max-width: 480px) {
    /* Fjern alle mulige margins og paddings */
    .logo-banner,
    .logo-banner__wrap,
    .logo-grid {
      margin: 0 !important;
      padding: 0 !important;
      max-width: none !important;
      width: 100% !important; /* ikke 100vw — forhindrer scroll offset */
    }
  
    /* Centrer grid og fjern grid-gap-ubalancer */
    .logo-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      justify-items: center !important;
      align-items: center !important;
      column-gap: 0 !important;
      row-gap: 28px !important;
    }
  
    /* Sørg for, at logoerne selv er centreret */
    .logo-grid li {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  
    /* Justér logo-størrelse og udseende */
    .logo-grid img {
      max-height: 32px !important;
      width: auto !important;
      display: block !important;
    }
  
    /* Fjern horisontal scroll, som kan skubbe layoutet skævt */
    html, body {
      overflow-x: hidden !important;
    }
  }

/******************************************************** 3 PUNKTER UNDER LOGO BANNER ********************************************************/

.process-section {
    text-align: center;
  }
  
  .process-header h2 {
    font-weight: 600;
  }
    
  /* Steps layout */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
  }
  
  /* (Deaktiveret prikket linje – beholdt til senere hvis du vil aktivere den) */
  .process-steps::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 5%;
    width: 90%;
    height: 1px;
    border-top: 2px dashed transparent;
    z-index: 0;
  }
  
  /* Stepkort */
  .process-steps .step {
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 22px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  
  .process-steps .step:hover {
    transform: translateY(-0px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  }
  
  /* Cirklen – nu uden baggrund og border */
  .process-steps .step .step-circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    background: transparent;
    border: none;
    border-radius: 999px;
    z-index: 1;
  }
  
  /* Skjul evt. tal */
  .process-steps .step .step-circle span { 
    display: none; 
  }
  
  /* Standard ikon (viser Ikonserie.svg i fuld farve) */
.process-steps .step .step-circle::before {
    content: "";
    display: block;
    width: 54px;
    height: 54px;
    background: url("../images/1i.svg") center / contain no-repeat;
}

/* Ikon til step 1 */
.process-steps .step .step-circle.step-1::before {
    background-image: url("../images/1i.svg");
}

/* Ikon til step 2 */
.process-steps .step .step-circle.step-2::before {
    background-image: url("../images/2i.svg");
}

/* Ikon til step 3 */
.process-steps .step .step-circle.step-3::before {
    background-image: url("../images/3i.svg");
}
  
  /* Tekster venstrejusteres */
  .process-steps .step h3,
  .process-steps .step p {
    align-self: stretch;
    margin-left: 0;
  }
  
  .process-steps .step h3 {
    font-size: 18px;
    line-height: 34px;
    font-weight: 600;
    margin: 0;
  }
  
  .process-steps .step p {
    font-size: 16px;
    line-height: 26px;
    margin: 0;
  }
  
  /* Fallback hvis mask ikke understøttes */
  @supports not ((-webkit-mask: url("")) or (mask: url(""))) {
    .process-steps .step .step-circle::before {
      background-color: transparent;
      background-image: url("../images/ikonserie.svg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
  
  /* Mobil / tablet */
  @media (max-width: 900px) {
    .process-steps {
      grid-template-columns: 1fr;
      gap: 25px;
    }
    .process-steps::before {
      display: none;
    }
  }

/******************************************************** FULL WIDTH BILLEDE BANNER: DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Fix: ægte full-bleed uden horisontal scroll */
.fullwidth-image-row {
  position: relative;
  width: 100vw;              
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;    
}

/* Ens mellemrum + 50% peek, men uden at udvide dokumentbredden */
.image-row {
  --g: 15px;
  --peek: calc((100vw - (4 * var(--g))) / 4); /* halvdelen af billedbredden */

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--g);

  width: calc(100vw + var(--peek));   
  margin-left: calc(-0.5 * var(--peek));
  padding: 0;
}

/* Default (Laptop) */
:root {
  --img-h: clamp(180px, 28vw, 360px);
}

.image-row img {
  width: 100%;
  height: var(--img-h) !important;
  object-fit: cover;
  border-radius: 32px;
  max-width: none;
}

/* Desktop: større højde */
@media (min-width: 1513px) {
  :root { --img-h: 520px; } 
}




/* MOBIL: 3 billeder med peek i begge sider og centreret midtbillede */
@media (max-width: 640px) {
    .fullwidth-image-row { 
        margin-top: 80px !important;   /* afstand over billedrækken */

      overflow: hidden;                 /* klip kanten pænt */
    }
  
    .image-row {
      --g: 12px;                        /* mellemrum mellem billeder */
      --peek: 120px;                    /* hvor meget de skal stikke ud samlet */
      display: grid;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: var(--g);
  
      /* gør rækken bredere end viewport og centrer den,
         så midter-kortet er i fokus og siderne peeker */
      width: calc(100vw + var(--peek));
      margin-left: calc(-0.5 * var(--peek));
      padding: 0;
    }
  
    /* behold kun de 3 første billeder */
    .image-row img:nth-child(n+4) {
      display: none !important;
    }
  
    /* størrelse/stil på billeder */
    .image-row img {
      height: 300px !important;
      width: 100%;
      object-fit: cover;
      border-radius: 18px;
      max-width: none;
      display: block;
    }
  }

/* Safety net mod evt. andre sektioner */
html, body { overflow-x: hidden; }

/******************************************************** UDBYTTE : DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* ===== Features (kort i LinkedIn-stilen) ===== */
.features-section {
    /* Ikon-variabler (nemt at justere størrelse/farve) */
    --fi-size: 48px;                  /* ikonstørrelse */
    --fi-color: hsl(89, 27%, 18%);    /* standard ikonfarve */
  }
  
  .features-title {
    text-align: center;
    font-weight: 600;
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  /* === Feature-bokse med glass / blur === */
  .feature {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    column-gap: 14px;
    row-gap: 8px;
  
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  
  .feature:hover {
    transform: translateY(-0px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  }
  
  /* Overstyr .li-card-padding for feature-kort */
  .features-grid article.li-card.feature {
    padding: 24px 30px 24px 30px; /* top | right | bottom | left */
  }
  
/* === SVG-ikoner (erstatter emojis) === */
.feature__icon {
    grid-area: icon;
    width: 54px;
    height: 54px;
    display: inline-block;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* FARVER FRA SVG — ingen overlay */
    background-color: transparent;
}

/* Bind hver SVG til en klasse */
.feature__icon.icon-4 { background-image: url("../images/4i.svg"); }
.feature__icon.icon-5 { background-image: url("../images/5i.svg"); }
.feature__icon.icon-6 { background-image: url("../images/6i.svg"); }
.feature__icon.icon-7 { background-image: url("../images/7i.svg"); }
.feature__icon.icon-8 { background-image: url("../images/8i.svg"); }
.feature__icon.icon-9 { background-image: url("../images/9i.svg"); }

/* Hover (bevarer ikonets farver, gør det kun en smule mørkere) */
.feature:hover .feature__icon {
    filter: brightness(0.88);
}
  
  .feature__title {
    grid-area: title;
    margin: 0;
    font-weight: 600;
  }
  
  .feature__text {
    grid-area: text;
    margin: 0;
  }
  
  /* CTA */
  .features-cta {
    text-align: center;
    margin-top: 28px;
  }
  
  .features-cta .btn.btn-primary {
    padding: 14px 22px;
    margin-top: 30px;
    border-radius: 999px;
  }
  
  /* Responsiv */
  @media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr; }
    .feature { grid-template-columns: 44px 1fr; }
  }

/******************************************************** UDTALELSER FRA KUNDER : DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/
  
  .linkedin-heading h2 {
    text-align: center;
    font-weight: 600;
    /* sikkerhed – ingen intern “plade” bag sektionstitlen */
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  
  /* Grid */
  .linkedin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  
  /* Kort med glass/blur (behold) */
  .li-card {
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    padding: 26px 26px 18px;
    display: flex;
    flex-direction: column;
    /* undgå at indhold skaber visuelle “plader” ved afrundede hjørner */
    background-clip: padding-box;
  }
  
  /* Header med avatar + navn */
  .li-card__head {
    display: grid;
    grid-template-columns: 72px 1fr;      /* matcher avatar-størrelsen */
    gap: 18px;                             /* lidt mindre end 42px for tættere layout */
    align-items: center;
    margin-bottom: 10px;
  
    /* VIGTIGT: ingen egen “plade” – kun parentens glass skal tegnes */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* Fjern evt. baggrund/skygg­er på det indre wrapper-div i headeren */
  .li-card__head > div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
  }
  
  /* Avatar */
  .li-card__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  /* Navn og titel – sørg for ingen “plade” bag teksten */
  .li-card__name,
  .li-card__meta {
    font-weight: 600;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  
  .li-card__meta a {
    text-decoration: none;
  }
  
  /* Brødtekst */
  .li-card__body {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  
  /* Fod: Læs mere */
  .li-card__foot { margin-top: 10px; }
  .li-card__more {
    font-weight: 600;
    text-decoration: none;
  }
  .li-card__more:hover { text-decoration: underline; }
  
  /* Hover-elevate */
  .li-card:hover {
    transform: translateY(-0px);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  
  /* Responsiv */
  @media (max-width: 1024px) {
    .linkedin-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 680px) {
    .linkedin-grid { grid-template-columns: 1fr; }
  }

/******************************************************** SPEAKER : DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/
  
  /* Grid layout */
  .bio-split__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 50px;
    align-items: center;
  }
  
  /* Venstre tekstside */
  .bio-stats { 
    margin-bottom: 26px; 
}
  
  .bio-stat {
    font-weight: 600;
  }
  
  /* CTA-knap */
  .bio-cta { 
    margin-top: 26px; 
}
  
  /* Billede */
  .bio-image {
    margin: 0;
    border-radius: 32px;
    overflow: hidden;
  }
  .bio-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  /* Mobil-tilpasning */
  @media (max-width: 980px) {
    .bio-split__grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .bio-image {
      order: -1; /* billede først på mobil hvis ønsket */
    }
  }

/******************************************************** PRISER : DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* ===== Pricing ===== */
.pricing {
    --accent: hsl(89, 27%, 18%);
  }
  
  .pricing__header {
    text-align: center;
  }

  .pricing__header h2 {
    font-weight: 600;
  }
  
  /* Grid */
  .pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
  }
  
  /* Card base (genbruger li-card) – ENS padding hele vejen rundt */
  .price-card {
    padding: 28px;
    display: flex;
    flex-direction: column;
  }
  
  /* Fjern “plade” omkring overskriften, bevar glass på kortet */
  .price-card__head {
    display: contents;                     /* header tegner ingen boks */
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Stil kun teksten (ikke en container) */
  .price-card__price {
    display: block;
    text-align: center;                    /* flyttet fra header */
    font-weight: 600;
    background: transparent !important;    /* sikkerhed: ingen baggrund */
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
  
  /* Divider */
  .price-card__divider {
    border: 0;
    border-top: 0px solid rgba(0,0,0,.08);
    margin: 18px 0 14px;
  }
  /* Hvis divider er SIDSTE element i kortet, så fjern den for at undgå bund-luft */
  .price-card > .price-card__divider:last-child {
    display: none;
    margin: 0;
  }
  
  /* Feature list + pænere checkmarks */
  .price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    display: grid;
    gap: 10px;
  }
  .price-list li {
    position: relative;
    padding-left: 28px;
  }
  .price-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: var(--accent); /* farven styres ét sted */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M9.0003 16.2002L4.80029 12.0002L3.4003 13.4002L9.0003 19.0002L21.0003 7.0002L19.6003 5.6002L9.0003 16.2002Z'/></svg>") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M9.0003 16.2002L4.80029 12.0002L3.4003 13.4002L9.0003 19.0002L21.0003 7.0002L19.6003 5.6002L9.0003 16.2002Z'/></svg>") center / 18px 18px no-repeat;
  }
  
  /* CTA-knap – mere luft over, ingen ekstra luft under, behagelig knaphøjde */
  .price-card .btn {
    font-size: 16px;
    padding: 16px 24px;
    line-height: 1;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    font-weight: 500;
  }
  .price-card__cta {
    margin-top: 40px;
    margin-bottom: 0;
  }
  
  /* Farver til knapper kun i pricing */
  .pricing .btn-primary {
    background: var(--accent);
    color: hsl(42, 39%, 94%);
    border: 1px solid var(--accent);
  }
  .pricing .btn-primary:hover { filter: brightness(0.95); }
  .pricing .btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
  }
  .pricing .btn-outline:hover { background:#111; color:#fff; }
  
  /* Featured kort (#2) – 1px border i samme farve som knappen */
  .price-card--featured {
    position: relative;
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border: 1px solid var(--accent) !important;   /* vigtig: overstyr glass-border */
    border-radius: 32px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .price-card--featured:hover {
    transform: translateY(-0px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
  }
  
  /* Lilla glow beholdes (uden farve for at undgå konflikt) */
  .price-card--featured::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 24px;
    filter: blur(12px);
    z-index: -1;
  }
  
  /* Hover lift (alle kort) */
  .price-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  
  /* Responsiv */
  @media (max-width: 1024px) {
    .pricing__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .pricing__grid { grid-template-columns: 1fr; }
  }



  /******************************************************** SPØRGSMÅL : DESKTOP, LAPTOP, TABLET & MOBILE ********************************************************/

/* Sektion wrapper */
.questions-section {
    max-width: 900px;
    margin: 100px auto;
    padding: 0 20px;
    text-align: center;
  }
  
  /* Overskrift og tekst */
  .qs-header h2 {
    font-weight: 600;
    font-size: 46px;
    line-height: 46px;
    padding-bottom: 20px;
  }
  .qs-header p {
    font-size: 16px;
    line-height: 26px;
    margin: 6px 0;
  }
  
  /* Billede */
  .qs-image {
    margin: 28px auto 30px;
    border-radius: 999px;
    overflow: hidden;
    width: 21%;
  }
  .qs-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  /* Kontakt uden boks – tæt layout, samme størrelse på alle linjer */
  .qs-person {
    margin-top: 10px;
    text-align: center;
  }
  
  .qs-name,
  .qs-role,
  .qs-contact a {
    font-size: 16px;   
    line-height: 26px;  
  }
  
  .qs-name {
    margin: 0;
    font-weight: 700;   
  }
  
  .qs-role {
    margin: 0;
    font-weight: 500;
    letter-spacing: 0;   
  }
  
  .qs-contact {
    display: grid;
    gap: 0;             
    margin: 0;           
  }
  .qs-contact a {
    display: block;       /* hver linje for sig */
    text-decoration: none;
    font-weight: 500;
  }
  .qs-contact a:hover { text-decoration: underline; }
  
  /* Knap */
  .qs-btn {
    display: inline-flex;
    padding: 16px 24px;
    line-height: 1;
    border-radius: 999px;
    margin-top: 36px;
    border: 1px solid hsl(89, 27%, 18%);
  }


/* === Kun underline under TLF + MAIL i .qs-contact — CENTRERET === */
.qs-contact {
    display: grid;
    gap: 0;
    justify-items: center;           /* centrér hvert link i gridden */
  }
  
  .qs-contact a {
    display: inline-block;           /* fyld kun egen tekstbredde */
    text-decoration: none;
    color: inherit;
    position: relative;
  
    /* “Cool” 1px underline der følger tekstens bredde */
    background-image: linear-gradient(hsl(46 37% 93%), hsl(46 37% 93%));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-bottom: 1px;
    transition: background-size .2s ease;
  }
  
  /* (valgfrit) lille hover-effekt */
  .qs-contact a:hover {
    background-size: 0% 1px;         /* træk tilbage */
  }
  .qs-contact a:hover {
    background-size: 100% 1px;       /* og frem igen */
  }
  
  .qs-contact a,
.qs-contact a:hover,
.qs-contact a:focus,
.qs-contact a:active {
  text-decoration: none !important;
}

/******************************************************** CUSTOM BUND FARVESKIFT ********************************************************/

/* CUSTOM GENERELT */

/* Rød prik der er tilføjet cursor */
body.scrolled-bottom .cursor-dot {
    background-color: hsl(46 37% 93%);
}

/* Ændring af baggrundsfarve, når scrolled-bottom er aktiv */
body.scrolled-bottom,
body.scrolled-bottom header,
body.scrolled-bottom footer {
   background-color: hsl(0 0% 10%);
}

/* CUSTOM HEADER */

/* Ændring af logo, når scrolled-bottom er aktiv */
body.scrolled-bottom .header-logo {
    color: #ffffff;
    -webkit-text-stroke: 0.5px #ffffff;
}
 
/* Header "Login" button */
body.scrolled-bottom .header-buttons .login-button {
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* Burger icon cirkel */
body.scrolled-bottom .burger-menu-wrapper {
    background-color: #ffffff;
    border: 1px solid #ffffff;
}

/* Burger icon i normal tilstand */
body.scrolled-bottom .burger-icon {
    background-color: #212121;
}

/* Hover-effekt på burger-icon */
body.scrolled-bottom .burger-icon:hover {
    background-color: #212121;
}

/* Hover-effekt på burger-menu-wrapper, påvirker burger-icon */
body.scrolled-bottom .burger-menu-wrapper:hover .burger-icon {
    background-color: #212121;
}



/* CUSTOM PAGE ELEMENTS */


















body.scrolled-bottom .qs-header h2 {
    color: hsl(46 37% 93%);
}

body.scrolled-bottom  .qs-header p {
    color: hsl(46 37% 93%);
  }
  
body.scrolled-bottom .qs-name,
  .qs-role,
  .qs-contact a {
    color: hsl(46 37% 93%);
  }
  
body.scrolled-bottom .qs-name {
    color: hsl(46 37% 93%);
  }
  
body.scrolled-bottom .qs-role {
    color: hsl(46 37% 93%);
  }
  
body.scrolled-bottom .qs-contact a {
    color: hsl(46 37% 93%);
  }

/* Knap */
body.scrolled-bottom .qs-btn {
    background-color: hsl(46 37% 93%);
    color: hsl(0 0% 10%);
    border: hsl(46 37% 93%);
  }



  /* Farver i bund-tilstand */
  body.scrolled-bottom .qs-contact a {
    color: hsl(46 37% 93%) !important;
    background-image: linear-gradient(hsl(46 37% 93%), hsl(46 37% 93%));
  }




  body.scrolled-bottom .pricing__header h2 {
    color: hsl(46 37% 93%);
  }

  body.scrolled-bottom .price-card__price {
    color: hsl(46 37% 93%);
  }

  body.scrolled-bottom .price-card__desc {
    color: hsl(46 37% 93%);
  }
    
  /* Feature list + pænere checkmarks */
  body.scrolled-bottom .price-list {
    color: hsl(46 37% 93%);
  }

  body.scrolled-bottom .price-list li::before {
    color: hsl(46 37% 93%);
  }
  
  /* CTA-knap – mere luft over, ingen ekstra luft under, behagelig knaphøjde */
  body.scrolled-bottom .price-card .btn {
    color: yellow;
    background-color: blue;
  }

  
  /* Farver til knapper kun i pricing */
  body.scrolled-bottom .pricing .btn-primary { 
    background: hsl(46 37% 93%);
    color: hsl(0 0% 10%);
    border: 1px solid hsl(46 37% 93%);
  }

  body.scrolled-bottom .pricing .btn-outline { 
    background: transparent;
    color: hsl(46 37% 93%);
    border: 1px solid hsl(46 37% 93%);
  }
  
  /* Featured kort (#2) – 1px border i samme farve som knappen */
  body.scrolled-bottom .price-card--featured {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px yellow;
    box-shadow: none;
  }

  

/* Når man er tæt på bunden: gør pris-kort transparente og fjern glass/blur */
body.scrolled-bottom .pricing .price-card {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: hsl(46 37% 93%)  !important; /* valgfrit – let outline */
    box-shadow: none !important;
  }
  
  /* Checkmarks gule i listen (mask bruger baggrundsfarve) */
  body.scrolled-bottom .pricing .price-list li::before {
    background-color: hsl(46 37% 93%)  !important; /* gul */
  }
  
  /* (Valgfrit) Hvis du også vil sikre, at det generiske li-card ikke “skinner igennem” i pricing */
  body.scrolled-bottom .pricing .li-card {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* QS-billede: fjern kant/skygg­er ved bunden */
body.scrolled-bottom .qs-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  
  /* Sørg for at selve billedet ikke laver halo/kanter */
  body.scrolled-bottom .qs-image img {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: inherit;   /* matcher figurens hjørner */
    transform: translateZ(0); /* fjerner evt. subpixel-halo i nogle browsere */
  }

  /* Topbar links/logo hvide i bunden */
body.scrolled-bottom .topbar__brand,
body.scrolled-bottom .topbar__link {
  color: hsl(46 37% 93%) !important;
  opacity: 1 !important;
}

/* Bevar hvid ved hover/focus/visited */
body.scrolled-bottom .topbar__link:hover,
body.scrolled-bottom .topbar__link:focus-visible,
body.scrolled-bottom .topbar__link:visited {
  color: hsl(46 37% 93%) !important;
  opacity: 1 !important;
}


/* Topbar CTA-knap bliver hvid med sort tekst i bunden */
body.scrolled-bottom .topbar__cta {
    background-color:  hsl(46 37% 93%) !important;
    color: hsl(0 0% 10%) !important;
    border: 1px solid  hsl(46 37% 93%) !important;
  }

  /* Når man er i bunden: gør topbaren sort med hvid kant og fjern blur */
body.scrolled-bottom .topbar {
    background: hsl(0 0% 10%) !important;        /* ren sort baggrund */
    border: 1px solid hsl(46 37% 93%) !important;  /* hvid kant */
    box-shadow: none !important;           /* fjern skygge */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }




























/* === VIDEO LAYOUT TIL CLOUDFLARE === */
.hero-video {
    display: flex;
    justify-content: center;
  }
  



  /* === VIDEO FRAME === */
.video-frame {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: none;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
    width: 100%;
    max-width: 960px;
  }
  
  /* Container med fast 16:9 */
  .cf-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  
/* Iframe – lad den ikke stjæle mouseover/touch events */
#cfStream {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;   /* VIGTIGT: så .video-frame får mousemove/mouseenter */
}
  
  /* ============================================================
     PLAY BUTTON (MIDTEN — VISIBEL FØR VIDEO SPILLER)
     ============================================================ */
  .cf-play-btn{
    position:absolute; 
    inset:0;
    margin:auto;
    width:74px;
    height:74px;
    border:0;
    border-radius:999px;
    background:hsl(89, 27%, 18%);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .2s ease, filter .2s ease;
  }
  
  .cf-play-btn::after{
    content:"";
    width:0;
    height:0;
    border-left:22px solid hsl(42, 39%, 94%);
    border-top:13px solid transparent;
    border-bottom:13px solid transparent;
    transform:translateX(2px);
  }
  
  .cf-play-btn:hover{
    transform:scale(1.05);
    filter:brightness(.98);
  }
  
  /* Når video spiller — skjul play-knap */
  .video-frame.playing .cf-play-btn{
    display:none;
  }
  
  /* ============================================================
     PAUSE BUTTON (MIDTEN — KUN VISNING MED JS-KLASSE)
     ============================================================ */
  
  .cf-pause-btn{
    position:absolute;
    inset:0;
    margin:auto;
    width:74px;
    height:74px;
    border:0;
    border-radius:999px;
    background:hsl(89, 27%, 18%);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;               /* skjult default */
    pointer-events:none;     /* klikdisabled default */
    transition:opacity .15s ease, filter .2s ease, transform .2s ease;
  }
  
  /* pause-ikon (to streger) */
  .cf-pause-btn::before,
  .cf-pause-btn::after{
    content:"";
    display:block;
    width:4px;
    height:18px;
    background:hsl(42, 39%, 94%);
    margin:0 3px;
    border-radius:1px;
  }
  
  /* Synlig pause-knap når videoen spiller OG UI skal vises */
  .video-frame.playing.cf-show-pause .cf-pause-btn{
    opacity:1;
    pointer-events:auto;
  }
  
  .cf-pause-btn:hover{
    filter:brightness(.95);
    transform:scale(1.05);
  }
  
  /* MOBIL: lidt mindre pause-knap 
  @media (max-width: 640px){
    .cf-pause-btn{
      width:60px;
      height:60px;
    }
  }
*/

/* Knap under "Skal Gjensidige være nummer 30?" – hold tekst hvid */
.cta-section .btn-primary,
.cta-section .btn-primary:visited,
.cta-section .btn-primary:hover,
.cta-section .btn-primary:focus,
.cta-section .btn-primary:active {
    color: hsl(42, 39%, 94%) !important;  /* hvid tekst */
    text-decoration: none !important;
}

/* Alle primære knapper: tekst altid hvid */
.btn-primary,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: hsl(42, 39%, 94%);
}

/****************************************************
  HERO FRONT – NETFLIX + REWIND STYLE
****************************************************/

.front-hero {
    position: relative;
    width: 100vw;
    min-height: 100vh;                     /* hele viewport-højden */
    
    /* gør sektionen full-bleed på tværs,
       uanset padding/margin på parent */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* intern luft til indholdet (påvirker IKKE baggrundens kant) */
    padding: 120px 20px 80px;
    text-align: center;
    background: url('../images/u1.jpg') center/cover no-repeat;
    overflow: hidden;
}

/* STANDARD: ingen negativ margin som udgangspunkt */
.front-hero {
    margin-top: 0;
}

/* mørk overlay – ligesom Netflix */
.front-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.3)
    );
    z-index: 1;
}

/********** TOP LOGO **********/
.front-hero__top {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 2;
}

.front-hero__logo {
    font-family: 'Sailec', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: hsl(46 37% 93%);
    text-decoration: none;
}

/********** MIDTERTEKST **********/
.front-hero__content {
    position: relative;
    z-index: 3;
    max-width: 700px;
}

.front-hero__title {
    font-size: clamp(36px, 5vw, 62px);
    font-weight: 600;
    line-height: 1.2;
    color: hsl(46 37% 93%);
    margin-bottom: 16px;
}

.front-hero__subtitle {
    font-size: 18px;
    line-height: 28px;
    color: hsl(46 37% 93%);
    opacity: 0.9;
    margin-bottom: 38px;
}

/********** EMAIL FORM – REWIND STYLE **********/
.front-hero__form {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
    border-radius: 999px;
    padding: 8px 10px;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.front-hero__form input {
    flex: 1;
    padding: 16px 20px;
    background: transparent;
    border: 0;
    font-size: 16px;
    color: hsl(46 37% 93%);
    outline: none;
}

.front-hero__form input::placeholder {
    color: hsl(46 37% 93% / 60%);
}

.front-hero__form button {
    background: #E1001B;
    color: hsl(46 37% 93%);
    border: 1px solid #E1001B;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .2s ease;
}

.front-hero__form button:hover {
    filter: brightness(0.92);
}

/********** FOOTNOTE **********/
.front-hero__note {
    margin-top: 18px;
    font-size: 14px;
    color: hsl(46 37% 93% / 70%);
}

/* Mobile: sørg for at "Tag første skridt" stadig er pæn */
@media (max-width: 680px) {
    .front-hero__form {
      width: calc(100% - 0px); /* matcher paddingen, så intet overflow */
      max-width: none;          /* lad den fylde normalt */
      margin: 0 auto;           /* centrer */
      box-sizing: border-box;   /* vigtig, så padding ikke laver overflow */
  }

  .front-hero__form input {
      flex: 1 1 0;
      min-width: 0;          /* vigtig: så input kan krympe lidt */
  }

  .front-hero__form button {
      white-space: nowrap;   /* behold én linje tekst */
      padding: 12px 18px;    /* smallere padding = smallere knap */
      min-width: auto;       /* fjern fixed 130px bredde */
  }
}



/* Mobil: giv titlen + teksten luft i siderne */
@media (max-width: 680px) {
  .front-hero__content {
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
      padding-left: 10px;
      padding-right: 10px;
  }

  .front-hero__title,
  .front-hero__subtitle {
      text-align: center;         /* kan være center, hvis du hellere vil det */
  }
}

/* =========================================
   FRONT HERO – MOBILE TYPO (MAX 480PX)
   ORIGINALE STØRRELSER (klar til at justere)
   ========================================= */
   @media (max-width: 480px) {

    /* "Bedst, når det gælder" */
    .front-hero__logo {
      font-size: 21px;   /* original */
    }
  
    /* H1: "Præster som ét team..." */
    .front-hero__title {
      font-size: clamp(35px, 5vw, 61px);  /* original */
      line-height: 1.2;                   /* original */
    }
  
    /* Underoverskrift */
    .front-hero__subtitle {
      font-size: 17px;    /* original */
      line-height: 27px;  /* original */
    }
  
    /* Inputfelt: "E-mailadresse" */
    .front-hero__form input {
      font-size: 15px;     /* original */
      padding: 15px 20px;  /* original */
    }
  
    /* CTA-knap: "Tag første skridt" */
    .front-hero__form button {
      font-size: 15px;     /* original */
      padding: 14px 28px;  /* original */
    }
  
    /* Note: "Få en gratis og uforpligtende introduktion." */
    .front-hero__note {
      font-size: 14px;     /* original */
    }
  }













  /* FULL-WIDTH COPYRIGHT BAR UNDER HERO */
.front-hero-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* gør den full-bleed som hero */
  background: #E1001B; /* samme grøn som knappen */
  color: hsl(42, 39%, 94%);      /* lys tekst */
}

.front-hero-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.front-hero-footer a {
  color: hsl(42, 39%, 94%);
  text-decoration: underline;
  font-weight: 500;
}

.front-hero-footer a:hover {
  text-decoration: none;
}


















/* ===============================
   PRIVATLIVSPOLITIK – STYLING
   =============================== */

   body {
    background-color: hsl(42, 39%, 94%);
    color: hsl(89, 27%, 18%);
}

/* Header */
.privacy-header {
    padding: 64px 20px 40px;
    text-align: center;
}

.privacy-header__brand {
    font-size: 24px;
    font-weight: 600;
    color: hsl(89, 27%, 18%);
}

/* Content */
.privacy-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 120px;
    font-size: 16px;
    line-height: 1.7;
}

.privacy-content h1 {
    font-size: 36px;
    margin-bottom: 24px;
}

.privacy-content h2 {
    font-size: 22px;
    margin-top: 42px;
    margin-bottom: 14px;
}

.privacy-content p {
    margin-bottom: 16px;
}

.privacy-content ul {
    margin: 12px 0 20px 20px;
}

.privacy-content li {
    margin-bottom: 8px;
}

/* Footer */
.privacy-footer {
    margin-top: 64px;
    font-size: 14px;
}