/* ============================================================
   NORLAN SOLUTIONS — designsystemet (css/norlan.css)
   Palett 1a «Dyp petrol» (låst). Tokens på body; tema stemples av
   js/norlan.js (data-theme), CSS-default følger prefers-color-scheme
   slik at første maling er riktig uten JS.
   Én easing. Ett system. Turnus-registeret ligger i css/turnus.css.
   ============================================================ */

/* ---------- fonter (self-hosted, SIL OFL — GDPR: ingen CDN) ---------- */
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/SchibstedGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/SchibstedGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/SchibstedGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/SchibstedGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* variabel serif — kun produktregisteret bruker den */
@font-face { font-family: 'Cormorant Garamond'; src: url('/fonts/CormorantGaramond-Variable.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

/* ---------- tokens ---------- */
body {
  /* lys (default) */
  --bg: #F5F8F8; --surface: #FFFFFF; --surface2: #ECF2F2;
  --ink: #10262B; --muted: #4E6A70; --ghost: #7E969B; --line: #DCE5E6;
  --accent: #0F6E7C; --accent-soft: #E2EDEE;
  --btn-bg: #0E3A43; --btn-bg-hover: #0B2F37; --btn-ink: #F5F8F8;
  --sec-bg: #0E3A43; --sec-surface: #12444E; --sec-ink: #F5F8F8;
  --sec-muted: #93ACB1; --sec-line: #2A545C; --sec-accent: #5FB7C2;
  --nav-bg: rgba(245,248,248,0.86);
  --cell-a: #0F6E7C; --cell-b: #BFD9DC;
  /* dypet — de alltid-mørke aktene (hero/trygghet/footer) */
  --deep-bg: #06181F; --deep-bg2: #0A1B1F; --deep-surface: rgba(18,54,62,0.42);
  --deep-ink: #E8F0F1; --deep-muted: #93ACB1; --deep-line: rgba(95,183,194,0.16);
  /* merkets gradientstopp (brand-kit, kilde: mark-color.svg) */
  --mark-1: #5FB7C2; --mark-2: #2E96A5; --mark-3: #0F6E7C;
  --mark-4: #0A5A67; --mark-5: #07454F; --mark-6: #003A43;
  /* geometri + bevegelse */
  --maxw: 1180px; --pad: clamp(20px, 5vw, 64px);
  --r-s: 8px; --r-m: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-ui: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--bg); color: var(--ink);
}
body[data-theme="dark"] {
  --bg: #0A1B1F; --surface: #10262B; --surface2: #0D2126;
  --ink: #E8F0F1; --muted: #93ACB1; --ghost: #6E878C; --line: #22383D;
  --accent: #5FB7C2; --accent-soft: #143238;
  --btn-bg: #5FB7C2; --btn-bg-hover: #7CC6CF; --btn-ink: #062B31;
  --sec-bg: #0D2126; --sec-surface: #10262B; --sec-ink: #E8F0F1;
  --sec-muted: #93ACB1; --sec-line: #22383D; --sec-accent: #5FB7C2;
  --nav-bg: rgba(10,27,31,0.86);
  --cell-a: #5FB7C2; --cell-b: #1E4249;
  --deep-surface: rgba(16,38,43,0.5);
}
/* riktig første maling før JS har stemplet data-theme */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --bg: #0A1B1F; --surface: #10262B; --surface2: #0D2126;
    --ink: #E8F0F1; --muted: #93ACB1; --ghost: #6E878C; --line: #22383D;
    --accent: #5FB7C2; --accent-soft: #143238;
    --btn-bg: #5FB7C2; --btn-bg-hover: #7CC6CF; --btn-ink: #062B31;
    --sec-bg: #0D2126; --sec-surface: #10262B; --sec-ink: #E8F0F1;
    --sec-muted: #93ACB1; --sec-line: #22383D; --sec-accent: #5FB7C2;
    --nav-bg: rgba(10,27,31,0.86);
    --cell-a: #5FB7C2; --cell-b: #1E4249;
    --deep-surface: rgba(16,38,43,0.5);
  }
}

/* ---------- grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
::selection { background: var(--accent); color: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 12px; z-index: 300;
  background: var(--btn-bg); color: var(--btn-ink);
  padding: 10px 18px; border-radius: var(--r-s); font-size: 14px; font-weight: 600;
}
.skip:focus { left: 12px; }

/* det levende feltet — fast bakgrunn bak alt */
#field {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
.reduced #field { display: none; }
main, .site-footer, .site-nav, .disclaimer { position: relative; z-index: 2; }

/* ---------- nav ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-nav .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand svg { height: 26px; width: auto; display: block; }
.brand .mark-path { fill: var(--ink); transition: fill 0.4s var(--ease); }
.brand .wm { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; line-height: 1; }
.brand .wm b { font-size: 15.5px; font-weight: 700; letter-spacing: 0.03em; }
.brand .wm span { font-size: 8.5px; font-weight: 500; letter-spacing: 0.3em; color: var(--muted); }
.site-nav nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); flex-wrap: wrap; }
.site-nav nav a { font-size: 14px; font-weight: 500; color: var(--ink); }
.site-nav nav a:hover { color: var(--accent); text-decoration: none; }
/* CTA-knappen beholder alltid egne knappefarger — ellers arver den .site-nav nav a
   (mørk --ink) og blir mørk tekst på mørk knapp over lyse seksjoner */
.site-nav nav a.btn-primary,
.site-nav.over-deep nav a.btn-primary { color: var(--btn-ink); }
.site-nav nav a.btn-primary:hover { color: var(--btn-ink); }
.theme-toggle {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }

/* på dype akter (mørk hero) skal nav smelte inn */
.site-nav.over-deep { background: rgba(6,24,31,0.55); border-bottom-color: rgba(95,183,194,0.12); }
.site-nav.over-deep .brand .mark-path { fill: var(--deep-ink); }
.site-nav.over-deep .brand .wm b, .site-nav.over-deep nav a { color: var(--deep-ink); }
.site-nav.over-deep .brand .wm span { color: var(--deep-muted); }
.site-nav.over-deep nav a:hover { color: var(--mark-1); }
.site-nav.over-deep .theme-toggle { color: var(--deep-muted); border-color: rgba(147,172,177,0.35); }

/* ---------- knapper ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  padding: 14px 27px; border-radius: 9px; border: 0; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.35s var(--ease),
              transform 0.35s var(--ease);
  will-change: transform;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: 0 10px 34px -12px rgba(15,110,124,0.55); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.act-deep .btn-primary { background: var(--mark-1); color: #04262c; }
.act-deep .btn-primary:hover { background: #7CC6CF; box-shadow: 0 0 54px rgba(95,183,194,0.35); }
.act-deep .btn-ghost { color: var(--deep-ink); border-color: rgba(147,172,177,0.4); }
.act-deep .btn-ghost:hover { border-color: var(--mark-1); color: var(--mark-1); }

/* ---------- typografi og aktlayout ---------- */
.act { position: relative; padding: clamp(84px, 13vh, 150px) var(--pad); }
.act-full { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
.act-wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.act-deep { background: linear-gradient(180deg, var(--deep-bg) 0%, var(--deep-bg2) 100%); color: var(--deep-ink); }
.act-deep ::selection { background: var(--mark-1); color: #04262c; }

.kick {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 22px;
  --shine-base: var(--accent); --shine-hi: color-mix(in srgb, var(--accent) 42%, #fff);
}
.act-deep .kick { color: var(--mark-1); --shine-base: var(--mark-1); --shine-hi: #e2f4f6; }
/* React Bits: Shiny Text — et lysbånd glir over etiketten. Faller trygt
   tilbake til solid farge om background-clip:text ikke støttes. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kick {
    background: linear-gradient(100deg, var(--shine-base) 0 42%, var(--shine-hi) 50%, var(--shine-base) 58% 100%);
    background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: kickShine 6s linear infinite;
  }
}
@keyframes kickShine { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.reduced .kick { animation: none; -webkit-text-fill-color: currentColor; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.display-1 { font-size: clamp(2.7rem, 8.2vw, 6.6rem); line-height: 1.0; }
.display-2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 650; }
.lede {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.7;
  color: var(--muted); max-width: 58ch; text-wrap: pretty; margin: 20px 0 0;
}
.act-deep .lede { color: var(--deep-muted); }

/* splitlinjer — linjemaskert entré (JS legger .in på hver .ln) */
.split .ln { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.split .ln > span {
  display: inline-block; transform: translateY(112%);
  transition: transform 1.05s var(--ease);
  will-change: transform;
}
.split .ln.in > span { transform: translateY(0); }
.reduced .split .ln > span { transform: none; transition: none; }

/* reveals */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.09s; }
.reveal[data-d="2"] { transition-delay: 0.18s; }
.reveal[data-d="3"] { transition-delay: 0.27s; }
.reduced .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- gjenbrukskomponenter ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 26px 26px 24px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -22px rgba(14,58,67,0.35); }
.card h3 { font-size: 1.06rem; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 8px; }
.card p { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--muted); }
.card .tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 12px;
}

/* ---------- spotlight-kort (React Bits: Spotlight Card / Magic Bento, vanilla) ----------
   Et mykt petrolglimt følger pekeren inne i kortet. --mx/--my settes av js/effects.js. */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -30%),
              color-mix(in srgb, var(--glow, var(--accent)) 15%, transparent), transparent 62%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }
.act-deep .spotlight { --glow: var(--mark-1); }
.reduced .spotlight::before, .coarse .spotlight::before { display: none; }

/* ---------- animerte gradient-tall (React Bits: Gradient Text, vanilla) ----------
   Petrolgradient som glir svakt. Solid fallback for eldre nettlesere. */
.act-proof .proof .pn { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .act-proof .proof .pn {
    background: linear-gradient(100deg, var(--accent), var(--mark-1), var(--accent));
    background-size: 220% 100%; background-clip: text; -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradFlow 7s var(--ease) infinite;
  }
}
@keyframes gradFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.reduced .act-proof .proof .pn { animation: none; }

/* ---------- glare-hover (React Bits: Glare Hover) ----------
   Et lysstrøk sveiper over skjermbildet ved hover. */
.glare, .browser .shot { position: relative; overflow: hidden; }
.glare::after, .browser .shot::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-16deg); transition: left 0.75s var(--ease); pointer-events: none;
}
.glare:hover::after, .browser:hover .shot::after { left: 135%; }
.reduced .glare::after, .reduced .browser .shot::after { display: none; }

/* ---------- Star Border (React Bits: Star Border) ----------
   Roterende petrolring rundt de viktigste CTA-ene, kun ved hover. */
@property --sb { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.star-border { position: relative; z-index: 0; }
.star-border::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--sb), transparent 55%, var(--mark-1) 78%, #d6f1f4 88%, var(--mark-1) 96%, transparent 100%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.star-border:hover::before { opacity: 1; animation: sbSpin 2.6s linear infinite; }
@keyframes sbSpin { to { --sb: 360deg; } }
.reduced .star-border:hover::before { animation: none; }

/* ---------- 3D-tilt-basis (React Bits: Tilted Card) — transform styres av JS ---------- */
.tilt { will-change: transform; transform-origin: center; }

/* ---------- Logo Loop / marquee (React Bits: Logo Loop) ----------
   To identiske spor på én rad; hvert spor skyves nøyaktig én bredde + gap,
   så løpet er sømløst. Pauser ved hover, kanter fades av maske. */
.marquee { display: flex; flex-wrap: nowrap; gap: 10px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; gap: 10px; flex: none; white-space: nowrap; will-change: transform; animation: marqueeMove 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeMove { to { transform: translateX(calc(-100% - 10px)); } }
.reduced .marquee-track { animation: none; }

/* §-motivet — den juridiske signaturen */
.paragraf {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; color: var(--accent);
  border-top: 1px solid var(--line); padding-top: 16px;
}
.act-deep .paragraf { color: var(--mark-1); border-top-color: var(--deep-line); }

/* interaksjonshint — tydelig «gjør dette»-merke */
.hint {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1;
  color: var(--accent);
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.hint::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.reduced .hint::before { animation: none; opacity: 0.9; }

/* browser-chrome-ramme rundt skjermbilder («vindu inn i produktet») */
.browser {
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 80px -34px rgba(14,58,67,0.4);
}
.browser .chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface2);
}
.browser .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.browser .chrome .url {
  margin-left: 10px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--muted);
}
/* skjermbildene er krem-rastre og kan ikke inverteres — foto-behandling i mørkt tema */
.browser .shot { position: relative; }
body[data-theme="dark"] .browser .shot img { filter: brightness(0.82) saturate(0.94); }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .browser .shot img { filter: brightness(0.82) saturate(0.94); }
}

/* skjema */
.form { display: grid; gap: 12px; }
.form input, .form textarea {
  font-family: var(--font-ui); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 13px 15px; width: 100%;
  transition: border-color 0.2s;
}
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { min-height: 110px; resize: vertical; }
.form ::placeholder { color: var(--ghost); }
.form-status { font-size: 14px; color: var(--muted); margin: 4px 0 0; min-height: 1.4em; }

/* scrollhint */
.scrolldown {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--deep-muted);
}
.scrolldown .line { width: 1px; height: 44px; background: linear-gradient(rgba(95,183,194,0), rgba(95,183,194,0.75)); position: relative; overflow: hidden; }
.scrolldown .line::after {
  content: ""; position: absolute; left: 0; top: -6px; width: 1px; height: 12px;
  background: #fff; animation: sdrop 1.7s ease-in-out infinite;
}
@keyframes sdrop { 0% { top: -12px; opacity: 0; } 30% { opacity: 1; } 100% { top: 46px; opacity: 0; } }
.reduced .scrolldown { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep-bg2); color: var(--deep-muted); font-size: 13.5px; }
.site-footer .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad) 30px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px;
}
.site-footer h4 {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mark-1); margin: 0 0 14px;
}
.site-footer a { color: var(--deep-ink); }
.site-footer a:hover { color: var(--mark-1); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer .brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--deep-ink); }
.site-footer .brandline svg { height: 22px; width: auto; }
.site-footer .bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 22px var(--pad) 34px;
  border-top: 1px solid rgba(95,183,194,0.14);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
}

/* ---------- redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .site-nav .inner { height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .site-nav nav { gap: 14px; }
  .site-footer .inner { grid-template-columns: 1fr 1fr; }
  .act { padding-left: 20px; padding-right: 20px; }
}