/* ====== Vars / Baseline ====== */
.mf{
  --paper: #F2F4FA;             /* lys, men en anelse mørkere end logo/feature */
  --ink:   #0f172a;
  --muted: #52525b;
  --ring:  rgba(15,23,42,.12);
  --brand: #2563eb;
  --accent:#7c3aed;
  --radius: 16px;

  position:relative;
  background: var(--paper);
  color: var(--ink);
  overflow: clip;
}

/* ====== Nyt tema: SATIN (lys komplement til de andre) ====== */
.mf--satin::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  /* blid satin-glow + kølig tint (mindre “wow” end KPI mesh) */
  background:
    radial-gradient(40% 52% at 15% 18%, rgba(37,99,235,.12), transparent 62%),
    radial-gradient(32% 44% at 86% 22%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(36% 46% at 60% 100%, rgba(56,189,248,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15,23,42,.035) 100%),
    var(--paper);
  filter:saturate(103%);
}
.mf--satin::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* meget subtil diagonal satin-struktur + ultralet noise */
  background:
    repeating-linear-gradient(35deg,
      rgba(15,23,42,.018) 0px,
      rgba(15,23,42,.018) 2px,
      rgba(15,23,42,0)    2px,
      rgba(15,23,42,0)   12px
    ),
    url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">\
<filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter>\
<rect width="100%" height="100%" filter="url(#n)" opacity=".10"/></svg>');
  background-size:auto,120px 120px;
  opacity:.45;
}

/* ====== Layout ====== */
.mf *{ box-sizing:border-box; }
.mf__inner{ position:relative; z-index:1; max-width:1120px; margin-inline:auto; padding: clamp(20px,4vw,48px); }

.mf__head h2{ margin:0 0 6px; font-size:clamp(22px,3.2vw,30px); letter-spacing:-.01em; }
.mf__lead{ margin:0 0 14px; color:var(--muted); max-width:70ch; }

.mf__grid{ display:grid; gap: clamp(14px,3vw,24px); }
@media (min-width: 960px){
  .mf__grid{ grid-template-columns: 1.15fr 1fr; align-items:start; }
}

/* ====== Video ====== */
.mf__player{
  position:relative; border:1px solid var(--ring); border-radius:var(--radius);
  overflow:hidden; background:#0b1220; aspect-ratio:16/9;
  box-shadow:0 8px 26px rgba(2,8,23,.08);
}
.mf__video{ width:100%; height:100%; object-fit:cover; display:block; background:#0b1220; }
.mf__cap{ font-size:13px; color:#6b7280; padding:8px 12px; background:rgba(255,255,255,.7); }

/* ====== Founder card ====== */
.mf__founder{
  border:1px solid var(--ring); border-radius:var(--radius); background:#fff;
  padding: clamp(14px, 2.8vw, 18px);
  box-shadow:0 8px 24px rgba(2,8,23,.06);
}
.mf__founderTop{ display:flex; gap:12px; align-items:center; }
.mf__avatar{ width:64px; height:64px; border-radius:14px; object-fit:cover; flex:0 0 auto; }

.mf__eyebrow{
  display:inline-block; font-size:12px; font-weight:700; color:#0b3ea4;
  background:rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.18);
  padding:4px 8px; border-radius:999px; margin-bottom:6px;
}
.mf__name{ margin:0; font-size:clamp(18px,2.4vw,22px); }
.mf__role{ margin-left:8px; font-weight:600; color:#64748b; }
.mf__quote{ margin:.6rem 0 0; color:#475569; font-style:italic; }

.mf__chips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.mf__chip{
  display:inline-flex; align-items:center; padding:6px 10px; font-weight:700; font-size:13px;
  border-radius:999px; background:#eef2ff; color:#0b3ea4; border:1px solid rgba(37,99,235,.18); text-decoration:none;
}
.mf__chip--ghost{ background:#fff; color:var(--ink); border:1px solid var(--ring); }

/* ====== CTA: primær stor + sekundær lille ====== */
.mf__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.mf__btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
}
.mf__btn--primary{
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color:#041019;
  box-shadow: 0 10px 28px rgba(37,99,235,.25);
}
.mf__btn--ghost{
  background:#fff; color:var(--ink);
  border:1px solid var(--ring);
  box-shadow:none;
}
/* størrelser */
.mf__btn--lg{ padding:12px 18px; font-size:1.05rem; }
.mf__btn--sm{ padding:10px 12px; font-size:.95rem; }

/* logo */
.mf__logo{ margin-top:12px; width:84px; height:auto; opacity:.9; }

/* ====== Modal (ingen blur) ====== */
.mf-modal{
  position:fixed; inset:0; z-index: 4000;
  display:none;
}
.mf-modal.is-open{ display:block; }
.mf-modal[aria-hidden="true"]{ display:none; }

.mf-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(2,8,23,.45);
}
.mf-modal__dialog{
  position:relative; z-index:1;
  width:min(520px, calc(100% - 32px));
  margin: 8vh auto 0;
  padding:16px;
  background:#fff; color:#0f172a;
  border-radius:16px; border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 60px rgba(2,8,23,.22);
  outline: none;
}
.mf-modal__close{
  position:absolute; top:8px; right:10px;
  border:0; background:transparent; font-size:22px; line-height:1;
  cursor:pointer; color:#334155;
}
.mf-modal__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mf-modal__avatar{ width:48px; height:48px; border-radius:10px; object-fit:cover; }
.mf-modal__sub{ color:#64748b; font-size:13px; }
.mf-modal__lead{ margin:8px 0 12px; color:#475569; }
.mf-modal__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.mf-modal__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; text-decoration:none; font-weight:700;
  color:#0f172a; background:#f8fafc; border:1px solid rgba(15,23,42,.12);
}
.mf-modal__chip:hover{ background:#eef2ff; border-color:#c7d2fe; }

/* Fallback hvis ingen aspect-ratio */
@supports not (aspect-ratio: 16/9){
  .mf__player{ height:0; padding-top:56.25%; }
  .mf__video{ position:absolute; inset:0; }
}

/* Gør 'Book demo' tekst hvid på den primære knap */
.mf .mf__btn--primary{
  color:#fff; /* var tidligere #041019 */
}