/* Hellander NXT – forsida (index.html)
   Det bare forsida bruker: heroscenen med laptopen og fordelene. Lastes etter stil.css på
   index.html og ingen andre steder. Tokens (--blaa, --fjaer osv.) og
   felleskomponentene (.tjeneste, .knapp, .ring-tilbake) står i stil.css;
   her står bare det forsida legger til. */

/* Innhold

    1. Forsidens hero
    2. Scenen
    3. Miniatyrsiden inne i skjermen
    4. Glassformer
    5. Inngangsanimasjon
    6. Hero på mobil og nettbrett
    7. Tjenestemosaikk
    8. Fordelsrader ("Derfor velger bedrifter oss")
    9. Bloggliste
   10. Diverse: laptopen bygger seg, ring tilbake i båndet
   11. Heroteksten over glassformene
   12. Mørk drakt

   Eksempelstripa, bransjelenkene og referansekortene står i stil.css
   (seksjon 40 og 41), fordi nettsider.html viser de samme.
*/

/* ---------- Forsidens hero ---------- */

.hero-forside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  padding-block: 2rem 4rem;
  background-image:
    radial-gradient(60% 55% at 12% 18%, rgba(206, 205, 246, 0.75) 0%, rgba(206, 205, 246, 0) 60%),
    radial-gradient(55% 50% at 88% 22%, rgba(255, 238, 214, 0.70) 0%, rgba(255, 238, 214, 0) 62%),
    radial-gradient(65% 60% at 76% 82%, rgba(198, 214, 247, 0.80) 0%, rgba(198, 214, 247, 0) 64%),
    radial-gradient(50% 45% at 30% 88%, rgba(226, 214, 246, 0.70) 0%, rgba(226, 214, 246, 0) 60%),
    linear-gradient(180deg, #fbfbfe 0%, #f4f5fb 100%);
}

.hero-forside::before { display: none; }

/* Under 820 px har forsida samme luft som de andre heroene. Før
   stilarket ble delt, skjedde det av rekkefølgen alene: .hero sin
   mobilregel i stil.css kom etter padding-block over og vant. Nå som
   forside.css lastes sist, må det stå her. */
@media (max-width: 820px) {
  .hero-forside { padding-block: 3rem 3.5rem; }
}

/* Bølgenettet. Egen fil slik at den caches og ikke tynger HTML-en. */
.hero-bolge {
  position: absolute;
  inset: 0 -10% 0 auto;
  z-index: -1;
  width: 70%;
  background: url("../img/bolge.svg") no-repeat center / cover;
  opacity: 0.7;
  pointer-events: none;
}

@media (max-width: 820px) { .hero-bolge { display: none; } }

/* To spalter: tekst til venstre, scenen til høyre. */
.hero-forside .hero-indre {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  perspective: 1200px;
}

.hero-forside .hero-tekst { text-align: left; margin-inline: 0; max-width: 32rem; }
.hero-forside .hero-tekst .ingress { margin-inline: 0; }
.hero-forside .hero-knapper { justify-content: flex-start; }


/* ---------- Scenen ---------- */

.hero-scene { position: relative; width: 100%; }

.hero-vippe {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  /* Settes av js/hero.js. Uten JS blir begge 0 og laptopen står rett. */
  transform: rotateX(var(--vippe-x, 0deg)) rotateY(var(--vippe-y, 0deg));
  transition: transform 0.5s var(--fjaer);
  will-change: transform;
}

.hero-laptop { position: relative; width: 82%; margin: 0 auto; }

.hero-lokk {
  border-radius: 14px 14px 0 0;
  padding: 1.1%;
  background: linear-gradient(180deg, #e8ebf0, #cdd3dc);
  box-shadow: 0 30px 60px -30px rgba(20, 26, 36, 0.55);
}

.hero-skjerm {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: var(--hvit);
  border: clamp(4px, 0.9vw, 11px) solid #20242c;
}

.hero-hakk {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 16%;
  height: 4%;
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
  background: #20242c;
}

/* Foten, med hakk for hengselen */
.hero-fot {
  position: relative;
  width: 112%;
  height: clamp(10px, 1.6vw, 22px);
  margin-inline: auto;
  transform: translateX(-5.35%);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #dde2ea, #bcc3cf);
  box-shadow: 0 18px 30px -14px rgba(20, 26, 36, 0.45);
}

.hero-fot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 0 0 999px 999px;
  background: #aeb6c3;
}


/* ---------- Miniatyrsiden inne i skjermen ---------- */

.hero-side {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f7f9ff 0%, #ffffff 55%, #fdf4ef 100%);
}

.hero-side-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5% 4% 0;
}

.hero-side-merke {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(5px, 1.05vw, 13px);
  color: var(--blekk);
}

.hero-side-meny { display: flex; align-items: center; gap: 6px; }
.hero-side-meny i {
  width: clamp(11px, 2vw, 26px);
  height: clamp(2px, 0.38vw, 5px);
  border-radius: 2px;
  background: #d5dae3;
}
.hero-side-meny b {
  width: clamp(16px, 2.8vw, 36px);
  height: clamp(5px, 0.95vw, 12px);
  border-radius: var(--pille);
  background: var(--blaa);
}

.hero-side-hoved {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4%;
  padding: 3% 5%;
}

.hero-side-tekst span { display: block; border-radius: 3px; background: #dfe4ec; }
.hero-side-tekst .stor {
  height: clamp(4px, 0.9vw, 11px);
  width: 92%;
  margin-bottom: 6px;
  background: #c6cdd9;
}
.hero-side-tekst .stor.kort { width: 70%; margin-bottom: 10%; }
.hero-side-tekst .liten { height: clamp(2px, 0.45vw, 6px); width: 100%; margin-bottom: 5px; }
.hero-side-tekst .liten.kort { width: 78%; }
.hero-side-tekst .pille {
  height: clamp(5px, 1vw, 13px);
  width: 38%;
  margin-top: 9%;
  border-radius: var(--pille);
  background: var(--blaa);
}

.hero-side-kunst { position: relative; }

.hero-side-bilde {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: linear-gradient(135deg, #dbe7f8 0%, #eaf4f8 55%, #f5ece0 100%);
  box-shadow: inset 0 0 0 1px rgba(20, 26, 36, 0.06);
}

.hero-side-kort {
  position: absolute;
  top: 18%;
  left: -12%;
  width: 46%;
  height: 42%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 4px 10px -4px rgba(20, 26, 36, 0.25);
}

.hero-side-bunn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.2% 5%;
  border-top: 1px solid #eef1f6;
}

.hero-side-bunn span {
  width: clamp(14px, 2.6vw, 34px);
  height: clamp(2px, 0.4vw, 5px);
  border-radius: 2px;
  background: #d5dae3;
}


/* ---------- Ordet som skifter i overskriften ----------
   Alle ordene står i samme rute (grid-area 1 / 1), så ruta er like stor som
   det lengste fra første tegning, og ingenting under flytter seg. Bare det
   valgte vises. js/hero.js setter data-roterer på heroen før første bytte;
   før det, og uten JS, står «En nettside» uten noen animasjon. */

.hero-ord { display: grid; }

.hero-ord-et {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  z-index: 0;
  white-space: nowrap;
  color: var(--blaa);
}
.hero-ord-et:not(.er-valgt) { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero-forside[data-roterer] .hero-ord-et.er-valgt { animation: ord-inn 0.65s var(--fjaer) both; }
  .hero-forside[data-roterer] .hero-ord-et.er-ut { animation: ord-ut 0.4s ease-in both; }
}

@keyframes ord-inn {
  from { opacity: 0; transform: translateY(0.45em); }
  to   { opacity: 1; transform: none; }
}
@keyframes ord-ut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-0.4em); }
}


/* ---------- Visningene: system, nettbutikk og app ----------
   Hver visning hører til ett ord over (samme data-visning). js/hero.js gir
   begge klassen er-valgt samtidig. System og nettbutikk legger seg over
   miniatyrsiden inne i skjermen; appen er en telefon foran laptopen. Selve
   dashbordet er .systemskisse i stil.css, delt med systemer.html. */

.hero-visning {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
}
.hero-visning.er-valgt { opacity: 1; }
.hero-visning .systemskisse { height: 100%; aspect-ratio: auto; }

/* Nettbutikken: toppfelt med handlekurv, og varer i to rader */
.hero-butikk {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #fffaf5 0%, #ffffff 40%);
}
.hero-butikk-topp { display: flex; align-items: center; gap: 3cqi; padding: 3.6cqi 4.4cqi 2.2cqi; }
.hero-butikk-merke { width: 14cqi; height: 2.2cqi; border-radius: 1cqi; background: #3a4252; }
.hero-butikk-meny { display: flex; gap: 2.2cqi; margin-left: auto; }
.hero-butikk-meny i { width: 6.5cqi; height: 1cqi; border-radius: 1cqi; background: #d5dae3; }
.hero-butikk-kurv {
  position: relative;
  width: 4.6cqi;
  height: 4cqi;
  margin-left: 1.5cqi;
  border: 0.55cqi solid #3a4252;
  border-radius: 0.6cqi 0.6cqi 1.4cqi 1.4cqi;
}
.hero-butikk-kurv b {
  position: absolute;
  top: -2.2cqi;
  right: -2.6cqi;
  min-width: 3.2cqi;
  height: 3.2cqi;
  padding: 0 0.7cqi;
  border-radius: 3.2cqi;
  background: #e2553f;
  color: var(--paa-blaa);
  font: 700 2cqi / 3.2cqi Lato, system-ui, sans-serif;
  text-align: center;
}
.hero-butikk-varer {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2.6cqi 2.4cqi;
  min-height: 0;
  padding: 0.6cqi 4.4cqi 4cqi;
}
.hero-butikk-varer span { display: flex; flex-direction: column; gap: 1.1cqi; min-height: 0; }
.hero-butikk-varer i {
  flex: 1;
  min-height: 0;
  border-radius: 1.3cqi;
  background: linear-gradient(135deg, #f3e7da, #e7d3bf);
}
.hero-butikk-varer span:nth-child(2) i { background: linear-gradient(135deg, #dbe7f8, #c9d8f1); }
.hero-butikk-varer span:nth-child(3) i { background: linear-gradient(135deg, #e3efe6, #cfe3d6); }
.hero-butikk-varer span:nth-child(4) i { background: linear-gradient(135deg, #f1e3ee, #e4cfe0); }
.hero-butikk-varer span:nth-child(5) i { background: linear-gradient(135deg, #f6eed6, #ecdfb7); }
.hero-butikk-varer span:nth-child(6) i { background: linear-gradient(135deg, #e6e9ef, #d3d8e2); }
.hero-butikk-varer em { width: 72%; height: 1.1cqi; border-radius: 1cqi; background: #dfe4ec; }
.hero-butikk-varer b { width: 36%; height: 2.3cqi; border-radius: 2.3cqi; background: var(--blaa); }

/* Appen: telefonen står foran laptopen, i samme vipping. Telefonen er
   containeren: cqi inne i den er prosent av telefonens bredde. Et element
   måler cqi mot containeren over seg, ikke seg selv - uten noen over blir
   det viewporten. Derfor står ikke skjermen inni som container. */
.hero-mobil {
  container-type: inline-size;
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: -5%;
  width: 21%;
  aspect-ratio: 9 / 18.5;
  padding: 1.2%;
  border-radius: 18% / 8.8%;
  background: #20242c;
  box-shadow: 0 26px 44px -20px rgba(20, 26, 36, 0.6);
  opacity: 0;
  transform: translate3d(14%, 16%, 60px) rotate(7deg);
}
.hero-mobil.er-valgt { opacity: 1; transform: translate3d(0, 0, 60px) rotate(-4deg); }

.hero-mobil-skjerm {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6cqi;
  height: 100%;
  padding: 16cqi 8cqi 0;
  overflow: hidden;
  border-radius: 15% / 7.4%;
  background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 60%);
}
.hero-mobil-oy {
  position: absolute;
  top: 4cqi;
  left: 50%;
  width: 30cqi;
  height: 7.5cqi;
  transform: translateX(-50%);
  border-radius: 7.5cqi;
  background: #20242c;
}
.hero-mobil-topp { flex: none; width: 56%; height: 6cqi; border-radius: 3cqi; background: #c6cdd9; }
.hero-mobil-bilde {
  flex: none;
  height: 30%;
  border-radius: 8cqi;
  background: linear-gradient(135deg, #dbe7f8 0%, #eaf4f8 55%, #f5ece0 100%);
}
.hero-mobil-kort {
  flex: none;
  height: 12cqi;
  border-radius: 5cqi;
  background: var(--hvit);
  box-shadow: inset 0 0 0 0.9cqi #eef1f6;
}
.hero-mobil-faner {
  display: flex;
  justify-content: space-around;
  margin: auto -8cqi 0;
  padding: 6cqi 0 10cqi;
  border-top: 0.9cqi solid #eef1f6;
  background: var(--hvit);
}
.hero-mobil-faner i { width: 9cqi; height: 9cqi; border-radius: 3cqi; background: #d5dae3; }
.hero-mobil-faner i:first-child { background: var(--blaa); }

@media (prefers-reduced-motion: no-preference) {
  .hero-visning { transition: opacity 0.5s var(--fjaer); }
  .hero-mobil {
    transition: opacity 0.4s var(--fjaer),
                transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Det som kommer inn, bygger seg opp på samme måte som miniatyrsiden */
  .hero-visning.er-valgt .systemskisse-tall span,
  .hero-visning.er-valgt .systemskisse-tabell span,
  .hero-visning.er-valgt .hero-butikk-varer span,
  .hero-mobil.er-valgt .hero-mobil-skjerm > span:not(.hero-mobil-oy) {
    animation: demo-bygg 0.5s var(--fjaer) both;
  }
  .hero-visning.er-valgt .systemskisse-graf i { animation: skisse-soyle 0.7s var(--fjaer) both; }

  .hero-visning.er-valgt .systemskisse-tall span:nth-child(2) { animation-delay: 0.08s; }
  .hero-visning.er-valgt .systemskisse-tall span:nth-child(3) { animation-delay: 0.16s; }
  .hero-visning.er-valgt .systemskisse-graf i:nth-child(n+2) { animation-delay: 0.2s; }
  .hero-visning.er-valgt .systemskisse-graf i:nth-child(n+4) { animation-delay: 0.28s; }
  .hero-visning.er-valgt .systemskisse-graf i:nth-child(n+6) { animation-delay: 0.36s; }
  .hero-visning.er-valgt .systemskisse-tabell span { animation-delay: 0.4s; }
  .hero-visning.er-valgt .systemskisse-tabell span:nth-child(n+2) { animation-delay: 0.48s; }

  .hero-visning.er-valgt .hero-butikk-varer span:nth-child(2) { animation-delay: 0.06s; }
  .hero-visning.er-valgt .hero-butikk-varer span:nth-child(3) { animation-delay: 0.12s; }
  .hero-visning.er-valgt .hero-butikk-varer span:nth-child(4) { animation-delay: 0.18s; }
  .hero-visning.er-valgt .hero-butikk-varer span:nth-child(5) { animation-delay: 0.24s; }
  .hero-visning.er-valgt .hero-butikk-varer span:nth-child(6) { animation-delay: 0.3s; }

  .hero-mobil.er-valgt .hero-mobil-skjerm > span:nth-child(n+3) { animation-delay: 0.25s; }
  .hero-mobil.er-valgt .hero-mobil-skjerm > span:nth-child(n+4) { animation-delay: 0.33s; }
  .hero-mobil.er-valgt .hero-mobil-skjerm > span:nth-child(n+6) { animation-delay: 0.41s; }
}


/* ---------- Glassformer ---------- */

.hero-glass {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 0 -8px 18px rgba(255, 255, 255, 0.35),
    0 18px 40px -18px rgba(80, 90, 160, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.hero-glass-plate {
  left: -6%; top: 6%; width: 20%; height: 12%;
  border-radius: 14px;
  rotate: 14deg;
  background-image:
    linear-gradient(135deg, rgba(244, 208, 240, 0.25), rgba(255, 255, 255, 0.30), rgba(186, 214, 247, 0.30));
}

.hero-glass-kule-1 { right: -4%; top: -6%; width: 16%; aspect-ratio: 1; border-radius: 50%; }
.hero-glass-kule-2 { left: -8%; bottom: 16%; width: 13%; aspect-ratio: 1; border-radius: 50%; }

.hero-glass-kapsel {
  right: -9%; top: 34%; width: 22%; height: 9%;
  border-radius: var(--pille);
  rotate: -8deg;
}

.hero-glass-sylinder {
  right: -3%; bottom: 6%; width: 10%; height: 15%;
  border-radius: 38% / 14%;
}


/* ---------- Inngangsanimasjon ---------- */

@media (prefers-reduced-motion: no-preference) {

  .hero-vippe { animation: hero-inn 0.9s var(--fjaer) 0.25s both; }

  /* Sprett inn, deretter uendelig sveving. To navngitte animasjoner på samme
     element, med hver sin varighet og forsinkelse. */
  .hero-glass {
    animation-name: hero-sprett, hero-sveve;
    animation-duration: 0.7s, 5.5s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
  }
  .hero-glass-plate    { animation-delay: 0.55s, 1.25s; animation-duration: 0.7s, 5.5s; }
  .hero-glass-kule-1   { animation-delay: 0.68s, 1.38s; animation-duration: 0.7s, 6s; }
  .hero-glass-kapsel   { animation-delay: 0.80s, 1.50s; animation-duration: 0.7s, 4.6s; }
  .hero-glass-sylinder { animation-delay: 0.92s, 1.62s; animation-duration: 0.7s, 5.2s; }
  .hero-glass-kule-2   { animation-delay: 1.02s, 1.72s; animation-duration: 0.7s, 5.8s; }
}


/* ---------- Hero på mobil og nettbrett ---------- */

@media (max-width: 900px) {
  .hero-forside .hero-indre { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-forside .hero-tekst { max-width: none; }
  .hero-scene { max-width: 30rem; margin-inline: auto; }
  .hero-glass { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
}

@media (max-width: 560px) {
  /* Glassformene stikker utenfor på de smaleste skjermene og gir vannrett
     rulling. Skjules helt her; laptopen bærer motivet alene. */
  .hero-glass { display: none; }
  /* Her sto også padding-block: 1rem 3rem. Den virket aldri: i det gamle
     samlede stilarket kom .hero { padding: 3rem 0 3.5rem } etter og vant.
     Fjernet, så heroen ser ut som før. */
  .hero-forside { min-height: 0; }
}



/* ---------- Tjenestemosaikk ----------
   «Våre tjenester»: ti kort i ulik størrelse. Stor = viktigst (Nettsider,
   blå flate), brede (Design, SEO, Systemer), middels (App, Drift) og små.
   Fire kolonner, to på nettbrett. På mobil får de store hele bredden og de
   små står to og to. Bare tokens, unntatt det hvite glasset på den blå
   flaten: flaten er lik i begge drakter, så det trenger ingen mørk tvilling. */

.mosaikk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  grid-template-areas:
    "nett nett des des"
    "nett nett seo seo"
    "sys sys app drift"
    "logo trykk innhold kport";
}
.m-nett { grid-area: nett; }
.m-des { grid-area: des; }
.m-seo { grid-area: seo; }
.m-sys { grid-area: sys; }
.m-app { grid-area: app; }
.m-drift { grid-area: drift; }
.m-logo { grid-area: logo; }
.m-trykk { grid-area: trykk; }
.m-innhold { grid-area: innhold; }
.m-kport { grid-area: kport; }

.mosaikk-kort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem 3rem 1.25rem 1.3rem;
  border: 1px solid var(--graa-linje);
  border-radius: var(--radius-stor);
  background: var(--hvit);
  color: var(--blekk);
  text-decoration: none;
  transition: border-color 0.3s var(--fjaer), translate 0.3s var(--fjaer), box-shadow 0.3s var(--fjaer);
}
.mosaikk-tekst { display: grid; gap: 0.2rem; min-width: 0; }
.mosaikk-merke {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blaa-moerk);
}
.mosaikk-tittel {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.2;
}
.mosaikk-om { font-size: 0.92rem; line-height: 1.45; color: var(--graa-tekst); }

.mosaikk-ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: var(--radius);
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
  transition: background-color 0.3s var(--fjaer), color 0.3s var(--fjaer);
}
.mosaikk-ikon svg { width: 1.35rem; height: 1.35rem; }

.mosaikk-pil {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--blaa);
  font-weight: 700;
  transition: translate 0.3s var(--fjaer);
}

/* Små kort: bare ikon og navn. */
.mosaikk-liten { padding-block: 0.95rem; gap: 0.8rem; }
.mosaikk-liten .mosaikk-ikon { width: 2.2rem; height: 2.2rem; }
.mosaikk-liten .mosaikk-ikon svg { width: 1.1rem; height: 1.1rem; }
.mosaikk-liten .mosaikk-tittel { font-family: inherit; font-size: 0.98rem; font-weight: 700; }

/* Middels: ikon over teksten, så navnet får hele bredden. */
.mosaikk-middels { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.7rem; padding-block: 1rem; }

/* Det store kortet */
.mosaikk-stor {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.7rem;
  border-color: transparent;
  background: var(--blaa-flate);
  color: var(--paa-blaa);
}
.mosaikk-stor .mosaikk-ikon { width: 3.2rem; height: 3.2rem; background: rgba(255, 255, 255, 0.16); color: var(--paa-blaa); }
.mosaikk-stor .mosaikk-ikon svg { width: 1.6rem; height: 1.6rem; }
.mosaikk-stor .mosaikk-merke,
.mosaikk-stor .mosaikk-om { color: var(--paa-blaa); opacity: 0.85; }
.mosaikk-stor .mosaikk-tittel { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.mosaikk-stor .mosaikk-om { font-size: 1rem; max-width: 26rem; }
.mosaikk-stor .mosaikk-tekst { gap: 0.45rem; }
.mosaikk-punkter { display: grid; gap: 0.25rem; margin-top: 0.6rem; font-size: 0.93rem; font-weight: 600; }
.mosaikk-punkter span::before { content: "\2713"; margin-right: 0.55rem; opacity: 0.85; }
.mosaikk-stor .mosaikk-pil { top: auto; bottom: 1.4rem; right: 1.6rem; translate: none; color: var(--paa-blaa); font-size: 1.3rem; }

.mosaikk-kort:focus-visible { outline: 3px solid var(--blaa); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .mosaikk-kort:hover { border-color: var(--blaa); translate: 0 -2px; box-shadow: var(--skygge); }
  .mosaikk-kort:hover .mosaikk-ikon { background: var(--blaa-flate); color: var(--paa-blaa); }
  .mosaikk-kort:hover .mosaikk-pil { translate: 4px -50%; }
  .mosaikk-stor:hover { border-color: transparent; box-shadow: var(--skygge-loft); }
  .mosaikk-stor:hover .mosaikk-ikon { background: rgba(255, 255, 255, 0.24); color: var(--paa-blaa); }
  .mosaikk-stor:hover .mosaikk-pil { translate: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mosaikk-kort, .mosaikk-pil { transition: none; }
  .mosaikk-kort:hover { translate: none; }
}

/* Inngang: kortene vokser fram ett for ett i rangeringsrekkefølgen, ikonet
   spretter inn etter kortet, og det store kortet får ett lysstreif over
   seg. .avduk/.avduk-inne settes bare av avduk.js, så uten JS eller med
   redusert bevegelse står alt stille og ferdig.
   Forsinkelsen er egen (--m-nr), fordi avduk.js tak på 350 ms ga de fem
   siste kortene samme start. Transition-lista gjentar hover-overgangene,
   ellers ville .mosaikk-kort (lastes etter stil.css) slukt inntoningen. */
.mosaikk-kort:nth-child(2) { --m-nr: 1; }
.mosaikk-kort:nth-child(3) { --m-nr: 2; }
.mosaikk-kort:nth-child(4) { --m-nr: 3; }
.mosaikk-kort:nth-child(5) { --m-nr: 4; }
.mosaikk-kort:nth-child(6) { --m-nr: 5; }
.mosaikk-kort:nth-child(7) { --m-nr: 6; }
.mosaikk-kort:nth-child(8) { --m-nr: 7; }
.mosaikk-kort:nth-child(9) { --m-nr: 8; }
.mosaikk-kort:nth-child(10) { --m-nr: 9; }

@media (prefers-reduced-motion: no-preference) {
  .mosaikk-kort.avduk { transform: translateY(28px) scale(0.94); }
  .mosaikk-kort.avduk-inne {
    --m-start: calc(var(--m-nr, 0) * 60ms);
    transform: none;
    transition:
      opacity 0.7s var(--fjaer) var(--m-start),
      transform 0.8s var(--fjaer) var(--m-start),
      border-color 0.3s var(--fjaer),
      translate 0.3s var(--fjaer),
      box-shadow 0.3s var(--fjaer);
  }
  .mosaikk-kort.avduk .mosaikk-ikon { opacity: 0; }
  .mosaikk-kort.avduk-inne .mosaikk-ikon {
    opacity: 1;
    animation: hero-sprett 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--m-start) + 280ms);
  }

  /* Lysstreifet: en skrå, hvit glassstripe som farer over den blå flaten
     én gang. Flaten er lik i begge drakter, så den trenger ingen tvilling. */
  .mosaikk-stor { overflow: hidden; isolation: isolate; }
  .mosaikk-stor::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
    translate: -100% 0;
    pointer-events: none;
  }
  .mosaikk-stor.avduk-inne::after { animation: mosaikk-streif 1.4s var(--fjaer) 0.6s both; }

  /* Hover: ikonet vipper litt, som om kortet svarer. Ikonet bruker
     rotate/translate fordi sprettet eier scale. */
  @media (hover: hover) and (pointer: fine) {
    .mosaikk-ikon { transition: background-color 0.3s var(--fjaer), color 0.3s var(--fjaer), rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
    .mosaikk-kort:hover .mosaikk-ikon { rotate: -8deg; translate: 0 -2px; }
    .mosaikk-stor:hover::after { animation: mosaikk-streif 1s var(--fjaer) both; }
  }
}

@keyframes mosaikk-streif {
  from { translate: -100% 0; }
  to   { translate: 100% 0; }
}

@media (max-width: 900px) {
  .mosaikk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "nett nett"
      "des seo"
      "sys sys"
      "app drift"
      "logo trykk"
      "innhold kport";
  }
  .mosaikk-stor { padding: 1.5rem 1.5rem 1.6rem; }
}
@media (max-width: 560px) {
  /* Smal skjerm: alt i rader med ikonet til venstre, så delen blir lav.
     Merkelappen sier det samme som tittelen og faller bort her. */
  .mosaikk {
    gap: 0.6rem;
    grid-template-areas:
      "nett nett"
      "des des"
      "seo seo"
      "sys sys"
      "app app"
      "drift drift"
      "logo trykk"
      "innhold kport";
  }
  .mosaikk-kort { gap: 0.75rem; padding: 0.85rem 2.2rem 0.85rem 0.9rem; border-radius: var(--radius); }
  .mosaikk-middels { flex-direction: row; align-items: center; justify-content: flex-start; }
  .mosaikk-bred .mosaikk-merke { display: none; }
  .mosaikk-ikon { width: 2.3rem; height: 2.3rem; }
  .mosaikk-ikon svg { width: 1.15rem; height: 1.15rem; }
  .mosaikk-tittel { font-size: 1.02rem; }
  .mosaikk-om { font-size: 0.86rem; line-height: 1.4; }
  .mosaikk-pil { right: 0.85rem; }
  /* To i bredden: pila får ikke plass ved navnet, og hele kortet er lenka. */
  .mosaikk-liten { padding-right: 0.9rem; }
  .mosaikk-liten .mosaikk-tittel { font-size: 0.9rem; }
  .mosaikk-liten .mosaikk-pil { display: none; }
  .mosaikk-stor { padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--radius-stor); }
}


/* ---------- Fordelsrader ("Derfor velger bedrifter oss") ---------- */

.fordelsliste {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.fordel {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.95rem;
  align-items: start;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  /* Gjennomsiktig ramme fra start, saa raden ikke hopper naar den faar
     farge ved hover. */
  border: 1px solid transparent;
}

.fordel p { margin: 0; color: var(--graa-tekst); }
.fordel strong { color: var(--blekk); }

.fordel-ikon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: 0.12rem;
  border-radius: 9px;
  background: var(--blaa-lys);
  color: var(--blaa-moerk);
}

.fordel-ikon svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Ledeteksten er lenke uten understrek. Pila baerer affordansen, slik at
   den ikke hviler paa farge alene - understreken kommer ved hover og fokus. */
.fordel-lenke {
  font-weight: 700;
  color: var(--blekk);
  text-decoration: none;
}

.fordel-lenke:hover,
.fordel-lenke:focus-visible { color: var(--blaa); text-decoration: underline; }

/* Lenka midt i broedteksten beholder en synlig strek hele tiden - den staar
   omgitt av vanlig tekst og maa kunne skilles fra den uten hover. */
.fordel-mer {
  color: var(--blekk);
  text-decoration: none;
  /* --graa-linje er for lys til aa vaere en synlig understrek paa den graa
     flata - den forsvant helt. Samme graa som krysset i sammenlikningslista. */
  border-bottom: 1px solid #9aa4b2;
}

.fordel-mer:hover,
.fordel-mer:focus-visible { color: var(--blaa); border-bottom-color: var(--blaa); }

.fordel-pil {
  margin-left: 0.3rem;
  font-weight: 400;
  color: var(--graa-tekst);
  display: inline-block;
}

.fordel-lenke:hover .fordel-pil,
.fordel-mer:hover .fordel-pil { color: var(--blaa); }

@media (hover: hover) and (pointer: fine) {
  .fordel {
    transition: background-color 0.3s var(--fjaer),
                border-color 0.3s var(--fjaer),
                box-shadow 0.3s var(--fjaer);
  }
  .fordel:hover {
    background: var(--hvit);
    border-color: var(--graa-linje);
    box-shadow: var(--skygge);
  }
  .fordel:hover .fordel-ikon { background: var(--blaa-flate); color: var(--paa-blaa); }
  .fordel-pil { transition: translate 0.3s var(--fjaer), color 0.3s var(--fjaer); }
  .fordel-lenke:hover .fordel-pil,
  .fordel-mer:hover .fordel-pil { translate: 3px 0; }
}

/* Tastaturbrukere naar aldri hover-regelen over. */
.fordel:focus-within { background: var(--hvit); border-color: var(--graa-linje); }
.fordel:focus-within .fordel-ikon { background: var(--blaa-flate); color: var(--paa-blaa); }

@media (prefers-reduced-motion: reduce) {
  .fordel-pil { transition: none; }
  .fordel-lenke:hover .fordel-pil,
  .fordel-mer:hover .fordel-pil { translate: 0; }
}


/* ---------- Bloggliste ---------- */

/* Lenka under lista paa forsida: «Se alle spørsmål og svar» */
.innlegg-mer { margin: 1.5rem 0 0; }


/* ---------- Diverse ---------- */

/* Hoeyre kolonne i heroen: laptopscenen */
.hero-demo { min-width: 0; }

/* #27 Siden bygger seg selv: blokkene kommer paa plass en gang etter at
   laptopen har landet. Bare transform og
   opacity. Ved redusert bevegelse staar alt ferdig fra start. */
@media (prefers-reduced-motion: no-preference) {
  .hero-side[data-bygg] .hero-side-meny i,
  .hero-side[data-bygg] .hero-side-meny b,
  .hero-side[data-bygg] .hero-side-tekst span,
  .hero-side[data-bygg] .hero-side-bilde,
  .hero-side[data-bygg] .hero-side-kort,
  .hero-side[data-bygg] .hero-side-bunn span {
    animation: demo-bygg 0.5s var(--fjaer) both;
    animation-delay: 0.7s;
  }
  .hero-side[data-bygg] .hero-side-tekst span:nth-child(2) { animation-delay: 0.78s; }
  .hero-side[data-bygg] .hero-side-tekst span:nth-child(3) { animation-delay: 0.86s; }
  .hero-side[data-bygg] .hero-side-tekst span:nth-child(4) { animation-delay: 0.92s; }
  .hero-side[data-bygg] .hero-side-tekst span:nth-child(5) { animation-delay: 1.02s; }
  .hero-side[data-bygg] .hero-side-bilde { animation-delay: 0.9s; }
  .hero-side[data-bygg] .hero-side-kort { animation-delay: 1.12s; }
  .hero-side[data-bygg] .hero-side-bunn span { animation-delay: 1.2s; }
}

@keyframes demo-bygg {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.oppfordring .ring-tilbake-tittel {
  margin: 0 0 1rem;
  max-width: none;
  text-align: center;
  color: var(--paa-blaa);
  font-weight: 600;
}
.oppfordring .ring-tilbake-feil,
.oppfordring .ring-tilbake-info,
.oppfordring .ring-tilbake-status {
  margin: 0;
  max-width: none;
  font-size: 0.86rem;
  color: var(--paa-blaa);
}
.oppfordring .ring-tilbake-feil { font-weight: 600; }
.oppfordring .ring-tilbake-info { margin-top: 0.9rem; text-align: center; opacity: 0.94; }
.oppfordring .ring-tilbake-status { margin-top: 0.6rem; text-align: center; font-weight: 600; }


/* ---------- Heroteksten over glassformene ---------- */

.hero-forside .hero-tekst { position: relative; z-index: 5; }


/* ---------- Mørk drakt ----------
   Samme mønster som seksjonen «Mørk drakt» i stil.css: :where() teller
   ikke, så hver regel veier som den den overstyrer og vinner på at den
   står sist. Laptopen blir mørk metall, og miniatyrsidene inni skjermen
   blir mørke nettsider. */

@media screen {
  :where([data-tema="moerk"]) .hero-forside {
    background-image:
      radial-gradient(60% 55% at 12% 18%, rgba(88, 80, 190, 0.30) 0%, rgba(88, 80, 190, 0) 60%),
      radial-gradient(55% 50% at 88% 22%, rgba(150, 110, 60, 0.16) 0%, rgba(150, 110, 60, 0) 62%),
      radial-gradient(65% 60% at 76% 82%, rgba(47, 99, 214, 0.26) 0%, rgba(47, 99, 214, 0) 64%),
      radial-gradient(50% 45% at 30% 88%, rgba(120, 90, 200, 0.20) 0%, rgba(120, 90, 200, 0) 60%),
      linear-gradient(180deg, #0f141d 0%, #0b0f16 100%);
  }
  :where([data-tema="moerk"]) .hero-bolge { opacity: 0.35; }

  /* Laptopen */
  :where([data-tema="moerk"]) .hero-lokk { background: linear-gradient(180deg, #3a404b, #262b33); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
  :where([data-tema="moerk"]) .hero-skjerm { border-color: #05070a; }
  :where([data-tema="moerk"]) .hero-hakk { background: #05070a; }
  :where([data-tema="moerk"]) .hero-fot { background: linear-gradient(180deg, #2f343d, #1f232a); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.7); }
  :where([data-tema="moerk"]) .hero-fot::after { background: #171a20; }

  /* Miniatyrsiden */
  :where([data-tema="moerk"]) .hero-side { background: linear-gradient(135deg, #131a26 0%, #111821 55%, #1a1612 100%); }
  :where([data-tema="moerk"]) .hero-side-meny i,
  :where([data-tema="moerk"]) .hero-side-bunn span { background: #2f3846; }
  :where([data-tema="moerk"]) .hero-side-tekst span { background: #2a3342; }
  :where([data-tema="moerk"]) .hero-side-tekst .stor { background: #3a4454; }
  :where([data-tema="moerk"]) .hero-side-bilde,
  :where([data-tema="moerk"]) .hero-mobil-bilde { background: linear-gradient(135deg, #1a2a48 0%, #15283a 55%, #2a2318 100%); }
  :where([data-tema="moerk"]) .hero-side-bilde { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
  :where([data-tema="moerk"]) .hero-side-kort { background: rgba(23, 30, 42, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.5); }
  :where([data-tema="moerk"]) .hero-side-bunn { border-top-color: #1f2835; }

  /* Nettbutikken */
  :where([data-tema="moerk"]) .hero-butikk { background: linear-gradient(180deg, #18150f 0%, #111821 40%); }
  :where([data-tema="moerk"]) .hero-butikk-merke { background: #c3cad6; }
  :where([data-tema="moerk"]) .hero-butikk-meny i { background: #2f3846; }
  :where([data-tema="moerk"]) .hero-butikk-kurv { border-color: #c3cad6; }
  :where([data-tema="moerk"]) .hero-butikk-varer i { background: linear-gradient(135deg, #3a2e22, #2e241a); }
  :where([data-tema="moerk"]) .hero-butikk-varer span:nth-child(2) i { background: linear-gradient(135deg, #1d2c47, #1a2840); }
  :where([data-tema="moerk"]) .hero-butikk-varer span:nth-child(3) i { background: linear-gradient(135deg, #1c3326, #18291f); }
  :where([data-tema="moerk"]) .hero-butikk-varer span:nth-child(4) i { background: linear-gradient(135deg, #33202f, #2a1a27); }
  :where([data-tema="moerk"]) .hero-butikk-varer span:nth-child(5) i { background: linear-gradient(135deg, #362f18, #2b2512); }
  :where([data-tema="moerk"]) .hero-butikk-varer span:nth-child(6) i { background: linear-gradient(135deg, #262c37, #1f242d); }
  :where([data-tema="moerk"]) .hero-butikk-varer em { background: #2a3342; }

  /* Mobilen */
  :where([data-tema="moerk"]) .hero-mobil { background: #05070a; box-shadow: 0 26px 44px -20px rgba(0, 0, 0, 0.8); }
  :where([data-tema="moerk"]) .hero-mobil-oy { background: #05070a; }
  :where([data-tema="moerk"]) .hero-mobil-skjerm { background: linear-gradient(180deg, #131a26 0%, #111821 60%); }
  :where([data-tema="moerk"]) .hero-mobil-topp { background: #3a4454; }
  :where([data-tema="moerk"]) .hero-mobil-kort { box-shadow: inset 0 0 0 0.9cqi #1f2835; }
  :where([data-tema="moerk"]) .hero-mobil-faner { border-top-color: #1f2835; }
  :where([data-tema="moerk"]) .hero-mobil-faner i { background: #2f3846; }

  /* Glassformene: mørkt glass med en svak kant av lys. */
  :where([data-tema="moerk"]) .hero-glass {
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.18),
      inset 0 -8px 18px rgba(255, 255, 255, 0.04),
      0 18px 40px -18px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
  }
  :where([data-tema="moerk"]) .hero-glass-plate {
    background-image:
      linear-gradient(135deg, rgba(244, 208, 240, 0.08), rgba(255, 255, 255, 0.05), rgba(186, 214, 247, 0.08));
  }

  /* Resten av forsida */
  :where([data-tema="moerk"]) .fordel-mer { border-bottom-color: #4a5568; }
}