/* ==========================================================================
   BANKBOKSEN — marketing.css  (header, hero, bankhvælvingsdør, footer)
   Udbygges i DEL 6.
   ========================================================================== */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,16,15,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bb-line-soft);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bb-text);
  font: 600 .95rem/1 var(--bb-sans); letter-spacing: .32em;
}
.brand:hover { color: var(--bb-brass-200); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--bb-text-dim); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--bb-brass-300); }
@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-header .btn { margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 9vw, 7rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.hero__title {
  font-size: clamp(2.6rem, 8vw, 5.4rem); letter-spacing: .08em; margin-bottom: .35em;
  background: var(--bb-brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font: 400 clamp(1.2rem, 2.4vw, 1.6rem)/1.4 var(--bb-serif); color: var(--bb-text); max-width: 32ch; }
.hero__sub  { color: var(--bb-text-dim); max-width: 46ch; }
.hero__note {
  margin-top: 2rem; padding: 1rem 1.2rem; border-left: 2px solid var(--bb-brass-500);
  background: rgba(201,164,92,.05); color: var(--bb-text-dim); max-width: 52ch; font-size: .95rem;
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .vault-door { order: -1; width: min(62vw, 260px); margin: 0 auto; }
}

/* ---------- Bankhvælvingsdør (ren CSS, ingen JS) ---------- */
.vault-door {
  position: relative; width: min(100%, 440px); aspect-ratio: 1; margin-left: auto;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.035) 0deg 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 35% 30%, #4a5552 0%, #2a3230 45%, #161c1a 75%);
  box-shadow:
    0 0 0 10px #1a201e, 0 0 0 12px var(--bb-brass-700), 0 0 0 22px #121715,
    0 40px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.6);
}
.vault-door::after { /* metalrefleks */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  background-size: 250% 250%; background-position: 100% 0; transition: background-position 1.2s ease;
  pointer-events: none;
}
.vault-door:hover::after { background-position: 0 100%; }
.vault-door__ring {
  position: absolute; inset: 12%; border-radius: 50%;
  border: 2px solid rgba(201,164,92,.35);
  background: repeating-conic-gradient(rgba(201,164,92,.55) 0 1deg, transparent 1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 72%, transparent 73%);
          mask: radial-gradient(circle, transparent 64%, #000 65%, #000 72%, transparent 73%);
  animation: bb-dial 40s linear infinite;
}
.vault-door__dial { position: absolute; inset: 30%; animation: bb-dial 60s linear infinite reverse; }
.vault-door__dial span {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 10px; margin: -5px 0 0 -50%;
  border-radius: 5px; background: var(--bb-brass-grad); box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.vault-door__dial span:nth-child(2) { transform: rotate(60deg); }
.vault-door__dial span:nth-child(3) { transform: rotate(120deg); }
.vault-door__hub {
  position: absolute; inset: 42%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f1dfb2, #b08a47 55%, #6a5024);
  box-shadow: 0 0 0 4px #1a201e, 0 6px 14px rgba(0,0,0,.6);
}
@keyframes bb-dial { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .vault-door__ring, .vault-door__dial { animation: none; } /* spar batteri på mobil */
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--bb-line-soft); padding: 2.5rem 0 3rem; color: var(--bb-text-mute); font-size: .9rem; }
.site-footer__legal { max-width: 70ch; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.site-footer__links a { color: var(--bb-text-dim); }