/* ============================================================
   Bilvideo (ny side) — mørkt, roligt, automotive.
   Bygger oven på style.css (menu, knapper, formular, priskort, footer),
   bv-portal-demo.css (portal-animationen) og industry.css (før/efter-slider).
   Størrelser følger skærmens højde og bredde (clamp + vh), så hver
   sektion kan ses samlet på en almindelig bærbar og på mobil.
   ============================================================ */

body.bn-page {
  --bg: #07090d; --bg-2: #0b0e14; --surface: #0f131a; --surface-2: #141925;
  --border: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.16);
  --text: #eef2f8; --text-2: #a7b0be; --text-3: #6f7887;
  --bn-a: #8fbaff; --bn-a-rgb: 143, 186, 255; --bn-ok: #8fe0b4; --bn-nej: #f0a39b;
  background: var(--bg); color: var(--text);
}
.bn-page .skip-link { position: absolute; left: -999px; top: 0; }
.bn-page .skip-link:focus { left: 12px; top: 12px; z-index: 200; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.bn-page .nav-links a, .bn-page .nav-login, .bn-page .nav-cta .btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) {
  .bn-page .nav-links a, .bn-page .nav-login { padding-left: 8px; padding-right: 8px; font-size: 13px; }
}

/* ---------- fælles ---------- */
.bn-sec { position: relative; padding: clamp(46px, 8.6vh, 104px) 0; scroll-margin-top: 72px; }
.bn-alt { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bn-head { max-width: 780px; margin: 0 auto clamp(20px, 4.4vh, 48px); text-align: center; }
.bn-head-l { text-align: left; margin-left: 0; margin-right: 0; }
.bn-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bn-a); margin-bottom: clamp(8px, 1.6vh, 14px); }
.bn-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, min(3.5vw, 5.4vh), 42px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: clamp(8px, 1.6vh, 14px); }
.bn-head p { color: var(--text-2); font-size: clamp(14.5px, 1.25vw, 16.5px); line-height: 1.6; }
.bn-note { color: var(--text-3); font-size: 12.5px; margin-top: 12px; }
.bn-note.c { text-align: center; margin-top: clamp(14px, 2.6vh, 24px); }
.bn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.bn-demo { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); background: rgba(7, 9, 13, 0.62); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 5px 10px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------- 1. top ---------- */
.bn-hero { position: relative; padding: clamp(92px, 15vh, 150px) 0 clamp(28px, 6vh, 72px); overflow: hidden; }
.bn-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 78% 30%, rgba(var(--bn-a-rgb), 0.13), transparent 62%), radial-gradient(40% 40% at 10% 10%, rgba(255, 255, 255, 0.05), transparent 60%); }
.bn-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.bn-kicker { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: clamp(12px, 2.4vh, 22px); }
.bn-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--bn-a); box-shadow: 0 0 0 4px rgba(var(--bn-a-rgb), 0.18); }
.bn-hero h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, min(4.9vw, 8.4vh), 66px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: clamp(12px, 2.4vh, 22px); }
.bn-lead { color: var(--text-2); font-size: clamp(15.5px, 1.4vw, 18.5px); line-height: 1.6; max-width: 46ch; margin-bottom: clamp(18px, 3.4vh, 30px); }
.bn-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(16px, 3.2vh, 30px); }
.bn-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: 14px; }
.bn-facts li { position: relative; padding-left: 16px; }
.bn-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--bn-a); opacity: 0.8; }
.bn-facts b { color: var(--text); font-weight: 600; }

.bn-stage { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #10141c; border: 1px solid var(--border-2); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 90px -30px rgba(var(--bn-a-rgb), 0.3); }
.bn-stage-scene { position: absolute; inset: 0; }
.bn-stage-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform; }
.bn-stage-scene img.er-paa { opacity: 1; }
.bn-stage-vignet { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(180deg, transparent 52%, rgba(4, 6, 9, 0.55) 76%, rgba(4, 6, 9, 0.92) 100%); }
.bn-stage-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); background: linear-gradient(180deg, transparent 0, rgba(4, 6, 9, 0.72) 46%, rgba(4, 6, 9, 0.9) 100%); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 34px 18px 14px; }
.bn-rec { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: #fff; }
.bn-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.22); }
.bn-seg { display: flex; gap: 5px; flex: 0 1 220px; }
.bn-seg i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; position: relative; }
.bn-seg i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 3px; }

/* ---------- 2. kerneidé ---------- */
.bn-flow { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; position: relative; counter-reset: none; }
.bn-flow::before { content: ""; position: absolute; left: 3%; right: 3%; top: 21px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2) 8%, var(--border-2) 92%, transparent); }
.bn-flow::after { content: ""; position: absolute; left: 3%; top: 21px; height: 1px; width: 0; background: linear-gradient(90deg, rgba(var(--bn-a-rgb), 0), var(--bn-a)); }
.bn-flow li { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 0 6px; text-align: center; align-items: center; }
.bn-flow .n { position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--bn-a); background: var(--surface); border: 1px solid var(--border-2); margin-bottom: 8px; }
.bn-flow b { font-size: clamp(13.5px, 1.1vw, 15.5px); font-weight: 600; line-height: 1.25; }
.bn-flow li > span:last-child { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.bn-js .bn-flow li { opacity: 0; transform: translateY(14px); }
.bn-js .bn-flow.is-inn li { opacity: 1; transform: none; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.bn-js .bn-flow.is-inn li:nth-child(2) { transition-delay: 0.12s; } .bn-js .bn-flow.is-inn li:nth-child(3) { transition-delay: 0.24s; }
.bn-js .bn-flow.is-inn li:nth-child(4) { transition-delay: 0.36s; } .bn-js .bn-flow.is-inn li:nth-child(5) { transition-delay: 0.48s; }
.bn-js .bn-flow.is-inn li:nth-child(6) { transition-delay: 0.6s; } .bn-js .bn-flow.is-inn li:nth-child(7) { transition-delay: 0.72s; }
.bn-flow.is-inn::after { width: 94%; transition: width 1.6s ease 0.1s; }

/* ---------- 3. bilforståelse ---------- */
.bn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bn-chips li { font-size: 13px; color: var(--text-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px; background: rgba(255, 255, 255, 0.02); }
.bn-sort { background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px; padding: clamp(14px, 1.6vw, 22px); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9); }
.bn-sort-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.bn-sort-top b { color: var(--text); font-size: 15px; }
.bn-sort-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--bn-a); }
.bn-sort-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.bn-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background-color: #10141c; background-size: 190%; border: 1px solid var(--border); }
.bn-tile span { position: absolute; left: 4px; bottom: 4px; font-size: 9.5px; font-weight: 600; color: #0a0d12; background: var(--bn-a); border-radius: 5px; padding: 2px 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease; white-space: nowrap; }
.bn-tile.er-sat span { opacity: 1; transform: none; }
.bn-tile.er-sat { border-color: rgba(var(--bn-a-rgb), 0.45); }
.bn-sort-grp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; min-height: 28px; }
.bn-sort-grp span { font-size: 12px; color: var(--text-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 4px 10px; opacity: 0; transition: opacity 0.4s ease; }
.bn-sort-grp span b { color: var(--text); margin-left: 5px; }
.bn-sort-grp.er-klar span { opacity: 1; }

/* ---------- 4. billedforbedring ---------- */
.bn-ba-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 40px); align-items: center; }
.bn-ba-grid .iv-ba { margin: 0; max-height: calc(100vh - 250px); }
.bn-lists { display: grid; gap: 12px; }
.bn-list { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: clamp(14px, 2.2vh, 20px) clamp(16px, 1.6vw, 22px); }
.bn-list h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
.bn-list.ja h3 { color: var(--bn-ok); } .bn-list.nej h3 { color: var(--bn-nej); }
.bn-list ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
.bn-list li { position: relative; padding-left: 22px; font-size: 14.5px; }
.bn-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.bn-list.ja li::before { content: "✓"; color: var(--bn-ok); }
.bn-list.nej li::before { content: "✕"; color: var(--bn-nej); }

/* ---------- 5. ægte video ---------- */
.bn-stage-stor { aspect-ratio: 16 / 9; max-width: min(1040px, calc((100vh - 250px) * 1.7778)); margin: 0 auto; }
.bn-fase { display: flex; flex-direction: column; gap: 2px; color: #fff; }
.bn-fase b { font-size: 15px; font-weight: 600; }
.bn-fase span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.7); }
.bn-skift { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(7, 9, 13, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bn-skift button { font: 500 13px/1 var(--font-sans); color: rgba(255, 255, 255, 0.75); padding: 9px 16px; border-radius: 999px; cursor: pointer; min-height: 36px; }
.bn-skift button.is-on { background: #fff; color: #0a0d12; }
.bn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1040px; margin: clamp(14px, 2.6vh, 24px) auto 0; }
.bn-mini { border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 18px; background: var(--surface); }
.bn-mini h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.bn-mini.ja h3 { color: var(--bn-ok); } .bn-mini.nej h3 { color: var(--bn-nej); }
.bn-mini p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* ---------- 6. seks videoer ---------- */
.bn-six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bn-vid { background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.bn-vid-shot { position: relative; aspect-ratio: 16 / 9; max-height: 17vh; min-height: 104px; width: 100%; overflow: hidden; background: #0d1118; }
.bn-vid-shot img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.bn-vid-shot span { position: absolute; left: 10px; top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: #fff; background: rgba(7, 9, 13, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 3px 7px; }
.bn-vid.hoej .bn-vid-shot { display: flex; justify-content: center; background: radial-gradient(60% 80% at 50% 50%, #1a2130, #0b0e13); }
.bn-vid.hoej .bn-vid-shot img { width: auto; aspect-ratio: 9 / 16; border-left: 1px solid rgba(255, 255, 255, 0.14); border-right: 1px solid rgba(255, 255, 255, 0.14); }
.bn-vid-b { padding: clamp(10px, 1.6vh, 18px) 18px clamp(12px, 1.9vh, 20px); }
.bn-vid-b .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bn-a); }
.bn-vid-b h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.6vw, 21px); margin: 3px 0 4px; }
.bn-vid-b p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
/* seks forskellige kameraer — kun billedudsnittet flytter sig */
.k1 img { animation: bnK1 9s ease-in-out infinite alternate; }
.k2 img { animation: bnK2 3.6s ease-in-out infinite alternate; }
.k3 img { animation: bnK3 6s ease-in-out infinite alternate; transform-origin: 38% 52%; }
.k4 img { animation: bnK4 8s ease-in-out infinite alternate; }
.k5 img { animation: bnK5 10s ease-in-out infinite alternate; }
.k6 img { animation: bnK6 5s ease-in-out infinite alternate; }
.bn-js [data-inn]:not(.is-inn) .bn-vid-shot img, .bn-js [data-inn]:not(.is-inn) .bn-fl img { animation-play-state: paused; }
@keyframes bnK1 { from { transform: scale(1.1) translateX(-3.5%); } to { transform: scale(1.1) translateX(3.5%); } }
@keyframes bnK2 { from { transform: scale(1.04); } to { transform: scale(1.2) translateX(-2%); } }
@keyframes bnK3 { from { transform: scale(1.06); } to { transform: scale(1.3); } }
@keyframes bnK4 { from { transform: scale(1.14) translateX(3%); } to { transform: scale(1.14) translateX(-3%); } }
@keyframes bnK5 { from { transform: scale(1.26); } to { transform: scale(1.03); } }
@keyframes bnK6 { from { transform: scale(1.12) translateY(2.5%); } to { transform: scale(1.12) translateY(-2.5%); } }

/* ---------- 7. ny / brugt ---------- */
.bn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bn-kort { background: var(--surface); border: 1px solid var(--border-2); border-radius: 18px; padding: clamp(18px, 3vh, 30px) clamp(18px, 2vw, 30px); }
.bn-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bn-a); border: 1px solid rgba(var(--bn-a-rgb), 0.4); border-radius: 999px; padding: 4px 11px; margin-bottom: 12px; }
.bn-kort h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; margin-bottom: 12px; }
.bn-kort ul { list-style: none; display: grid; gap: 7px; }
.bn-kort li { position: relative; padding-left: 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.bn-kort li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--bn-a); opacity: 0.7; }
.bn-kort li b { color: var(--text); }
.bn-kort > p { margin-top: 12px; font-size: 14.5px; color: var(--text); }

/* ---------- 8. biltyper ---------- */
.bn-typer { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.bn-typer li { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; padding: clamp(14px, 2.4vh, 22px) 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bn-typer svg { width: 74px; height: 32px; fill: none; stroke: var(--bn-a); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 4px; }
.bn-typer b { font-size: 15px; font-weight: 600; }
.bn-typer span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; }

/* ---------- 9. portalen (samme animation som de andre sider) ---------- */
@media (min-width: 1001px) and (max-height: 820px) {
  .bn-page .bvp-app { height: 548px; }
  .bn-page .bvp-step { padding: 7px 12px; }
  .bn-page .bvp-step-desc { display: none; }
  .bn-page .bvp-step.is-on .bvp-step-desc { display: block; }
  .bn-page .bvp-drawer { inset: 6px 26px; }
}
@media (min-width: 1001px) and (max-height: 700px) { .bn-page .bv-portal-frame { zoom: 0.88; } }

/* ---------- 10. musik ---------- */
.bn-musik { background: var(--surface); border: 1px solid var(--border-2); border-radius: 20px; padding: clamp(16px, 1.8vw, 24px); }
.bn-moods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.bn-moods button { font: 500 14px/1 var(--font-sans); color: var(--text-2); padding: 12px 6px; min-height: 44px; border-radius: 11px; border: 1px solid var(--border-2); background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.bn-moods button.is-on { background: #fff; color: #0a0d12; border-color: #fff; }
.bn-track { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); margin-bottom: 14px; }
.bn-play { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bn-play i { border-left: 10px solid #0a0d12; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.bn-track-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bn-track-t b { font-size: 15px; } .bn-track-t span { font-size: 12.5px; color: var(--text-3); }
.bn-bpm { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.bn-bpm b { color: var(--bn-a); font-size: 18px; font-weight: 500; }
.bn-wave { position: relative; display: flex; align-items: center; gap: 2px; height: clamp(70px, 13vh, 108px); padding-bottom: 14px; }
.bn-wave i { flex: 1; min-width: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.bn-wave i.slag { background: rgba(255, 255, 255, 0.5); }
.bn-wave i.klip { background: var(--bn-a); position: relative; }
.bn-wave i.klip::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--bn-a); }
.bn-wave .hoved { position: absolute; top: 0; bottom: 14px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.7); animation: bnHoved var(--varighed, 8s) linear infinite; }
@keyframes bnHoved { from { left: 0; } to { left: 100%; } }
.bn-cuts { display: flex; gap: 18px; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.bn-cuts span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.5); margin-right: 7px; }
.bn-cuts .k::before { background: var(--bn-a); border-radius: 50%; }

/* ---------- 11–12. tekst ---------- */
.bn-tekst-frame { position: relative; aspect-ratio: 4 / 3; max-height: calc(100vh - 300px); border-radius: 18px; overflow: hidden; border: 1px solid var(--border-2); background: #0d1118; margin: 0 auto; }
.bn-tekst-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-tekst-ord { position: absolute; left: 7%; top: 12%; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease, transform 0.3s ease; }
.bn-tekst-ord.ud { opacity: 0; transform: translateY(10px); }
.bn-tekst-ord::after { content: ""; display: block; width: 46px; height: 3px; background: var(--bn-a); border-radius: 3px; margin-top: 10px; }
.bn-tekst-valg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bn-tekst-valg button { font: 500 13.5px/1 var(--font-sans); color: var(--text-2); padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--border-2); background: rgba(255, 255, 255, 0.02); cursor: pointer; }
.bn-tekst-valg button.is-on { background: #fff; color: #0a0d12; border-color: #fff; }
.bn-punkter { list-style: none; display: grid; gap: 12px; }
.bn-punkter li { position: relative; padding-left: 22px; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.bn-punkter li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--bn-a); }
.bn-punkter b { color: var(--text); font-weight: 600; }

/* ---------- 14. produktion ---------- */
.bn-rute { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; margin-bottom: clamp(16px, 3vh, 28px); }
.bn-rute li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 8px 14px; background: var(--surface); }
.bn-rute li + li { margin-left: 30px; position: relative; }
.bn-rute li + li::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.bn-rute li:last-child { color: #0a0d12; background: var(--bn-a); border-color: var(--bn-a); }
.bn-spor { display: grid; gap: 8px; max-width: 1040px; margin: 0 auto; }
.bn-spr { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 14px; }
.bn-spr span { font-size: 14px; color: var(--text-2); }
.bn-spr div { height: clamp(30px, 5.4vh, 44px); border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); overflow: hidden; }
.bn-spr div i { display: flex; gap: 3px; height: 100%; padding: 3px; width: 0; transition: width 1.8s var(--ease); }
.bn-spr div i em { flex: 1 1 0; min-width: 0; border-radius: 6px; background-size: cover; background-position: center; }
.bn-spor.is-inn .bn-spr div i { width: var(--b); }
.bn-spor.is-inn .bn-spr:nth-child(2) div i { transition-delay: 0.15s; } .bn-spor.is-inn .bn-spr:nth-child(3) div i { transition-delay: 0.3s; }
.bn-spor.is-inn .bn-spr:nth-child(4) div i { transition-delay: 0.45s; } .bn-spor.is-inn .bn-spr:nth-child(5) div i { transition-delay: 0.6s; }
.bn-spor.is-inn .bn-spr:nth-child(6) div i { transition-delay: 0.75s; }

/* ---------- 15. kvalitetskontrol ---------- */
.bn-qc { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bn-qc li { position: relative; display: flex; align-items: center; gap: 12px; padding: clamp(9px, 1.7vh, 14px) 14px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); font-size: 15px; }
.bn-qc li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-2); flex-shrink: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #0a0d12; transition: background 0.3s, border-color 0.3s; }
.bn-qc li.ok::before, html:not(.bn-js) .bn-qc li::before { content: "✓"; background: var(--bn-ok); border-color: var(--bn-ok); }
.bn-qc li.om { border-color: rgba(240, 190, 110, 0.6); }
.bn-qc li.om::before { content: "↻"; color: #f0be6e; border-color: #f0be6e; animation: bnDrej 0.9s linear infinite; }
.bn-qc li.om::after { content: "Genererer igen"; margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #f0be6e; }
@keyframes bnDrej { to { transform: rotate(360deg); } }

/* ---------- 16. lager ---------- */
.bn-lager { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bn-lager li { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface); }
.bn-lager img { width: 112px; height: 63px; object-fit: cover; border-radius: 9px; display: block; }
.bn-lager div { display: flex; flex-direction: column; min-width: 0; }
.bn-lager b { font-size: 14.5px; } .bn-lager div span { font-size: 12.5px; color: var(--text-3); }
.bn-st { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.bn-st.klar { color: #9ccfa9; background: rgba(156, 207, 169, 0.1); border: 1px solid rgba(156, 207, 169, 0.3); }
.bn-st.prod { color: #e0a75e; background: rgba(224, 167, 94, 0.1); border: 1px solid rgba(224, 167, 94, 0.32); }
.bn-st.mod { color: #d3b57c; background: rgba(211, 181, 124, 0.1); border: 1px solid rgba(211, 181, 124, 0.3); }

/* ---------- 17. flader + brug ---------- */
.bn-flader { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 1.6vw, 22px); }
.bn-flader figure { margin: 0; }
.bn-fl { height: clamp(190px, 38vh, 320px); border-radius: 16px; overflow: hidden; border: 1px solid var(--border-2); background: #0d1118; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.f916 .bn-fl { aspect-ratio: 9 / 16; } .f11 .bn-fl { aspect-ratio: 1; height: clamp(150px, 28vh, 240px); } .f169 .bn-fl { aspect-ratio: 16 / 9; height: clamp(120px, 22vh, 190px); }
.bn-fl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-flader figcaption { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; }
.bn-flader figcaption span { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.bn-brug { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(18px, 3.4vh, 34px); }
.bn-brug li { border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.bn-brug b { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.bn-brug span { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }

/* ---------- 25. tillid ---------- */
.bn-tillid { text-align: center; }
.bn-stor { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, min(5.2vw, 8vh), 68px); line-height: 1.06; letter-spacing: -0.03em; }
.bn-stor.svag { color: var(--text-3); margin-top: 6px; font-size: clamp(22px, min(3.4vw, 5.4vh), 44px); }
.bn-fe { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 2vw, 28px); max-width: 980px; margin: clamp(22px, 4.4vh, 48px) auto 0; }
.bn-fe figure { margin: 0; }
.bn-fe img { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 30vh; object-fit: cover; border-radius: 16px; border: 1px solid var(--border-2); display: block; }
.bn-fe figcaption { font-size: 12.5px; color: var(--text-3); margin-top: 8px; }
.bn-fe > span { font-size: 28px; color: var(--bn-a); }

/* ---------- priser (priskortene fra style.css, tættere) ---------- */
.bn-page .plan-card { padding: clamp(18px, 3vh, 30px) clamp(18px, 1.8vw, 26px); }
.bn-page .plan-name { margin-bottom: clamp(6px, 1.3vh, 12px); }
.bn-page .plan-price { font-size: clamp(25px, 4vh, 32px); margin-bottom: 4px; }
.bn-page .plan-desc { margin-bottom: clamp(10px, 2.2vh, 22px); }
.bn-page .plan-meta { padding: clamp(4px, 0.9vh, 7px) 0; }
.bn-page .plan-feats { margin-bottom: clamp(12px, 2.6vh, 26px); }
.bn-page .plan-feats li { padding: clamp(2px, 0.7vh, 6px) 0; }
.bn-page .plan-tag { color: #0a0d12; }

/* ---------- FAQ ---------- */
.bn-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; align-items: start; max-width: 1100px; margin: 0 auto; }
.bn-faq details { border: 1px solid var(--border-2); border-radius: 12px; background: var(--surface); }
.bn-faq summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; font-size: 15px; font-weight: 600; position: relative; min-height: 48px; display: flex; align-items: center; }
.bn-faq summary::-webkit-details-marker { display: none; }
.bn-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--bn-a); }
.bn-faq details[open] summary::after { content: "–"; }
.bn-faq details p { padding: 0 16px 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.65; }

/* ---------- afslutning ---------- */
.bn-slut { padding: clamp(60px, 12vh, 150px) 0; text-align: center; background: radial-gradient(60% 70% at 50% 100%, rgba(var(--bn-a-rgb), 0.14), transparent 70%); }
.bn-slut-t { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, min(4.2vw, 6.6vh), 54px); line-height: 1.16; letter-spacing: -0.025em; color: var(--text-2); }
.bn-slut-t b { color: var(--text); font-weight: 500; }
.bn-slut-u { font-size: clamp(16px, 1.6vw, 21px); color: var(--text); margin: clamp(16px, 3vh, 28px) 0 clamp(18px, 3.4vh, 30px); }
.bn-slut-logo { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: clamp(28px, 6vh, 64px); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); }
.bn-slut-logo em { font-style: normal; color: var(--text-3); }

/* ============ tablet ============ */
@media (max-width: 1000px) {
  .bn-hero-grid, .bn-split, .bn-ba-grid { grid-template-columns: 1fr; }
  .bn-hero { padding-top: 100px; }
  .bn-stage { aspect-ratio: 16 / 10; }
  .bn-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; }
  .bn-flow::before, .bn-flow::after { display: none; }
  .bn-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-vid-shot { max-height: none; }
  .bn-typer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bn-lager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-brug { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-head-l { text-align: center; margin-left: auto; margin-right: auto; }
  .bn-chips { justify-content: center; }
  .bn-tekst-frame, .bn-ba-grid .iv-ba { max-height: none; }
  /* fladerne ruller vandret — de lodrette formater står stærkest på en telefon */
  .bn-flader { justify-content: flex-start; overflow-x: auto; padding: 0 0 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .bn-flader::-webkit-scrollbar { display: none; }
  .bn-flader figure { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ============ mobil ============ */
@media (max-width: 700px) {
  .bn-sec { padding: 46px 0; }
  .bn-hero { padding: 92px 0 36px; }
  .bn-hero h1 { font-size: clamp(33px, 9.4vw, 44px); }
  .bn-actions { flex-direction: column; }
  .bn-actions .btn { width: 100%; min-height: 50px; }
  .bn-stage { border-radius: 16px; aspect-ratio: 4 / 3; }
  .bn-stage-stor { aspect-ratio: 4 / 3; }
  .bn-stage-bar { padding: 30px 12px 10px; }
  .bn-seg { flex-basis: 110px; }
  .bn-flow { grid-template-columns: 1fr; row-gap: 0; }
  .bn-flow li { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
  .bn-flow li:last-child { border-bottom: 0; }
  .bn-flow .n { margin: 0; width: 36px; height: 36px; grid-row: span 2; }
  .bn-flow b { flex: 1 1 calc(100% - 60px); }
  .bn-flow li > span:last-child { flex-basis: 100%; padding-left: 48px; margin-top: -8px; }
  .bn-sort-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bn-list ul { grid-template-columns: 1fr 1fr; }
  .bn-two, .bn-duo { grid-template-columns: 1fr; }
  .bn-six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bn-vid-shot { min-height: 0; } .bn-vid-shot span { left: 6px; top: 6px; font-size: 9.5px; padding: 2px 5px; }
  .bn-vid-b { padding: 10px 12px 12px; } .bn-vid-b h3 { font-size: 16.5px; } .bn-vid-b p { font-size: 12.5px; line-height: 1.45; }
  .bn-typer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bn-typer li { padding: 12px 6px; } .bn-typer svg { width: 58px; height: 26px; } .bn-typer b { font-size: 13.5px; } .bn-typer span { font-size: 11px; }
  .bn-typer li:last-child { grid-column: 2; }
  .bn-moods button { font-size: 13px; padding: 12px 2px; }
  .bn-rute li + li { margin-left: 22px; } .bn-rute li + li::before { left: -17px; }
  .bn-rute li { font-size: 10.5px; padding: 7px 10px; }
  .bn-spr { grid-template-columns: 96px 1fr; gap: 10px; } .bn-spr span { font-size: 12.5px; }
  .bn-qc { gap: 6px; } .bn-qc li { font-size: 13.5px; padding: 9px 10px; gap: 8px; } .bn-qc li::before { width: 18px; height: 18px; font-size: 10px; }
  .bn-qc li.om::after { content: ""; }
  .bn-lager { grid-template-columns: 1fr; }
  .bn-lager li { grid-template-columns: 92px 1fr auto; } .bn-lager img { width: 92px; height: 52px; }
  .bn-fl { height: 300px; } .f11 .bn-fl { height: 220px; } .f169 .bn-fl { height: 170px; }
  .bn-brug { grid-template-columns: 1fr; }
  .bn-fe { grid-template-columns: 1fr; } .bn-fe > span { transform: rotate(90deg); justify-self: center; } .bn-fe img { max-height: none; }
  .bn-faq { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-vid-shot img, .bn-fl img, .bn-wave .hoved, .bn-qc li.om::before { animation: none !important; }
  .bn-js .bn-flow li { opacity: 1; transform: none; }
  .bn-spr div i { transition: none; }
}

/* ---------- Toppen: link-felt ---------- */
.bn-hero-form { display: flex; gap: 8px; max-width: 540px; margin: 0 0 clamp(16px, 3.2vh, 28px); padding: 6px; border: 1px solid var(--border-2); border-radius: 14px; background: rgba(255, 255, 255, 0.04); transition: border-color .2s; }
.bn-hero-form:focus-within { border-color: rgba(var(--bn-a-rgb), 0.7); }
.bn-hero-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15.5px; padding: 0 12px; outline: none; box-shadow: none; }
.bn-hero-form input::placeholder { color: var(--text-3); }
.bn-hero-form .btn { flex: none; white-space: nowrap; }
@media (max-width: 520px) {
  .bn-hero-form { flex-direction: column; padding: 8px; }
  .bn-hero-form input { padding: 12px 10px; font-size: 16px; }
  .bn-hero-form .btn { width: 100%; }
}

/* ---------- Rigtige klip (lydløse) oven på billederne ---------- */
.bn-stage-scene video, .bn-vid-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; pointer-events: none; }
.bn-stage-scene.spiller video, .bn-vid-shot.spiller video { opacity: 1; }
.bn-vid-shot.spiller img { animation: none; }
.bn-vid.hoej .bn-vid-shot video { left: 50%; right: auto; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.bn-vid-shot span { z-index: 2; }