/* =========================================================
   MJO Sikkerhet – premium-lag (2026-10-12)
   Lastes sist på alle sider. Fjern <link> til denne filen for å gå tilbake.
   ========================================================= */

:root {
  --accent-deep: #9e0c24;
  --ink: #111114;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(10,10,11,.04), 0 4px 14px rgba(10,10,11,.06);
  --shadow: 0 2px 6px rgba(10,10,11,.05), 0 18px 40px rgba(10,10,11,.10);
  --shadow-lg: 0 30px 80px rgba(10,10,11,.28);
  --hairline: rgba(10,10,11,.07);
}

html { scroll-padding-top: 96px; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Typografi ---------- */
body { color: var(--ink); text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, h4 { letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
h3 { font-weight: 700; }
p { text-wrap: pretty; }
section { padding: 6rem 0; }
@media (max-width: 720px) { section { padding: 4.2rem 0; } }

/* Eyebrow med fine linjer */
.section-heading .eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .74rem; letter-spacing: .22em;
}
.section-heading .eyebrow::before,
.section-heading .eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55;
}
.section-heading h2 { margin-bottom: 1.1rem; }
.section-heading p { font-size: 1.06rem; line-height: 1.75; }
.ok-eyebrow { display: inline-flex !important; align-items: center; gap: .7rem; font-size: .74rem !important; letter-spacing: .22em !important; }
.ok-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }

/* ---------- Toppstripe og meny ---------- */
.topbar { background: #070708; font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.topbar .badge { border-radius: 999px; padding: .12rem .55rem; }
.topbar a { color: rgba(255,255,255,.7); }

.navbar {
  background: rgba(16,16,19,.95);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.navbar .container { padding-top: 1rem; padding-bottom: 1rem; }
.navbar nav a { font-size: .93rem; color: rgba(255,255,255,.86); letter-spacing: .005em; }
.navbar nav a:hover { color: #fff; }
.navbar nav a.active { color: #fff; }
.navbar nav a::after { height: 2px; border-radius: 2px; bottom: -6px; }
.navbar .nav-cta {
  border-radius: 999px; padding: .6rem 1.25rem;
  background: linear-gradient(180deg, #d81535 0%, var(--accent) 55%, var(--accent-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 18px rgba(200,16,46,.35);
}
.navbar .nav-cta:hover { transform: translateY(-1px); }

/* ---------- Knapper ---------- */
.btn { border-radius: 999px; padding: .9rem 1.7rem; font-weight: 650; letter-spacing: .005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; }
.btn-primary {
  background: linear-gradient(180deg, #d81535 0%, var(--accent) 55%, var(--accent-deep) 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(200,16,46,.28);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #e41d3e 0%, #d01230 55%, #a90d27 100%);
  border-color: transparent; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px rgba(200,16,46,.38);
}
.btn-outline { border-width: 1.5px; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn-outline:hover { transform: translateY(-2px); }
.btn-dark { border-radius: 999px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero (forside) ---------- */
.hero::after {
  background:
    radial-gradient(900px 500px at 15% 60%, rgba(200,16,46,.16), transparent 60%),
    linear-gradient(90deg, rgba(8,8,9,.96) 0%, rgba(8,8,9,.72) 50%, rgba(8,8,9,.25) 100%);
}
.hero .eyebrow { border-radius: 999px; padding: .4rem 1rem; background: rgba(200,16,46,.12); letter-spacing: .2em; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.hero p.lead { font-size: 1.22rem; line-height: 1.7; color: rgba(255,255,255,.82); }

/* ---------- Sidetopp (undersider) ---------- */
.page-header {
  padding: 6.5rem 0 5.2rem;
  background: radial-gradient(1000px 420px at 85% -10%, rgba(200,16,46,.22), transparent 60%),
              linear-gradient(135deg, #08080a 0%, #17171b 55%, #222227 100%);
}
.page-header::before { opacity: .14; filter: grayscale(.2) contrast(1.05); }
.page-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .9;
}
.page-header h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); margin-bottom: 1rem; max-width: 900px; }
.page-header p { font-size: 1.18rem; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 680px; }
.breadcrumb {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  padding: .35rem .9rem; margin-bottom: 1.4rem;
  border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-size: .8rem; color: rgba(255,255,255,.55);
}
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: var(--accent); }

/* ---------- Seksjoner ---------- */
.section-light { background: linear-gradient(180deg, #f6f6f7 0%, #f1f1f3 100%); }
.section-red::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(800px 360px at 50% 0%, rgba(200,16,46,.12), transparent 65%);
}
.section-red { border-top: 0; }
.section-red::before { opacity: .035; }
.section-red > .container { position: relative; z-index: 1; }
.band-red { border-top: 0; box-shadow: inset 0 1px 0 rgba(200,16,46,.6); }

/* ---------- Bilder ---------- */
.feature-row img, .ok-img-wrap img { border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.ok-img-wrap { border-radius: var(--radius-lg); }
.ok-img-wrap:hover img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ok-img-wrap::after { border-width: 3px; opacity: .9; }

/* ---------- Kort ---------- */
.service-card, .segment-card, .why-card, .ok-value, .ok-panel, .vv-kort, .faq-item, .form-card, .price-box {
  border-radius: var(--radius-lg);
}
.service-card, .ok-value, .ok-panel, .segment-card, .form-card, .faq-item {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--hairline);
}
.service-card:hover, .ok-value:hover, .segment-card:hover { box-shadow: var(--shadow); }
.ok-value { border-top: 3px solid var(--accent); }
.segment-card { border-top: 3px solid var(--accent); }
.ok-panel { border-left: 3px solid var(--accent); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ok-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ok-icon { border-radius: 12px; }
.ok-panel-head .ok-icon { background: linear-gradient(180deg, #d81535, var(--accent-deep)); box-shadow: 0 6px 16px rgba(200,16,46,.3); }

.ok-handle { border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); }
.ok-handles.light .ok-handle { background: #fff; }

.why-dark .why-card {
  border-top: 0; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1f1f23 0%, #0c0c0e 100%);
  border: 1px solid rgba(255,255,255,.06);
}
.why-dark .why-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(200,16,46,0));
}
.why-card .why-num { font-size: 2.2rem; letter-spacing: -.04em; }

.ok-chips span, .seg-links a { border-radius: 999px; }
.ok-fit { border-radius: 12px; border: 1px solid var(--hairline); }
.ok-tech { border: 1px solid var(--hairline); }

/* ---------- CTA ---------- */
.cta-banner {
  padding: 6.5rem 0;
  background: radial-gradient(700px 320px at 50% 120%, rgba(200,16,46,.28), transparent 70%),
              linear-gradient(135deg, #08080a 0%, #1b1b1f 100%);
}
.cta-banner::before { opacity: .08; }
.cta-banner h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }

/* ---------- FAQ og skjema ---------- */
.faq-item { overflow: hidden; background: #fff; }
.faq-item summary { font-weight: 650; }
input, select, textarea { border-radius: 10px !important; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(200,16,46,.12) !important; }

/* ---------- Bunntekst ---------- */
.footer {
  position: relative;
  background: radial-gradient(800px 300px at 10% 0%, rgba(200,16,46,.08), transparent 60%), #08080a;
  padding-top: 5rem;
}
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,.7), transparent);
}
.footer h4 { font-size: .78rem; letter-spacing: .2em; color: rgba(255,255,255,.95); margin-bottom: 1.2rem; }
.footer a { color: rgba(255,255,255,.62); font-size: .93rem; transition: color .2s, transform .2s var(--ease); }
.footer-grid a:hover { color: #fff; transform: translateX(3px); }
.footer .brand-col p { color: rgba(255,255,255,.6); line-height: 1.7; }
.footer-bottom { border-top-color: rgba(255,255,255,.07); color: rgba(255,255,255,.4); }
.footer-bottom a { color: rgba(255,255,255,.55); }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .navbar nav { background: rgba(14,14,16,.98); }
}
@media (max-width: 560px) {
  .page-header { padding: 4.6rem 0 3.8rem; }
  .btn { padding: .85rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Menyknapp på mobil helt til høyre */
@media (max-width: 900px) { .nav-toggle { margin-left: auto; } }

/* ---------- Knapper v2: mindre, roligere, mer eksklusivt ---------- */
.btn {
  border-radius: 8px; padding: .7rem 1.25rem; font-size: .9rem; font-weight: 600;
  letter-spacing: .01em; gap: .45rem; border-width: 1px;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.btn-primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 1px 2px rgba(10,10,11,.15); }
.btn-primary:hover { background: #ad0d27; border-color: #ad0d27; transform: none; box-shadow: 0 4px 14px rgba(200,16,46,.2); }
.btn-outline { border-width: 1px; border-color: rgba(255,255,255,.3); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-outline:hover { transform: none; }
.btn-dark { border-radius: 8px; }
.navbar .nav-cta {
  border-radius: 8px; padding: .5rem 1rem; font-size: .86rem; font-weight: 600;
  background: var(--accent); box-shadow: none;
}
.navbar .nav-cta:hover { background: #ad0d27; transform: none; box-shadow: none; }
.hero .btn { padding: .8rem 1.4rem; font-size: .95rem; }
@media (max-width: 560px) { .btn { padding: .7rem 1.15rem; } }

/* ---------- Forside: tjenestekort med bilde ---------- */
.fs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.fs-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px; overflow: hidden; border-radius: 6px; isolation: isolate;
  background: #0c0c0e; color: #fff; text-decoration: none;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,.06);
}
.fs-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(.25) contrast(1.05); transition: transform .8s var(--ease), filter .6s;
}
.fs-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,.15) 0%, rgba(8,8,10,.35) 40%, rgba(8,8,10,.92) 78%, #08080a 100%);
}
.fs-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent);
  transition: width .45s var(--ease);
}
.fs-card:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.05); }
.fs-card:hover::after { width: 100%; }
.fs-card:hover { color: #fff; }
.fs-num, .fs-tag {
  position: absolute; top: 14px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.fs-num { left: 16px; color: rgba(255,255,255,.75); }
.fs-tag { right: 14px; padding: .25rem .55rem; border-radius: 2px; background: rgba(200,16,46,.9); color: #fff; }
.fs-body { padding: 1.4rem 1.3rem 1.3rem; }
.fs-body h3 { color: #fff; font-size: 1.22rem; margin-bottom: .45rem; }
.fs-body p { color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.55; margin-bottom: .9rem; }
.fs-link { font-size: .85rem; font-weight: 700; color: #fff; display: inline-flex; gap: .35rem; align-items: center; }
.fs-link span { color: var(--accent); transition: transform .3s var(--ease); }
.fs-card:hover .fs-link span { transform: translateX(4px); }
@media (max-width: 1080px) { .fs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fs-grid { grid-template-columns: 1fr; } .fs-card { min-height: 320px; } }
.fs-num { padding: .25rem .5rem; border-radius: 2px; background: rgba(8,8,10,.65); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fs-card.fs-top img { height: 58%; object-fit: cover; object-position: center 15%; }