/*
Theme Name: Ultra Studio
Description: Custom theme for Ultra Studio
Version: 2.0
Author: Ultra Studio
*/

:root {
  --bg: #121212;
  --bg-card: #1F1F1F;
  --bg-alt: #333333;
  --text: #E8F0FF;
  --green: #35CE8D;
  --green-dim: rgba(53, 206, 141, 0.15);
  --green-border: rgba(53, 206, 141, 0.25);
  --card-border: rgba(255,255,255,0.05);
  --shadow: 0 4px 24px rgba(0,0,0,0.45);
  --shadow-hover: 0 8px 48px rgba(53,206,141,0.18);
  --max-width: 1140px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Stopper gummistrikk-effekten i topp og bunn */
  overscroll-behavior: none;
  background-color: var(--bg);
}

body {
  background-color: var(--bg);
  overscroll-behavior: none;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ================================================
   HEADER
   ================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 60px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Én farge, hele tiden. Headeren byttet tidligere mellom gjennomsiktig og
     halvgjennomsiktig med blur naar man rullet; naa staar den stille. */
  background: #121212;
}

.site-logo img { height: 38px; width: auto; display: block; }

.site-nav { display: flex; gap: 4px; align-items: center; position: relative; }

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.75;
  padding: 8px 14px;
  transition: opacity 0.2s, color 0.2s;
}
/* Hover er ren farge. Ingen bakgrunn, ingen understrek. */
.site-nav a:hover { opacity: 1; color: var(--green); }
.site-nav a.active { opacity: 1; color: var(--green); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
  border-radius: 8px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ================================================
   HERO
   ================================================ */

/* Full-bleed background video */
/* Readability scrim — heavier on the left where the text sits */


@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}




/* Trust strip */

/* Hero entrance animations */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Globe */
@keyframes globe-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.7; }
}
model-viewer {
  width: 660px;
  height: 660px;
  max-width: 100%;
  filter: brightness(0.88) saturate(0.9) drop-shadow(0 0 60px rgba(53,206,141,0.18)) drop-shadow(0 0 120px rgba(30,100,200,0.12));
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ================================================
   LAYOUT
   ================================================ */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 48px; }
section { padding: 110px 0; }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.section-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  opacity: 0.6;
  max-width: 500px;
  margin-bottom: 64px;
  line-height: 1.7;
}

/* ================================================
   BUTTONS
   ================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #0a0a0a;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(53,206,141,0.3);
}
.btn:hover {
  background: #2ebd7e;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(53,206,141,0.4);
}
.btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.btn-ghost:hover {
  border-color: var(--green-border);
  background: var(--green-dim);
  transform: translateY(-2px);
}
.btn-ghost svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ================================================
   PAGE HERO (inner pages)
   ================================================ */
.page-hero {
  padding: 160px 48px 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero h1 {
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
}
.page-hero h1 span { color: var(--green); }

/* ================================================
   HOMEPAGE — SERVICES BENTO
   ================================================ */
.hp-services { padding: 120px 0; }

.hp-services-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
}
.hp-services-head h2 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.hp-services-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.7;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s, gap 0.25s;
}
.hp-services-more:hover { opacity: 1; gap: 13px; }
.hp-services-more svg { width: 13px; height: 13px; fill: var(--green); }

/* Bento grid */
/* News-style service list — magnetic + grow on hover */
.hp-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  row-gap: 6px;
}
.hp-list-item {
  display: grid;
  grid-template-columns: 184px 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px 0;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.hp-list-thumb {
  width: 184px;
  height: 168px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.hp-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.hp-list-item:hover .hp-list-thumb { transform: scale(1.05); }
.hp-list-item:hover .hp-list-thumb img { transform: scale(1.06); }
.hp-list-text {
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.hp-list-item:hover .hp-list-text { transform: scale(1.05); }
.hp-list-text h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
  transition: color 0.25s;
}
.hp-list-item:hover .hp-list-text h3 { color: var(--green); }
.hp-list-meta {
  font-size: 13px;
  font-weight: 500;
  color: rgba(232,240,255,0.4);
}

@media (max-width: 900px) {
  .hp-list { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 480px) {
  .hp-list-item { grid-template-columns: 116px 1fr; gap: 18px; }
  .hp-list-thumb { width: 116px; height: 108px; border-radius: 12px; }
  .hp-list-text h3 { font-size: 16px; margin-bottom: 8px; }
}

/* ================================================
   AI RESPONSE BOX — simple
   ================================================ */
.ai-box {
  max-width: 640px;
  margin: 0 0 52px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 22px 24px;
}
.ai-box-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}
.ai-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.ai-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.55;
}
.ai-typed {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  opacity: 0.85;
  min-height: 5em;
}
.ai-typed.typing::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1.05em;
  background: var(--green);
  margin-left: 3px;
  vertical-align: -3px;
  animation: ai-caret 1s steps(1) infinite;
}
@keyframes ai-caret { 50% { opacity: 0; } }
.ai-dots { display: inline-flex; gap: 5px; align-items: center; height: 1.4em; }
.ai-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.4;
  animation: ai-bounce 1.2s infinite;
}
.ai-dots i:nth-child(2) { animation-delay: 0.15s; }
.ai-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (max-width: 767px) {
  .ai-box { padding: 18px 20px; margin-bottom: 40px; }
  .ai-typed { font-size: 15px; min-height: 7em; }
}

/* ================================================
   HOMEPAGE — STATS STRIP
   ================================================ */
.hp-stats-strip {
  background: #0d0d0d;
  padding: 72px 0;
}
.hp-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hp-stat {
  text-align: center;
  flex: 1;
}
.hp-stat strong {
  display: block;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
  letter-spacing: -2px;
  margin-bottom: 10px;
}
.hp-stat strong span {
  font-size: 38px;
  letter-spacing: -1px;
}
.hp-stat em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.hp-stat-sep {
  width: 1px;
  height: 64px;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ================================================
   HOMEPAGE — WHY US
   ================================================ */

/* Brand mark visual */

/* Reasons — clean, icon-less */

/* ================================================
   HOMEPAGE — PROCESS
   ================================================ */
.hp-process { padding: 110px 0; }
.hp-process-head {
  text-align: center;
  margin-bottom: 80px;
}
.hp-process-head .section-title { margin-top: 12px; }
.hp-process-head .section-sub { margin-left: auto; margin-right: auto; text-align: center; }

.hp-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* Connecting line */
.hp-process-steps::before {
  content: '';
  position: absolute;
  top: 25px;
  left: calc(25% / 2 + 26px);
  right: calc(25% / 2 + 26px);
  height: 1px;
  background: linear-gradient(90deg, var(--green-border) 0%, rgba(53,206,141,0.08) 100%);
  pointer-events: none;
}

.hp-step {
  padding: 0 28px;
}
.hp-step:first-child { padding-left: 0; }
.hp-step:last-child { padding-right: 0; }

.hp-step-num {
  width: 52px; height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--green-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.hp-step h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hp-step p {
  font-size: 13px;
  opacity: 0.5;
  line-height: 1.8;
}

/* ================================================
   HOMEPAGE — CTA + COUNTDOWN
   ================================================ */
.hp-cta-section { padding: 100px 0 110px; }
.hp-cta-box {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.hp-cta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hp-cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.7) 32%, rgba(8,8,8,0.25) 62%, rgba(8,8,8,0.12) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.5) 0%, transparent 55%);
}
.hp-cta-content {
  position: relative;
  z-index: 2;
  padding: 0 40px 0 64px;
  max-width: 560px;
}
.hp-cta-content .section-label { margin-bottom: 16px; }
.hp-cta-content h2 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -2px;
  margin-bottom: 28px;
}

/* Countdown — glass boxes over the image */
@media (max-width: 767px) {
  .hp-cta-box { min-height: 400px; }
  .hp-cta-content { padding: 0 24px; max-width: 100%; }
  .hp-cta-content h2 { font-size: 34px; letter-spacing: -1px; margin-bottom: 22px; }
  .hp-cta-box::before {
    background: linear-gradient(0deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.55) 50%, rgba(8,8,8,0.35) 100%);
  }
}

/* ================================================
   HOMEPAGE — CLIENTS
   ================================================ */
/* ================================================
   CLIENTS — MARQUEE STRIP
   ================================================ */
.hp-clients {
  padding: 100px 0 80px;
  background: linear-gradient(180deg, var(--bg) 0%, #0e0e0e 100%);
  overflow: hidden;
}
.hp-clients-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 60px;
  padding: 0 24px;
}
.hp-clients-header h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -1.4px;
}

/* Logo grid — simple white boxes, color logos, magnetic hover */
.hp-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 880px;
  margin: 0 auto 56px;
}
.hp-logo-card {
  background: #fff;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  padding: 0 40px;
  text-decoration: none;
  transition: transform 0.25s ease-out, box-shadow 0.3s;
  will-change: transform;
}
.hp-logo-card:hover {
  box-shadow: 0 16px 44px rgba(0,0,0,0.45);
}
.hp-logo-card img {
  max-height: 54px;
  max-width: 200px;
  width: auto;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.hp-clients-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 0 24px;
}
.hp-clients-cta span {
  font-size: 15px;
  opacity: 0.5;
}

/* ================================================
   TJENESTER PAGE
   ================================================ */
.tjenester-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 80px;
}
.tjenester-intro-text h2 { font-size: 44px; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.tjenester-intro-text p { font-size: 16px; opacity: 0.65; line-height: 1.85; }
.tjenester-intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  text-align: center;
}
.stat-box strong {
  display: block;
  font-size: 42px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-box span { font-size: 13px; opacity: 0.55; font-weight: 500; }

.tjenester-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.tjeneste-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: visible;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.tjeneste-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--green-border);
}
.tjeneste-card-img-wrap {
  position: relative;
  height: 260px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.tjeneste-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tjeneste-card:hover .tjeneste-card-img-wrap img { transform: scale(1.05); }
.tjeneste-card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(18,18,18,0.6) 100%);
}
.tjeneste-icon-badge {
  position: absolute;
  bottom: -22px;
  left: 32px;
  width: 52px; height: 52px;
  background: var(--green);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(53,206,141,0.45);
  transition: transform 0.3s;
}
.tjeneste-card:hover .tjeneste-icon-badge { transform: scale(1.08); }
.tjeneste-icon-badge svg { width: 22px; height: 22px; fill: #0a0a0a; }
.tjeneste-card-body {
  padding: 44px 32px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tjeneste-card-body h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.tjeneste-card-body p {
  opacity: 0.62;
  line-height: 1.8;
  font-size: 14px;
  flex: 1;
  margin-bottom: 28px;
}

/* ================================================
   ABOUT PAGE
   ================================================ */
.about-hero-box {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 72px 64px;
  text-align: center;
  margin-bottom: 48px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.about-hero-box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.about-hero-box h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.25;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.about-hero-box p {
  font-size: 16px;
  opacity: 0.7;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.85;
}
/* Minimal team — no boxes */
.team-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 22px;
  background: var(--bg-card);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.team-member:hover .team-photo img { transform: scale(1.04); }
.team-photo--mono {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #151515, #0c0c0c);
}
.team-photo--mono span {
  font-size: 70px;
  font-weight: 800;
  color: var(--green);
  opacity: 0.85;
}
.team-member h3 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 14px;
}
.team-contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  opacity: 0.55;
  margin-bottom: 9px;
  transition: color 0.25s, opacity 0.25s;
}
.team-contact a:last-child { margin-bottom: 0; }
.team-contact a svg { width: 14px; height: 14px; fill: var(--green); flex-shrink: 0; }
.team-contact a:hover { color: var(--green); opacity: 1; }

/* ================================================
   OM OSS PAGE — REDESIGN
   ================================================ */
.om-hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 60px;
}
.om-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.om-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.5) 34%, transparent 64%),
    linear-gradient(0deg, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.2) 30%, transparent 55%);
}
.om-hero .container {
  position: relative;
  z-index: 2;
  max-width: none;
}
.om-hero-inner {
  max-width: 470px;
}
.om-hero-inner h1 {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
}
.om-hero-tag {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.65;
  margin-top: 16px;
}
.om-hero-inner p {
  font-size: 17px;
  color: var(--text);
  opacity: 0.82;
  line-height: 1.65;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .om-hero { min-height: 520px; padding: 110px 0 60px; }
  .om-hero-inner { max-width: 100%; margin-left: 0; }
  .om-hero-inner h1 { font-size: 46px; letter-spacing: -1px; }
  .om-hero-inner p { font-size: 15px; }
}

.om-section { padding: 84px 0; }
.om-narrow { max-width: 720px; }
.om-section .section-label { margin-bottom: 18px; display: inline-block; }
.om-section h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -1.2px;
  margin-bottom: 24px;
}
.om-section h2 span {
  background: linear-gradient(120deg, var(--green), #6ee7b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.om-narrow > p {
  font-size: 17px;
  line-height: 1.85;
  opacity: 0.6;
}
.om-vision { background: #0a0a0a; }
.om-vision-inner {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 64px;
  align-items: center;
}
.om-vision-text { max-width: 540px; }
.om-vision-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.om-vision-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  .om-vision-inner { grid-template-columns: 1fr; gap: 36px; }
  .om-vision-img { max-width: 420px; }
}
.om-team-head { text-align: center; margin-bottom: 48px; }
.om-team-head h2 { font-size: 34px; letter-spacing: -1px; margin-bottom: 0; }
@media (max-width: 767px) {
  .om-section { padding: 56px 0; }
  .om-section h2 { font-size: 28px; letter-spacing: -0.5px; }
  .om-team-head h2 { font-size: 26px; }
}

/* ================================================
   KONTAKT PAGE — REDESIGN
   ================================================ */
.kontakt-info { padding: 90px 0 110px; }
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 820px;
}
.kontakt-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px 30px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-decoration: none;
  color: var(--text);
  transition: border-color .3s, transform .3s, background .3s;
}
.kontakt-item:hover {
  border-color: var(--green-border);
  transform: translateY(-4px);
  background: #1c1c1c;
}
.kontakt-ico {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kontakt-ico svg { width: 22px; height: 22px; fill: var(--green); }
.kontakt-meta { display: flex; flex-direction: column; gap: 4px; }
.kontakt-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.5;
  font-weight: 600;
}
.kontakt-v { font-size: 17px; font-weight: 600; }
@media (max-width: 640px) {
  .kontakt-info { padding: 60px 0 80px; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .kontakt-item { padding: 22px 24px; }
}

/* ================================================
   BLI PARTNER
   ================================================ */
/* ================================================
   KONTAKT — FANCY FORM
   ================================================ */
.kx-section { padding: 90px 0 110px; }
.kx-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.kx-left h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 6px 0 18px;
}
.kx-lead {
  font-size: 15.5px;
  opacity: 0.6;
  line-height: 1.75;
  margin-bottom: 32px;
  max-width: 380px;
}
.kx-left .kontakt-item { margin-bottom: 14px; display: flex; }

.kx-form-wrap { position: relative; }
.kx-form-glow {
  position: absolute;
  inset: -40px -60px;
  background: radial-gradient(ellipse at 70% 20%, rgba(53,206,141,0.14), transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
.kx-form-card {
  position: relative;
  background: linear-gradient(180deg, rgba(31,31,31,0.85), rgba(16,16,16,0.85));
  border: 1px solid var(--green-border);
  border-radius: var(--radius-lg);
  padding: 40px 40px 36px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.kx-form-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.kx-form-card h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.kx-form-sub { font-size: 14px; opacity: 0.55; margin-bottom: 26px; }
.kx-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.kx-field { margin-bottom: 18px; }
.kx-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kx-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  opacity: 0.75;
}
.kx-field label span { opacity: 0.5; font-weight: 400; }
.kx-field input,
.kx-field textarea {
  width: 100%;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 11px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  resize: vertical;
}
.kx-field input::placeholder,
.kx-field textarea::placeholder { color: rgba(232,240,255,0.25); }
.kx-field input:focus,
.kx-field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(53,206,141,0.15);
  background: rgba(10,10,10,0.8);
}
.kx-submit { width: 100%; justify-content: center; margin-top: 6px; }
.kx-privacy {
  display: block;
  text-align: center;
  font-size: 11.5px;
  opacity: 0.35;
  margin-top: 14px;
}
.kx-error {
  background: rgba(220,80,80,0.12);
  border: 1px solid rgba(220,80,80,0.35);
  color: #f0a0a0;
  border-radius: 10px;
  font-size: 13px;
  padding: 11px 14px;
  margin-bottom: 18px;
}
.kx-success { text-align: center; padding: 40px 10px; }
.kx-success-ico {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-success-ico svg { width: 24px; height: 24px; fill: var(--green); }
.kx-success h3 { font-size: 28px; font-weight: 800; margin-bottom: 10px; }
.kx-success p { font-size: 15px; opacity: 0.6; line-height: 1.7; max-width: 320px; margin: 0 auto; }

@media (max-width: 900px) {
  .kx-grid { grid-template-columns: 1fr; gap: 44px; }
  .kx-form-card { padding: 30px 24px 28px; }
  .kx-field-row { grid-template-columns: 1fr; gap: 0; }
  .kx-left h2 { font-size: 32px; }
}

/* ================================================
   CONTACT PAGE
   ================================================ */
.contact-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}
.contact-card h2 { font-size: 32px; font-weight: 800; margin-bottom: 48px; }
.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 0;
  font-size: 18px;
}
.contact-item svg { width: 22px; height: 22px; fill: var(--green); flex-shrink: 0; }
.contact-item a { color: var(--text); text-decoration: none; transition: color 0.25s; }
.contact-item a:hover { color: var(--green); }

/* ================================================
   SHOP / PRODUCTS PAGE
   ================================================ */
.shop-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
  display: block;
}
.shop-section-title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.shop-section-sub {
  font-size: 16px;
  opacity: 0.6;
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 48px;
}

/* Featured product */
.product-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  margin-bottom: 96px;
}
.product-featured-img {
  background: #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  min-height: 440px;
}
.product-featured-img img { max-width: 100%; max-height: 380px; object-fit: contain; display: block; }
.product-featured-info {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
  width: fit-content;
}
.product-featured-info h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}
.product-featured-info p {
  font-size: 15px;
  opacity: 0.65;
  line-height: 1.8;
  margin-bottom: 32px;
}
.product-features { list-style: none; margin-bottom: 36px; }
.product-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.75;
  padding: 6px 0;
}
.product-features li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.product-price {
  font-size: 36px;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 28px;
}
.product-price span { font-size: 16px; opacity: 0.5; font-weight: 400; color: var(--text); }

/* Tier cards */
.tiers-header { text-align: center; margin-bottom: 48px; }
.tiers-header h2 { font-size: 40px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; }
.tiers-header p { opacity: 0.6; font-size: 16px; }
.tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 96px;
}
.tier-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.tier-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--green-border);
}
.tier-card.featured {
  border-color: var(--green-border);
  position: relative;
}
.tier-popular-badge {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--green);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 20px;
  border-radius: 0 0 12px 12px;
  white-space: nowrap;
}
.tier-img {
  background: #0d0d0d;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.tier-img img { max-height: 160px; max-width: 100%; object-fit: contain; }
.tier-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.tier-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.tier-price { font-size: 32px; font-weight: 800; color: var(--green); margin-bottom: 20px; }
.tier-price span { font-size: 14px; opacity: 0.5; font-weight: 400; color: var(--text); }
.tier-desc { font-size: 13px; opacity: 0.6; line-height: 1.7; margin-bottom: 18px; }
.tier-features { list-style: none; margin: 0 0 24px; flex: 1; }
.tier-features li {
  position: relative;
  font-size: 13px;
  opacity: 0.78;
  line-height: 1.4;
  padding: 9px 0 9px 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.tier-features li:first-child { border-top: none; }
.tier-features li::before {
  content: '';
  position: absolute;
  left: 1px; top: 12px;
  width: 10px; height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.tier-body .btn { width: 100%; justify-content: center; font-size: 14px; padding: 13px 20px; }

/* Shop CTA */
.shop-cta {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
}
.shop-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.shop-cta h2 { font-size: 36px; font-weight: 800; margin-bottom: 12px; }
.shop-cta p { opacity: 0.6; margin-bottom: 36px; font-size: 16px; }

/* ================================================
   LEGAL PAGES
   ================================================ */
.legal-content {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 64px;
  max-width: 780px;
  margin: 0 auto;
  border: 1px solid var(--card-border);
}
.legal-content h2 { font-size: 30px; font-weight: 800; margin-bottom: 40px; }
.legal-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 10px;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.legal-content p { margin-bottom: 14px; opacity: 0.75; line-height: 1.85; font-size: 15px; }

/* ================================================
   FOOTER — samme stil som navbaren
   ================================================ */
/* Footeren er moerkere enn siden, og boksene har samme farge som siden
   og navbaren, saa de loefter seg litt opp fra flaten. Ingen streker. */
.site-footer { background: #0A0A0A; }

.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
}

.footer-top {
  padding: 72px 0 28px;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.15fr;
  gap: 14px;
  align-items: stretch;
}

/* Merkevaren ligger utenfor boksene */
.footer-brand { padding: 6px 28px 0 0; }
.footer-logo img { height: 28px; width: auto; display: block; margin-bottom: 18px; }
.footer-tagline {
  font-size: 14px;
  color: rgba(232,240,255,0.66);
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 260px;
}

/* Runde fliser med linjeikoner, som i megamenyen */
.footer-socials { display: flex; gap: 10px; }
.footer-socials a,
.footer-ikon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--indigo-dim, rgba(84,56,220,0.26));
  color: var(--indigo-lys, #D2C8FA);
  transition: background .2s, color .2s, transform .25s cubic-bezier(0.22,1,0.36,1);
}
.footer-socials a { width: 38px; height: 38px; line-height: 0; }
.footer-socials svg { width: 18px; height: 18px; display: block; }
.footer-socials a:hover {
  background: var(--indigo, #5438DC);
  color: #fff;
  transform: scale(1.06);
}

/* Kolonnene som bokser */
.footer-col {
  background: #121212;
  border-radius: 22px;
  padding: 18px 22px 20px;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(232,240,255,0.4);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col ul li a,
.footer-col ul li span {
  color: rgba(232,240,255,0.75);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.2s;
}
/* Hover er farge, som i navbaren */
.footer-col ul li a:hover { color: var(--green); }
.footer-col ul li a.footer-link-accent { color: var(--green); }

/* Kontaktradene: flis + tekst */
.footer-col ul li .footer-rad { display: flex; align-items: center; gap: 11px; }
.footer-ikon { width: 32px; height: 32px; }
.footer-ikon svg { width: 16px; height: 16px; display: block; }
.footer-col ul li a.footer-rad:hover .footer-ikon { background: var(--indigo, #5438DC); color: #fff; }
.footer-col ul li .footer-rad .footer-ikon { color: var(--indigo-lys, #D2C8FA); }
.footer-col ul li a.footer-rad:hover .footer-ikon { color: #fff; }

/* Bunnlinjen: ingen strek, bare luft */
.footer-bottom {
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 13px; color: rgba(232,240,255,0.58); margin: 0; }
.footer-legal a {
  font-size: 13px;
  color: rgba(232,240,255,0.58);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--green); }

/* Payment marks — flat monochrome, no pills */
.footer-pay {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-pay-mark {
  opacity: 0.38;
  filter: brightness(0) invert(1);
  transition: opacity 0.2s;
  display: block;
}
.footer-pay:hover .footer-pay-mark { opacity: 0.6; }
img.footer-pay-mark { height: 15px; width: auto; }
.footer-pay-klarna {
  display: flex;
  align-items: center;
  gap: 5px;
  filter: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.footer-pay-klarna img {
  height: 13px; width: auto;
  filter: brightness(0) invert(1);
  display: block;
}
.footer-pay-note {
  font-size: 12px;
  color: rgba(232,240,255,0.22);
  letter-spacing: 0.3px;
  padding-left: 4px;
}

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; padding: 0 0 18px; }
}
@media (max-width: 767px) {
  .footer-container { padding: 0 20px; }
  .footer-top { grid-template-columns: 1fr; gap: 10px; padding: 56px 0 20px; }
  .footer-tagline { max-width: 100%; }
  .footer-col { border-radius: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-legal { gap: 16px; }
  .footer-pay { flex-wrap: wrap; gap: 16px; }
}

/* ================================================
   PAYMENT SECTION (footer + produkter page)
   ================================================ */

/* Shared badge styles */
.pay-badge {
  background: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: opacity 0.2s, transform 0.2s;
}
.pay-badge:hover { opacity: 0.9; transform: translateY(-1px); }
.pay-badge img { display: block; }
.pay-badge--klarna { gap: 7px; }
.pay-badge--klarna span {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.3px;
}
.pay-badge--vipps { padding: 0; overflow: hidden; background: transparent; }
.pay-badge--vipps img { height: 38px; width: auto; border-radius: 8px; }

/* Produkter payment strip */
.payment-strip {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 24px 32px;
  margin-bottom: 64px;
}
.payment-strip-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.payment-strip-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 200px;
}
.payment-strip-left svg { fill: var(--green); opacity: 0.7; flex-shrink: 0; }
.payment-strip-left strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.payment-strip-left span {
  font-size: 12px;
  opacity: 0.45;
}
.payment-strip-logos {
  display: flex;
  align-items: center;
  gap: 10px;
}
.payment-strip-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(232,240,255,0.35);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.payment-strip-right svg { fill: var(--green); opacity: 0.5; }

/* ================================================
   NAV DROPDOWN
   ================================================ */
.nav-has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
/* Usynlig bro over mellomrommet, saa hover ikke ryker paa vei ned i panelet. */
.nav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 18px;
}
.nav-has-dropdown > a {
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-chevron {
  width: 10px;
  height: 10px;
  fill: currentColor;
  opacity: 0.5;
  transition: transform .25s, opacity .2s;
  flex-shrink: 0;
}
.nav-has-dropdown:hover .nav-chevron,
.nav-has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); opacity: 1; }

/* Egen knapp for mobil-trekkspillet. Paa desktop er den i veien. */
.nav-sub-toggle { display: none; }

/* --- Megameny ------------------------------------------------------------ */
/* Panelet gaar i full bredde under headeren. Hver kategori ligger i sin egen
   runde boks, saa gruppene leses som tre ting i stedet for én lang liste. */
.nav-mega {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  z-index: 1001;
  /* Samme farge som headeren og siden, saa nav-flaten er én flate. */
  background: #121212;
  box-shadow: 0 26px 60px rgba(0,0,0,0.45);
  /* Skyggen skal bare gaa nedover. Uten klippingen sprer den seg ogsaa opp
     over bunnen av navbaren og gjoer de nederste pikslene et hakk moerkere,
     som ga et synlig skille mellom navbaren og menyen. */
  clip-path: inset(0 -120px -120px -120px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .28s cubic-bezier(0.22,1,0.36,1);
}
.nav-has-dropdown:hover .nav-mega,
.nav-has-dropdown:focus-within .nav-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-mega-inner {
  max-width: var(--max-width, 1140px);
  margin: 0 auto;
  padding: 20px 48px 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  /* Like hoye bokser, ellers ser raden taggete ut naar kategoriene har
     ulikt antall tjenester. */
  align-items: stretch;
}

.nav-mega-kol {
  /* Et hakk lysere enn panelet, ellers forsvinner boksene. Skillet mot
     navbaren kom fra skyggen, ikke herfra. */
  background: #1B1B1B;
  border-radius: 22px;
  padding: 16px 10px 10px;
}

.nav-mega-tittel {
  display: block;
  margin: 0 0 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(232,240,255,0.4);
}

.site-nav .nav-mega a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  opacity: 1;
  background: transparent;
}
.site-nav .nav-mega a:hover { background: transparent; }

/* Rund, myk flis — ingen kant, bare en svak toning. */
.nav-mega-ikon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(53,206,141,0.1);
  color: var(--green);
  transition: background .2s, transform .25s cubic-bezier(0.22,1,0.36,1);
}
.nav-mega-ikon svg { width: 20px; height: 20px; fill: none; display: block; }
.site-nav .nav-mega a:hover .nav-mega-ikon {
  background: rgba(53,206,141,0.2);
  transform: scale(1.06);
}

.nav-mega-tekst { display: flex; flex-direction: column; min-width: 0; }
.nav-mega-tekst strong {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  transition: color .2s;
}
.site-nav .nav-mega a:hover .nav-mega-tekst strong { color: var(--green); }

.site-nav .nav-mega a.nav-mega-alle {
  grid-column: 1 / -1;
  justify-self: end;
  gap: 7px;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(232,240,255,0.55);
}
.site-nav .nav-mega a.nav-mega-alle:hover { color: var(--green); }
.nav-mega-alle svg { width: 14px; height: 14px; fill: none; transition: transform .25s; }
.site-nav .nav-mega a.nav-mega-alle:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) and (min-width: 768px) {
  .nav-mega-inner { grid-template-columns: repeat(2, 1fr); padding: 18px 32px 24px; }
}


/* ================================================
   NAV INDICATOR (follow-mouse underline)
   ================================================ */
.site-nav { position: relative; }
/* ================================================
   SERVICE SUBPAGES
   ================================================ */
.service-overview { padding: 80px 0 0; }
.service-overview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.service-overview-text h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
.service-overview-text p {
  font-size: 16px;
  opacity: 0.7;
  line-height: 1.85;
  margin-bottom: 32px;
}
.service-overview-img img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: block;
  object-fit: cover;
  height: 380px;
}

.process-showcase {
  margin-top: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}
.process-showcase img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.process-gallery {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.process-gallery img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.feature-item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  border: 1px solid var(--card-border);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.feature-item:hover {
  border-color: var(--green-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.feature-item-icon {
  width: 44px; height: 44px;
  background: var(--green-dim);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.feature-item-icon svg { width: 20px; height: 20px; fill: var(--green); }
.feature-item h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.feature-item p {
  font-size: 13px;
  opacity: 0.6;
  line-height: 1.75;
}

.process-header { text-align: center; margin-bottom: 48px; }
.process-header h2 { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.process-header p { opacity: 0.6; font-size: 16px; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.process-step {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  border: 1px solid var(--card-border);
  text-align: center;
  position: relative;
}
.process-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
  font-size: 20px;
  opacity: 0.4;
  z-index: 1;
}
.step-number {
  width: 52px; height: 52px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--green);
  margin: 0 auto 20px;
}
.process-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.process-step p { font-size: 13px; opacity: 0.6; line-height: 1.75; }

.service-page-cta {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 80px 64px;
  text-align: center;
  border: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.service-page-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
}
.service-page-cta h2 { font-size: 38px; font-weight: 800; margin-bottom: 12px; }
.service-page-cta p {
  opacity: 0.6;
  margin-bottom: 36px;
  font-size: 16px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.service-page-cta .btn { margin: 0 auto; }

.tjeneste-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: gap 0.25s ease;
  margin-top: auto;
}
.tjeneste-card-link svg { width: 14px; height: 14px; fill: var(--green); transition: transform 0.25s; }
.tjeneste-card:hover .tjeneste-card-link { gap: 14px; }
.tjeneste-card:hover .tjeneste-card-link svg { transform: translateX(2px); }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .service-overview-inner { gap: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 40px; }
  .cta-left h2 { font-size: 38px; }
  .clients-section h2 { font-size: 40px; }
  .hp-clients-header h2 { font-size: 40px; }
  .tiers-grid { grid-template-columns: repeat(3, 1fr); }
  .product-featured { grid-template-columns: 1fr; }
  .product-featured-img { min-height: 300px; }
}

@media (max-width: 767px) {
  .site-header { padding: 0 20px; height: 62px; }
  .site-nav {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 62px; left: 0; right: 0;
    /* Hoyden regnes fra bunnen av skjermen, ikke fra en gjettet verdi:
       med dynamisk adresselinje er 100vh stoerre enn det som faktisk vises. */
    max-height: calc(100dvh - 62px);
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #121212;
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  .site-nav.open { display: flex; }
  /* Basisregelen sentrerer med align-items: center. I en loddrett liste blir
     det ujevnt saa snart ett punkt (Tjenester) maa vaere fullbredde. */
  .site-nav { align-items: stretch; }
  .site-nav a { padding: 13px 16px; font-size: 16px; border-radius: 10px; text-align: left; }
  .hamburger { display: flex; }

  /* Bakgrunnen skal ligge stille naar menyen er aapen. */
  body.meny-aapen { overflow: hidden; }

  /* Hamburgeren blir et kryss. */
  .hamburger.er-aapen span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger.er-aapen span:nth-child(2) { opacity: 0; }
  .hamburger.er-aapen span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Trekkspill i stedet for en alltid utslaatt liste: sju tjenester dyttet
     innloggingslenken under skjermkanten paa lave telefoner. */
  .nav-has-dropdown {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
  }
  .nav-has-dropdown::after { display: none; }
  .nav-chevron { display: none; }
  .nav-has-dropdown > a { flex: 1; }

  .nav-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    flex-shrink: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
  }
  .nav-sub-toggle svg {
    width: 12px; height: 12px;
    fill: currentColor;
    opacity: .5;
    transition: transform .25s, opacity .2s;
  }
  .nav-sub-toggle:hover svg { opacity: 1; }
  .nav-has-dropdown.er-aapen .nav-sub-toggle svg { transform: rotate(180deg); opacity: 1; }

  .nav-mega {
    position: static;
    width: 100%;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: none;
    box-shadow: none;
    display: none;
  }
  .nav-has-dropdown.er-aapen .nav-mega { display: block; }

  .nav-mega-inner {
    display: block;
    max-width: none;
    padding: 4px 0 8px;
  }
  .nav-mega-kol { margin-bottom: 8px; border-radius: 18px; padding: 12px 6px 6px; }
  .nav-mega-kol:last-child { margin-bottom: 0; }
  .nav-mega-tittel { margin: 0 0 4px 12px; font-size: 11.5px; }

  .site-nav .nav-mega a { padding: 9px 10px; gap: 12px; font-size: 15px; }
  .nav-mega-ikon { width: 34px; height: 34px; }
  .nav-mega-ikon svg { width: 19px; height: 19px; }
  .site-nav .nav-mega a.nav-mega-alle { justify-content: flex-start; margin-top: 4px; padding: 10px 16px; }

  .hp-services { padding: 80px 0; }
  .hp-services-head { margin-bottom: 36px; }
  .hp-services-head h2 { font-size: 24px; letter-spacing: -0.4px; }
  .hp-services-more { font-size: 13px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .services-intro-inner { flex-direction: column; padding: 32px 24px; gap: 32px; }
  .services-intro-img { max-width: 100%; }
  .cta-wrap { padding: 0 20px 80px; }
  .cta-box { flex-direction: column; padding: 40px 28px; gap: 40px; }
  .cta-left h2 { font-size: 30px; }
  .clients-section { padding: 80px 24px; }
  .clients-section h2 { font-size: 28px; }
  .hp-clients { padding: 72px 0 64px; }
  .hp-clients-header { margin-bottom: 40px; }
  .hp-clients-header h2 { font-size: 30px; letter-spacing: -0.5px; }
  .hp-clients-header p { font-size: 15px; }
  .hp-logo-grid { grid-template-columns: 1fr; gap: 14px; max-width: 360px; margin-bottom: 40px; }
  .hp-logo-card { height: 100px; padding: 0 32px; }
  .hp-logo-card img { max-height: 36px; max-width: 150px; }
  .hp-clients-cta { flex-direction: column; text-align: center; gap: 14px; }
  .tjenester-grid { grid-template-columns: 1fr; }
  .tjenester-intro { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; margin-bottom: 48px; }
  .tjenester-intro-text h2 { font-size: 30px; }
  .tjeneste-card-img-wrap { height: 200px; }
  .tjeneste-card-body { padding: 40px 24px 28px; }
  .about-hero-box { padding: 40px 28px; }
  .about-hero-box h2 { font-size: 24px; }
  .contact-card { padding: 40px 24px; }
  .legal-content { padding: 32px 24px; }
  .page-hero { padding: 120px 24px 56px; }
  .page-hero h1 { font-size: 36px; }
  .section-title { font-size: 30px; }
  .container { padding: 0 20px; }
  section { padding: 72px 0; }
  .btn { font-size: 14px; padding: 14px 26px; }
  .tiers-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-featured { grid-template-columns: 1fr; }
  .product-featured-img { min-height: 240px; padding: 32px; }
  .product-featured-info { padding: 36px 28px; }
  .product-featured-info h2 { font-size: 24px; }
  .product-price { font-size: 28px; }
  .shop-cta { padding: 40px 28px; }
  .shop-cta h2 { font-size: 26px; }
  .service-overview-inner { grid-template-columns: 1fr; gap: 32px; }
  .service-overview-img img { height: 260px; }
  .process-showcase { margin-top: 44px; }
  .process-showcase img { height: 240px; }
  .process-gallery { grid-template-columns: 1fr; margin-top: 44px; gap: 14px; }
  .process-gallery img { height: 220px; }
  .feature-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
  .service-page-cta { padding: 48px 28px; }
  .service-page-cta h2 { font-size: 26px; }
}

/* ================================================
   NETTSIDER PAGE — REDESIGN
   ================================================ */
.nw-hero {
  position: relative;
  padding: 150px 0 90px;
  overflow: clip;
}
.nw-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 82% 25%, rgba(53,206,141,0.10), transparent 70%);
  pointer-events: none;
}
.nw-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.nw-hero-text h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 6px 0 22px;
}
.nw-hero-text h1 span {
  background: linear-gradient(120deg, var(--green), #6ee7b0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nw-hero-text > p {
  font-size: 18px; opacity: 0.7; line-height: 1.7;
  max-width: 520px; margin-bottom: 32px;
}
.nw-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.nw-hero-visual { position: relative; }
.nw-hero-glow {
  position: absolute; inset: -10% -8%;
  background: radial-gradient(circle at 50% 50%, rgba(53,206,141,0.22), rgba(53,206,141,0.05) 45%, transparent 70%);
  filter: blur(24px); z-index: 0;
  animation: globe-pulse 5s ease-in-out infinite;
}
.nw-hero-img {
  position: relative; z-index: 1;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  display: block;
}
.nw-float {
  position: absolute; z-index: 2;
  background: rgba(18,18,18,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--green-border);
  border-radius: 14px;
  padding: 11px 15px;
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 11px;
  animation: nw-float-anim 4.5s ease-in-out infinite;
}
.nw-float svg { width: 18px; height: 18px; fill: var(--green); flex-shrink: 0; }
.nw-float strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.nw-float span { font-size: 11px; opacity: 0.6; }
.nw-float--1 { top: 18px; left: 18px; }
.nw-float--2 { bottom: 18px; right: 18px; animation-delay: 1.6s; }
@keyframes nw-float-anim {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.nw-overview { padding: 50px 0 70px; }
.nw-overview-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.nw-overview-img img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--card-border); box-shadow: var(--shadow);
  display: block;
}
.nw-overview-text h2 { font-size: 38px; font-weight: 800; line-height: 1.15; margin-bottom: 20px; }
.nw-overview-text p { opacity: 0.7; line-height: 1.8; margin-bottom: 16px; }
.nw-overview-text .btn-ghost { margin-top: 12px; }

.nw-features { padding: 40px 0 20px; }

.nw-portfolio { padding: 90px 0; }
.nw-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.nw-card {
  position: relative; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--card-border); box-shadow: var(--shadow);
  text-decoration: none; aspect-ratio: 3 / 2;
}
.nw-card--wide { grid-column: span 2; aspect-ratio: 22 / 9; }
.nw-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.nw-card:hover img { transform: scale(1.05); }
.nw-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.25) 45%, transparent 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
}
.nw-card-overlay .tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--green); background: rgba(53,206,141,0.12);
  border: 1px solid var(--green-border);
  padding: 5px 12px; border-radius: 50px; margin-bottom: 12px;
}
.nw-card-overlay h3 { font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.nw-card-overlay p { font-size: 13px; opacity: 0.72; line-height: 1.5; }

.nw-mobile {
  padding: 70px 0;
  position: relative;
  overflow: clip;
}
.nw-mobile-inner {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 60px;
  align-items: center;
}
.nw-mobile-text h2 { font-size: 40px; font-weight: 800; line-height: 1.12; margin-bottom: 20px; }
.nw-mobile-text > p { font-size: 17px; opacity: 0.7; line-height: 1.8; max-width: 480px; }
.nw-mobile-points { margin-top: 28px; flex-direction: column; gap: 14px; align-items: flex-start; }
.nw-mobile-points li { font-size: 15px; opacity: 0.9; }
.nw-mobile-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.nw-mobile-glow {
  position: absolute;
  width: 90%; height: 80%;
  top: 10%; left: 5%;
  background: radial-gradient(circle at 50% 50%, rgba(53,206,141,0.20), rgba(255,140,40,0.06) 45%, transparent 72%);
  filter: blur(30px);
  z-index: 0;
  animation: globe-pulse 5s ease-in-out infinite;
}
.nw-mobile-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  display: block;
}

.nw-process { padding: 20px 0 100px; }
.nw-shop { padding: 30px 0 60px; }
.nw-shop .process-header { margin-bottom: 52px; }

/* ================================================
   NETTSIDER — LUXE ANIMATIONS + PRICE BUILDER
   ================================================ */
/* Bold centered hero */
.nwx-hero {
  position: relative;
  padding: 170px 0 40px;
  text-align: center;
  overflow: hidden;
}
.nwx-hero-glow {
  position: absolute;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(53,206,141,0.16) 0%, rgba(53,206,141,0.04) 45%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}
.nwx-hero .container { position: relative; z-index: 1; }
.nwx-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 26px;
  animation: hero-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
.nwx-hero-title {
  font-size: 82px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -3px;
  margin-bottom: 22px;
  animation: hero-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
/* Rotating word */
.nwx-rotator {
  display: block;
  position: relative;
  height: 1.08em;
  overflow: hidden;
}
.nwx-word {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(105%);
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
  background: linear-gradient(120deg, var(--green) 10%, #6ee7b0 50%, var(--green) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nwx-word.is-active { opacity: 1; transform: translateY(0); }
.nwx-word.is-out { opacity: 0; transform: translateY(-105%); }
@media (prefers-reduced-motion: reduce) {
  .nwx-word { display: none; }
  .nwx-word.is-active, .nwx-word:first-child { display: block; opacity: 1; transform: none; }
}
.nwx-hero-sub {
  font-size: 19px;
  opacity: 0.6;
  letter-spacing: 0.2px;
  margin-bottom: 38px;
  animation: hero-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.22s both;
}
.nwx-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: hero-fade-up 0.8s cubic-bezier(0.22,1,0.36,1) 0.34s both;
}
.nwx-hero-panel {
  position: relative;
  z-index: 1;
  margin-top: 74px;
  animation: hero-fade-up 1s cubic-bezier(0.22,1,0.36,1) 0.5s both;
}
.nwx-hero-panel img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
@media (max-width: 767px) {
  .nwx-hero { padding: 130px 0 20px; }
  .nwx-hero-title { font-size: 44px; letter-spacing: -1.5px; }
  .nwx-hero-sub { font-size: 15px; }
  .nwx-hero-panel { margin-top: 48px; }
  .nwx-hero-panel img { max-height: 260px; }
}

/* Scroll reveal */
.nwx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.nwx-reveal.in-view { opacity: 1; transform: translateY(0); }
.nwx-d1 { transition-delay: 0.12s; }
.nwx-d2 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .nwx-reveal { opacity: 1; transform: none; transition: none; }
}

/* Tier cards — luxe hover + animated featured border */
.nwx-tiers .tier-card {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s, border-color 0.5s,
              opacity 0.9s cubic-bezier(0.22,1,0.36,1);
}
.nwx-tiers .tier-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 40px rgba(53,206,141,0.08);
}
.nwx-tiers .tier-card.featured {
  overflow: visible;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(120deg, rgba(53,206,141,0.7), rgba(53,206,141,0.08) 40%, rgba(53,206,141,0.08) 60%, rgba(110,231,176,0.7)) border-box;
  border: 1px solid transparent;
  animation: nwx-border-pulse 4s ease-in-out infinite;
}
@keyframes nwx-border-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(53,206,141,0); }
  50% { box-shadow: 0 0 42px rgba(53,206,141,0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .nwx-tiers .tier-card.featured { animation: none; }
}

/* Builder */
.nwx-builder { padding: 60px 0 100px; }
.nwx-builder .process-header { margin-bottom: 52px; }
.nwx-builder-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: start;
}
.nwx-group { margin-bottom: 34px; }
.nwx-group h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 14px;
}
.nwx-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  background: rgba(31,31,31,0.45);
  transition: border-color 0.3s, background 0.3s, transform 0.3s cubic-bezier(0.22,1,0.36,1);
  user-select: none;
}
.nwx-opt:hover { border-color: rgba(53,206,141,0.35); transform: translateX(4px); }
.nwx-opt.active {
  border-color: var(--green-border);
  background: rgba(53,206,141,0.07);
}
.nwx-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
  margin: 0;
}
.nwx-opt input[type=radio] { border-radius: 50%; }
.nwx-opt input:checked {
  background: var(--green);
  border-color: var(--green);
}
.nwx-opt input:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 9px;
  border-right: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  transform: rotate(45deg);
}
.nwx-opt input[type=radio]:checked::after {
  left: 5px; top: 5px;
  width: 7px; height: 7px;
  border: none;
  border-radius: 50%;
  background: #0a0a0a;
  transform: none;
}
.nwx-opt-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nwx-opt-name { font-size: 14.5px; font-weight: 600; }
.nwx-opt-desc { font-size: 12px; opacity: 0.45; }
.nwx-opt-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Summary */
.nwx-summary { position: sticky; top: 96px; }
.nwx-summary-inner {
  background: linear-gradient(180deg, rgba(31,31,31,0.85), rgba(18,18,18,0.85));
  border: 1px solid var(--green-border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nwx-sum-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 18px;
}
.nwx-sum-list { list-style: none; margin: 0 0 20px; padding: 0; }
.nwx-sum-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0.8;
}
.nwx-sum-list li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nwx-sum-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  padding-top: 6px;
}
.nwx-sum-total span { font-size: 14px; opacity: 0.6; }
.nwx-sum-total strong {
  font-size: 34px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.nwx-sum-btn { width: 100%; justify-content: center; }
.nwx-sum-note {
  display: block;
  text-align: center;
  font-size: 11.5px;
  opacity: 0.4;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .nwx-builder-grid { grid-template-columns: 1fr; }
  .nwx-summary { position: static; }
}

@media (max-width: 980px) {
  .nw-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .nw-overview-inner { grid-template-columns: 1fr; gap: 36px; }
  .nw-overview-img { order: -1; }
  .nw-mobile-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .nw-mobile-text > p { margin: 0 auto; }
  .nw-mobile-points { align-items: center; }
}
@media (max-width: 767px) {
  .nw-hero { padding: 120px 0 60px; }
  .nw-hero-text h1 { font-size: 40px; letter-spacing: -1px; }
  .nw-hero-text > p { font-size: 15px; }
  .nw-overview-text h2 { font-size: 28px; }
  .nw-gallery { grid-template-columns: 1fr; }
  .nw-card, .nw-card--wide { grid-column: span 1; aspect-ratio: 16 / 10; }
  .nw-card-overlay { padding: 20px; }
  .nw-card-overlay h3 { font-size: 18px; }
  .nw-float { display: none; }
  .nw-mobile-text h2 { font-size: 28px; }
  .nw-mobile-visual img { max-width: 300px; }
}

/* ================================================
   BRAND — DRAGON ICON ACCENTS
   ================================================ */
.site-logo img { height: 26px; width: auto; display: block; }
/* Dragon watermark — service CTA */
.service-page-cta::after {
  content: "";
  position: absolute;
  right: 28px; bottom: 28px;
  width: 132px; height: 132px;
  background: url("images/icon.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.service-page-cta h2,
.service-page-cta p,
.service-page-cta .btn { position: relative; z-index: 1; }


@media (max-width: 767px) {
  .service-page-cta::after { width: 90px; height: 90px; right: 18px; bottom: 18px; }
}

/* ================================================
   TJENESTER PAGE — REDESIGN
   ================================================ */
.tj-hero {
  text-align: center;
  padding: 150px 0 60px;
  position: relative;
}
.tj-hero h1 {
  font-size: 64px; font-weight: 800; letter-spacing: -2px; line-height: 1.05;
  margin-bottom: 20px;
}
.tj-hero h1 span {
  background: linear-gradient(120deg, var(--green), #6ee7b0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tj-hero > .container > p {
  font-size: 18px; opacity: 0.7; max-width: 640px; margin: 0 auto 48px; line-height: 1.7;
}
.tj-hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 880px; margin: 0 auto;
}
.tj-hero-stats .stat-box {
  background: var(--bg-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-md); padding: 24px 16px; text-align: center;
}
.tj-hero-stats .stat-box strong {
  display: block; font-size: 36px; font-weight: 800; color: var(--green); line-height: 1;
  margin-bottom: 8px;
}
.tj-hero-stats .stat-box span { font-size: 13px; opacity: 0.6; }

.tj-services { padding: 50px 0 90px; }
.tj-featured {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
}
.tj-grid-rest {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.tj-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: var(--text);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.tj-card:hover {
  transform: translateY(-4px);
  border-color: var(--green-border);
  box-shadow: var(--shadow-hover);
}
.tj-card-img { height: 220px; overflow: hidden; }
.tj-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.tj-card:hover .tj-card-img img { transform: scale(1.05); }
.tj-card-body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.tj-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--green-dim); border: 1px solid var(--green-border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.tj-card-icon svg { width: 24px; height: 24px; fill: var(--green); }
.tj-card-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.tj-card-body p { font-size: 14px; opacity: 0.65; line-height: 1.7; margin-bottom: 20px; flex: 1; }
.tj-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--green);
}
.tj-card-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform 0.3s; }
.tj-card:hover .tj-card-link svg { transform: translateX(4px); }

@media (max-width: 980px) {
  .tj-grid-rest { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tj-hero { padding: 120px 0 48px; }
  .tj-hero h1 { font-size: 40px; letter-spacing: -1px; }
  .tj-hero > .container > p { font-size: 15px; }
  .tj-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tj-hero-stats .stat-box strong { font-size: 28px; }
  .tj-featured { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
  .tj-grid-rest { grid-template-columns: 1fr; gap: 16px; }
  .tj-card-img { height: 180px; }
  .tj-card-body { padding: 26px; }
}

/* ================================================
   CAZH — produktside
   ================================================ */

/* Appikonet: mørk avrundet firkant med Z-merket oppi */
.cazh-icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: #141614;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.cazh-icon img { width: 44%; height: auto; display: block; }
.cazh-icon--sm { width: 52px; height: 52px; border-radius: 14px; box-shadow: none; }

/* --- Hero -------------------------------------------------------------- */
.cazh .cazh-hero { padding: 150px 0 90px; text-align: center; }
.cazh-hero-inner { display: flex; flex-direction: column; align-items: center; }

.cazh-wordmark { height: 44px; width: auto; margin: 26px 0 0; display: block; }
.cazh-wordmark--text {
  height: auto;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--green);
  line-height: 1;
}

.cazh-status {
  display: inline-block;
  margin: 18px 0 26px;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cazh-hero h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 24px;
  max-width: 800px;
}
.cazh-lead {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(232,240,255,0.55);
  max-width: 560px;
  margin: 0 0 32px;
}

.cazh-meta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cazh-meta span {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(232,240,255,0.45);
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50px;
}

/* --- Delte overskrifter ------------------------------------------------ */
.cazh-h2 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text);
  margin: 0 0 14px;
}
.cazh-h2-sub { font-size: 15px; color: rgba(232,240,255,0.45); margin: 0 0 44px; }

/* --- Funksjoner -------------------------------------------------------- */
.cazh .cazh-features { padding: 100px 0; }
.cazh-features .section-label,
.cazh-pricing .section-label { display: inline-block; }

.cazh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}
.cazh-card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  transition: border-color .25s, transform .25s;
}
.cazh-card:hover { border-color: var(--green-border); transform: translateY(-3px); }

.cazh-card-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--green-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.cazh-card-icon svg { width: 20px; height: 20px; fill: var(--green); }

.cazh-card h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.cazh-card p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Personvern -------------------------------------------------------- */
.cazh .cazh-privacy { padding: 0 0 100px; }
.cazh-privacy-box {
  background: linear-gradient(135deg, rgba(53,206,141,0.07), rgba(53,206,141,0.02));
  border: 1px solid var(--green-border);
  border-radius: var(--radius-lg);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cazh-privacy-copy .cazh-h2 { margin-bottom: 16px; }
.cazh-privacy-copy p { font-size: 15px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

.cazh-privacy-list { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; }
.cazh-privacy-list li { display: flex; gap: 15px; align-items: flex-start; }
.cazh-privacy-list svg { width: 17px; height: 17px; fill: var(--green); flex-shrink: 0; margin-top: 3px; }
.cazh-privacy-list strong { display: block; font-size: 14.5px; color: var(--text); margin-bottom: 3px; }
.cazh-privacy-list span { display: block; font-size: 13.5px; line-height: 1.65; color: rgba(232,240,255,0.45); }

/* --- Pris -------------------------------------------------------------- */
.cazh .cazh-pricing { padding: 0 0 100px; text-align: center; }
.cazh-pricing .cazh-h2-sub { margin-bottom: 40px; }

.cazh-price-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 34px;
  text-align: left;
}
.cazh-price-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.cazh-price-head strong { display: block; font-size: 17px; font-weight: 700; color: var(--text); }
.cazh-price-head span { display: block; font-size: 13px; color: rgba(232,240,255,0.4); margin-top: 2px; }

.cazh-price-tag {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.4px;
  color: var(--green);
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--card-border);
  line-height: 1.1;
}
.cazh-price-tag span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(232,240,255,0.35);
  margin-top: 7px;
}

.cazh-price-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 28px; padding: 0; }
.cazh-price-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: rgba(232,240,255,0.6);
}
.cazh-price-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* Bevisst ikke en <a> — det er ingenting å trykke på ennå */
.cazh-price-cta {
  display: block;
  text-align: center;
  padding: 15px 28px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.16);
  color: rgba(232,240,255,0.4);
  font-size: 15px;
  font-weight: 700;
  cursor: default;
  user-select: none;
}
.cazh-price-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.3);
  text-align: center;
  margin: 14px 0 0;
}

/* --- CTA --------------------------------------------------------------- */
.cazh .cazh-cta-wrap { padding: 0 0 110px; }
.cazh-cta {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
}
.cazh-cta h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.8px; color: var(--text); margin: 0 0 12px; }
.cazh-cta p { font-size: 15px; color: rgba(232,240,255,0.5); margin: 0 0 30px; }

/* --- Responsivt -------------------------------------------------------- */
@media (max-width: 900px) {
  .cazh-privacy-box { grid-template-columns: 1fr; gap: 40px; padding: 40px 32px; }
}
@media (max-width: 767px) {
  .cazh .cazh-hero { padding: 120px 0 70px; }
  .cazh-hero h1 { font-size: 34px; letter-spacing: -1px; }
  .cazh-lead { font-size: 15.5px; }
  .cazh-icon { width: 80px; height: 80px; border-radius: 20px; }
  .cazh-wordmark { height: 36px; }
  .cazh-wordmark--text { font-size: 36px; }
  .cazh-h2 { font-size: 27px; }
  .cazh .cazh-features { padding: 70px 0; }
  .cazh .cazh-privacy { padding: 0 0 70px; }
  .cazh .cazh-pricing { padding: 0 0 70px; }
  .cazh-cta { padding: 44px 26px; }
  .cazh-cta h2 { font-size: 24px; }
  .cazh .cazh-cta-wrap { padding: 0 0 80px; }
}


/* ================================================
   FORSIDE — MANAGEMENT SYSTEMS
   ================================================ */
.hp-mgmt { padding: 120px 0 30px; }

.hp-mgmt-head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.hp-mgmt-head .section-label { display: inline-block; }
.hp-mgmt-head h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: var(--text);
  margin: 0;
}

/* --- Eksempelsystemet --------------------------------------------------- */
/* App-ikonet til venstre, vinduet til hoeyre — samme komposisjon som
   skissen. Innsiden er lys med vilje: det skal leses som et ekte program. */
/* Telefon til venstre, vinduet i midten, lager og e-post til hoeyre — koblet
   sammen med linjer, saa det leses som ett system og ikke fire ting. */
.hp-demo {
  --demo: #5438DC;
  --kobling: 56px;               /* lengden paa linjene mellom delene */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "tlf vindu hoyre";
  column-gap: var(--kobling);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.hp-demo-vindu {
  grid-area: vindu;
  min-width: 0;
  background: var(--demo);
  border-radius: 38px;
  padding: 0 14px 14px;
}

/* --- Koblingene --------------------------------------------------------- */
.hp-node { position: relative; }

/* Linjen */
.hp-node::before {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--kobling);
  height: 2px;
  margin-top: -1px;
  background: var(--demo);
}
.hp-node--venstre::before { left: 100%; }
.hp-node--hoyre::before   { right: 100%; }

/* En prikk som gaar fra systemet ut til enheten: data som flyter. */
.hp-node::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #A99BFF;
  box-shadow: 0 0 10px rgba(84,56,220,0.9);
  opacity: 0;
  animation: 2.8s linear infinite;
}
.hp-node--venstre::after { left: 100%;  animation-name: hp-flyt-venstre; }
.hp-node--hoyre::after   { right: 100%; animation-name: hp-flyt-hoyre; }
.hp-demo-hoyre .hp-flis:nth-child(1) .hp-node::after { animation-delay: .9s; }
.hp-demo-hoyre .hp-flis:nth-child(2) .hp-node::after { animation-delay: 1.8s; }

@keyframes hp-flyt-venstre {
  0%   { transform: translateX(calc(var(--kobling) - 8px)); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes hp-flyt-hoyre {
  0%   { transform: translateX(calc(8px - var(--kobling))); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes hp-flyt-opp {
  0%   { transform: translateY(calc(8px - var(--kobling))); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-node::after { animation: none; display: none; }
}

/* --- Telefonen ---------------------------------------------------------- */
.hp-demo-tlf { grid-area: tlf; }
.hp-tlf {
  width: 172px;
  padding: 9px;
  border-radius: 36px;
  background: var(--demo);
}
.hp-tlf-hoyttaler {
  position: absolute;
  top: 17px; left: 50%;
  width: 46px; height: 6px;
  margin-left: -23px;
  border-radius: 6px;
  background: #1C1B2E;
  z-index: 1;
}
.hp-tlf-skjerm {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 318px;
  padding: 26px 10px 12px;
  border-radius: 28px;
  background: #F6F5FC;
  color: #1C1B2E;
  text-align: left;
}
.hp-tlf-app { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.hp-tlf-app strong { font-size: 13px; font-weight: 700; }
.hp-tlf-ikon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--demo);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.hp-tlf-kort {
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
}
.hp-tlf-kort em { display: block; font-style: normal; font-size: 10px; color: #6B6A80; }
.hp-tlf-kort b  { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.hp-tlf-kort .hp-chip { display: inline-block; margin-top: 6px; font-size: 10px; padding: 2px 8px; }

/* --- Lager og e-post ---------------------------------------------------- */
.hp-demo-hoyre {
  grid-area: hoyre;
  display: flex;
  flex-direction: column;
  gap: 38px;
}
.hp-flis { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hp-flis-ikon {
  width: 104px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 28px;
  background: var(--demo);
  color: #fff;
}
.hp-flis-ikon svg { width: 46px; height: 46px; display: block; }
.hp-flis-merke {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 26px; height: 26px;
  padding: 0 7px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50px;
  background: var(--green);
  color: #0A0A0A;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 0 0 4px #121212;
}
.hp-flis-tekst {
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(232,240,255,0.66);
  white-space: nowrap;
}

.hp-demo-tittel {
  text-align: center;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  padding: 16px 0 14px;
}

.hp-demo-flate {
  display: grid;
  grid-template-columns: 150px 1fr;
  background: #F6F5FC;
  border-radius: 26px;
  overflow: hidden;
  color: #1C1B2E;
  text-align: left;
}

.hp-demo-meny {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 12px;
  background: #EFEDF9;
}
.hp-demo-meny span {
  font-size: 13px;
  font-weight: 500;
  color: #5E5C73;
  padding: 9px 12px;
  border-radius: 10px;
}
.hp-demo-meny span.er-aktiv {
  background: #fff;
  color: var(--demo);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(28,27,46,0.06);
}

.hp-demo-innhold { padding: 20px 22px 22px; min-width: 0; }

.hp-demo-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hp-demo-topp strong { font-size: 17px; font-weight: 700; }
.hp-demo-topp span { font-size: 12px; color: #6B6A80; }

.hp-demo-tall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.hp-demo-tall > div,
.hp-demo-kort {
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}
.hp-demo em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: #6B6A80;
}
.hp-demo-tall b {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.hp-demo-tall i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #6B6A80;
}
.hp-demo-tall i.opp { color: #13754C; }
.hp-demo-tall i.varsel { color: #95600F; }

.hp-demo-rad {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.hp-demo-soyler {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 118px;
  margin-top: 12px;
}
.hp-demo-soyler span {
  flex: 1;
  height: var(--h);
  background: var(--demo);
  opacity: .35;
  border-radius: 6px 6px 3px 3px;
}
.hp-demo-soyler span:last-child { opacity: 1; }
.hp-demo-dager { display: flex; gap: 8px; margin-top: 6px; }
.hp-demo-dager span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  color: #6B6A80;
  white-space: nowrap;
}

.hp-demo-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.hp-demo-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  font-weight: 500;
}
.hp-demo-liste li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 50px;
}
.hp-chip--betalt { background: #E2F5EB; color: #13754C; }
.hp-chip--pakkes { background: #FFF3DC; color: #8A5A0E; }
.hp-chip--sendt  { background: #ECE8FD; color: #4A2FC7; }

/* Med telefon og fliser ved siden av er vinduet for smalt til baade en meny
   og fire tall paa rad. Menyen gaar ut; telefonen viser appen uansett. */
.hp-demo-flate { grid-template-columns: 1fr; }
.hp-demo-meny { display: none; }

/* Under desktop-bredde: vinduet oeverst, og telefon, lager og e-post paa
   rad under. Linjene gaar da rett opp til vinduet. */
@media (max-width: 1024px) {
  .hp-mgmt-head h2 { font-size: 34px; }

  .hp-demo {
    --kobling: 36px;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "vindu vindu"
      "tlf   hoyre";
    column-gap: 20px;
    row-gap: var(--kobling);
    align-items: start;
  }
  .hp-demo-tall { grid-template-columns: repeat(2, 1fr); }

  .hp-demo-hoyre { flex-direction: row; justify-content: space-around; gap: 16px; }

  .hp-node::before,
  .hp-node--venstre::before,
  .hp-node--hoyre::before {
    top: auto; bottom: 100%;
    left: 50%; right: auto;
    width: 2px; height: var(--kobling);
    margin-top: 0; margin-left: -1px;
  }
  .hp-node::after,
  .hp-node--venstre::after,
  .hp-node--hoyre::after {
    top: auto; bottom: 100%;
    left: 50%; right: auto;
    margin-top: 0; margin-left: -4px;
    animation-name: hp-flyt-opp;
  }
}

/* Paa mobil krymper delene, og linjene blir kortere. */
@media (max-width: 767px) {
  .hp-mgmt { padding: 80px 0 20px; }
  .hp-mgmt-head { margin-bottom: 36px; }
  .hp-mgmt-head h2 { font-size: 28px; letter-spacing: -1px; }
  .hp-mgmt-head h2 br { display: none; }

  .hp-demo { --kobling: 28px; column-gap: 12px; }
  .hp-demo-vindu { border-radius: 26px; padding: 0 8px 8px; }
  .hp-demo-tittel { font-size: 19px; padding: 12px 0 10px; }
  .hp-demo-flate { border-radius: 19px; }
  .hp-demo-innhold { padding: 14px; }
  .hp-demo-tall b { font-size: 16px; }
  .hp-demo-rad { grid-template-columns: 1fr; }
  .hp-demo-soyler { height: 90px; }

  .hp-tlf { width: 132px; padding: 7px; border-radius: 28px; }
  .hp-tlf-hoyttaler { top: 13px; width: 36px; margin-left: -18px; height: 5px; }
  .hp-tlf-skjerm { min-height: 0; padding: 20px 7px 9px; border-radius: 22px; gap: 5px; }
  .hp-tlf-kort { padding: 7px 8px; border-radius: 10px; }
  .hp-tlf-kort b { font-size: 11.5px; }
  .hp-tlf-app strong { font-size: 11.5px; }

  /* Flisene blir staaende side om side, saa begge har fri vei opp til vinduet. */
  .hp-demo-hoyre { gap: 10px; }
  .hp-flis-ikon { width: 70px; height: 70px; border-radius: 20px; }
  .hp-flis-ikon svg { width: 32px; height: 32px; }
  .hp-flis-merke { min-width: 22px; height: 22px; font-size: 11.5px; top: -6px; right: -6px; }
  .hp-flis-tekst { font-size: 11.5px; }
}

/* ================================================
   FORSIDE — ETT SYSTEM (det kundene ser)
   ================================================ */
/* Management-seksjonen over viser bedriftens side av systemet. Denne viser
   kundenes side: nettsiden, appen og meldingene — koblet til samme kilde. */
.hp-core { padding: 110px 0 130px; }

.hp-core-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.hp-core-head .section-label { display: inline-block; }
.hp-core-head h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: var(--text);
  margin: 0 0 18px;
}
.hp-core-head p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 auto;
  max-width: 560px;
}

.hp-kunde {
  --demo: #5438DC;
  --kobling: 40px;
  --gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.hp-kunde-rad {
  display: grid;
  grid-template-columns: 1.55fr auto 1fr;
  gap: var(--gap);
  align-items: end;
}

.hp-kunde-del {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Linje ned fra hver del ... */
.hp-kunde-del::before {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 2px; height: var(--kobling);
  margin-left: -1px;
  background: var(--demo);
}
/* ... og en vannrett linje som samler dem. Hver del tegner sin bit, halve
   mellomrommet ut paa hver side, saa bitene moetes uansett bredde. */
.hp-kunde-del::after {
  content: "";
  position: absolute;
  top: calc(100% + var(--kobling) - 1px);
  left: calc(var(--gap) / -2);
  right: calc(var(--gap) / -2);
  height: 2px;
  background: var(--demo);
}
.hp-kunde-del:first-child::after { left: 50%; }
.hp-kunde-del:last-child::after  { right: 50%; }

.hp-kunde-kilde {
  position: relative;
  width: max-content;
  margin: calc(var(--kobling) * 2) auto 0;
  padding: 16px 42px;
  border-radius: 20px;
  background: var(--demo);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.hp-kunde-kilde::before {
  content: "";
  position: absolute;
  bottom: 100%; left: 50%;
  width: 2px; height: var(--kobling);
  margin-left: -1px;
  background: var(--demo);
}

.hp-kunde-tekst {
  position: relative;
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(232,240,255,0.66);
  text-align: center;
  white-space: nowrap;
}
/* Prikk som gaar fra systemet opp til det kunden ser */
.hp-kunde-tekst::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #A99BFF;
  box-shadow: 0 0 10px rgba(84,56,220,0.9);
  opacity: 0;
  animation: hp-kunde-flyt 2.8s linear infinite;
}
.hp-kunde-del:nth-child(2) .hp-kunde-tekst::after { animation-delay: .9s; }
.hp-kunde-del:nth-child(3) .hp-kunde-tekst::after { animation-delay: 1.8s; }
@keyframes hp-kunde-flyt {
  0%   { transform: translateY(calc(var(--kobling) - 8px)); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-kunde-tekst::after { animation: none; display: none; }
}

/* --- Rammene ------------------------------------------------------------ */
.hp-kunde-flate {
  width: 100%;
  background: var(--demo);
  border-radius: 30px;
  padding: 0 10px 10px;
}
.hp-nett-tittel {
  text-align: center;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 0 9px;
}
.hp-nett-adresse {
  display: inline-block;
  padding: 3px 16px;
  border-radius: 50px;
  background: rgba(255,255,255,0.18);
  font-size: 12.5px;
  font-weight: 600;
}

/* Nettsiden */
.hp-nett-side {
  background: #F6F5FC;
  border-radius: 21px;
  padding: 14px 18px 18px;
  color: #1C1B2E;
  text-align: left;
}
.hp-nett-meny {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  font-size: 11.5px;
  color: #6B6A80;
}
.hp-nett-meny .hp-tlf-ikon { margin-right: auto; }
.hp-nett-h {
  display: block;
  max-width: 280px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.hp-nett-knapp {
  display: inline-block;
  margin: 12px 0 18px;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--demo);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.hp-nett-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hp-nett-kort > div { background: #fff; border-radius: 12px; padding: 10px 11px; min-width: 0; }
.hp-nett-kort em { display: block; font-style: normal; font-size: 10.5px; color: #6B6A80; }
.hp-nett-kort b  { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hp-nett-kort i  { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; font-weight: 600; color: #13754C; }

/* Kundeappen (telefonrammen deles med management-seksjonen) */
.hp-tlf { position: relative; }
.hp-steg { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-steg li {
  position: relative;
  padding-left: 17px;
  font-size: 11px;
  color: #6B6A80;
}
.hp-steg li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  border: 2px solid #CFC9EE;
  box-sizing: border-box;
}
.hp-steg li.er-ferdig::before { background: var(--demo); border-color: var(--demo); }
.hp-steg li.er-naa { color: #1C1B2E; font-weight: 600; }
.hp-steg li.er-naa::before { border-color: var(--demo); background: #fff; box-shadow: 0 0 0 3px rgba(84,56,220,0.18); }
.hp-tlf-knapp {
  display: block;
  margin-top: auto;
  padding: 8px;
  border-radius: 10px;
  background: var(--demo);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}

/* Meldinger */
.hp-melding-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 21px;
  background: #F6F5FC;
}
.hp-melding {
  background: #fff;
  border-radius: 14px;
  padding: 11px 12px;
  color: #1C1B2E;
  text-align: left;
}
.hp-melding-topp { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 11.5px; }
.hp-melding-topp strong { font-weight: 600; }
.hp-melding-topp em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #6B6A80; }
.hp-melding b { display: block; font-size: 13px; font-weight: 700; }
.hp-melding p { margin: 3px 0 0; font-size: 11.5px; line-height: 1.5; color: #6B6A80; }

/* Under desktop: delene stables, og linjene gaar som en kjede ned til
   systemet i bunnen. */
@media (max-width: 1024px) {
  .hp-core-head h2 { font-size: 34px; }
  .hp-kunde-rad { display: flex; flex-direction: column; align-items: center; gap: var(--kobling); }
  .hp-kunde-del { width: 100%; }
  .hp-kunde-del--nett { max-width: 560px; }
  .hp-kunde-del--melding { max-width: 420px; }
  .hp-kunde-del::after { display: none; }
  .hp-kunde-kilde { margin-top: var(--kobling); }
  .hp-kunde-kilde::before { display: none; }
}

@media (max-width: 767px) {
  .hp-core { padding: 80px 0 90px; }
  .hp-core-head { margin-bottom: 36px; }
  .hp-core-head h2 { font-size: 28px; letter-spacing: -1px; }
  .hp-core-head p { font-size: 15px; }
  .hp-kunde { --kobling: 30px; }
  .hp-kunde-flate { border-radius: 24px; padding: 0 7px 7px; }
  .hp-nett-side, .hp-melding-liste { border-radius: 17px; }
  .hp-nett-side { padding: 12px 12px 14px; }
  .hp-nett-meny { gap: 10px; font-size: 10.5px; margin-bottom: 16px; }
  .hp-nett-h { font-size: 18px; }
  .hp-nett-kort { gap: 6px; }
  .hp-nett-kort > div { padding: 8px; }
  .hp-nett-kort b { font-size: 12px; }
  .hp-nett-kort i { font-size: 9.5px; }
}

/* ================================================
   FORSIDE — ÅRET GÅR (fremdriftslinje)
   ================================================ */
.hp-year {
  margin: 30px 0 36px;
  max-width: 460px;
  width: 100%;
}

.hp-year-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hp-year-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.4);
}
.hp-year-pct {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.hp-year-bar {
  position: relative;
  height: 6px;
  border-radius: 50px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.hp-year-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 50px;
  background: linear-gradient(90deg, #2aa876, var(--green) 70%, #6fe3b0);
  box-shadow: 0 0 16px rgba(53,206,141,0.55);
  transition: width 1s linear;
}
/* Lyspunkt i enden, så linja ser levende ut */
.hp-year-fill::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 10px; height: 10px;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: #b6f5d8;
  box-shadow: 0 0 12px rgba(53,206,141,0.9);
}

.hp-year-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: rgba(232,240,255,0.45);
}
.hp-year-note strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hp-year-fill { transition: none; }
}

@media (max-width: 767px) {
  .hp-year { margin: 24px 0 28px; }
  .hp-year-pct { font-size: 22px; }
  .hp-year-note { font-size: 13px; }
}

/* Lyspunktet i enden pulserer, saa linja lever uten aa regne i loekka */
@keyframes hp-year-puls {
  0%, 100% { transform: translate(50%,-50%) scale(1);   opacity: 1; }
  50%      { transform: translate(50%,-50%) scale(1.5); opacity: .55; }
}
.hp-year-fill::after { animation: hp-year-puls 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hp-year-fill::after { animation: none; }
}

/* Utklippsfigur i teamkortet: hele figuren skal vises, ikke beskjæres */
.team-photo--illu {
  background: linear-gradient(160deg, #1b1b1b, #0e0e0e);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.team-photo--illu picture { display: contents; }
.team-photo--illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* ================================================
   HERO
   ================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 80px 120px;
  background: #080808;
  overflow: hidden;
}

/* --- Bakgrunn: poster vises straks, video legger seg over --- */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #080808; }
.hero-video-el {
  /* Videofilen har et vannmerke nede til hoeyre, i de nederste 5,5 % av
     bildet. Elementet er derfor 108 % hoeyt og forankret i toppen, saa de
     nederste ~7,4 % havner utenfor .hero-media og klippes bort. Filen selv
     er urOErt — dette skjuler vannmerket i visningen. */
  width: 100%; height: 108%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-video-el.er-paa { opacity: 1; }
/* Posteren tegnes av <video> selv, saa den staar til videoen tar over */
.hero-video-el[poster] { opacity: 1; }

.hero-media::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.86) 32%, rgba(8,8,8,0.4) 66%, rgba(8,8,8,0.55) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.05) 45%, rgba(8,8,8,0.45) 100%);
}

/* --- Innhold --- */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 660px;
}

.hero h1 {
  font-size: clamp(42px, 7.4vw, 90px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -3.2px;
  color: var(--text);
  margin: 0 0 30px;
}
.hero h1 span {
  background: linear-gradient(120deg, var(--green) 0%, #6ee7b0 60%, #35ce8d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--green);
}

.hero p {
  font-size: 17.5px;
  line-height: 1.75;
  color: rgba(232,240,255,0.55);
  max-width: 470px;
  margin: 0 0 42px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

/* --- Scroll-pil --- */
.scroll-down {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--text);
  opacity: 0.28;
  animation: bounce 2.5s ease-in-out infinite;
  transition: opacity .25s;
}
.scroll-down:hover { opacity: 0.7; }
.scroll-down svg { fill: currentColor; display: block; }

/* --- Innkomst --- */
.hero-content > * { animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero h1      { animation-delay: 0.14s; }
.hero p       { animation-delay: 0.26s; }
.hero-actions { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .scroll-down { animation: none; }
}

@media (max-width: 1024px) {
  .hero { padding: 130px 48px 110px; }
  .hero h1 { letter-spacing: -2px; }
}
@media (max-width: 767px) {
  .hero {
    min-height: 88svh;
    padding: 120px 24px 96px;
    text-align: center;
  }
  .hero-content { max-width: 100%; }
  .hero h1 { letter-spacing: -1.4px; line-height: 1.04; }
  .hero p { font-size: 15.5px; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn, .hero-actions .btn-ghost { flex: 1 1 auto; justify-content: center; }
  .hero-media::after {
    background: linear-gradient(0deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.55) 55%, rgba(8,8,8,0.75) 100%);
  }
}

/* --- Teamet: én person, side ved side ----------------------------------- */
.team-solo {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: center;
  max-width: 840px;
}
.team-solo .team-photo { margin-bottom: 0; }

.team-rolle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.team-rolle svg { fill: currentColor; flex-shrink: 0; }

.team-solo-info h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text);
  margin: 0 0 14px;
}
.team-solo-info p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232,240,255,0.5);
  margin: 0 0 24px;
  max-width: 440px;
}

@media (max-width: 767px) {
  .team-solo { grid-template-columns: 1fr; gap: 28px; max-width: 380px; }
  .team-solo-info h3 { font-size: 23px; }
  .team-solo-info p { font-size: 14.5px; }
}

/* .hp-cta-img er absolutt posisjonert. Uten dette faar <picture>-wrapperen
   null hoeyde, og nettleseren utsetter lazy-lastingen i det uendelige. */
.hp-cta-box picture { display: contents; }

/* Dato i juridiske dokumenter */
.legal-dato {
  font-size: 13px !important;
  color: rgba(232,240,255,0.35) !important;
  margin-bottom: 28px !important;
}
.legal-content ul {
  margin: 0 0 18px 20px;
  padding: 0;
}
.legal-content li {
  font-size: 15px;
  line-height: 1.85;
  opacity: 0.75;
  margin-bottom: 8px;
}
.legal-content a { color: var(--green); text-decoration: none; }
.legal-content a:hover { text-decoration: underline; }

/* .om-hero-bg er absolutt posisjonert. Uten dette faar <picture>-wrapperen
   null hoeyde og forstyrrer layouten. Samme grunn som paa forsidens CTA. */
.om-hero picture { display: contents; }

/* ================================================
   NETTSIDER — REFERANSE
   ================================================ */
.nw-case { padding: 0 0 110px; }

.nw-case-box {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  align-items: stretch;
  transition: border-color .25s;
}
.nw-case-box:hover { border-color: var(--green-border); }

.nw-case-bilde {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0e0e0e;
  min-height: 340px;
}
.nw-case-bilde picture { display: contents; }
.nw-case-bilde img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.nw-case-box:hover .nw-case-bilde img { transform: scale(1.03); }

.nw-case-hint {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
}
.nw-case-hint svg { fill: currentColor; }
.nw-case-box:hover .nw-case-hint { opacity: 1; transform: translateY(0); }

.nw-case-info { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.nw-case-tag {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 13px;
  border-radius: 50px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.nw-case-info h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--text);
  margin: 0 0 14px;
}
.nw-case-info p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232,240,255,0.5);
  margin: 0 0 22px;
}

.nw-case-punkter { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.nw-case-punkter li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: rgba(232,240,255,0.62);
}
.nw-case-punkter li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.nw-case-lenke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.nw-case-lenke:hover { text-decoration: underline; }
.nw-case-lenke svg { fill: currentColor; }

@media (max-width: 900px) {
  .nw-case-box { grid-template-columns: 1fr; }
  .nw-case-bilde { min-height: 260px; }
  .nw-case-info { padding: 32px 26px; }
  .nw-case-hint { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .nw-case { padding: 0 0 70px; }
  .nw-case-info h3 { font-size: 23px; }
}

/* ================================================
   TJENESTER — ryddet opp
   ================================================ */
.tj-hero { padding: 150px 0 70px; text-align: left; }
.tj-hero .container { max-width: var(--max-width); }
.tj-hero .section-label { display: inline-block; margin-bottom: 16px; }
.tj-hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800;
  letter-spacing: -2.2px;
  line-height: 1.05;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 760px;
}
.tj-hero h1 span {
  background: linear-gradient(120deg, var(--green) 0%, #6ee7b0 60%, #35ce8d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Samme spesifisitet som den gamle sentreringsregelen, ellers vinner den */
.tj-hero > .container > p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.5);
  margin: 0;
  max-width: 620px;
}

/* Kortene: roligere, mindre dekor */
.tj-services { padding: 40px 0 100px; }
.tj-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--card-border);
  transition: border-color .25s, background .25s, transform .25s;
}
.tj-card:hover {
  border-color: var(--green-border);
  background: rgba(53,206,141,0.04);
  transform: translateY(-3px);
}
.tj-card-link { color: var(--green); font-weight: 600; }

@media (max-width: 767px) {
  .tj-hero { padding: 120px 0 50px; }
  .tj-hero h1 { letter-spacing: -1.2px; }
  .tj-hero > .container > p { font-size: 15.5px; }
  .tj-services { padding: 24px 0 70px; }
}


/* ================================================
   SEKUNDAERFARGE — #5438DC
   ================================================ */
/* Groent er fortsatt handling: tekst, knapper, aktiv lenke. Indigo er
   stemning: flater, gloed og stolper. Den har bare 2,7:1 kontrast mot
   bakgrunnen, saa den brukes aldri til tekst — der brukes den lyse tonen. */
:root {
  --indigo: #5438DC;
  --indigo-dim: rgba(84,56,220,0.26);
  --indigo-lys: #D2C8FA;
}

/* Megamenyen: ikonflisene faar indigo, og fylles helt ved hover. */
.nav-mega-ikon { background: var(--indigo-dim); color: var(--indigo-lys); }
.site-nav .nav-mega a:hover .nav-mega-ikon { background: var(--indigo); color: #fff; }


/* Aaret gaar: stolpen vokser fra indigo til groent. */
.hp-year-bar { background: rgba(84,56,220,0.2); }
.hp-year-fill {
  background: linear-gradient(90deg, var(--indigo), var(--green));
  box-shadow: 0 0 16px rgba(84,56,220,0.45);
}


/* ================================================
   REDESIGN — UNDERSIDER
   Samme stil som forsiden, navbaren og footeren:
   #121212 flate, kort i #1B1B1B uten kanter, ingen
   streker eller gloed, runde lilla ikonfliser.
   ================================================ */

/* Kortene paa undersidene bruker disse to verdiene. Ved aa endre dem her
   faar alle kortene ny farge og mister kanten paa én gang. */
:root {
  --bg-card: #1B1B1B;
  --card-border: transparent;
}

/* Ingen gronne streker over eller under bokser */
.about-hero-box::after,
.shop-cta::before,
.service-page-cta::before { display: none; }

/* Ingen gloed bak heroer og skjema */
.kx-form-glow,
.nw-hero::before,
.nw-hero-glow,
.nw-mobile-glow,
.nwx-hero-glow { display: none; }

/* Én bakgrunnsfarge for alle seksjoner */
.om-vision { background: #121212; }

/* Ikonfliser: runde og lilla, som i menyen og footeren */
.kontakt-ico,
.feature-item-icon,
.tj-card-icon,
.cazh-card-icon,
.kx-success-ico {
  background: var(--indigo-dim);
  border: 0;
  border-radius: 50%;
}
.kontakt-ico svg,
.feature-item-icon svg,
.tj-card-icon svg,
.cazh-card-icon svg,
.kx-success-ico svg { fill: var(--indigo-lys); }

/* Talltrinn (1, 2, 3) i samme lilla sirkel */
.step-number {
  background: var(--indigo-dim);
  border: 0;
  color: var(--indigo-lys);
}

/* Punktlisten i heroen paa innholdssiden. Stilen hadde forsvunnet, og da
   ble sjekkmerkene tegnet i full bredde — flere hundre piksler store. */
.hero-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(232,240,255,0.8);
}
.hero-points svg { width: 18px; height: 18px; fill: var(--green); flex-shrink: 0; }

/* --- Andre runde ---------------------------------------------------------- */

/* Hover: kortet loefter seg litt, men faar ingen gronn kant eller gloed. */
:root { --shadow-hover: 0 14px 40px rgba(0,0,0,0.45); }
.cazh-card:hover,
.feature-item:hover,
.kontakt-item:hover,
.nw-case-box:hover,
.nwx-opt:hover,
.tier-card:hover,
.tj-card:hover,
.tjeneste-card:hover { border-color: transparent; }

/* Pilene mellom stegene i lilla i stedet for gronne */
.process-step:not(:last-child)::after { color: var(--indigo-lys); opacity: 0.6; }

/* Ingen gront logomerke i hjoernet av CTA-boksene */
.service-page-cta::after { display: none; }

/* Kontaktskjemaet: vanlig kort, uten gronn kant og gloed */
.kx-form-card { background: var(--bg-card); border: 0; box-shadow: none; }

/* Heroer med bilde: moerkere venstreside, saa overskriften ikke kolliderer
   med tekst i selve bildet. */
.om-hero::after {
  background: linear-gradient(90deg, rgba(18,18,18,0.95) 0%, rgba(18,18,18,0.88) 45%, rgba(18,18,18,0.55) 100%);
}

/* Samme bakgrunn i alle seksjoner paa Om oss */
.om-section, .om-team { background: #121212; }

/* Merkelappene oppaa bildet paa innholdssiden */
.nw-float { background: #1B1B1B; border: 0; }
.nw-float svg { fill: var(--indigo-lys); }

/* Priskortene: fremhevet kort uten gronn kant, merket i lilla */
.tier-card.featured { border-color: transparent; }
.nwx-tiers .tier-card.featured { background: var(--bg-card); }
.tier-popular-badge { background: var(--indigo); color: #fff; }
.tier-features li { border-top: 0; }

/* Bygg-din-egen: valgene uten kanter, valgt rad markeres med lilla flate */
.nwx-opt { border: 0; }
.nwx-opt.active { border-color: transparent; background: rgba(84,56,220,0.18); }
.nwx-summary-inner { background: var(--bg-card); border: 0; box-shadow: none; }
.nwx-sum-list li { border-bottom: 0; }

/* Cazh: personvernboksen som vanlig kort */
.cazh-privacy-box { background: var(--bg-card); border: 0; }
.cazh-privacy-list svg { fill: var(--indigo-lys); }

/* Smaa ikoner ved siden av tekst */
.team-contact a svg,
.contact-item svg { fill: var(--indigo-lys); }

/* Seksjonshoder over rutenett sentreres, som paa forsiden */
.container:has(> .feature-grid) > .section-label,
.container:has(> .feature-grid) > .section-title { display: block; text-align: center; }

/* --- Tredje runde: typografi ----------------------------------------------- */
/* Samme overskriftsstorrelse som paa forsiden (42 px, 800), og luft ned til
   rutenettet under. */
.section-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.12;
}
.container:has(> .feature-grid) > .section-title { margin: 0 auto 48px; max-width: 720px; }
@media (max-width: 1024px) { .section-title { font-size: 34px; } }
@media (max-width: 767px)  { .section-title { font-size: 28px; letter-spacing: -1px; } }


/* ================================================
   FORSIDEN — HVER SEKSJON I EN RUND BOKS
   Boksene er #0A0A0A paa #121212, med et smalt
   mellomrom mot kantene og mellom hverandre.
   ================================================ */
.home main > section,
.home main > .hp-cta-section {
  --innrykk: 12px;
  margin: var(--innrykk);
  border-radius: 32px;
  background: #0A0A0A;
}

/* Heroen starter under den faste navbaren, og fyller resten av skjermen. */
.home main > .hero {
  margin-top: calc(70px + var(--innrykk));
  min-height: calc(100vh - 70px - 2 * var(--innrykk));
  min-height: calc(100svh - 70px - 2 * var(--innrykk));
  padding-top: 80px;
  overflow: hidden;
}
.home .hero-media { background: #0A0A0A; }

/* CTA-seksjonen er selve bildeboksen, ikke en boks rundt en boks. */
.home main > .hp-cta-section { padding: 0; background: transparent; }
.home .hp-cta-section > .container { max-width: none; padding: 0; }
.home .hp-cta-box { border-radius: 32px; min-height: 520px; }

/* Ringen rundt e-postmerket maa ha boksens farge, ellers synes den. */
.home .hp-flis-merke { box-shadow: 0 0 0 4px #0A0A0A; }

@media (max-width: 767px) {
  .home main > section,
  .home main > .hp-cta-section { --innrykk: 8px; border-radius: 24px; }
  .home main > .hero { margin-top: calc(62px + var(--innrykk)); min-height: calc(100svh - 62px - 2 * var(--innrykk)); padding-top: 56px; }
  .home .hp-cta-box { border-radius: 24px; min-height: 0; }
  /* Boksen har ikke lenger luft rundt seg, saa innholdet trenger egen. */
  .home .hp-cta-content { padding: 44px 24px 36px; }
}

/* «Kontakt oss nå» i Fremtiden-boksen: enkel knapp uten gloed.
   Hover gjoer den bare litt moerkere, den hopper ikke opp. */
.hp-cta-content .btn,
.hp-cta-content .btn:hover {
  box-shadow: none;
  transform: none;
}


/* Magnetisk hover i navbaren: menyradene vokser fra venstre, saa ikonet
   ikke skyves ut av raden. Paa mobil er det ingen bevegelse. */
.site-nav a { will-change: transform; }
.site-nav .nav-mega a { transform-origin: left center; }
@media (max-width: 767px), (hover: none) {
  .site-nav a { transform: none !important; will-change: auto; }
}


/* ================================================
   NETTSIDER — RYDDET, SAMME STIL SOM FORSIDEN
   Seksjonene i runde #0A0A0A-bokser, ingen gloed,
   ingen pulserende kanter og ingen gradienttekst.
   ================================================ */
.nw-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  border-radius: 32px;
  background: #0A0A0A;
  padding: 100px 0;
}
.nw-page > .nwx-hero {
  margin-top: calc(70px + var(--innrykk));
  padding: 110px 0 100px;
}
.nw-page .process-header { margin-bottom: 52px; }
.nw-page .tiers-grid { margin-bottom: 0; }

/* Ingen gloed paa knapper noe sted */
.btn,
.btn:hover { box-shadow: none; }
.btn:hover { transform: none; }

/* Heroen: rolig overskrift uten gradient */
.nwx-word {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--green);
}
.nwx-hero-title { font-size: 72px; letter-spacing: -2.6px; }
.nwx-hero-sub { font-size: 18px; margin-bottom: 34px; }

/* Priskortene: flate kort, ingen pulserende kant eller skygge */
.nwx-tiers .tier-card,
.nwx-tiers .tier-card.featured {
  background: #121212;
  border: 0;
  box-shadow: none;
  animation: none;
}
.nwx-tiers .tier-card:hover { transform: translateY(-4px); box-shadow: none; }

/* Bygg din egen */
.nwx-opt { background: #121212; }
.nwx-opt:hover { transform: none; background: #181818; }
.nwx-opt.active { background: rgba(84,56,220,0.18); }
.nwx-summary-inner { background: #121212; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Referansen */
.nw-case-box { background: #121212; border: 0; }
.nw-case-box:hover .nw-case-bilde img { transform: none; }
.nw-case-bilde { background: #1C1C1E; }
.nw-case-hint { backdrop-filter: none; background: #0A0A0A; }
.nw-case-tag { background: var(--indigo-dim); border: 0; color: var(--indigo-lys); }

/* --- Appen ------------------------------------------------------------- */
.nw-app {
  --gul: #FFB806;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  padding: 48px 56px;
  border-radius: var(--radius-lg);
  background: #121212;
  overflow: hidden;
}
.nw-app-tekst h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--text);
  margin: 0 0 14px;
}
.nw-app-tekst p {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232,240,255,0.5);
  margin: 0 0 26px;
  max-width: 440px;
}
.nw-app-butikker { display: flex; flex-wrap: wrap; gap: 10px; }
.nw-app-butikk {
  display: inline-flex;
  flex-direction: column;
  padding: 9px 18px;
  border-radius: 14px;
  background: #1B1B1B;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.nw-app-butikk small {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
}

.nw-app-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.nw-app-ikon { display: block; width: 100%; height: 100%; }
.nw-app-ikon-stor {
  width: 128px; height: 128px;
  flex-shrink: 0;
  border-radius: 30px;
  overflow: hidden;
}

.nw-app-tlf {
  width: 210px;
  padding: 9px;
  border-radius: 38px;
  background: #1C1C1E;
}
.nw-app-skjerm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 360px;
  padding: 22px 12px 12px;
  border-radius: 30px;
  background: #F6F5F2;
  color: #1C1B1A;
  text-align: left;
}
.nw-app-topp { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.nw-app-topp .nw-app-ikon { width: 26px; height: 26px; }
.nw-app-topp strong { font-size: 14px; font-weight: 700; }
.nw-app-kort { background: #fff; border-radius: 14px; padding: 11px 12px; }
.nw-app-kort em { display: block; font-style: normal; font-size: 10.5px; color: #75726B; }
.nw-app-kort b { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; }
.nw-app-kort span { display: block; margin-top: 2px; font-size: 11.5px; color: #75726B; }
.nw-app-kort i {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 50px;
  background: #FFF1CC;
  color: #7A5600;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
}
.nw-app-knapp {
  display: block;
  margin-top: auto;
  padding: 10px;
  border-radius: 12px;
  background: var(--gul);
  color: #1C1C1E;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 900px) {
  .nw-app { grid-template-columns: 1fr; padding: 36px 26px; }
}
@media (max-width: 767px) {
  .nw-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .nw-page > .nwx-hero { margin-top: calc(62px + var(--innrykk)); padding: 72px 0 64px; }
  .nwx-hero-title { font-size: 42px; letter-spacing: -1.4px; }
  .nw-app-tekst h3 { font-size: 23px; }
  .nw-app-visual { gap: 20px; }
  .nw-app-ikon-stor { width: 84px; height: 84px; border-radius: 20px; }
  .nw-app-tlf { width: 180px; border-radius: 32px; }
  .nw-app-skjerm { min-height: 320px; border-radius: 25px; }
}

/* Til salgs-boksen: kjoepsknapp og demolenke paa rad */
.nw-case-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.nw-case-handling .btn { padding: 13px 24px; font-size: 14px; }

/* ================================================
   PARTNERPROGRAM — SAMME STIL SOM FORSIDEN
   Seksjonene ligger i runde #0A0A0A-bokser, kortene
   er #121212, og ingenting gloeder.
   ================================================ */
.partner-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.partner-page > .pt-hero {
  margin-top: calc(70px + var(--innrykk));
  padding: 120px 0 110px;
  text-align: center;
}
.pt-hero .section-label { display: inline-block; }
.pt-hero-tittel {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -2.6px;
  margin: 0 0 22px;
}
.pt-pct { color: var(--green); }
.pt-hero-sub {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}
.pt-hero-knapper { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Felles seksjonshode */
.pt-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.pt-head .section-label { display: inline-block; }
.pt-head h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0 0 16px;
}
.pt-head p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0;
}

/* --- Stegene ------------------------------------------------------------ */
.pt-steg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pt-steg-kort {
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 34px 32px 36px;
}
.pt-steg-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--indigo-dim);
  color: var(--indigo-lys);
  font-size: 16px;
  font-weight: 800;
}
.pt-steg-kort h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.4px; margin: 0 0 10px; }
.pt-steg-kort p { font-size: 14.5px; line-height: 1.8; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Nivaaene ----------------------------------------------------------- */
.pt-niva-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.pt-kort {
  position: relative;
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 34px 32px 36px;
}
.pt-kort--valgt { background: #161425; }
.pt-kort-merke {
  position: absolute;
  top: 18px; right: 18px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--indigo);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pt-kort-navn {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.5);
}
.pt-kort-pct {
  display: block;
  margin: 10px 0 4px;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--green);
}
.pt-kort-krav { display: block; font-size: 13.5px; color: rgba(232,240,255,0.5); }
.pt-kort-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.pt-kort-liste li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(232,240,255,0.66);
}
.pt-kort-liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* --- Regnestykket ------------------------------------------------------- */
.pt-tabell {
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  max-width: 900px;
  margin: 0 auto;
}
.pt-rad {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 14px;
  font-size: 15px;
  font-weight: 600;
}
.pt-rad + .pt-rad { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.pt-rad--topp {
  padding: 10px 14px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.4);
}
.pt-rad span { font-variant-numeric: tabular-nums; }
.pt-hoy { color: var(--green); font-weight: 800; }
.pt-fotnote {
  max-width: 900px;
  margin: 18px auto 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(232,240,255,0.38);
}

/* --- Avslutning --------------------------------------------------------- */
.pt-cta-boks {
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 70px 40px;
  text-align: center;
}
.pt-cta-boks h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0 0 16px;
}
.pt-cta-boks p {
  max-width: 520px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .pt-hero-tittel { font-size: 54px; letter-spacing: -2px; }
  .pt-head h2, .pt-cta-boks h2 { font-size: 34px; }
  .pt-steg, .pt-niva-kort { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .partner-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .partner-page > .pt-hero { margin-top: calc(62px + var(--innrykk)); padding: 78px 0 70px; }
  .pt-hero-tittel { font-size: 40px; letter-spacing: -1.4px; }
  .pt-hero-sub { font-size: 15px; }
  .pt-head { margin-bottom: 36px; }
  .pt-head h2, .pt-cta-boks h2 { font-size: 28px; letter-spacing: -1px; }
  .pt-kort-pct { font-size: 40px; }
  .pt-cta-boks { padding: 48px 24px; }

  /* Tabellen blir til kort: hver celle faar etiketten sin foran seg. */
  .pt-rad--topp { display: none; }
  .pt-rad {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 6px;
  }
  .pt-rad span { display: flex; justify-content: space-between; gap: 12px; }
  .pt-rad span::before {
    content: attr(data-etikett);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(232,240,255,0.4);
  }
  .pt-rad span:first-child { font-size: 17px; font-weight: 700; }
  .pt-rad span:first-child::before { display: none; }
}

/* --- Soeknadsskjemaet --------------------------------------------------- */
.pt-skjema {
  max-width: 760px;
  margin: 0 auto;
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 40px 44px 44px;
}
.pt-rutenett { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pt-felt { display: block; margin-bottom: 18px; }
.pt-felt > span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(232,240,255,0.75);
}
.pt-felt > span em { font-style: normal; font-weight: 500; opacity: 0.45; }
.pt-rutenett .pt-felt { margin-bottom: 0; }
.pt-felt input,
.pt-felt textarea {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: #1B1B1B;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  transition: background 0.2s, box-shadow 0.2s;
}
.pt-felt textarea { resize: vertical; min-height: 120px; }
.pt-felt input:focus,
.pt-felt textarea:focus {
  outline: none;
  background: #202020;
  box-shadow: 0 0 0 2px var(--green-border);
}
.pt-felt input::placeholder,
.pt-felt textarea::placeholder { color: rgba(232,240,255,0.3); }

.pt-gruppe { border: 0; padding: 0; margin: 24px 0 22px; }
.pt-gruppe legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(232,240,255,0.75);
}
.pt-valg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pt-kryss {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #1B1B1B;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(232,240,255,0.75);
}
.pt-kryss input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin: 0;
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.pt-kryss input:checked { background: var(--green); border-color: var(--green); }
.pt-kryss input:checked::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 9px;
  border-right: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  transform: rotate(45deg);
}
.pt-kryss input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pt-kryss--samtykke { background: transparent; padding: 4px 0 0; margin-bottom: 26px; font-size: 13.5px; }
.pt-lenke { color: var(--green); text-decoration: underline; }

.pt-skjema .btn { width: 100%; justify-content: center; }
.pt-skjema .pt-fotnote { text-align: center; margin: 14px auto 0; }

/* Honningkrukka: borte for folk, men ikke display:none — den skal fylles
   ut av roboter som leser skjemaet. */
.pt-felle {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.pt-melding {
  max-width: 760px;
  margin: 0 auto 20px;
  padding: 16px 20px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.6;
}
.pt-melding--ok   { background: var(--green-dim); color: var(--green); }
.pt-melding--feil { background: rgba(255,107,107,0.12); color: #ff9b9b; }

@media (max-width: 767px) {
  .pt-skjema { padding: 28px 22px 32px; }
  .pt-rutenett, .pt-valg { grid-template-columns: 1fr; }
}

/* --- Innlogging i stedet for skjema ------------------------------------- */
.pt-innlogg {
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 40px 40px;
  border-radius: var(--radius-lg);
  background: #121212;
  text-align: center;
}
.pt-innlogg-ikon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
}
.pt-innlogg-ikon svg { width: 26px; height: 26px; }
.pt-innlogg h3 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
}
.pt-innlogg p {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(232,240,255,0.5);
  margin: 0 auto 26px;
  max-width: 420px;
}
.pt-innlogg-knapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pt-innlogg .pt-fotnote { text-align: center; margin-top: 18px; }

/* Kontaktsiden: samme to knapper i skjemakortet */
.kx-innlogg { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 16px; }
.kx-innlogg .btn,
.kx-innlogg .btn-ghost { width: 100%; justify-content: center; }

@media (max-width: 767px) {
  .pt-innlogg { padding: 32px 22px 30px; }
  .pt-innlogg h3 { font-size: 20px; }
}


/* Hover i navbaren og i Tjenester-menyen: husets lilla i stedet for gront.
   Tonen er den lyse varianten, ellers blir teksten for morlk mot #121212. */
.site-nav a:hover,
.site-nav .nav-mega a:hover .nav-mega-tekst strong,
.site-nav .nav-mega a.nav-mega-alle:hover { color: var(--indigo-lys); }
.site-nav .nav-mega a:hover .nav-mega-tekst span { color: rgba(210,200,250,0.66); }

/* Profilknappen i navbaren: bildet forst, fornavnet ved siden av. */
.nav-user-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; }
.nav-user-bilde { display: inline-flex; }
.nav-user-navn {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-user-btn:hover .nav-user-navn { color: var(--indigo-lys); }
.nav-user-head { align-items: center; }

@media (max-width: 900px) {
  .nav-user-navn { display: none; }
  .nav-user-btn { padding: 5px 8px 5px 6px; }
}

/* ================================================
   TJENESTER-MENYEN — FARGE PER KATEGORI
   Hver kolonne har sin egen farge paa ikonene naar
   man ikke peker paa dem. Teksten staar i #F5F5F5
   og blir morkere graa ved hover, saa raden man
   peker paa er den rolige — ikke den skrikende.
   ================================================ */
.nav-mega-inner > .nav-mega-kol:nth-child(1) { --kategori: #35CE8D; }
.nav-mega-inner > .nav-mega-kol:nth-child(2) { --kategori: #5438DC; }
.nav-mega-inner > .nav-mega-kol:nth-child(3) { --kategori: #F1A208; }

.nav-mega-ikon,
.site-nav .nav-mega a .nav-mega-ikon {
  background: color-mix(in srgb, var(--kategori) 16%, transparent);
  color: var(--kategori);
}

/* Ved hover fylles flisen helt, saa ikonet staar hvitt i kategorifargen. */
.site-nav .nav-mega a:hover .nav-mega-ikon {
  background: var(--kategori);
  color: #fff;
}

/* Teksten: hvit i ro, morkere graa naar man peker. */
.nav-mega-tekst strong,
.site-nav .nav-mega a.nav-mega-alle { color: #F5F5F5; }
.site-nav .nav-mega a:hover .nav-mega-tekst strong,
.site-nav .nav-mega a.nav-mega-alle:hover,
.site-nav .nav-mega a:hover .nav-mega-tekst span { color: #9A9A9A; }

/* Navbarlenkene folger samme regel som menyen under Tjenester: hvite i ro,
   morkere graa naar man peker. Innloggingsknappen har egen form og roeres
   ikke — den er en knapp, ikke en lenke. */
.site-nav > a:not(.nav-login),
.nav-has-dropdown > a { color: #F5F5F5; opacity: 1; }
.site-nav > a:not(.nav-login):hover,
.nav-has-dropdown > a:hover,
.nav-user-btn:hover .nav-user-navn { color: #9A9A9A; }

/* Hover i Tjenester: flisen tar kategorifargen, ikonet staar i samme hvit
   som resten av menyen. */
.site-nav .nav-mega a:hover .nav-mega-ikon { background: var(--kategori); color: #F5F5F5; }

/* Siden du staar paa skal fortsatt merkes. Regelen over gjorde alle lenkene
   hvite og slo ut markeringen, saa den settes tilbake her. */
.site-nav > a.active:not(.nav-login),
.nav-has-dropdown > a.active { color: var(--green); }

/* Byttet om: flisen staar fylt i kategorifargen i ro, og toner ned til en
   svak flate med farget ikon naar man peker paa raden. */
.nav-mega-ikon,
.site-nav .nav-mega a .nav-mega-ikon {
  background: var(--kategori);
  color: #F5F5F5;
}
.site-nav .nav-mega a:hover .nav-mega-ikon {
  background: color-mix(in srgb, var(--kategori) 16%, transparent);
  color: var(--kategori);
}

/* ================================================
   IKONFLISER — FYLT I RO, HVIT VED HOVER
   Flisen staar i kategorifargen med lyst ikon. Peker
   man paa raden, snus det: sirkelen blir hvit og
   ikonet tar fargen.
   ================================================ */
.site-nav .nav-mega a:hover .nav-mega-ikon {
  background: #F5F5F5;
  color: var(--kategori);
}

/* Footeren foelger samme regel. De tre fargene gaar paa omgang, saa hver
   flis i en gruppe paa tre far sin egen. */
.footer-socials a:nth-child(3n+1),
.footer-col ul li:nth-child(3n+1) .footer-ikon { --kategori: #35CE8D; }
.footer-socials a:nth-child(3n+2),
.footer-col ul li:nth-child(3n+2) .footer-ikon { --kategori: #5438DC; }
.footer-socials a:nth-child(3n+3),
.footer-col ul li:nth-child(3n+3) .footer-ikon { --kategori: #F1A208; }

.footer-socials a,
.footer-col ul li .footer-rad .footer-ikon {
  background: var(--kategori, #5438DC);
  color: #F5F5F5;
}
.footer-socials a:hover,
.footer-col ul li a.footer-rad:hover .footer-ikon {
  background: #F5F5F5;
  color: var(--kategori, #5438DC);
}

/* Footeren snus motsatt av menyen: hvit sirkel med farget ikon i ro, og
   fylt farge med lyst ikon naar man peker. */
.footer-socials a,
.footer-col ul li .footer-rad .footer-ikon {
  background: #F5F5F5;
  color: var(--kategori, #5438DC);
}
.footer-socials a:hover,
.footer-col ul li a.footer-rad:hover .footer-ikon {
  background: var(--kategori, #5438DC);
  color: #F5F5F5;
}

/* ================================================
   DESIGN-SIDEN — samme form som forsiden
   Seksjoner i runde #0A0A0A-bokser, kort i #121212,
   lilla linjeikoner, ingen gloed.
   ================================================ */
.design-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.design-page > .dz-hero {
  margin-top: calc(70px + var(--innrykk));
  padding: 120px 0 110px;
  text-align: center;
}
.dz-hero .section-label { display: inline-block; }
.dz-hero-tittel {
  font-size: 66px;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -2.4px;
  margin: 0 0 22px;
}
.dz-hero-sub {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}
.dz-hero-knapper { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.dz-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.dz-head .section-label { display: inline-block; }
.dz-head h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0 0 16px;
}
.dz-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

.dz-kort { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.dz-kort-en { background: #121212; border-radius: var(--radius-lg); padding: 30px 28px 32px; }
.dz-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  color: #5438DC;
}
.dz-ikon svg { width: 27px; height: 27px; }
.dz-kort-en h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; }
.dz-kort-en p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

.dz-stegrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dz-steg-en { background: #121212; border-radius: var(--radius-lg); padding: 28px 26px 30px; }
.dz-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.dz-steg-en h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.dz-steg-en p { font-size: 14px; line-height: 1.7; color: rgba(232,240,255,0.5); margin: 0; }

.dz-cta-boks { background: #121212; border-radius: var(--radius-lg); padding: 70px 40px; text-align: center; }
.dz-cta-boks h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  margin: 0 0 16px;
}
.dz-cta-boks p {
  max-width: 480px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .dz-hero-tittel { font-size: 50px; letter-spacing: -1.8px; }
  .dz-head h2, .dz-cta-boks h2 { font-size: 34px; }
  .dz-stegrad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .design-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .design-page > .dz-hero { margin-top: calc(62px + var(--innrykk)); padding: 78px 0 70px; }
  .dz-hero-tittel { font-size: 38px; letter-spacing: -1.3px; }
  .dz-hero-tittel br { display: none; }
  .dz-hero-sub { font-size: 15px; }
  .dz-head { margin-bottom: 36px; }
  .dz-head h2, .dz-cta-boks h2 { font-size: 28px; letter-spacing: -1px; }
  .dz-cta-boks h2 br { display: none; }
  .dz-stegrad { grid-template-columns: 1fr; }
  .dz-cta-boks { padding: 48px 24px; }
}

/* ================================================
   TJENESTER — RYDDET OG I SAMME STIL SOM FORSIDEN
   Ingen bilder. Tjenestene staar gruppert etter hvor
   i loepet de hoerer hjemme, med store linjeikoner.
   ================================================ */
.tj-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.tj-page > .tj-hero {
  margin-top: calc(70px + var(--innrykk));
  padding: 120px 0 110px;
  text-align: center;
}
.tj-hero .section-label { display: inline-block; }
.tj-hero h1 {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2.2px;
  margin: 0 0 22px;
}
.tj-hero h1 span { color: inherit; }
.tj-hero p {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}
.tj-hero-knapper { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.tj-gruppe + .tj-gruppe { margin-top: 44px; }
.tj-gruppe-navn {
  margin: 0 0 14px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
}

.tj-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.tj-kort {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 28px;
  border-radius: var(--radius-lg);
  background: #121212;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
.tj-kort:hover { background: #171717; }
.tj-kort-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 20px;
  color: #5438DC;
  transition: color .2s, transform .25s cubic-bezier(0.22,1,0.36,1);
}
.tj-kort-ikon svg { width: 40px; height: 40px; display: block; }
.tj-kort:hover .tj-kort-ikon { color: #7C63F0; transform: scale(1.05); }

.tj-kort h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; }
.tj-kort p {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(232,240,255,0.5);
  margin: 0 0 20px;
  flex: 1;
}
.tj-kort-lenke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
}
.tj-kort-lenke svg { width: 15px; height: 15px; fill: none; transition: transform .2s; }
.tj-kort:hover .tj-kort-lenke svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .tj-hero h1 { font-size: 46px; letter-spacing: -1.6px; }
}
@media (max-width: 767px) {
  .tj-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .tj-page > .tj-hero { margin-top: calc(62px + var(--innrykk)); padding: 78px 0 70px; }
  .tj-hero h1 { font-size: 34px; letter-spacing: -1.2px; }
  .tj-hero h1 br { display: none; }
  .tj-hero p { font-size: 15px; }
  .tj-kort { padding: 26px 22px 24px; }
  .tj-kort-ikon { width: 48px; height: 48px; margin-bottom: 16px; }
  .tj-kort-ikon svg { width: 34px; height: 34px; }
}

/* Tykkere strek i footeren og i Tjenester-menyen, saa ikonene baerer
   fargene sine bedre. */
.footer-socials svg,
.footer-ikon svg,
.nav-mega-ikon svg { stroke-width: 2.1; }


/* Tjenester-heroen: to ord baerer fargen, knappene staar i hver sin, og
   figuren under tegner veien fra idé til ferdig automatikk. */
.tj-ord--gronn { color: var(--green); }
.tj-ord--lilla { color: #C4B8FF; }

.btn.btn--lilla {
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
}
.btn.btn--lilla:hover { background: rgba(84,56,220,0.34); color: #E2DAFF; }

.tj-figur {
  max-width: 560px;
  margin: 52px auto 0;
  padding: 0 12px;
}
.tj-figur svg { width: 100%; height: auto; display: block; }

/* Ikonene i navbarmenyen fyller flisen bedre. */
.nav-mega-ikon svg { width: 23px; height: 23px; }

/* Footeren: stoerre fliser og stoerre ikoner. */
.footer-socials a { width: 44px; height: 44px; }
.footer-socials svg { width: 23px; height: 23px; }
.footer-ikon { width: 38px; height: 38px; }
.footer-ikon svg { width: 21px; height: 21px; }

/* Forsidens hero i samme hvit som logoen. */
.hero h1 { color: #F5F5F5; }

@media (max-width: 767px) {
  .tj-figur { margin-top: 36px; }
  .footer-socials a { width: 40px; height: 40px; }
  .footer-socials svg { width: 21px; height: 21px; }
  .footer-ikon { width: 34px; height: 34px; }
  .footer-ikon svg { width: 19px; height: 19px; }
}

/* Fargen paa de to ordene ble slatt ut av «.tj-hero h1 span { color: inherit }».
   Denne staar sterkere, og overskriften tar samme hvit som logoen. */
.tj-hero h1 { color: #F5F5F5; }
.tj-hero h1 .tj-ord--gronn { color: var(--green); }
.tj-hero h1 .tj-ord--lilla { color: #A78BFA; }


/* Tjenester-heroen staar venstrestilt, paa samme linje som kortene under.
   Foer var den sentrert, og da saa siden ujevn ut. */
.tj-page > .tj-hero { text-align: left; padding: 108px 0 92px; }
.tj-hero h1 { margin: 0 0 20px; }
.tj-hero p { margin: 0; max-width: 560px; }
.tj-figur { max-width: none; margin: 56px 0 0; padding: 0; }
.tj-figur svg { width: 100%; height: auto; }

@media (max-width: 767px) {
  .tj-page > .tj-hero { padding: 72px 0 60px; }
  .tj-figur { margin-top: 36px; }
}

/* ================================================
   APPER — HERO MED BILDE, ÉN SEKSJON PER APP
   Bygget slik at nye apper bare legges til som et
   kort til i rutenettet.
   ================================================ */
.apper-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.apper-page > .ap-hero { margin-top: calc(70px + var(--innrykk)); padding: 96px 0; }

.ap-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ap-hero-tekst h1 {
  font-size: 62px;
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -2.2px;
  color: #F5F5F5;
  margin: 0 0 20px;
}
.ap-hero-tekst p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0;
  max-width: 460px;
}
.ap-hero-bilde img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 26px;
}

.ap-etikett {
  margin: 0 0 16px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
}

.ap-rutenett { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }

.ap-kort {
  display: flex;
  flex-direction: column;
  padding: 36px 34px 32px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ap-kort-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
/* Logoen staar som bilde — navnet skrives ikke i vanlig tekst. */
.ap-logo { height: 40px; width: auto; display: block; }
.ap-status {
  flex-shrink: 0;
  padding: 5px 13px;
  border-radius: 50px;
  background: rgba(84,56,220,0.2);
  color: #C4B8FF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
}
.ap-kort-tekst {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 0 22px;
}
.ap-punkter { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.ap-punkter li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: rgba(232,240,255,0.66);
}
.ap-punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.ap-lenke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.ap-lenke svg { width: 15px; height: 15px; transition: transform .2s; }
.ap-lenke:hover svg { transform: translateX(3px); }

.ap-kort--neste { background: rgba(255,255,255,0.022); }
.ap-neste-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.2);
  color: #C4B8FF;
}
.ap-neste-ikon svg { width: 22px; height: 22px; }
.ap-kort--neste h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.ap-kort--neste p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0 0 22px; }

@media (max-width: 1024px) {
  .ap-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .ap-hero-tekst h1 { font-size: 46px; letter-spacing: -1.6px; }
  .ap-rutenett { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .apper-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .apper-page > .ap-hero { margin-top: calc(62px + var(--innrykk)); padding: 72px 0 60px; }
  .ap-hero-tekst h1 { font-size: 34px; letter-spacing: -1.2px; }
  .ap-hero-tekst h1 br { display: none; }
  .ap-kort { padding: 26px 22px 24px; }
  .ap-logo { height: 32px; }
}

/* ================================================
   KONTAKT — CHAT I STEDET FOR SKJEMA
   ================================================ */
.kontakt-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 96px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.kontakt-page > .kx-hero { margin-top: calc(70px + var(--innrykk)); }

.kx-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

.kx-venstre h1 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2px;
  color: #F5F5F5;
  margin: 0 0 18px;
}
.kx-lead { font-size: 17px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0 0 34px; max-width: 420px; }

.kx-veier { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kx-vei {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #121212;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
a.kx-vei:hover { background: #171717; }
.kx-vei-ikon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  color: #5438DC;
}
.kx-vei-ikon svg { width: 20px; height: 20px; }
.kx-vei-tekst { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; }
.kx-vei-tekst em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.3);
  margin-bottom: 3px;
}

/* --- Selve chatten ------------------------------------------------------ */
/* Ingen bobler og ingen topprad: avsenderen staar som en liten etikett over
   teksten, slik etikettene ellers ser ut paa nettstedet. Kortet er samme
   #121212-flate som alle andre kort. */
.kx-chat {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: #121212;
  overflow: hidden;
}

.kx-chat-vindu {
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 340px;
  overflow-y: auto;
  padding: 28px 26px 24px;
  scrollbar-width: thin;
}

.kx-avsender {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.28);
}
.kx-melding--robot .kx-avsender { color: var(--green); }

.kx-melding p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232,240,255,0.82);
  white-space: pre-wrap;
}
.kx-melding--bruker p { color: rgba(232,240,255,0.52); }
.kx-venter p { color: rgba(232,240,255,0.3); letter-spacing: 2px; }

/* Feltet er den samme pillen som staar paa forsiden. */
.kx-chat-skjema {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0 20px 16px;
  padding: 6px 6px 6px 18px;
  /* Runde hjoerner som foelger hoyden, saa enden alltid er halvsirkel. */
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0E0E0E;
  transition: border-color .2s;
}
.kx-chat-skjema:focus-within { border-color: rgba(84,56,220,0.55); }
.kx-chat-skjema textarea {
  flex: 1;
  resize: none;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  /* 22,5 px tekst + 2x8 px = 38,5 px, samme hoyde som sendeknappen. Da
     staar de likt naar feltet har én linje, og knappen foelger bunnen
     naar feltet vokser. */
  padding: 8px 0;
  max-height: 110px;
}
.kx-chat-skjema textarea:focus { outline: none; }
.kx-chat-skjema textarea::placeholder { color: rgba(232,240,255,0.3); }
.kx-chat-skjema button {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #5438DC;
  color: #F5F5F5;
  cursor: pointer;
  transition: background .2s;
}
.kx-chat-skjema button:hover { background: #6A4BF0; }
.kx-chat-skjema button svg { width: 18px; height: 18px; }

.kx-kontaktfelt { display: flex; gap: 8px; padding: 0 14px 12px; }
.kx-kontaktfelt input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: #1B1B1B;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 10px 12px;
}
.kx-kontaktfelt input:focus { outline: none; background: #202020; }
.kx-kontaktfelt input::placeholder { color: rgba(232,240,255,0.28); }

.kx-chat-note {
  margin: 0;
  padding: 0 26px 22px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.24);
}

.ua-skjult {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media (max-width: 1024px) {
  .kx-inner { grid-template-columns: 1fr; gap: 36px; }
  .kx-venstre h1 { font-size: 42px; letter-spacing: -1.6px; }
}
@media (max-width: 767px) {
  .kontakt-page > section { --innrykk: 8px; border-radius: 24px; padding: 72px 0 60px; }
  .kontakt-page > .kx-hero { margin-top: calc(62px + var(--innrykk)); }
  .kx-venstre h1 { font-size: 34px; letter-spacing: -1.2px; }
  .kx-chat-vindu { height: 300px; }
}


/* Cazh far sin egen seksjon: app-ikonet og logoen sammen, og forklaringen
   ved siden av. Navnet skrives aldri som vanlig tekst — logoen er navnet. */
.ap-cazh-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.ap-cazh-merke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 44px 40px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ap-appikon { width: 96px; height: 96px; border-radius: 26px; display: block; }
.ap-appikon--liten { width: 34px; height: 34px; border-radius: 10px; }
.ap-logo--stor { height: 46px; }
.ap-kort-merke { display: flex; align-items: center; gap: 12px; }

.ap-cazh-tekst h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.ap-cazh-tekst > p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0 0 28px; }
.ap-cazh-punkter { display: grid; gap: 18px; margin-bottom: 26px; }
.ap-cazh-punkter h3 { font-size: 16px; font-weight: 700; margin: 0 0 5px; }
.ap-cazh-punkter p { font-size: 14.5px; line-height: 1.7; color: rgba(232,240,255,0.5); margin: 0; }

@media (max-width: 1024px) {
  .ap-cazh-inner { grid-template-columns: 1fr; gap: 28px; }
  .ap-cazh-tekst h2 { font-size: 32px; }
  .ap-cazh-tekst h2 br { display: none; }
}
@media (max-width: 767px) {
  .ap-cazh-merke { padding: 30px 24px; gap: 18px; }
  .ap-appikon { width: 74px; height: 74px; border-radius: 20px; }
  .ap-logo--stor { height: 36px; }
  .ap-cazh-tekst h2 { font-size: 27px; letter-spacing: -1px; }
}

/* ================================================
   OM OSS — SAMME FORM SOM RESTEN
   Ingen bilder; tekst, tall og linjeikoner baerer siden.
   ================================================ */
.om-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.om-page > .om-hero {
  margin-top: calc(70px + var(--innrykk));
  padding: 116px 0 96px;
  min-height: 0;
}
.om-page > .om-hero::after, .om-page > .om-hero::before { display: none; }
.om-hero .om-hero-bg { display: none; }

.om-hero h1 {
  font-size: 60px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2.2px;
  color: #F5F5F5;
  margin: 0 0 20px;
}
.om-lead { font-size: 17px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0 0 44px; max-width: 620px; }

.om-tall { display: flex; flex-wrap: wrap; gap: 14px; }
.om-tall > div {
  flex: 1 1 180px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #121212;
}
.om-tall strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.om-tall span { font-size: 12.5px; color: rgba(232,240,255,0.4); }

.om-head { max-width: 640px; margin: 0 0 44px; }
.om-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 0;
}

.om-kort { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.om-kort article { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.om-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 18px;
  color: #5438DC;
}
.om-ikon svg { width: 27px; height: 27px; }
.om-kort h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.om-kort p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

.om-person {
  display: flex;
  align-items: flex-start;
  gap: 26px;
  padding: 38px 36px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.om-person-avatar {
  flex-shrink: 0;
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  color: #F9C834;
}
.om-person-avatar svg { width: 38px; height: 38px; }
.om-person-rolle {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 12px;
  border-radius: 50px;
  background: rgba(249,200,52,0.16);
  color: #F9C834;
  font-size: 11.5px;
  font-weight: 700;
}
.om-person h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 10px; }
.om-person p { font-size: 15px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0 0 20px; max-width: 520px; }
.om-person-kontakt { display: flex; flex-wrap: wrap; gap: 10px; }
.om-person-kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 50px;
  background: #1B1B1B;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.om-person-kontakt a:hover { background: #232323; }
.om-person-kontakt svg { width: 17px; height: 17px; color: #5438DC; }

.om-cta-boks { padding: 70px 40px; border-radius: var(--radius-lg); background: #121212; text-align: center; }
.om-cta-boks h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.om-cta-boks p {
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .om-hero h1 { font-size: 44px; letter-spacing: -1.6px; }
  .om-head h2, .om-cta-boks h2 { font-size: 32px; }
}
@media (max-width: 767px) {
  .om-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .om-page > .om-hero { margin-top: calc(62px + var(--innrykk)); padding: 78px 0 60px; }
  .om-hero h1 { font-size: 33px; letter-spacing: -1.2px; }
  .om-hero h1 br { display: none; }
  .om-person { flex-direction: column; gap: 18px; padding: 28px 24px; }
  .om-cta-boks { padding: 48px 24px; }
  .om-cta-boks h2 br { display: none; }
}


/* Om oss-heroen arvet innrykk og sentrering fra den gamle bildeheroen.
   Her staar innholdet paa samme venstrekant som resten av siden. */
.om-page > .om-hero .container { display: block; text-align: left; padding-left: 48px; padding-right: 48px; }
.om-page > .om-hero .container > * { margin-left: 0; margin-right: 0; }
@media (max-width: 767px) {
  .om-page > .om-hero .container { padding-left: 22px; padding-right: 22px; }
}

/* Den gamle heroen var en flex-boks som sentrerte innholdet sitt. Her er
   den en vanlig blokk, saa containeren fyller bredden som paa de andre
   seksjonene. */
.om-page > .om-hero { display: block; }
.om-page > .om-hero .container { width: 100%; max-width: 100%; margin: 0; }


/* Bildene paa Om oss er tilbake: bygningen bak heroen, kompasset ved
   visjonen og portrettet i personboksen. Heroen far en morkning over
   bildet, ellers drukner teksten i det. */
.om-page > .om-hero { position: relative; overflow: hidden; }
.om-hero-bilde { position: absolute; inset: 0; display: block; }
.om-hero-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.om-page > .om-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.86) 46%, rgba(10,10,10,0.5) 100%);
}
.om-page > .om-hero .container { position: relative; z-index: 2; }

.om-visjon-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.om-visjon-tekst h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.om-visjon-tekst p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }
.om-visjon-bilde img { width: 100%; height: auto; display: block; border-radius: 26px; }

.om-person-bilde {
  flex-shrink: 0;
  width: 132px; height: 132px;
  display: block;
  border-radius: 26px;
  overflow: hidden;
  background: #1B1B1B;
}
.om-person-bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1024px) {
  .om-visjon-inner { grid-template-columns: 1fr; gap: 28px; }
  .om-visjon-tekst h2 { font-size: 32px; }
  .om-visjon-tekst h2 br { display: none; }
}
@media (max-width: 767px) {
  .om-page > .om-hero::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.88) 60%, rgba(10,10,10,0.7) 100%);
  }
  .om-person-bilde { width: 104px; height: 104px; border-radius: 22px; }
}


/* Chatten for utloggede: samme boks, men med innlogging i stedet for felt. */
.kx-chat--innlogg { align-items: center; text-align: center; padding: 48px 34px; }
.kx-innlogg-ikon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #F5F5F5;
  color: #5438DC;
}
.kx-innlogg-ikon svg { width: 27px; height: 27px; }
.kx-chat--innlogg h2 { font-size: 23px; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 10px; }
.kx-chat--innlogg p { font-size: 14.5px; line-height: 1.7; color: rgba(232,240,255,0.5); margin: 0 auto 24px; max-width: 320px; }
.kx-innlogg-knapper { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* To gamle regler slo ut bildet: «.om-hero picture { display: contents }»
   gjorde at bildet fikk ingen egen boks, og morkningen var skrudd av med
   display:none. Begge deler settes tilbake her. */
.om-page > .om-hero .om-hero-bilde {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.om-page > .om-hero .om-hero-bilde img { width: 100%; height: 100%; object-fit: cover; }
.om-page > .om-hero::after { display: block; z-index: 1; }


/* ================================================
   FORSIDEN — FREMTIDEN VENTER IKKE
   Bildet er lyst, saa boksen er lys hele veien. Teksten
   staar morkt paa #F5F5F5, og stolpen beholder fargene.
   ================================================ */
.home .hp-cta-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  min-height: 0;
  padding: 64px 20px 64px 64px;
  border-radius: 32px;
  background: #F5F5F5;
  overflow: hidden;
}
.home .hp-cta-box::before, .home .hp-cta-box::after { display: none; }

.home .hp-cta-content { position: relative; z-index: 2; padding: 0; text-align: left; }
.hp-cta-merke {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(84,56,220,0.12);
  color: #5438DC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.home .hp-cta-content h2 {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -2.2px;
  color: #101010;
  margin: 0 0 18px;
}
.hp-cta-tekst {
  font-size: 16.5px;
  line-height: 1.75;
  color: rgba(16,16,16,0.62);
  margin: 0 0 30px;
  max-width: 440px;
}

/* Aarsstolpen paa lys flate */
.home .hp-year { max-width: 420px; margin-bottom: 32px; }
.home .hp-year-label, .home .hp-year-note { color: rgba(16,16,16,0.5); }
.home .hp-year-pct { color: #101010; }
.home .hp-year-note strong { color: #5438DC; }
.home .hp-year-bar { background: rgba(16,16,16,0.1); }

.home .hp-cta-knapp { box-shadow: none; transform: none; }

.hp-cta-bilde { position: relative; z-index: 1; }
.hp-cta-bilde img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .home .hp-cta-box {
    grid-template-columns: 1fr;
    padding: 48px 26px 0;
    text-align: left;
  }
  .home .hp-cta-content h2 { font-size: 38px; letter-spacing: -1.4px; }
  .hp-cta-bilde { margin: 8px -26px 0; }
}
@media (max-width: 767px) {
  .home .hp-cta-box { padding: 40px 22px 0; border-radius: 24px; }
  .home .hp-cta-content h2 { font-size: 32px; }
  .home .hp-cta-content h2 br { display: none; }
  .hp-cta-tekst { font-size: 15px; }
}


/* Cazh-seksjonen: ett hode, én ingress, tre like punkter, én lenke.
   App-ikonet brukes slik det er levert — ingen egen ramme eller runding
   oppaa den som alt ligger i filen. */
.ap-cazh-hode { display: flex; align-items: center; gap: 22px; margin-bottom: 26px; }
.ap-cazh-navn { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ap-appikon { width: 92px; height: 92px; border-radius: 0; display: block; }
.ap-appikon--liten { width: 38px; height: 38px; border-radius: 0; }

.ap-cazh-ingress {
  max-width: 660px;
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

.ap-cazh-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.ap-cazh-rad article { padding: 28px 26px 30px; border-radius: var(--radius-lg); background: #121212; }
.ap-cazh-nr {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #35CE8D;
}
.ap-cazh-rad h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.ap-cazh-rad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

.ap-lenke--stor { font-size: 15px; }

@media (max-width: 900px) {
  .ap-cazh-rad { grid-template-columns: 1fr; }
  .ap-cazh-ingress { font-size: 15.5px; margin-bottom: 28px; }
}
@media (max-width: 767px) {
  .ap-cazh-hode { gap: 16px; }
  .ap-appikon { width: 68px; height: 68px; }
}

/* Tjenester-menyen faar runde hjoerner i bunnen, som boksene ellers paa
   nettstedet. Klippingen av skyggen beholdes, ellers kommer skillet mot
   navbaren tilbake. */
.nav-mega { border-radius: 0 0 32px 32px; }

@media (max-width: 767px) {
  .nav-mega { border-radius: 0 0 24px 24px; }
}


/* Visjonen paa Om oss: lys boks, morke bokstaver, kompasset til hoeyre.
   Bildet har hvit bakgrunn, saa flaten er hvit — da ser det ut som ett
   stykke i stedet for et bilde limt paa en morkt flate. */
.om-visjon-boks {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 24px;
  padding: 56px 24px 56px 56px;
  border-radius: 32px;
  background: #F5F5F5;
  overflow: hidden;
}
.om-visjon-merke {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(84,56,220,0.12);
  color: #5438DC;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.om-visjon-tekst h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.6px;
  color: #101010;
  margin: 0 0 16px;
}
.om-visjon-tekst > p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(16,16,16,0.62);
  margin: 0 0 24px;
  max-width: 480px;
}
.om-visjon-punkter { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.om-visjon-punkter li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(16,16,16,0.72);
}
.om-visjon-punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid #5438DC;
  border-bottom: 2px solid #5438DC;
  transform: rotate(-45deg);
}
.om-visjon-bilde img { width: 100%; height: auto; display: block; border-radius: 0; }

@media (max-width: 900px) {
  .om-visjon-boks { grid-template-columns: 1fr; padding: 40px 26px 0; }
  .om-visjon-tekst h2 { font-size: 30px; letter-spacing: -1.1px; }
  .om-visjon-tekst h2 br { display: none; }
  .om-visjon-bilde { margin: 6px auto 0; max-width: 340px; }
}
@media (max-width: 767px) {
  .om-visjon-boks { border-radius: 24px; padding: 32px 22px 0; }
  .om-visjon-tekst h2 { font-size: 26px; }
}

/* Footeren: graa sirkel i ro i stedet for hvit — den hvite ble for hard
   mot den moerke flaten. Fargen ligger i ikonet, og ved hover fylles
   sirkelen i kategorifargen. */
.footer-socials a,
.footer-col ul li .footer-rad .footer-ikon {
  background: #2B2B2B;
  color: var(--kategori, #5438DC);
}
.footer-socials a:hover,
.footer-col ul li a.footer-rad:hover .footer-ikon {
  background: var(--kategori, #5438DC);
  color: #F5F5F5;
}


/* Teksten under logoen i footeren: samme luft og bredde som kolonnene ved
   siden av, saa den ikke henger som en loes setning. */
.footer-tagline {
  max-width: 300px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(232,240,255,0.45);
  margin: 0 0 20px;
}

/* Bli partner er en knapp, ikke en lenke i lista. */
.footer-partner { margin-top: 10px; }
.footer-partnerknapp {
  display: inline-flex;
  flex-direction: column;
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--green);
  color: #0A0A0A !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background .2s;
}
.footer-partnerknapp span { font-size: 11.5px; font-weight: 600; opacity: .68; }
.footer-partnerknapp:hover { background: #2ebd7e; }


/* Partnerknappen i footeren: en slank pille i stedet for den tunge gronne
   klossen. Fylles helt naar man peker paa den. */
.footer-partnerknapp {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 50px;
  background: rgba(53,206,141,0.14);
  color: var(--green) !important;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.footer-partnerknapp svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .2s; }
.footer-partnerknapp:hover { background: var(--green); color: #0A0A0A !important; }
.footer-partnerknapp:hover svg { transform: translateX(3px); }

/* Personboksen paa Om oss: bildet fyller sin egen spalte helt ut, teksten
   staar med luft ved siden av. Foer laa et lite kvadrat og fløt. */
.om-person {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: #121212;
  overflow: hidden;
}
.om-person-bilde {
  width: auto; height: auto;
  border-radius: 0;
  background: #1B1B1B;
  position: relative;
  min-height: 300px;
}
.om-person-bilde picture { display: contents; }
.om-person-bilde img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.om-person-tekst { padding: 44px 44px 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.om-person-rolle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
}
.om-person-rolle svg { width: 14px; height: 14px; }
.om-person h3 { font-size: 27px; }

@media (max-width: 767px) {
  .om-person { grid-template-columns: 1fr; }
  .om-person-bilde { min-height: 260px; }
  .om-person-tekst { padding: 28px 24px 30px; }
  .om-person h3 { font-size: 23px; }
}


/* ================================================
   OM OSS — NY HERO
   Bildet i egen ramme ved siden av teksten. Den gamle
   losningen la bildet bak teksten med en kraftig
   morkning over, og da ble bildet bare grumsete.
   ================================================ */
.om-page > .om-hero { padding: 104px 0 88px; }
.om-page > .om-hero::after { display: none; }
.om-page > .om-hero .om-hero-bilde { display: none; }

.om-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 44px;
}
.om-hero-merke {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(84,56,220,0.2);
  color: #C4B8FF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.om-page > .om-hero h1 { font-size: 54px; letter-spacing: -2px; margin: 0 0 18px; }
.om-page > .om-hero .om-lead { margin: 0 0 30px; max-width: 520px; }
.om-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; }

.om-hero-ramme {
  border-radius: 28px;
  overflow: hidden;
  background: #121212;
  aspect-ratio: 4 / 3;
}
.om-hero-ramme picture { display: contents; }
.om-hero-ramme img { width: 100%; height: 100%; object-fit: cover; display: block; }

.om-tall > div { background: #121212; }

@media (max-width: 1024px) {
  .om-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .om-page > .om-hero h1 { font-size: 40px; letter-spacing: -1.4px; }
  .om-hero-ramme { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .om-page > .om-hero { padding: 76px 0 56px; }
  .om-page > .om-hero h1 { font-size: 32px; letter-spacing: -1.1px; }
  .om-hero-ramme { border-radius: 22px; }
}

/* Den gamle bildeheroen hadde «.om-hero-inner { max-width: 470px }», og den
   klemte hele det nye tokolonnersoppsettet sammen. */
.om-page > .om-hero .om-hero-inner { max-width: none; width: 100%; }

/* ================================================
   KURS — SAMME FORM SOM RESTEN
   Bildet staar i egen ramme, fakta rett under, og
   innholdet i nummererte kort.
   ================================================ */
.kurs-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.kurs-page > .ku-hero { margin-top: calc(70px + var(--innrykk)); padding: 104px 0 88px; }

.ku-hero-inner {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.ku-merke {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 14px;
  border-radius: 50px;
  background: rgba(84,56,220,0.2);
  color: #C4B8FF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.ku-hero-tekst h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.9px;
  color: #F5F5F5;
  margin: 0 0 18px;
}
.ku-lead { font-size: 17px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0 0 30px; max-width: 520px; }
.ku-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; }

.ku-hero-ramme {
  border-radius: 28px;
  overflow: hidden;
  background: #121212;
  aspect-ratio: 4 / 3;
}
.ku-hero-ramme img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ku-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ku-fakta > div { padding: 20px 22px; border-radius: 18px; background: #121212; }
.ku-fakta strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.ku-fakta span { font-size: 12.5px; color: rgba(232,240,255,0.4); }

.ku-head { max-width: 640px; margin: 0 0 44px; }
.ku-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 0 0 14px;
}
.ku-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

.ku-kort { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ku-kort article { padding: 32px 30px 34px; border-radius: var(--radius-lg); background: #121212; }
.ku-nr {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #C4B8FF;
}
.ku-kort h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 10px; }
.ku-kort > article > p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0 0 18px; }
.ku-kort ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ku-kort li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: rgba(232,240,255,0.62);
}
.ku-kort li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.ku-stegrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ku-stegrad > div { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.ku-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.ku-stegrad h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.ku-stegrad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

.ku-cta-boks { padding: 70px 40px; border-radius: var(--radius-lg); background: #121212; text-align: center; }
.ku-cta-boks h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.ku-cta-boks p {
  max-width: 480px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .ku-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .ku-hero-tekst h1 { font-size: 38px; letter-spacing: -1.3px; }
  .ku-hero-ramme { aspect-ratio: 16 / 10; }
  .ku-fakta { grid-template-columns: repeat(2, 1fr); }
  .ku-kort, .ku-stegrad { grid-template-columns: 1fr; }
  .ku-head h2, .ku-cta-boks h2 { font-size: 31px; }
}
@media (max-width: 767px) {
  .kurs-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .kurs-page > .ku-hero { margin-top: calc(62px + var(--innrykk)); padding: 76px 0 56px; }
  .ku-hero-tekst h1 { font-size: 31px; letter-spacing: -1.1px; }
  .ku-hero-tekst h1 br, .ku-cta-boks h2 br { display: none; }
  .ku-fakta { grid-template-columns: 1fr; }
  .ku-cta-boks { padding: 48px 24px; }
}


/* Kurseksemplene: ett ikon, en tittel og én setning per kort. */
.ku-kursrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ku-kurs { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.ku-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 18px;
  color: #5438DC;
}
.ku-ikon svg { width: 30px; height: 30px; }
.ku-kurs h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.ku-kurs p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

@media (max-width: 1024px) { .ku-kursrad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .ku-kursrad { grid-template-columns: 1fr; } }


/* Kurstavla: ett kort per kurs, med ikon og dato i toppen. */
.ku-tavle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ku-tavlekort {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ku-tavlekort header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.ku-tavlekort .ku-ikon { width: 44px; height: 44px; margin: 0; }
.ku-tavlekort .ku-ikon svg { width: 28px; height: 28px; }

.ku-dato {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(84,56,220,0.18);
  color: #C4B8FF;
  line-height: 1.1;
}
.ku-dato strong { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.ku-dato span { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; }
.ku-dato--apen {
  background: rgba(255,255,255,0.05);
  color: rgba(232,240,255,0.42);
}
.ku-dato--apen span { font-size: 10px; letter-spacing: .4px; text-align: center; line-height: 1.35; }

.ku-tavlekort h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.ku-tavlekort > p { font-size: 14px; line-height: 1.7; color: rgba(232,240,255,0.5); margin: 0 0 16px; }

.ku-detaljer {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
}
.ku-detaljer li {
  padding: 4px 11px;
  border-radius: 50px;
  background: rgba(255,255,255,0.05);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(232,240,255,0.55);
}

.ku-meld {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.ku-meld svg { width: 15px; height: 15px; transition: transform .2s; }
.ku-meld:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) { .ku-tavle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .ku-tavle { grid-template-columns: 1fr; } }

/* Kurskortene er lenker na, ikke bare bokser. */
a.ku-tavlekort { color: var(--text); text-decoration: none; transition: background .2s; }
a.ku-tavlekort:hover { background: #171717; }
a.ku-tavlekort:hover .ku-meld svg { transform: translateX(3px); }

/* --- Detaljsiden for ett kurs ------------------------------------------- */
.ku-detalj .ku-sti {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  font-size: 13px;
  color: rgba(232,240,255,0.3);
}
.ku-detalj .ku-sti a { color: rgba(232,240,255,0.5); text-decoration: none; }
.ku-detalj .ku-sti a:hover { color: var(--green); }
.ku-detalj .ku-sti strong { color: var(--text); font-weight: 600; }

.ku-detalj-topp { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ku-detalj-topp .ku-ikon { width: 56px; height: 56px; margin: 0; }
.ku-detalj-topp .ku-ikon svg { width: 34px; height: 34px; }

.ku-detalj h1 {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.6px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.ku-detalj .ku-lead { max-width: 640px; margin-bottom: 32px; }

.ku-detalj-fakta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.ku-detalj-fakta > div { padding: 18px 20px; border-radius: 18px; background: #121212; }
.ku-detalj-fakta strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #F5F5F5;
  margin-bottom: 4px;
  line-height: 1.35;
}
.ku-detalj-fakta span { font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(232,240,255,0.32); }

.ku-detalj-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; }
.ku-detalj-boks { padding: 34px 32px 36px; border-radius: var(--radius-lg); background: #121212; }
.ku-detalj-boks h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.7px; margin: 8px 0 18px; }

.ku-punkter { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ku-punkter li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232,240,255,0.66);
}
.ku-punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.ku-andre-tittel { margin-bottom: 14px; }

@media (max-width: 1024px) {
  .ku-detalj h1 { font-size: 34px; letter-spacing: -1.2px; }
  .ku-detalj-fakta { grid-template-columns: repeat(2, 1fr); }
  .ku-detalj-rad { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ku-detalj h1 { font-size: 28px; }
  .ku-detalj-fakta { grid-template-columns: 1fr; }
  .ku-detalj-boks { padding: 26px 22px 28px; }
}


/* ================================================
   MARKEDSFOERING — SAMME FORM SOM RESTEN
   Seksjoner i runde #0A0A0A-bokser, kort i #121212,
   lilla linjeikoner. Bildene staar i egne rammer
   med bildetekst under.
   ================================================ */
.mf-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.mf-page > .mf-hero { margin-top: calc(70px + var(--innrykk)); padding: 104px 0 88px; }

.mf-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}
.mf-hero-tekst h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.9px;
  color: #F5F5F5;
  margin: 14px 0 18px;
}
.mf-lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 0 30px;
  max-width: 520px;
}
.mf-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Bilderamme med bildetekst: eksemplene er laget for en oppdiktet
   bedrift, og det skal staa der bildet staar. */
.mf-ramme { margin: 0; }
.mf-ramme img {
  display: block;
  width: 100%;
  border-radius: 24px;
  background: #121212;
}
.mf-ramme figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.32);
}

.mf-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mf-fakta > div { padding: 20px 22px; border-radius: 18px; background: #121212; }
.mf-fakta strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.mf-fakta span { font-size: 12.5px; color: rgba(232,240,255,0.4); }

.mf-head { max-width: 640px; margin: 0 0 44px; }
.mf-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 14px 0 14px;
}
.mf-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

/* --- Kanalkortene ------------------------------------------------------ */
.mf-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mf-kort article { padding: 32px 30px 34px; border-radius: var(--radius-lg); background: #121212; }
.mf-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: #5438DC;
}
.mf-ikon svg { width: 30px; height: 30px; }
.mf-kort h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.mf-kort p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Materiell --------------------------------------------------------- */
.mf-materiell-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 52px;
  align-items: center;
}
.mf-materiell-tekst h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 14px 0 16px;
}
.mf-materiell-tekst .mf-lead { margin-bottom: 24px; }

.mf-punkter { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.mf-punkter li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232,240,255,0.66);
}
.mf-punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* --- Stegene ----------------------------------------------------------- */
.mf-stegrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mf-stegrad > div { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.mf-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.mf-stegrad h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.mf-stegrad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* Forbeholdet om tall staar i en egen, roligere boks. */
.mf-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.mf-note-ikon { flex-shrink: 0; color: #5438DC; line-height: 0; }
.mf-note-ikon svg { width: 24px; height: 24px; }
.mf-note p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(232,240,255,0.5);
}

/* --- CTA --------------------------------------------------------------- */
.mf-cta-boks { padding: 70px 40px; border-radius: var(--radius-lg); background: #121212; text-align: center; }
.mf-cta-boks h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.mf-cta-boks p {
  max-width: 500px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .mf-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .mf-hero-tekst h1 { font-size: 38px; letter-spacing: -1.3px; }
  .mf-fakta { grid-template-columns: repeat(2, 1fr); }
  .mf-kort { grid-template-columns: repeat(2, 1fr); }
  .mf-materiell-inner { grid-template-columns: 1fr; gap: 34px; }
  .mf-head h2, .mf-materiell-tekst h2, .mf-cta-boks h2 { font-size: 31px; }
}
@media (max-width: 767px) {
  .mf-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .mf-page > .mf-hero { margin-top: calc(62px + var(--innrykk)); padding: 76px 0 56px; }
  .mf-hero-tekst h1 { font-size: 31px; letter-spacing: -1.1px; }
  .mf-hero-tekst h1 br,
  .mf-materiell-tekst h2 br,
  .mf-cta-boks h2 br { display: none; }
  .mf-fakta, .mf-kort, .mf-stegrad { grid-template-columns: 1fr; }
  .mf-ramme img { border-radius: 18px; }
  .mf-note { padding: 20px 20px; gap: 13px; }
  .mf-cta-boks { padding: 48px 24px; }
}


/* ================================================
   AI AUTOMATISERING — SAMME FORM SOM RESTEN
   Seksjoner i runde #0A0A0A-bokser, kort i #121212,
   lilla linjeikoner. Bildet staar i full bredde
   under heroteksten, der det faar plass nok til
   aa leses.
   ================================================ */
.aa-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.aa-page > .aa-hero { margin-top: calc(70px + var(--innrykk)); padding: 104px 0 88px; }

.aa-hero-tekst { max-width: 720px; margin-bottom: 44px; }
.aa-hero-tekst h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.9px;
  color: #F5F5F5;
  margin: 14px 0 18px;
}
.aa-lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 0 30px;
  max-width: 560px;
}
.aa-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.aa-ramme { margin: 0 0 40px; }
.aa-ramme img {
  display: block;
  width: 100%;
  border-radius: 28px;
  background: #121212;
}

.aa-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aa-fakta > div { padding: 20px 22px; border-radius: 18px; background: #121212; }
.aa-fakta strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.aa-fakta span { font-size: 12.5px; line-height: 1.5; color: rgba(232,240,255,0.4); }

.aa-head { max-width: 640px; margin: 0 0 44px; }
.aa-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 14px 0 14px;
}
.aa-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

/* --- Kortene ----------------------------------------------------------- */
.aa-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.aa-kort article { padding: 32px 30px 34px; border-radius: var(--radius-lg); background: #121212; }
.aa-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: #5438DC;
}
.aa-ikon svg { width: 30px; height: 30px; }
.aa-kort h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.aa-kort p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Stegene ----------------------------------------------------------- */
.aa-stegrad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.aa-stegrad > div { padding: 30px 26px 32px; border-radius: var(--radius-lg); background: #121212; }
.aa-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.aa-stegrad h3 { font-size: 17px; font-weight: 700; margin: 0 0 9px; }
.aa-stegrad p { font-size: 14px; line-height: 1.7; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Grensene ---------------------------------------------------------- */
.aa-grenser-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 52px;
  align-items: start;
}
.aa-grenser-tekst h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 14px 0 16px;
}
.aa-grenser-tekst .aa-lead { margin-bottom: 0; }

.aa-grenseliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aa-grenseliste li {
  position: relative;
  padding: 22px 26px 24px 52px;
  border-radius: var(--radius-lg);
  background: #121212;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(232,240,255,0.5);
}
.aa-grenseliste strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #F5F5F5;
}
/* Kryss foran hvert punkt: dette er tingene vi IKKE gjoer. */
.aa-grenseliste li::before,
.aa-grenseliste li::after {
  content: "";
  position: absolute;
  left: 25px; top: 29px;
  width: 13px; height: 2px;
  border-radius: 2px;
  background: #5438DC;
}
.aa-grenseliste li::before { transform: rotate(45deg); }
.aa-grenseliste li::after  { transform: rotate(-45deg); }

@media (max-width: 1024px) {
  .aa-hero-tekst h1 { font-size: 38px; letter-spacing: -1.3px; }
  .aa-fakta { grid-template-columns: repeat(2, 1fr); }
  .aa-kort { grid-template-columns: repeat(2, 1fr); }
  .aa-stegrad { grid-template-columns: repeat(2, 1fr); }
  .aa-grenser-inner { grid-template-columns: 1fr; gap: 32px; }
  .aa-head h2, .aa-grenser-tekst h2 { font-size: 31px; }
}
@media (max-width: 767px) {
  .aa-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .aa-page > .aa-hero { margin-top: calc(62px + var(--innrykk)); padding: 76px 0 56px; }
  .aa-hero-tekst h1 { font-size: 31px; letter-spacing: -1.1px; }
  .aa-hero-tekst h1 br { display: none; }
  .aa-fakta, .aa-kort, .aa-stegrad { grid-template-columns: 1fr; }
  .aa-ramme img { border-radius: 18px; }
  .aa-grenseliste li { padding: 20px 20px 22px 46px; }
  .aa-grenseliste li::before,
  .aa-grenseliste li::after { left: 20px; top: 27px; }
}


/* ================================================
   FORSIDEN — SPØRREFELTET
   Ett felt og én knapp. Svaret legger seg under, og
   boksene under der igjen. Ingen bobler, ingen
   avatarer: det er svaret som skal sees.
   ================================================ */
/* Like mye luft over og under innholdet i seksjonen. */
.fc { padding: 86px 0; }

/* Overskriften over feltet. «Spoer.» staar i groent, saa oppfordringen
   leses som en del av setningen og ikke som en knapp. */
.fc-tittel {
  max-width: 660px;
  margin: 0 auto 26px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  text-align: center;
}
.fc-tittel span { color: var(--green); }

.fc-felt {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 660px;
  margin: 0 auto;
  padding: 7px 7px 7px 22px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50px;
  background: #121212;
  transition: border-color .2s;
}
.fc-felt:focus-within { border-color: rgba(84,56,220,0.55); }

.fc-felt input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: #F5F5F5;
  font-family: inherit;
  font-size: 15.5px;
  padding: 12px 0;
}
.fc-felt input::placeholder { color: rgba(232,240,255,0.32); }
.fc-felt input:focus { outline: none; }
.fc-felt input:disabled { opacity: .5; }

.fc-felt button {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: #5438DC;
  color: #F5F5F5;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.fc-felt button:hover { background: #6A4BF0; }
.fc-felt button:disabled { opacity: .45; cursor: default; }
.fc-felt button svg { width: 19px; height: 19px; }

/* --- Tråden ------------------------------------------------------------ */
.fc-traad { max-width: 660px; margin: 0 auto; }
.fc-traad:not(:empty) { margin-top: 28px; }
.fc-traad > *:last-child { margin-bottom: 0; }

.fc-du {
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(232,240,255,0.34);
}
.fc-du::before { content: "Du: "; }

.fc-svar {
  margin-bottom: 26px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(232,240,255,0.82);
}
.fc-svar--feil { color: rgba(255,150,150,0.8); }

.fc-venter {
  margin-bottom: 26px;
  font-size: 15px;
  color: rgba(232,240,255,0.3);
}

/* --- Boksene modellen kan be om ---------------------------------------- */
.fc-kort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin: -12px 0 30px;
}
.fc-kort-en {
  display: block;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #121212;
  color: var(--text);
  text-decoration: none;
  transition: background .2s;
}
a.fc-kort-en:hover { background: #181818; }

.fc-kort-navn { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.fc-kort-pris {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #C4B8FF;
}
.fc-kort-pris span {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(232,240,255,0.3);
}
.fc-kort-en ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fc-kort-en li {
  position: relative;
  padding-left: 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232,240,255,0.5);
}
.fc-kort-en li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #5438DC;
}

.fc-mer {
  grid-column: 1 / -1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}
.fc-mer:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .fc { padding: 56px 0; }
  .fc-tittel { font-size: 29px; letter-spacing: -1px; margin-bottom: 20px; }
  .fc-felt { padding: 6px 6px 6px 18px; }
  .fc-felt input { font-size: 15px; padding: 11px 0; }
  .fc-kort { grid-template-columns: 1fr; }
}


/* ================================================
   IT FOR BEDRIFTER — SAMME FORM SOM RESTEN
   Runde #0A0A0A-seksjoner, kort i #121212 og lilla
   linjeikoner. Ingen bilder: siden handler om noe
   som ikke lar seg fotografere.
   ================================================ */
.it-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.it-page > .it-hero { margin-top: calc(70px + var(--innrykk)); padding: 104px 0 88px; }

.it-hero-tekst { max-width: 720px; margin-bottom: 44px; }
.it-hero-tekst h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.9px;
  color: #F5F5F5;
  margin: 14px 0 18px;
}
.it-lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 0 30px;
  max-width: 560px;
}
.it-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.it-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.it-fakta > div { padding: 20px 22px; border-radius: 18px; background: #121212; }
.it-fakta strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.it-fakta span { font-size: 12.5px; line-height: 1.5; color: rgba(232,240,255,0.4); }

.it-head { max-width: 640px; margin: 0 0 44px; }
.it-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 14px 0 14px;
}
.it-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

/* --- Kortene ----------------------------------------------------------- */
.it-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-kort article { padding: 32px 30px 34px; border-radius: var(--radius-lg); background: #121212; }
.it-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: #5438DC;
}
.it-ikon svg { width: 30px; height: 30px; }
.it-kort h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.it-kort p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Stegene ----------------------------------------------------------- */
.it-stegrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.it-stegrad > div { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.it-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.it-stegrad h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.it-stegrad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* Grensen for hva vi tar, i en roligere boks. */
.it-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.it-note-ikon { flex-shrink: 0; color: #5438DC; line-height: 0; }
.it-note-ikon svg { width: 24px; height: 24px; }
.it-note p { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); }

@media (max-width: 1024px) {
  .it-hero-tekst h1 { font-size: 38px; letter-spacing: -1.3px; }
  .it-fakta { grid-template-columns: repeat(2, 1fr); }
  .it-kort { grid-template-columns: repeat(2, 1fr); }
  .it-head h2 { font-size: 31px; }
}
@media (max-width: 767px) {
  .it-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .it-page > .it-hero { margin-top: calc(62px + var(--innrykk)); padding: 76px 0 56px; }
  .it-hero-tekst h1 { font-size: 31px; letter-spacing: -1.1px; }
  .it-hero-tekst h1 br { display: none; }
  .it-fakta, .it-kort, .it-stegrad { grid-template-columns: 1fr; }
  .it-note { padding: 20px 20px; gap: 13px; }
}

/* Knappen assistenten tilbyr naar den ikke kommer lenger. Den staar inne i
   samtalen, ikke som et eget skjema: det er samme henvendelse. */
.kx-ticket {
  margin: 2px 0;
  padding: 18px 20px 20px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}
.kx-ticket p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.6);
}
.kx-ticket.er-sendt {
  border-color: rgba(53,206,141,0.25);
  background: rgba(53,206,141,0.05);
}
.kx-ticket.er-sendt p { margin: 0; color: var(--green); }

.kx-ticket-knapp {
  padding: 10px 20px;
  border: 0;
  border-radius: 50px;
  background: #5438DC;
  color: #F5F5F5;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.kx-ticket-knapp:hover { background: #6A4BF0; }
.kx-ticket-knapp:disabled { opacity: .5; cursor: default; }


/* ================================================
   APPER — CAZH, REDESIGN MED BILDE
   Cazh har groent som sin farge (app-ikonet). Bildet
   staar til hoeyre og toner ut mot boksen rundt.
   ================================================ */
.apper-page > .ap-cazh {
  position: relative;
  overflow: hidden;
  padding: 88px 0 72px;
}
/* Et svakt groent skjaer bak bildet, saa overgangen blir myk. */
.apper-page > .ap-cazh::before {
  content: "";
  position: absolute;
  top: -10%; right: -8%;
  width: 60%; height: 90%;
  background: radial-gradient(closest-side, rgba(53,206,141,0.10), transparent);
  pointer-events: none;
}
.ap-cazh > .container { position: relative; }

.ap-cz-scene {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 56px;
}

.ap-cz-hode { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.ap-cz-ikon { width: 56px; height: 56px; display: block; }
.ap-cz-logo { height: 34px; width: auto; display: block; }
.ap-cz-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 50px;
  background: rgba(53,206,141,0.1);
  box-shadow: inset 0 0 0 1px rgba(53,206,141,0.22);
  color: #7BE3B5;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.ap-cz-status i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(53,206,141,0.8);
}

.ap-cz-tekst h2 {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.8px;
  color: #F5F5F5;
}
.ap-cz-tekst h2 span { color: var(--green); }
.ap-cz-ingress {
  max-width: 480px;
  margin: 0 0 32px;
  font-size: 16.5px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

.ap-cz-knapper { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.ap-cz-knapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 50px;
  background: var(--green);
  color: #07130D;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.ap-cz-knapp:hover { background: #4ADB9C; box-shadow: 0 8px 32px rgba(53,206,141,0.28); }
.ap-cz-knapp svg { width: 16px; height: 16px; transition: transform .2s; }
.ap-cz-knapp:hover svg { transform: translateX(3px); }
.ap-cz-merknad { font-size: 13px; color: rgba(232,240,255,0.35); }

/* Bildet toner ut i alle kanter, saa det smelter inn i den svarte boksen. */
.ap-cz-bilde { margin: -40px -40px -40px 0; }
.ap-cz-bilde img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

/* --- De tre punktene --------------------------------------------------- */
.ap-cz-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ap-cz-rad article {
  padding: 28px 26px 30px;
  border-radius: var(--radius-lg);
  background: #121212;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  transition: box-shadow .25s, background .25s;
}
.ap-cz-rad article:hover {
  background: #141614;
  box-shadow: inset 0 0 0 1px rgba(53,206,141,0.22);
}
.ap-cz-punktikon {
  display: flex;
  margin-bottom: 18px;
  color: var(--green);
}
.ap-cz-punktikon svg { width: 30px; height: 30px; }
.ap-cz-rad h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.ap-cz-rad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

@media (max-width: 1024px) {
  .ap-cz-tekst h2 { font-size: 40px; letter-spacing: -1.4px; }
  .ap-cz-bilde { margin: -24px -24px -24px 0; }
}
@media (max-width: 900px) {
  .ap-cz-scene { grid-template-columns: 1fr; gap: 0; margin-bottom: 40px; }
  /* Paa smal skjerm staar bildet oeverst, som en scene teksten starter i. */
  .ap-cz-bilde { order: -1; max-width: 460px; margin: -40px auto -30px; }
  .ap-cz-rad { grid-template-columns: 1fr; }
  /* Glansen bak bildet foelger bildet opp paa toppen, i stedet for aa
     strekkes nedover hele den hoeye boksen. */
  .apper-page > .ap-cazh::before { top: 0; right: 0; left: 0; width: auto; height: 440px; }
}
@media (max-width: 767px) {
  .apper-page > .ap-cazh { padding: 56px 0 48px; }
  .ap-cz-hode { gap: 12px; margin-bottom: 22px; }
  .ap-cz-ikon { width: 46px; height: 46px; }
  .ap-cz-logo { height: 28px; }
  .ap-cz-tekst h2 { font-size: 32px; letter-spacing: -1.1px; }
  .ap-cz-tekst h2 br { display: none; }
  .ap-cz-ingress { font-size: 15.5px; margin-bottom: 26px; }
  .ap-cz-bilde { max-width: 340px; margin: -24px auto -24px; }
  .ap-cz-rad article { padding: 24px 22px 26px; }
}


/* ================================================
   INNHOLDSSKAPNING — SAMME FORM SOM RESTEN
   Seksjoner i runde #0A0A0A-bokser, kort i #121212,
   lilla linjeikoner. Filmstillet staar i full bredde
   under heroteksten, bilen i en split lenger ned.
   ================================================ */
.ih-page > section {
  --innrykk: 12px;
  margin: var(--innrykk);
  padding: 100px 0;
  border-radius: 32px;
  background: #0A0A0A;
}
.ih-page > .ih-hero { margin-top: calc(70px + var(--innrykk)); padding: 104px 0 88px; }

.ih-hero-tekst { max-width: 720px; margin-bottom: 44px; }
.ih-hero-tekst h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.9px;
  color: #F5F5F5;
  margin: 14px 0 18px;
}
.ih-lead {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
  margin: 0 0 30px;
  max-width: 560px;
}
.ih-hero-knapper { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.ih-ramme { margin: 0; }
.ih-ramme img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: #121212;
}
.ih-ramme--hero { margin-bottom: 40px; }
.ih-ramme--hero img { border-radius: 28px; }
.ih-ramme figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(232,240,255,0.32);
}

.ih-fakta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ih-fakta > div { padding: 20px 22px; border-radius: 18px; background: #121212; }
.ih-fakta strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #F5F5F5;
  margin-bottom: 4px;
}
.ih-fakta span { font-size: 12.5px; line-height: 1.5; color: rgba(232,240,255,0.4); }

.ih-head { max-width: 640px; margin: 0 0 44px; }
.ih-head h2 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: #F5F5F5;
  margin: 14px 0 14px;
}
.ih-head p { font-size: 16px; line-height: 1.8; color: rgba(232,240,255,0.55); margin: 0; }

/* --- Kortene ----------------------------------------------------------- */
.ih-kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ih-kort article { padding: 32px 30px 34px; border-radius: var(--radius-lg); background: #121212; }
.ih-ikon {
  display: flex; align-items: center; justify-content: flex-start;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  color: #5438DC;
}
.ih-ikon svg { width: 30px; height: 30px; }
.ih-kort h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; }
.ih-kort p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- Studio-splitten --------------------------------------------------- */
.ih-lys-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 52px;
  align-items: center;
}
.ih-lys-tekst h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 14px 0 16px;
}
.ih-lys-tekst .ih-lead { margin-bottom: 24px; }
.ih-punkter { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.ih-punkter li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232,240,255,0.66);
}
.ih-punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* --- Stegene ----------------------------------------------------------- */
.ih-stegrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ih-stegrad > div { padding: 30px 28px 32px; border-radius: var(--radius-lg); background: #121212; }
.ih-steg-nr {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(84,56,220,0.22);
  color: #C4B8FF;
  font-size: 15px;
  font-weight: 800;
}
.ih-stegrad h3 { font-size: 18px; font-weight: 700; margin: 0 0 9px; }
.ih-stegrad p { font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); margin: 0; }

/* --- CTA --------------------------------------------------------------- */
.ih-cta-boks { padding: 70px 40px; border-radius: var(--radius-lg); background: #121212; text-align: center; }
.ih-cta-boks h2 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: #F5F5F5;
  margin: 0 0 16px;
}
.ih-cta-boks p {
  max-width: 500px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(232,240,255,0.55);
}

@media (max-width: 1024px) {
  .ih-hero-tekst h1 { font-size: 38px; letter-spacing: -1.3px; }
  .ih-fakta { grid-template-columns: repeat(2, 1fr); }
  .ih-kort { grid-template-columns: repeat(2, 1fr); }
  .ih-lys-inner { grid-template-columns: 1fr; gap: 34px; }
  .ih-head h2, .ih-lys-tekst h2, .ih-cta-boks h2 { font-size: 31px; }
}
@media (max-width: 767px) {
  .ih-page > section { --innrykk: 8px; border-radius: 24px; padding: 64px 0; }
  .ih-page > .ih-hero { margin-top: calc(62px + var(--innrykk)); padding: 76px 0 56px; }
  .ih-hero-tekst { margin-bottom: 32px; }
  .ih-hero-tekst h1 { font-size: 31px; letter-spacing: -1.1px; }
  .ih-hero-tekst h1 br,
  .ih-lys-tekst h2 br,
  .ih-cta-boks h2 br { display: none; }
  .ih-fakta, .ih-kort, .ih-stegrad { grid-template-columns: 1fr; }
  .ih-ramme img, .ih-ramme--hero img { border-radius: 18px; }
  .ih-ramme--hero { margin-bottom: 28px; }
  .ih-cta-boks { padding: 48px 24px; }
}


/* ================================================
   INNHOLDSSKAPNING — HERO MED BILDET SOM BAKGRUNN
   Filmstillet fyller hele boksen. To lag med moerke
   over: ett nedenfra og ett fra hoeyre, der teksten
   staar. Kvinnen til venstre i bildet holdes lys.
   ================================================ */
.ih-page > .ih-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(720px, calc(100vh - 94px), 900px);
  padding: 140px 0 32px;
  background: #0A0A0A;
}
.ih-hero-bg { position: absolute; inset: 0; z-index: -1; }
.ih-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 35%;
}
.ih-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 22%,
                            rgba(10,10,10,0) 38%, rgba(10,10,10,0.78) 72%, #0A0A0A 100%),
    linear-gradient(270deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.35) 40%, rgba(10,10,10,0) 62%);
}
.ih-hero > .container { position: relative; width: 100%; }

.ih-page .ih-hero-tekst {
  max-width: 540px;
  margin: 0 0 40px auto;
}
.ih-page .ih-hero-tekst h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.ih-hero .ih-lead { color: rgba(232,240,255,0.72); }
.ih-hero .btn-ghost {
  background: rgba(10,10,10,0.35);
  border-color: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Faktaboksene ligger over bildet som moerkt glass. */
.ih-hero .ih-fakta > div {
  background: rgba(18,18,18,0.62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ih-hero-merknad {
  margin: 14px 4px 0;
  font-size: 11.5px;
  color: rgba(232,240,255,0.3);
}

@media (max-width: 1024px) {
  .ih-page > .ih-hero { min-height: 760px; }
  .ih-page .ih-hero-tekst { margin-left: 0; max-width: 600px; }
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 20%,
                                rgba(10,10,10,0) 32%, rgba(10,10,10,0.82) 62%, #0A0A0A 100%);
  }
}
@media (max-width: 767px) {
  /* Paa mobil staar bildet oeverst med ansiktet synlig, og teksten
     begynner der det toner over i svart. */
  .ih-page > .ih-hero { display: block; min-height: 0; padding: 0 0 26px; }
  .ih-hero-bg { position: relative; inset: auto; height: 380px; margin-bottom: -110px; }
  .ih-hero-bg img { object-position: 26% 30%; }
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 22%,
                                rgba(10,10,10,0) 45%, #0A0A0A 100%);
  }
  .ih-page .ih-hero-tekst { margin-bottom: 30px; }
}

/* Mer moerke bak teksten til hoeyre, og etiketten i glass, ellers
   forsvinner den groenne teksten mot den lyse himmelen. */
.ih-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0) 22%,
                            rgba(10,10,10,0) 40%, rgba(10,10,10,0.8) 74%, #0A0A0A 100%),
    linear-gradient(270deg, rgba(10,10,10,0.86) 0%, rgba(10,10,10,0.6) 34%, rgba(10,10,10,0) 60%);
}
.ih-hero .section-label {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 50px;
  background: rgba(10,10,10,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (max-width: 1024px) {
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 20%,
                                rgba(10,10,10,0) 32%, rgba(10,10,10,0.82) 62%, #0A0A0A 100%);
  }
}
@media (max-width: 767px) {
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 22%,
                                rgba(10,10,10,0) 45%, #0A0A0A 100%);
  }
}

@media (max-width: 767px) {
  /* Bildet toner helt over i svart litt foer kanten, saa det ikke blir
     en synlig skjoet der teksten begynner. */
  .ih-hero-bg { height: 400px; }
  .ih-hero-bg::after {
    bottom: -1px;
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0) 22%,
                                rgba(10,10,10,0) 42%, rgba(10,10,10,0.9) 80%, #0A0A0A 90%);
  }
}

@media (max-width: 767px) {
  /* Faktaboksene to og to i heroen, saa de ikke tar en hel skjerm. */
  .ih-hero .ih-fakta { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ih-hero .ih-fakta > div { padding: 16px 16px; }
  .ih-hero .ih-fakta strong { font-size: 16px; }
}

/* Forbeholdet om AI staar i en egen, roligere boks under stegene. */
.ih-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: #121212;
}
.ih-note-ikon { flex-shrink: 0; color: #5438DC; line-height: 0; }
.ih-note-ikon svg { width: 24px; height: 24px; }
.ih-note p { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(232,240,255,0.5); }
@media (max-width: 767px) { .ih-note { padding: 20px; gap: 13px; } }


/* ================================================
   INNHOLDSSKAPNING — MINIMAL HERO
   Bare bildet og ett spoersmaal. Moerket er lettere
   enn foer, siden det bare er én linje som skal leses.
   ================================================ */
.ih-page > .ih-hero {
  align-items: center;
  min-height: clamp(640px, calc(100vh - 94px), 880px);
  padding: 0;
}
.ih-hero-bg::after {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0) 30%,
                            rgba(10,10,10,0) 70%, rgba(10,10,10,0.55) 100%),
    linear-gradient(270deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.25) 38%, rgba(10,10,10,0) 58%);
}
.ih-hero-tittel {
  max-width: 520px;
  margin: 0 0 0 auto;
  font-size: 76px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -3px;
  color: #F5F5F5;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.ih-hva .ih-hero-knapper { margin-top: 26px; }

@media (max-width: 1024px) {
  .ih-hero-tittel { font-size: 60px; letter-spacing: -2.2px; }
  .ih-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0) 30%,
                              rgba(10,10,10,0) 50%, rgba(10,10,10,0.75) 100%);
  }
  .ih-page > .ih-hero { align-items: flex-end; padding-bottom: 56px; }
  .ih-hero-tittel { margin-left: 0; }
}
@media (max-width: 767px) {
  /* Paa mobil fyller bildet hele boksen, og spoersmaalet staar nederst. */
  .ih-page > .ih-hero { display: flex; min-height: 560px; padding: 0 0 36px; }
  .ih-hero-bg { position: absolute; inset: 0; height: auto; margin-bottom: 0; }
  .ih-hero-bg img { object-position: 24% 30%; }
  .ih-hero-bg::after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0) 30%,
                                rgba(10,10,10,0) 48%, rgba(10,10,10,0.8) 100%);
  }
  .ih-hero-tittel { font-size: 44px; letter-spacing: -1.6px; }
}


/* Innholdsskapning: spoersmaalet i moerk skrift. Bildet er lyst der teksten
   staar, saa det moerke laget tas bort, og et svakt lyst lag legges bak
   teksten i stedet. */
.ih-hero-tittel { color: #0A0A0A; text-shadow: none; }
.ih-hero-bg::after {
  background: linear-gradient(270deg, rgba(245,245,245,0.45) 0%, rgba(245,245,245,0.18) 38%, rgba(245,245,245,0) 58%);
}
@media (max-width: 1024px) {
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(245,245,245,0) 50%, rgba(245,245,245,0.5) 100%);
  }
}
@media (max-width: 767px) {
  .ih-hero-bg::after {
    background: linear-gradient(180deg, rgba(245,245,245,0) 52%, rgba(245,245,245,0.6) 100%);
  }
}

/* Innholdsskapning: spoersmaalet i Montserrat Medium med vanlig
   bokstavavstand, roligere enn de fete overskriftene ellers. */
.ih-hero-tittel { font-family: "Montserrat", sans-serif; font-weight: 500; letter-spacing: -1px; line-height: 1.08; }
@media (max-width: 1024px) { .ih-hero-tittel { letter-spacing: -0.8px; } }
@media (max-width: 767px)  { .ih-hero-tittel { letter-spacing: -0.5px; } }

/* Innholdsskapning: bare ett ord, stort. */
.ih-hero-tittel {
  max-width: none;
  width: fit-content;
  font-size: clamp(96px, 14vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
@media (max-width: 767px) {
  .ih-hero-tittel { font-size: 23vw; letter-spacing: -0.03em; }
}

/* Innholdsskapning: EKTE? satt som logoen. Logoen er Montserrat Bold med
   vanlig bokstavavstand og kerning, saa det samme brukes her. */
.ih-hero-tittel { font-weight: 700; letter-spacing: 0; font-kerning: normal; }
@media (max-width: 767px) { .ih-hero-tittel { letter-spacing: 0; font-size: 21vw; } }



/* ================================================
   AI-CHATTENE — STROEMMING, FORSLAG OG FORMATERING
   Felles for forsiden og Kontakt. Svaret kommer mens
   det skrives (med en blinkende markoer), kan ha fet
   skrift, korte lister og lenker til egne sider, og
   avsluttes med knapper for neste spoersmaal.
   ================================================ */

/* Markoeren mens svaret skrives. */
.ua-ai-skriver > :last-child::after,
.ua-ai-skriver:empty::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -0.15em;
  border-radius: 2px;
  background: var(--green);
  animation: ua-ai-blink 1s steps(2, start) infinite;
}
.ua-ai-skriver > ul:last-child::after { display: none; }
.ua-ai-skriver > ul:last-child > li:last-child::after {
  content: "";
  display: inline-block;
  width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em;
  border-radius: 2px; background: var(--green);
  animation: ua-ai-blink 1s steps(2, start) infinite;
}
@keyframes ua-ai-blink { to { visibility: hidden; } }

/* Tre prikker som puster foer foerste ord kommer. */
@keyframes ua-ai-pust { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
.fc-prikker, .kx-prikker { display: block; font-style: normal; }
.fc-prikker::before, .kx-prikker::before {
  content: "\2022\2022\2022";
  letter-spacing: 4px;
  font-size: 18px;
  line-height: 1;
  color: rgba(232,240,255,0.7);
  animation: ua-ai-pust 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ua-ai-skriver > :last-child::after { animation: none; }
  .fc-prikker::before, .kx-prikker::before { animation: none; opacity: .5; }
}

/* --- Forsiden ------------------------------------------------------------ */

.fc-svar p { margin: 0 0 10px; }
.fc-svar p:last-child { margin-bottom: 0; }
.fc-svar ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.fc-svar ul:last-child { margin-bottom: 0; }
.fc-svar li { position: relative; padding-left: 18px; }
.fc-svar li::before {
  content: "";
  position: absolute;
  left: 2px; top: .7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5438DC;
}
.fc-svar strong { color: #F5F5F5; font-weight: 700; }
.fc-svar a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(53,206,141,0.35); }
.fc-svar a:hover { border-bottom-color: var(--green); }
.fc-svar--venter { margin-bottom: 26px; }

/* Spoersmaal aa begynne med, og forslag etter svaret. Samme pille. */
.fc-start, .fc-forslag {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fc-start { justify-content: center; max-width: 660px; margin: 16px auto 0; }
.fc-start[hidden], .fc-bunn[hidden] { display: none; }
.fc-forslag { margin: -10px 0 28px; }

.fc-start button, .fc-forslag button {
  padding: 8px 15px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.6);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.fc-start button:hover, .fc-forslag button:hover {
  border-color: rgba(84,56,220,0.55);
  background: rgba(84,56,220,0.14);
  color: #F5F5F5;
}

.fc-bunn { max-width: 660px; margin: 18px auto 0; display: flex; justify-content: center; }
.fc-bunn button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: rgba(232,240,255,0.32);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .2s;
}
.fc-bunn button:hover { color: rgba(232,240,255,0.7); }
.fc-bunn svg { width: 14px; height: 14px; }

@media (max-width: 767px) {
  .fc-start { justify-content: flex-start; }
  .fc-start button, .fc-forslag button { font-size: 12.5px; padding: 7px 13px; }
}

/* --- Kontakt ------------------------------------------------------------- */

.kx-tekst {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(232,240,255,0.82);
}
.kx-tekst p { margin: 0 0 8px; white-space: normal; font-size: inherit; color: inherit; }
.kx-tekst p:last-child { margin-bottom: 0; }
.kx-melding--bruker .kx-tekst { color: rgba(232,240,255,0.52); white-space: pre-wrap; }
.kx-tekst ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 5px; }
.kx-tekst ul:last-child { margin-bottom: 0; }
.kx-tekst li { position: relative; padding-left: 16px; }
.kx-tekst li::before {
  content: "";
  position: absolute;
  left: 1px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #5438DC;
}
.kx-tekst strong { color: #F5F5F5; font-weight: 700; }
.kx-tekst a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(53,206,141,0.35); }
.kx-tekst a:hover { border-bottom-color: var(--green); }

/* Svar fra et menneske hos oss faar lilla avsender, saa de skiller seg ut. */
.kx-melding--ansatt .kx-avsender { color: #A78BFA; }
.kx-melding--ansatt .kx-tekst {
  padding-left: 12px;
  box-shadow: inset 2px 0 0 rgba(167,139,250,0.55);
}

.kx-skille {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(232,240,255,0.22);
}
.kx-skille::before, .kx-skille::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}

.kx-forslag { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -10px; }
.kx-forslag button {
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50px;
  background: none;
  color: rgba(232,240,255,0.6);
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.kx-forslag button:hover {
  border-color: rgba(84,56,220,0.55);
  background: rgba(84,56,220,0.14);
  color: #F5F5F5;
}

.kx-ny {
  align-self: flex-end;
  margin: -6px 22px 10px auto;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: rgba(232,240,255,0.32);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color .2s;
}
.kx-ny:hover { color: rgba(232,240,255,0.7); }
.kx-ny[hidden] { display: none; }


/* Nummererte steg i chat-svarene. Tallet staar der prikken ellers staar. */
.fc-svar ol, .kx-tekst ol, .ua-mh-svar ol {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0;
  display: grid;
  gap: 5px;
  counter-reset: ua-steg;
}
.fc-svar ol:last-child, .kx-tekst ol:last-child, .ua-mh-svar ol:last-child { margin-bottom: 0; }
.fc-svar ol li, .kx-tekst ol li, .ua-mh-svar ol li { position: relative; padding-left: 24px; counter-increment: ua-steg; }
.fc-svar ol li::before, .kx-tekst ol li::before, .ua-mh-svar ol li::before {
  content: counter(ua-steg) ".";
  position: absolute;
  left: 0; top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #A78BFA;
}
.ua-ai-skriver > ol:last-child::after { display: none; }


/* ================================================
   NAVBAR — APPER-MENYEN
   Samme panel som Tjenester. Cazh staar som et eget
   kort med app-ikonet og logoen, og lenker ut til
   cazh.no. Kortet ved siden av gaar til alle appene.
   ================================================ */
.nav-apper-inner {
  grid-template-columns: 1.7fr 1fr;
  max-width: 860px;
}

.site-nav .nav-mega a.nav-app,
.site-nav .nav-mega a.nav-app-alle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 22px;
  background: #1B1B1B;
  transition: background .25s, box-shadow .25s;
}

/* Cazh-kortet faar en svak groenn glans som vokser ved hover. */
.site-nav .nav-mega a.nav-app {
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(53,206,141,0.10), transparent 55%),
    #1B1B1B;
}
.site-nav .nav-mega a.nav-app:hover {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(53,206,141,0.18), transparent 60%),
    #1E1E1E;
  box-shadow: inset 0 0 0 1px rgba(53,206,141,0.28);
}

.nav-app-ikon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: block;
  transition: transform .3s cubic-bezier(0.22,1,0.36,1);
}
.site-nav .nav-mega a.nav-app:hover .nav-app-ikon { transform: scale(1.06) rotate(-3deg); }

.nav-app-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nav-app-topp { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.nav-app-logo { height: 26px; width: auto; display: block; }
.nav-app-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(53,206,141,0.1);
  box-shadow: inset 0 0 0 1px rgba(53,206,141,0.22);
  color: #7BE3B5;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.nav-app-status i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(53,206,141,0.8);
}
.nav-app-beskrivelse {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(232,240,255,0.55);
}
.nav-app-lenke {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}
.nav-app-lenke svg { width: 14px; height: 14px; transition: transform .25s; }
.site-nav .nav-mega a.nav-app:hover .nav-app-lenke svg { transform: translate(2px, -2px); }

/* «Alle apper» */
.site-nav .nav-mega a.nav-app-alle:hover { background: #1F1F1F; }
.nav-app-pluss {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #5438DC;
  color: #F5F5F5;
  transition: background .2s, color .2s;
}
.nav-app-pluss svg { width: 22px; height: 22px; }
.site-nav .nav-mega a.nav-app-alle:hover .nav-app-pluss { background: #F5F5F5; color: #5438DC; }
.nav-app-alletekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav-app-alletekst strong { font-size: 14.5px; font-weight: 600; color: #F5F5F5; }
.nav-app-alletekst span { font-size: 12.5px; line-height: 1.45; color: rgba(232,240,255,0.5); }

@media (max-width: 1024px) and (min-width: 768px) {
  .nav-apper-inner { grid-template-columns: 1.5fr 1fr; }
}

@media (max-width: 767px) {
  /* I mobilmenyen staar kortene under hverandre i trekkspillet. */
  .nav-apper-inner { display: block; }
  .site-nav .nav-mega a.nav-app,
  .site-nav .nav-mega a.nav-app-alle { padding: 14px; gap: 14px; margin-bottom: 8px; border-radius: 18px; }
  .site-nav .nav-mega a.nav-app-alle { margin-bottom: 0; }
  .nav-app-ikon { width: 52px; height: 52px; }
  .nav-app-logo { height: 22px; }
  .nav-app-pluss { width: 40px; height: 40px; }
  .nav-app-pluss svg { width: 19px; height: 19px; }
}


/* IXU-logoen er kort og hoey der den gamle var lang og lav. Den faar derfor
   litt mer hoeyde, saa den veier det samme i navbaren og footeren. */
.site-logo img { height: 34px; }
.footer-logo img { height: 40px; }
@media (max-width: 767px) {
  .site-logo img { height: 30px; }
  .footer-logo img { height: 36px; }
}