@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(fredoka-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(nunito-latin-800-normal.woff2) format('woff2'); }

:root {
  --papir: #FBF7EF; --blekk: #1F2A44; --natt: #141B2E; --aksent: #C2410C; --gloed: #EA580C;
  --gronn: #0F766E; --dempet: #5B6478; --kant: #E8DFCF; --flate: #F1E9DA; --stjerne: #FBBF24;
  --lys-dempet: #C9D0DE;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font: 400 18px/1.6 Nunito, system-ui, sans-serif; color: var(--blekk); background: var(--natt); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: Fredoka, system-ui, sans-serif; font-weight: 700; line-height: 1.08; letter-spacing: -0.5px; }
em { font-style: normal; color: var(--aksent); }
.mork em, .oransje em { color: var(--stjerne); }

.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px;
  border-radius: 16px; font: 800 17px Nunito; text-decoration: none; border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.knapp:hover { transform: translateY(-2px); }
.knapp:focus-visible, input:focus-visible { outline: 3px solid var(--stjerne); outline-offset: 3px; }
.knapp.hoved { background: var(--aksent); color: #fff; box-shadow: 0 10px 24px rgba(194, 65, 12, .35); }
.knapp.hoved:hover { background: var(--gloed); }
.knapp.ramme { color: var(--papir); box-shadow: inset 0 0 0 2px rgba(251, 247, 239, .35); }
.knapp.ramme:hover { box-shadow: inset 0 0 0 2px var(--papir); }
.knapp.lys { background: var(--papir); color: var(--aksent); }

.konsept {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--stjerne);
  color: var(--natt); font: 800 12px Nunito; letter-spacing: 2px;
}

/* Telefonramme rundt skjermbilder og video. */
.tlf {
  position: relative; width: 100%; aspect-ratio: 1 / 2.165; border-radius: 13% / 6%; background: var(--natt); padding: 10px;
  box-shadow: 0 40px 80px rgba(8, 12, 24, .45), inset 0 0 0 2px #2B3654;
}
.tlf > .skjerm { width: 100%; height: 100%; border-radius: 10.5% / 4.9%; overflow: hidden; background: var(--papir); position: relative; }
.tlf.film { aspect-ratio: 9 / 16; border-radius: 11% / 6.2%; }
.tlf.film > .skjerm { border-radius: 9% / 5.1%; }
.tlf img, .tlf video { width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}