:root{
  --pink: #FC4C90;     /* logoets pink */
  --pink-600: #DB427D; /* lidt mørkere til hover/active */
  --ink:#101114;
  --muted:#667085;
  --bg:#ffffff;
  --card:#fff7fb;
  --radius:18px;
  --shadow:0 12px 30px rgba(16,17,20,.08);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  scroll-behavior:smooth
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Layout */
.container{width:min(1100px,92%);margin:0 auto}

/* ===================== Header ===================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:2px solid var(--pink-250);
  box-shadow:0 6px 18px rgba(255,61,168,.12);
  transition:box-shadow .2s ease, transform .2s ease
}
.site-header.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.06)}
.site-header .nav{
  display:flex;
  align-items:flex-end;   /* bundjustér logo/links */
  justify-content:space-between;
  padding:12px 0 6px;
  gap:1rem
}
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  line-height:0;          /* så logoet kan "stå" på linjen */
  margin-left:-18px;      /* ryk lidt til venstre – justér efter smag */
}
.brand .logo,
.brand img{
  width:auto;
  height:84px;            /* logo-størrelse – justér 78–92px efter smag */
  object-fit:contain;
  border-radius:0 !important;   /* vigtig: ingen afrunding = ingen “cut” */
}
.brand .brand-name{
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:.2px;
  color:var(--pink)
}

/* Menu */
.menu{display:flex;gap:1rem}
.menu a{
  color:var(--pink);
  font-weight:700;
  padding:.45rem .7rem .6rem; /* lidt ekstra i bunden for bundlinje */
  border-radius:10px;
  position:relative
}
.menu a:hover{background:var(--pink-100);text-decoration:none}
.menu a::after{
  content:"";
  position:absolute;
  left:.6rem; right:.6rem; bottom:.35rem;
  height:2px;
  background:transparent;
  transition:background .2s ease
}
.menu a:hover::after,
.menu a:focus::after{ background:var(--pink) }

/* Header CTA (hvis du bruger den) */
.nav-cta{
  padding:.55rem .9rem;border-radius:999px;
  background:var(--pink); color:#fff; font-weight:700;
  box-shadow:0 8px 20px rgba(255,61,168,.22);
  margin-left:.4rem
}
.nav-cta:hover{ background:var(--pink-600) }

/* Sprogknapper (header) */
.lang button{
  color:var(--pink);
  border:2px solid var(--pink-250);
  background:#fff;
  padding:.35rem .6rem;
  border-radius:8px;
  font-weight:700;
  cursor:pointer
}
.lang button:hover{ color:var(--pink-600) }
.lang button[aria-pressed="true"]{
  background:var(--pink-100);
  border-color:var(--pink)
}

/* Ekstra header-baggrund */
header{ background:linear-gradient(180deg,#fff 0%,#fff 70%, var(--pink-50) 100%) }

/* ===================== Hero ===================== */
.hero{
  padding: clamp(52px,8vw,110px) 0;
  background:linear-gradient(180deg,#fff, var(--pink-50) 55%, #fff 100%)
}
.hero-wrap{
  display:grid;
  grid-template-columns:1.25fr .75fr; /* mere plads til tekst */
  gap:2rem;
  align-items:center
}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--pink-200);
  border-radius:999px;padding:.4rem .75rem;font-weight:600
}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--pink)}
h1{font-size: clamp(2rem,3.6vw,3.2rem);line-height:1.08;margin:.6rem 0 1rem}
.lead{font-size:1.05rem;color:#3d4552}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;border:0;
  padding:.9rem 1.1rem;border-radius:14px;cursor:pointer;
  font-weight:800;box-shadow:var(--shadow)
}
.btn-primary{background:var(--pink);color:#fff}
.btn-primary:hover{background:var(--pink-600)}
.btn-ghost{background:#fff;border:1px solid var(--pink-200)}

.hero .card{
  background:transparent;border:0;box-shadow:none;padding:0;border-radius:0
}
#hero-illustration{
  max-width:440px; width:100%; height:auto; display:block; margin:0 auto;
  object-fit:contain
}

/* ===================== Cards & Grids ===================== */
.card{background:#fff;border:1px solid #f2d5e7;border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:1.1rem}
.section{padding: clamp(52px,6.5vw,84px) 0}
.section-title{margin:0 0 1rem;font-size: clamp(1.4rem,2.2vw,2rem)}
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.service{padding:1rem}
.service h3{margin:.1rem 0 .45rem}

/* Process/steps */
.steps .step{
  position:relative;
  padding:1.2rem 1.2rem 1.2rem 3.6rem; /* plads til nummer-badge */
  border:1px solid #f2d5e7;
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow)
}
.steps .step h3{ margin:.1rem 0 .5rem }
.steps .step p{ color:var(--muted) }
.steps .step .num{
  position:absolute; left:.8rem; top:.9rem;
  width:38px; height:38px; border-radius:12px;
  background:#fff; border:1px solid var(--pink-200);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--pink);
  box-shadow:0 6px 16px rgba(255,61,168,.12)
}
.steps{ row-gap:1rem }

/* ===================== Kontakt ===================== */
.contact{
  border:1px solid #f2d5e7;
  box-shadow:0 20px 45px rgba(16,17,20,.06)
}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}
.field{ display:flex; flex-direction:column; gap:.35rem }
.field label{ font-weight:600; font-size:.95rem; color:#374151 }
.field input,
.field textarea{
  font:inherit;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:.85rem .9rem;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease
}
.field input:focus,
.field textarea:focus{
  outline:0;
  border-color:#f4b6da;
  box-shadow:0 0 0 4px rgba(255,61,168,.15)
}
.field-span{ grid-column:1 / -1 }
.contact-actions{
  margin-top:.8rem;
  display:flex; align-items:center; gap:1rem
}
.contact-actions .muted{ color:#6b7280 }

/* ===================== Trust ===================== */
.trust .muted{color:var(--muted)}

/* ===================== Footer ===================== */
.site-footer{
  padding:12px 0;                     /* lavere footer */
  border-top:1px solid var(--pink-250);
  background:#fff;
  color:#6b7280
}
.site-footer .foot{
  display:flex; align-items:center; justify-content:space-between
}
.site-footer a,
.site-footer .muted-link{
  color:#6b7280; text-decoration:none
}
.site-footer a:hover{ text-decoration:underline }

/* Hvis der ved en fejl lander header-elementer i footeren, skjul dem */
.site-footer .brand,
.site-footer .menu,
.site-footer .nav,
.site-footer .lang,
.site-footer .nav-cta,
.site-footer img{ display:none !important }

/* ===================== Responsive ===================== */
@media (max-width: 900px){
  .menu{display:none} /* simpelt – burger kan laves senere */
  .hero-wrap{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .badge{ display:none !important }
  .brand .logo{ height:64px }
  .brand{ margin-left:-8px }
}

@media (min-width: 1024px){
  .brand .logo{ height:84px }             /* matcher primær værdi */
  .brand .brand-name{ font-size:1.35rem }
}

/* Ekstra – bredere container i header, så venstrehæng får plads */
.site-header .container{ width:min(1200px,98%) }