/* =========================================================
   MJO Sikkerhet – taktisk/operativt lag (2026-10-12)
   Kun grafiske elementer (rutenett, sikte-hjørner, avskårne hjørner).
   Typografien er den samme som før. Fjern <link> for å gå tilbake.
   ========================================================= */
:root {
  --grid-dark: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  --grid-light: linear-gradient(rgba(10,10,11,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,11,.035) 1px, transparent 1px);
  --chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* ---------- Knapper: avskårne hjørner ---------- */
.btn { border-radius: 3px; }
.btn-primary, .navbar .nav-cta { clip-path: var(--chamfer); border-radius: 0 !important; }
.btn-outline, .btn-dark { border-radius: 3px; }

/* ---------- Rutenett i flatene ---------- */
.page-header {
  background: var(--grid-dark), radial-gradient(1000px 420px at 85% -10%, rgba(200,16,46,.22), transparent 60%),
              linear-gradient(135deg, #08080a 0%, #17171b 55%, #222227 100%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.section-red {
  background-image: var(--grid-dark);
  background-size: 44px 44px;
  background-color: #141417;
}
.cta-banner {
  background: var(--grid-dark), radial-gradient(700px 320px at 50% 120%, rgba(200,16,46,.28), transparent 70%),
              linear-gradient(135deg, #08080a 0%, #1b1b1f 100%);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
.hero::after {
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 44px 44px,
    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%);
}
.section-light {
  background-image: var(--grid-light), linear-gradient(180deg, #f6f6f7 0%, #f1f1f3 100%);
  background-size: 44px 44px, 44px 44px, auto;
}
.footer {
  background: var(--grid-dark), radial-gradient(800px 300px at 10% 0%, rgba(200,16,46,.08), transparent 60%), #08080a;
  background-size: 44px 44px, 44px 44px, auto, auto;
}

/* ---------- Sikte-hjørner ---------- */
.ok-img-wrap::before {
  content: ""; position: absolute; left: -12px; top: -12px; width: 34px; height: 34px; z-index: 2;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
}
.ok-img-wrap::after { border-width: 2px !important; width: 34px !important; height: 34px !important; right: -12px !important; bottom: -12px !important; border-radius: 0 !important; z-index: 2 !important; }
.ok-img-wrap img, .feature-row img { border-radius: 6px; }

.ok-panel, .ok-value, .segment-card, .why-card, .ok-handle, .vv-kort, .service-card, .form-card, .faq-item { border-radius: 6px !important; }
.ok-panel, .ok-value, .segment-card { position: relative; }
.ok-panel::after, .ok-value::after, .segment-card::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 12px; height: 12px;
  border-top: 2px solid rgba(200,16,46,.55); border-right: 2px solid rgba(200,16,46,.55);
}
.ok-handle { position: relative; }
.ok-handle::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 10px; height: 10px;
  border-top: 1.5px solid rgba(200,16,46,.6); border-right: 1.5px solid rgba(200,16,46,.6);
}

/* Ikoner med avskårne hjørner */
.ok-icon, .card-icon, .vv-ikon, .trust-item .icon {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Skarpere hjørner på småelementer */
.ok-chips span, .seg-links a, .ok-anchors a, .hero .eyebrow, .breadcrumb { border-radius: 3px; }
.segment-card .seg-tag, .topbar .badge { border-radius: 2px; }
.ok-fit { border-radius: 4px; border-left: 3px solid var(--accent); }
input, select, textarea { border-radius: 4px !important; }