/* AW Solutions – webbplatsens stil. Färger, typsnitt och mått samlas i variablerna nedan. */

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-f11d729b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Big Noodle Titling";
  src: url("/assets/big-noodle-a69127af.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --vit: #ffffff;
  --gra-bg: #f5f7fa;
  --text: #111827;
  --text-2: #374151;
  --text-3: #4b5563;
  --dampad: #5b6472;
  --linje: #e5e7eb;
  --linje-stark: #d1d5db;
  --bla: #2563eb;
  --bla-mork: #1d4ed8;
  --bla-morkare: #1e40af;
  --bla-ljus: #eff4ff;
  --bla-ljus-2: #dbe6fe;
  --gron: #15803d;
  --gron-ljus: #ecfdf3;
  --rod: #b91c1c;
  --rod-ljus: #fef2f2;
  --gul-ljus: #fffbeb;
  --gul-kant: #f3d98b;

  --radie: 10px;
  --radie-kort: 16px;
  --radie-stor: 20px;
  --skugga-liten: 0 1px 2px rgb(17 24 39 / 0.06), 0 1px 3px rgb(17 24 39 / 0.05);
  --skugga: 0 1px 2px rgb(17 24 39 / 0.04), 0 6px 18px -8px rgb(17 24 39 / 0.1);
  --skugga-stor: 0 1px 3px rgb(17 24 39 / 0.06), 0 16px 36px -18px rgb(17 24 39 / 0.24);

  --bredd: 1200px;
  --kant: clamp(20px, 4vw, 32px);
  --sektion: clamp(56px, 7vw, 96px);
  --typsnitt: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sidhuvud-hojd: 72px;
}

/* ---------- Grund ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--sidhuvud-hojd) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--vit);
  color: var(--text);
  font-family: var(--typsnitt);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.meny-oppen {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  letter-spacing: -0.028em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--bla);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--bla-mork);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

strong {
  font-weight: 650;
}

::selection {
  background: var(--bla-ljus-2);
}

/* Fokus syns alltid vid tangentbordsnavigering. */
:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus,
[tabindex="-1"]:focus {
  outline: none;
}

.visuellt-dold {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hoppa {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radie);
  background: var(--text);
  color: var(--vit);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.hoppa:focus {
  transform: none;
  color: var(--vit);
}

.ikon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.behallare {
  width: 100%;
  max-width: calc(var(--bredd) + 2 * var(--kant));
  margin-inline: auto;
  padding-inline: var(--kant);
}

.behallare-bred {
  max-width: calc(1360px + 2 * var(--kant));
}

.smal {
  max-width: calc(780px + 2 * var(--kant));
}

.forhandsrad {
  padding: 8px var(--kant);
  background: #fef3c7;
  color: #78350f;
  font-size: 0.875rem;
  font-weight: 550;
  text-align: center;
}

/* ---------- Knappar ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radie);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.knapp .ikon {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}

.knapp:hover .ikon {
  transform: translateX(2px);
}

.knapp:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: 3px;
  border-radius: var(--radie);
}

.knapp-primar {
  background: var(--bla);
  color: var(--vit);
}

.knapp-primar:hover {
  background: var(--bla-mork);
  color: var(--vit);
}

.knapp-primar:active {
  background: var(--bla-morkare);
}

.knapp-sekundar {
  background: var(--vit);
  border-color: var(--linje-stark);
  color: var(--text);
}

.knapp-sekundar:hover {
  border-color: var(--text-3);
  color: var(--text);
  background: var(--gra-bg);
}

.knapp-vit {
  background: var(--vit);
  color: var(--bla-morkare);
}

.knapp-vit:hover {
  background: var(--bla-ljus);
  color: var(--bla-morkare);
}

.knapp-vit:focus-visible {
  outline-color: var(--vit);
}

.knapp-liten {
  min-height: 42px;
  padding: 9px 16px;
  font-size: 0.9375rem;
}

.knapp-bred {
  width: 100%;
}

.knapp[disabled],
.knapp[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}

.knapprad {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.knapprad-mitt {
  justify-content: center;
}

.textlank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}

.textlank .ikon {
  width: 18px;
  height: 18px;
  transition: transform 0.18s ease;
}

.textlank:hover {
  text-decoration: underline;
}

.textlank:hover .ikon {
  transform: translateX(2px);
}

/* ---------- Sidhuvud ---------- */

.sidhuvud {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.92);
  border-bottom: 1px solid transparent;
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sidhuvud.skrollad,
body.meny-oppen .sidhuvud {
  border-bottom-color: var(--linje);
  box-shadow: 0 4px 20px -12px rgb(17 24 39 / 0.18);
}

.sidhuvud-rad {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--sidhuvud-hojd);
}

.logga {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
}

.logga svg {
  width: auto;
  height: 38px;
}

@media (max-width: 560px) {
  .logga svg {
    height: 34px;
  }
}

.huvudmeny ul {
  display: flex;
  gap: 4px;
  list-style: none;
}

.huvudmeny a {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 0.9688rem;
  font-weight: 550;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.huvudmeny a:hover {
  background: var(--gra-bg);
  color: var(--text);
}

.huvudmeny a[aria-current="page"] {
  color: var(--bla);
}

.huvudmeny a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--bla);
}

.menyknapp {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  background: var(--vit);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.menyknapp:hover {
  border-color: var(--text-3);
}

.menyknapp-ikon {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.menyknapp-ikon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.menyknapp-ikon i:nth-child(1) {
  top: 0;
}
.menyknapp-ikon i:nth-child(2) {
  top: 6px;
}
.menyknapp-ikon i:nth-child(3) {
  top: 12px;
}

.menyknapp[aria-expanded="true"] .menyknapp-ikon i:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.menyknapp[aria-expanded="true"] .menyknapp-ikon i:nth-child(2) {
  opacity: 0;
}
.menyknapp[aria-expanded="true"] .menyknapp-ikon i:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Menyn hänger direkt under sidhuvudet. Den kan inte vara position: fixed, eftersom sidhuvudets
   backdrop-filter gör sidhuvudet till referens för fasta element – då blev menyn 1 px hög i mobilen. */
.mobilmeny {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 49;
  height: calc(100vh - var(--sidhuvud-hojd));
  height: calc(100dvh - var(--sidhuvud-hojd));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--vit);
  border-top: 1px solid var(--linje);
}

.mobilmeny[hidden] {
  display: none;
}

.mobilmeny nav {
  padding-block: 16px 32px;
}

.mobilmeny ul {
  margin-bottom: 24px;
  list-style: none;
}

.mobilmeny li + li {
  border-top: 1px solid var(--linje);
}

.mobilmeny ul a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 600;
  text-decoration: none;
}

.mobilmeny ul a[aria-current="page"] {
  color: var(--bla);
}

.mobilmeny ul a[aria-current="page"]::before {
  content: "";
  width: 4px;
  height: 22px;
  margin-right: 12px;
  border-radius: 2px;
  background: var(--bla);
}

@media (prefers-reduced-motion: no-preference) {
  .mobilmeny:not([hidden]) {
    animation: menyIn 0.2s ease-out;
  }
}

@keyframes menyIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (max-width: 1100px) {
  .huvudmeny {
    display: none;
  }
  .menyknapp {
    display: inline-flex;
  }
  .sidhuvud-rad {
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .sidhuvud-cta {
    display: none;
  }
  :root {
    --sidhuvud-hojd: 64px;
  }
}

/* ---------- Sektioner ---------- */

.sektion {
  padding-block: var(--sektion);
}

.sektion-gra {
  background: var(--gra-bg);
}

.sektion-kort-topp {
  padding-top: 0;
}

.sektionshuvud {
  max-width: 720px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.sektionshuvud .ingress {
  margin-top: 16px;
}

.sektionshuvud-rad {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.sektionshuvud-rad .sektionshuvud {
  margin-bottom: 0;
}

.etikett {
  margin-bottom: 12px;
  color: var(--dampad);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ingress {
  max-width: 62ch;
  color: var(--text-3);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
}

.liten-not {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  color: var(--dampad);
  font-size: 0.9063rem;
  line-height: 1.5;
}

.liten-not .ikon {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.bildtext {
  max-width: 820px;
  margin-top: 18px;
  color: var(--dampad);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.bricka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--linje-stark);
  border-radius: 999px;
  background: var(--vit);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.notruta {
  display: flex;
  gap: 12px;
  max-width: 860px;
  margin-top: 40px;
  padding: 16px 20px;
  border: 1px solid var(--bla-ljus-2);
  border-radius: 12px;
  background: var(--bla-ljus);
  color: var(--text-2);
  font-size: 0.9688rem;
}

.notruta .ikon {
  margin-top: 3px;
  color: var(--bla);
}

.notruta-varning {
  border-color: var(--gul-kant);
  background: var(--gul-ljus);
}

.notruta-varning .ikon {
  color: #a16207;
}

/* ---------- Listor ---------- */

.bocklista {
  display: grid;
  gap: 10px;
  list-style: none;
}

.bocklista li {
  display: flex;
  gap: 10px;
  line-height: 1.5;
}

.bocklista .ikon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 3px;
  border-radius: 50%;
  background: #e8ebf0;
  color: var(--text);
  stroke-width: 3;
}

.bocklista-inte .ikon {
  background: var(--gra-bg);
  color: var(--dampad);
}

.bocklista-plus .ikon {
  background: var(--vit);
  border: 1px dashed var(--bla);
}

.bocklista-tva {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

@media (max-width: 480px) {
  .bocklista-tva {
    grid-template-columns: 1fr;
  }
}

/* ---------- Skärmbilder: fönster och telefon ---------- */

.fonster {
  overflow: hidden;
  border: 1px solid rgb(17 24 39 / 0.1);
  border-radius: 12px;
  background: var(--vit);
  box-shadow: var(--skugga-stor);
}

.fonster-list {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--linje);
  background: #f9fafb;
}

.fonster-prickar {
  display: flex;
  gap: 6px;
}

.fonster-prickar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9dde3;
}

.fonster-adress {
  overflow: hidden;
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  padding: 3px 12px;
  border-radius: 6px;
  background: var(--vit);
  color: var(--dampad);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--linje);
}

.fonster-bild img {
  width: 100%;
}

/* Telefonen: ram, sidoknappar, statusrad med ö och hemstreck. Alla mått i cqw (procent av telefonens
   bredd), så att den ser ut som en mobil i alla storlekar. Px-värdena före gäller i äldre webbläsare. */
.telefon {
  container-type: inline-size;
}

.telefon-ram {
  position: relative;
  padding: 5px;
  padding: 3.4cqw;
  border-radius: 28px;
  border-radius: 16cqw;
  background: linear-gradient(145deg, #3b4254, #1a1f2b 30%, #0d1017 70%, #2b3140);
  box-shadow: var(--skugga-stor), inset 0 0 0 1px rgb(255 255 255 / 0.18), inset 0 0 0 3px #0b0e14;
  box-shadow: var(--skugga-stor), inset 0 0 0 0.45cqw rgb(255 255 255 / 0.2), inset 0 0 0 1.6cqw #0b0e14;
}

/* Sidoknappar: på/av till höger, volym till vänster. */
.telefon-ram::before,
.telefon-ram::after {
  content: "";
  position: absolute;
  width: 1.1cqw;
  border-radius: 1cqw;
  background: #232937;
}

.telefon-ram::before {
  top: 30cqw;
  right: -0.9cqw;
  height: 17cqw;
}

.telefon-ram::after {
  top: 24cqw;
  left: -0.9cqw;
  height: 10cqw;
  box-shadow: 0 13cqw 0 #232937;
}

.telefon-skarm {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  border-radius: 22px;
  border-radius: 12.6cqw;
  background: var(--topp, var(--vit));
}

.telefon-status {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 11cqw;
  padding: 1.2cqw 7cqw 0 9cqw;
  background: var(--topp, var(--vit));
  font-size: 4.3cqw;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1;
}

.telefon-status-mork {
  color: #111827;
}

.telefon-status-ljus {
  color: #ffffff;
}

.telefon-o {
  position: absolute;
  top: 2.3cqw;
  left: 50%;
  width: 27cqw;
  height: 7.4cqw;
  border-radius: 4cqw;
  background: #05070b;
  transform: translateX(-50%);
}

.telefon-ikoner {
  width: 16.5cqw;
  height: auto;
  fill: currentColor;
  stroke: currentColor;
}

.telefon-skarm picture {
  display: block;
  flex: 1;
  min-height: 0;
}

.telefon-skarm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.telefon-hem {
  position: absolute;
  bottom: 2cqw;
  left: 50%;
  width: 33cqw;
  height: 1.3cqw;
  border-radius: 1cqw;
  background: rgb(255 255 255 / 0.85);
  mix-blend-mode: difference;
  transform: translateX(-50%);
}

.bild-saknas {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 24px;
  background: repeating-linear-gradient(45deg, #f3f4f6 0 12px, #e5e7eb 12px 24px);
  color: var(--text-3);
  font-size: 0.875rem;
  text-align: center;
}

/* ---------- Startsidans hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px);
  background: var(--vit);
}

.hero-rad {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

/* Storleken är vald så att varje mening ryms på en rad, från mobil till bred skärm. */
.hero h1 {
  font-size: clamp(2rem, 0.8rem + 3.2vw, 3.375rem);
}

/* Varje mening på en egen rad. */
.hero h1 span {
  display: block;
}

.hero-text .ingress {
  max-width: 540px;
  margin-top: 22px;
}

.hero-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-top: 18px;
  color: var(--dampad);
  font-size: 0.9063rem;
  list-style: none;
}

.hero-fakta li + li::before {
  content: "·";
  margin-inline: 10px;
  color: var(--linje-stark);
}

.collage {
  margin: 0;
}

.collage-ytor {
  position: relative;
  padding: 0 0 22% 0;
}

.collage-webb {
  width: 82%;
}

.collage-system {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
}

.collage-telefon {
  position: absolute;
  bottom: -3%;
  left: 2%;
  width: 20%;
}

.collage figcaption {
  margin-top: 28px;
  color: var(--dampad);
  font-size: 0.8438rem;
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 1000px) {
  .hero-rad {
    grid-template-columns: 1fr;
  }
  .hero-bild {
    max-width: 680px;
  }
  .collage figcaption {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .hero .knapprad .knapp {
    flex: 1 1 100%;
  }
  .hero-fakta {
    display: grid;
    gap: 2px;
  }
  .hero-fakta li + li::before {
    content: none;
  }
  .collage-telefon {
    width: 23%;
  }
  .collage figcaption {
    margin-top: 32px;
  }
  .fonster-list {
    height: 26px;
  }
  .fonster-adress {
    font-size: 0.6875rem;
    padding: 1px 8px;
  }
  .fonster-prickar i {
    width: 7px;
    height: 7px;
  }
}

/* ---------- Tjänster ---------- */

.tjanster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tjanst {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.tjanst-bild {
  padding: 24px 24px 0;
  background: #eef1f5;
  border-bottom: 1px solid var(--linje);
}

.tjanst-bild .fonster {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: 0;
  box-shadow: var(--skugga);
}

.tjanst-bild .fonster-bild {
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
}

.tjanst-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 32px);
}

.tjanst-text h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
}

.tjanst-text > p {
  max-width: 52ch;
  color: var(--text-3);
}

.tjanst-text .textlank {
  margin-top: auto;
  padding-top: 4px;
}

@media (max-width: 860px) {
  .tjanster {
    grid-template-columns: 1fr;
  }
}

/* ---------- Systemet i praktiken: flikar ---------- */

.flikrad {
  display: none;
  gap: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--linje);
}

.js .flikrad {
  display: flex;
}

.flik {
  position: relative;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.flik:hover {
  color: var(--text);
}

.flik[aria-selected="true"] {
  color: var(--text);
}

.flik[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--bla);
}

.flik:focus-visible {
  outline-offset: -3px;
  border-radius: 8px;
}

.flikpanel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.flikpanel + .flikpanel {
  margin-top: 56px;
}

.js .flikpanel + .flikpanel {
  margin-top: 0;
}

.js .flikpanel:not([data-vald]),
.flikpanel[hidden] {
  display: none;
}

.flikpanel:focus-visible {
  outline-offset: 8px;
  border-radius: 12px;
}

.flikpanel-text {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-top: 8px;
}

.flikpanel-namn {
  color: var(--dampad);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.js .flikpanel-namn {
  display: none;
}

.flikpanel-text h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
}

.flikpanel-text p {
  color: var(--text-3);
}

.flikpanel-text .knapp {
  margin-top: 8px;
}

.flikpanel-bild {
  margin: 0;
}

.flikpanel-bild .fonster-bild {
  aspect-ratio: 1200 / 680;
  overflow: hidden;
}

.flikpanel-bild .fonster-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.flikpanel-bild figcaption {
  margin-top: 12px;
  color: var(--dampad);
  font-size: 0.875rem;
}

/* Bild som går att förstora. */
.forstora {
  position: relative;
  display: block;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
}

.forstora .fonster {
  box-shadow: var(--skugga);
}

.forstora-knapp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  background: rgb(255 255 255 / 0.96);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--skugga-liten);
}

.forstora-knapp .ikon {
  width: 16px;
  height: 16px;
}

.forstora:hover .forstora-knapp {
  border-color: var(--text-3);
}

.forstora:focus-visible {
  outline-offset: 4px;
}

.ljuslada {
  width: min(1400px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--vit);
  color: var(--text);
  box-shadow: 0 24px 60px -20px rgb(17 24 39 / 0.5);
}

.ljuslada[open] {
  display: flex;
  flex-direction: column;
}

.ljuslada::backdrop {
  background: rgb(15 23 42 / 0.72);
}

.ljuslada-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid var(--linje);
}

.ljuslada-text {
  color: var(--text-3);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.ljuslada-stang {
  flex: none;
}

.ljuslada-stang .ikon {
  width: 16px;
  height: 16px;
}

.ljuslada-bild {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.ljuslada-bild img {
  width: 100%;
}

@media (max-width: 900px) {
  .flikpanel {
    grid-template-columns: 1fr;
  }
  .flikpanel-text {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .flik {
    flex: 1;
    padding-inline: 8px;
  }
  .forstora-knapp {
    right: 8px;
    bottom: 8px;
    padding: 5px 9px;
    font-size: 0.8125rem;
  }
  .ljuslada {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* ---------- Projekt på startsidan: ett mörkt och ett ljust band ---------- */

.sektion + .projektdel {
  padding-top: 0;
}

.projektdel {
  padding-top: var(--sektion);
}

.projektband {
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--gra-bg);
}

.projektband-mork {
  background: #111827;
  color: #d1d5db;
}

.projektband-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.projektband-omvand .projektband-text {
  order: 2;
}

.projektband-text {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.projektband-text h3 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
  letter-spacing: -0.028em;
}

.projektband-fakta {
  display: grid;
  gap: 16px;
  margin: 0;
}

.projektband-fakta dt {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 650;
}

.projektband-fakta dd {
  max-width: 58ch;
  margin: 0;
  color: var(--text-3);
}

.projektband-fakta ul {
  display: grid;
  gap: 4px;
  padding-left: 1.1em;
}

.projektband-fakta li::marker {
  color: var(--dampad);
}

.projektband-lankar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 6px;
}

.projektband-bild .skarmpar {
  padding-right: 13%;
}

.projektband-bild .skarmpar-telefon {
  width: 21%;
  bottom: -8%;
}

/* Det mörka bandet */
.projektband-mork h3,
.projektband-mork .projektband-fakta dt {
  color: var(--vit);
}

.projektband-mork .projektband-fakta dd {
  color: #c4cad4;
}

.projektband-mork .bricka {
  border-color: rgb(255 255 255 / 0.22);
  background: transparent;
  color: #e5e7eb;
}

.projektband-mork .knapp-sekundar {
  border-color: rgb(255 255 255 / 0.35);
  background: transparent;
  color: var(--vit);
}

.projektband-mork .knapp-sekundar:hover {
  border-color: var(--vit);
  background: rgb(255 255 255 / 0.08);
  color: var(--vit);
}

.projektband-mork .textlank {
  color: #93c5fd;
}

.projektband-mork .textlank:hover {
  color: #bfdbfe;
}

.projektband-mork :focus-visible {
  outline-color: #93c5fd;
}

.projektband-mork .dator-ram {
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6), inset 0 0 0 0.22cqw #4b5565, inset 0 0 0 0.6cqw #0a0c11;
}

/* Designförslaget: texten smalare, jämförelsen bredare. */
.projektband-jmf .projektband-rad {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.projektband-meta {
  margin-top: -10px;
  color: var(--dampad);
  font-size: 0.9375rem;
}

.projektband-mork .projektband-meta {
  color: #9ca3af;
}

.projektband-not {
  display: flex;
  gap: 10px;
  max-width: 58ch;
  color: var(--dampad);
  font-size: 0.9063rem;
  line-height: 1.5;
}

.projektband-not .ikon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.projektband-mork .projektband-not {
  color: #9ca3af;
}

@media (max-width: 900px) {
  .projektband-rad,
  .projektband-jmf .projektband-rad {
    grid-template-columns: 1fr;
  }
  .projektband-omvand .projektband-text {
    order: 0;
  }
  .projektband-bild {
    max-width: 640px;
  }
  .projektband-jmf .projektband-bild {
    max-width: none;
  }
}

/* ---------- Före/efter-jämförelse (reglage mellan gammal och ny sajt) ---------- */

.jmf {
  margin: 0;
}

.jmf-ram {
  padding: 8px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--gra-bg);
}

.jmf-yta {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1440 / 1000;
  border-radius: 10px;
  background: var(--vit);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Dator som standard, mobil i smala fönster. Knapparna Dator/Mobil sätter data-lage. */
.jmf-yta[data-jmf-yta="mobil"] {
  display: none;
  width: min(100%, 360px);
  margin-inline: auto;
  aspect-ratio: 390 / 760;
}

.jmf[data-lage="mobil"] .jmf-yta[data-jmf-yta="dator"] {
  display: none;
}

.jmf[data-lage="mobil"] .jmf-yta[data-jmf-yta="mobil"] {
  display: block;
}

@media (max-width: 600px) {
  .js .jmf:not([data-lage]) .jmf-yta[data-jmf-yta="dator"] {
    display: none;
  }
  .js .jmf:not([data-lage]) .jmf-yta[data-jmf-yta="mobil"] {
    display: block;
  }
  .jmf-yta {
    aspect-ratio: 4 / 3;
  }
}

.jmf-fonster {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Fönstret går att scrolla först när man har klickat i det, så att sidan inte fastnar när man scrollar förbi. */
.js .jmf-yta:not(.jmf-aktiv) .jmf-fonster {
  overflow-y: hidden;
}

.jmf-fonster:focus-visible {
  outline: 3px solid var(--bla);
  outline-offset: -3px;
}

.jmf-innehall {
  position: relative;
}

.jmf-lager img {
  width: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Filmen ligger på samma ställe som stillbilden i skärmbilden. Läget anges i cqw, alltså i andel av bildens bredd. */
.jmf-efter {
  position: relative;
  container-type: inline-size;
}

.jmf-film {
  position: absolute;
  top: var(--topp);
  right: 0;
  left: 0;
  height: var(--hojd);
  overflow: hidden;
  pointer-events: none;
}

/* Samma beskärning som på sajten: cover, förskjuten och lite förstorad. */
.jmf-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--film-pos, 50% 50%);
  transform: scale(var(--film-skala, 1));
}

/* Det som ligger ovanpå filmen på sajten (rubrik, text, toning). Filmen och lagret tonas in samtidigt när
   filmen spelar. Innan dess syns skärmbilden, där texten redan finns, så att inget ritas dubbelt. */
.jmf-film-lager {
  position: absolute;
  inset: 0;
}

.jmf-film-lager img {
  width: 100%;
  height: 100%;
}

.jmf-film video,
.jmf-film-lager {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.jmf-film.spelar video,
.jmf-film.spelar .jmf-film-lager {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .jmf-film video,
  .jmf-film-lager {
    transition: none;
  }
}

.jmf-fore {
  position: absolute;
  inset: 0;
  background: #eef1f5;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.jmf-slut {
  padding: 24px 20px;
  border-top: 1px solid var(--linje-stark);
  color: var(--dampad);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.jmf-etikett {
  position: absolute;
  top: 12px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

.jmf-etikett-fore {
  left: 12px;
  background: #111827;
  color: var(--vit);
}

.jmf-etikett-efter {
  right: 12px;
  background: var(--vit);
  color: #111827;
  box-shadow: 0 0 0 1px rgb(17 24 39 / 0.12);
}

.jmf-linje {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--vit);
  box-shadow: 0 0 0 1px rgb(17 24 39 / 0.15);
}

.jmf-handtag {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(17 24 39 / 0.15);
  border-radius: 50%;
  background: var(--vit);
  color: #111827;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
  transform: translate(-50%, -50%);
}

.jmf-handtag svg {
  width: 18px;
  height: 18px;
}

.jmf-yta:has(.jmf-reglage:focus-visible) .jmf-handtag {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

.jmf-scrolla {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: none;
  align-items: flex-end;
  justify-content: center;
  height: 88px;
  padding: 0 0 14px;
  border: 0;
  background: linear-gradient(to top, rgb(17 24 39 / 0.45), transparent);
  font: inherit;
  cursor: pointer;
}

.js .jmf-scrolla {
  display: flex;
}

.js .jmf-aktiv .jmf-scrolla {
  display: none;
}

.jmf-scrolla > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--vit);
  color: #111827;
  font-size: 0.8125rem;
  font-weight: 600;
}

.jmf-scrolla:focus-visible {
  outline: none;
}

.jmf-scrolla:focus-visible > span {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

.jmf-ned {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
}

.jmf-reglage {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.jmf-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 12px;
  color: var(--dampad);
  font-size: 0.875rem;
}

.jmf-knappar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.jmf-paus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--linje-stark);
  border-radius: 8px;
  background: var(--vit);
  color: var(--text-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.jmf-paus[hidden] {
  display: none;
}

.jmf-paus .ikon {
  width: 16px;
  height: 16px;
}

.jmf-ikon-spela,
.jmf-paus[data-pausad] .jmf-ikon-paus {
  display: none;
}

.jmf-paus[data-pausad] .jmf-ikon-spela {
  display: block;
}

.projektband-mork .jmf-paus {
  border-color: rgb(255 255 255 / 0.25);
  background: transparent;
  color: #d1d5db;
}

.projektband-mork .jmf-paus:hover {
  border-color: var(--vit);
  color: var(--vit);
}

.jmf-lagen {
  display: none;
  overflow: hidden;
  border: 1px solid var(--linje-stark);
  border-radius: 8px;
}

.js .jmf-lagen {
  display: inline-flex;
}

.jmf-lagen button {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  background: var(--vit);
  color: var(--text-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.jmf-lagen button + button {
  border-left: 1px solid var(--linje-stark);
}

.jmf-lagen button[aria-pressed="true"] {
  background: #111827;
  color: var(--vit);
}

.jmf-lagen button:focus-visible {
  outline-offset: -3px;
}

/* På det mörka bandet */
.projektband-mork .jmf-ram {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.05);
}

.projektband-mork .jmf-under {
  color: #9ca3af;
}

.projektband-mork .jmf-lagen {
  border-color: rgb(255 255 255 / 0.25);
}

.projektband-mork .jmf-lagen button {
  background: transparent;
  color: #d1d5db;
}

.projektband-mork .jmf-lagen button + button {
  border-left-color: rgb(255 255 255 / 0.25);
}

.projektband-mork .jmf-lagen button[aria-pressed="true"] {
  background: var(--vit);
  color: #111827;
}

/* ---------- Projektkort ---------- */

.projektlista {
  display: grid;
  gap: 24px;
}

.projektkort {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  background: var(--vit);
  box-shadow: var(--skugga-liten);
}

.sektion-gra .projektkort {
  box-shadow: var(--skugga-liten);
}

.projektkort-bildlank {
  display: block;
  height: 100%;
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3vw, 40px) clamp(28px, 4vw, 52px);
  background: #eef1f5;
}

.projektbild {
  position: relative;
  padding-right: 16%;
}

.projektbild-telefon {
  position: absolute;
  right: 0;
  bottom: -8%;
  width: 22%;
}

.projektkort-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3.5vw, 48px);
}

.projektkort-text h3 {
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
}

.projektkort-text h3 a {
  color: inherit;
  text-decoration: none;
}

.projektkort-text h3 a:hover {
  color: var(--bla);
}

.projektkort-text > p:not(.bricka) {
  color: var(--text-3);
}

.projektkort-lankar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .projektkort {
    grid-template-columns: 1fr;
  }
}



/* ---------- Demo-introduktion ---------- */

.demo-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}

.demo-intro-text .ingress {
  margin-top: 18px;
}

.demo-intro-bild {
  display: block;
}



@media (max-width: 900px) {
  .demo-intro {
    grid-template-columns: 1fr;
  }
}

/* ---------- Arbetsprocess ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: steg;
  list-style: none;
}

.process-steg {
  position: relative;
  padding: 28px 24px 30px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.process-nr {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  border: 1px solid var(--linje-stark);
  border-radius: 12px;
  background: var(--gra-bg);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
}

.process-steg:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 47px;
  right: -21px;
  width: 21px;
  height: 1px;
  background: var(--linje-stark);
}

.process-steg h3 {
  margin-bottom: 10px;
  font-size: 1.125rem;
}

.process-steg p {
  color: var(--text-3);
  font-size: 0.9688rem;
}

@media (max-width: 1000px) {
  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .process-steg::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .process {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Siffran till vänster om texten, så att stegen tar mindre plats i mobilen. */
  .process-steg {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px;
  }
  .process-nr {
    grid-row: span 2;
    margin-bottom: 0;
  }
  .process-steg h3 {
    margin-bottom: 6px;
  }
}

/* ---------- Priskort ---------- */

.priskort-rad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.priskort {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 3.2vw, 40px);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  background: var(--vit);
  box-shadow: var(--skugga-liten);
}

.priskort-markerat {
  border: 2px solid var(--bla);
}

.priskort-etikett {
  align-self: flex-start;
  margin-bottom: -4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bla);
  color: var(--vit);
  font-size: 0.8125rem;
  font-weight: 650;
}

.priskort-namn {
  font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem);
}

.priskort-kort {
  color: var(--text-3);
}

.pris {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--linje);
}

.pris-belopp {
  color: var(--text);
  font-size: clamp(2.125rem, 1.8rem + 1.2vw, 2.75rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pris-fran {
  font-size: 0.55em;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.pris-typ {
  color: var(--text-3);
  font-size: 0.9688rem;
}

.pris-typ strong {
  color: var(--text);
  font-weight: 700;
}

.pris-manad {
  margin-top: -8px;
  padding: 10px 14px;
  border-radius: var(--radie);
  background: var(--gra-bg);
  color: var(--text-2);
  font-size: 0.9688rem;
}

.pris-manad strong {
  color: var(--text);
}

.priskort .bocklista {
  font-size: 0.9688rem;
}

.priskort-not {
  color: var(--dampad);
  font-size: 0.9063rem;
  line-height: 1.5;
}

.priskort-inte {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px dashed var(--linje-stark);
}

.priskort-inte .bocklista {
  gap: 6px;
  color: var(--text-3);
  font-size: 0.9063rem;
}

.priskort-inte-rubrik {
  font-size: 0.875rem;
  font-weight: 650;
}

.priskort-knapp {
  margin-top: auto;
  padding-top: 6px;
}

.anpassat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: 24px;
  padding: 28px clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  background: var(--vit);
}

.anpassat-text {
  display: grid;
  gap: 8px;
  max-width: 780px;
}

.anpassat-text p {
  color: var(--text-3);
}

.anpassat-text p strong {
  color: var(--text);
}

.prisnot {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.prisnot .ikon {
  margin-top: 2px;
  color: var(--dampad);
}

/* Startsidans priskort */
.hempris-rad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.hempris {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.hempris-markerat {
  border: 2px solid var(--bla);
}

.hempris-namn {
  display: grid;
  gap: 2px;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
}

.hempris-typ {
  color: var(--dampad);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.hempris-passar {
  max-width: 46ch;
  color: var(--text-3);
}

.hempris-belopp {
  display: grid;
  gap: 10px;
  padding-block: 18px;
  border-block: 1px solid var(--linje);
}

.hempris-engang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.hempris-summa {
  color: var(--text);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hempris-manad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.hempris-plus {
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hempris-krav {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8438rem;
  font-weight: 650;
}

.hempris-krav-ja {
  background: var(--text);
  color: var(--vit);
}

.hempris-krav-nej {
  border: 1px solid var(--linje-stark);
  background: var(--gra-bg);
  color: var(--text-2);
}

.hempris .bocklista {
  font-size: 0.9688rem;
}

.hempris-knappar {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 6px;
}

.anpassat-hem h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 1.25rem;
}

.anpassat-pris {
  color: var(--text-2);
}

@media (max-width: 860px) {
  .hempris-rad {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .priskort-rad {
    grid-template-columns: 1fr;
  }
}

/* ---------- Om mig ---------- */

/* Rubriken till vänster och texten till höger (utan porträtt, enligt Anton 28 september 2026). */
.om {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 20px clamp(32px, 6vw, 88px);
}

.om-text .ingress {
  color: var(--text-2);
}

.om-namn {
  display: grid;
  margin-top: 28px;
  padding-left: 16px;
  border-left: 3px solid var(--text);
}

.om-namn span {
  color: var(--dampad);
  font-size: 0.9375rem;
}

@media (max-width: 860px) {
  .om {
    grid-template-columns: 1fr;
  }
}

/* ---------- Avslutande uppmaning ---------- */

.avslut {
  padding-block: 0 var(--sektion);
}

/* Rutan ligger på gränsen när sektionen före är grå. */
.sektion-gra + .avslut,
.demo-sida + .avslut {
  background: linear-gradient(to bottom, var(--gra-bg) 50%, var(--vit) 50%);
}

.avslut-ruta {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 48px);
  border-radius: var(--radie-stor);
  background: #111827;
  color: var(--vit);
  text-align: center;
}

.avslut-ruta h2 {
  max-width: 780px;
  color: var(--vit);
}

.avslut-ruta p {
  max-width: 560px;
  color: #c4cad4;
  font-size: 1.125rem;
}

.avslut-ruta .knapp {
  margin-top: 10px;
}

@media (max-width: 560px) {
  .avslut-ruta {
    border-radius: 20px;
  }
}

/* ---------- Undersidornas rubrikdel ---------- */

.sidrubrik {
  padding-block: clamp(40px, 6vw, 80px) clamp(32px, 4vw, 56px);
  background: var(--vit);
}

.sidrubrik h1 {
  max-width: 860px;
}

.sidrubrik .ingress {
  max-width: 720px;
  margin-top: 20px;
}

.sidrubrik-mitt {
  text-align: center;
  padding-block: clamp(64px, 10vw, 128px);
}

.sidrubrik-mitt h1,
.sidrubrik-mitt .ingress {
  margin-inline: auto;
}

.sidrubrik-mitt h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* ---------- Två bilder: dator och telefon ---------- */

.skarmpar {
  position: relative;
  padding-right: 12%;
}

.skarmpar-telefon {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 20%;
}

@media (max-width: 560px) {
  .skarmpar-telefon {
    width: 26%;
  }
}

/* ---------- /hemsidor ---------- */

.delar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.del {
  padding: 28px 24px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.del-ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  background: var(--gra-bg);
  color: var(--text);
}

.del h3 {
  margin-bottom: 10px;
  font-size: 1.125rem;
}

.del p {
  color: var(--text-3);
  font-size: 0.9688rem;
}

@media (max-width: 1000px) {
  .delar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .delar {
    grid-template-columns: 1fr;
  }
}

.paketdel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.paketdel-kort {
  position: sticky;
  top: calc(var(--sidhuvud-hojd) + 24px);
}

@media (max-width: 960px) {
  .paketdel {
    grid-template-columns: 1fr;
  }
  .paketdel-kort {
    position: static;
    order: -1;
  }
}

/* ---------- Vanliga frågor ---------- */

.fragor h2 {
  margin-bottom: 24px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.fraga {
  border-bottom: 1px solid var(--linje);
}

.fraga:first-of-type {
  border-top: 1px solid var(--linje);
}

.fraga summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fraga summary::-webkit-details-marker {
  display: none;
}

.fraga summary:hover {
  color: var(--bla-mork);
}

.fraga-ikon {
  color: var(--bla);
  transition: transform 0.2s ease;
}

.fraga[open] .fraga-ikon {
  transform: rotate(45deg);
}

.fraga-svar {
  padding: 0 40px 22px 4px;
  color: var(--text-3);
}

/* ---------- /affarssystem ---------- */

.flode {
  display: grid;
  gap: clamp(48px, 7vw, 96px);
  list-style: none;
}

.flode-steg {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.flode-steg:nth-child(even) {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}

.flode-steg:nth-child(even) .flode-text {
  order: 2;
}

.flode-nr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--bla);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flode-nr span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--bla);
  color: var(--vit);
  letter-spacing: 0;
}

.flode-text h3 {
  margin-bottom: 12px;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
}

.flode-text p {
  color: var(--text-3);
}

@media (max-width: 900px) {
  .flode-steg,
  .flode-steg:nth-child(even) {
    grid-template-columns: 1fr;
  }
  .flode-steg:nth-child(even) .flode-text {
    order: 0;
  }
}

.funktioner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.funktion {
  display: flex;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.funktion-ikon {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 8px;
  background: var(--bla);
  color: var(--vit);
  stroke-width: 3;
}

.funktion h3 {
  margin-bottom: 6px;
  font-size: 1.0625rem;
}

.funktion p {
  color: var(--text-3);
  font-size: 0.9375rem;
}

@media (max-width: 1000px) {
  .funktioner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .funktioner {
    grid-template-columns: 1fr;
  }
}

.tillval {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.tillval-kolumn {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  background: var(--vit);
}

.tillval-kolumn > p {
  color: var(--text-3);
}

.tillval-kolumn-streckad {
  border-style: dashed;
  border-color: var(--linje-stark);
  background: #fbfcfe;
}

@media (max-width: 800px) {
  .tillval {
    grid-template-columns: 1fr;
  }
}

/* ---------- /projekt ---------- */

.projektmeny {
  margin-top: -16px;
  margin-bottom: 8px;
}

.projektmeny ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.projektmeny a {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid var(--linje-stark);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.projektmeny a:hover {
  border-color: var(--bla);
  color: var(--bla-mork);
}

.projekt-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.projekt-huvud h2 {
  margin-right: auto;
  order: 0;
}

.projekt-huvud .bricka {
  order: -1;
  flex-basis: 100%;
  max-width: max-content;
}

.projekt .projektbild {
  max-width: 1040px;
  margin-inline: auto;
  padding-right: 16%;
}

.projekt .projektbild-telefon {
  width: 21%;
  bottom: -10%;
}

.projekt-fakta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(64px, 8vw, 104px);
}

.projekt-fakta h3 {
  margin-bottom: 12px;
  font-size: 1.125rem;
}

.projekt-fakta p {
  color: var(--text-3);
}

.projekt-fakta .bocklista {
  color: var(--text-2);
  font-size: 0.9688rem;
}

.projekt-system {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--linje);
}

.projekt-system h3 {
  margin-bottom: 24px;
  font-size: 1.25rem;
}

.projekt-system-bilder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.36fr);
  align-items: start;
  gap: 24px;
}

.projekt-system-telefon {
  max-width: 240px;
}

@media (max-width: 1000px) {
  .projekt-fakta {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .projekt-system-bilder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .projekt-system-telefon {
    width: 46%;
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .projekt-system-bilder {
    grid-template-columns: 1fr;
  }
}

/* Första projektet på ett mörkt band, som på startsidan. */
.projekt-mork {
  background: #111827;
  color: #d1d5db;
}

.projekt-mork h2,
.projekt-mork h3 {
  color: var(--vit);
}

.projekt-mork .projekt-fakta p,
.projekt-mork .projekt-fakta .bocklista {
  color: #c4cad4;
}

.projekt-mork .bocklista .ikon {
  background: rgb(255 255 255 / 0.1);
  color: var(--vit);
}

.projekt-mork .bricka {
  border-color: rgb(255 255 255 / 0.22);
  background: transparent;
  color: #e5e7eb;
}

.projekt-mork .textlank {
  color: #93c5fd;
}

.projekt-mork .textlank:hover {
  color: #bfdbfe;
}

.projekt-mork :focus-visible {
  outline-color: #93c5fd;
}

.projekt-mork .projekt-system {
  border-top-color: rgb(255 255 255 / 0.12);
}

.projekt-mork .bildtext {
  color: #9ca3af;
}

.projekt-mork .fonster {
  border-color: rgb(255 255 255 / 0.12);
  box-shadow: none;
}

.projekt-mork .dator-ram {
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.6), inset 0 0 0 0.22cqw #4b5565, inset 0 0 0 0.6cqw #0a0c11;
}

/* ---------- /priser ---------- */

.tabell-omslag {
  overflow-x: auto;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.pristabell {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.9688rem;
}

.pristabell th,
.pristabell td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--linje);
  text-align: left;
  vertical-align: top;
}

.pristabell thead th {
  background: #fafbfc;
  color: var(--dampad);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pristabell tbody tr:last-child > * {
  border-bottom: 0;
}

.pristabell tbody th {
  font-size: 1.0625rem;
}

.tabell-not {
  display: block;
  margin-top: 4px;
  color: var(--dampad);
  font-size: 0.875rem;
  font-weight: 450;
}

.tabell-pris {
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pristabell td:last-child {
  color: var(--text-3);
}

.notlista {
  display: grid;
  gap: 8px;
  max-width: 860px;
  margin-top: 24px;
  padding-left: 20px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.tva-kolumner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 88px);
}

.tva-kolumner .sektionshuvud {
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .tva-kolumner {
    grid-template-columns: 1fr;
  }
}

.tillagg {
  margin: 0;
}

.tillagg-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linje);
}

.tillagg-rad:first-child {
  border-top: 1px solid var(--linje);
}

.tillagg dt {
  font-weight: 650;
}

.tillagg dd {
  margin: 0;
}

.tillagg-pris {
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.tillagg-text {
  grid-column: 1 / -1;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.rakneexempel {
  display: grid;
  gap: 16px;
}

.rakneexempel-rad {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--gra-bg);
}

.rakneexempel-namn {
  font-weight: 650;
}

.rakneexempel-rakning {
  color: var(--text-3);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.rakneexempel-summa {
  margin-top: 6px;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------- /kontakt ---------- */

.sidrubrik-kontakt {
  padding-bottom: var(--sektion);
}

.kontakt-rad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.kontakt-formulardel h1 {
  font-size: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
}

.kontakt-sida {
  display: grid;
  gap: 16px;
  padding-top: 8px;
}

.kontaktkort {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

.kontaktkort h2 {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.kontaktkort p {
  color: var(--text-3);
  font-size: 0.9688rem;
}

.kontaktkort-ljus {
  background: var(--bla-ljus);
  border-color: var(--bla-ljus-2);
}

.kontaktkort-person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kontaktkort-person p {
  display: grid;
  color: var(--text);
}

.kontaktkort-person span {
  color: var(--dampad);
  font-size: 0.9063rem;
}

.kontaktkort-lista {
  display: grid;
  gap: 8px;
  list-style: none;
}

.kontaktkort-lista li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kontaktkort-lista .ikon {
  color: var(--bla);
}

.sma-steg {
  display: grid;
  gap: 10px;
  padding-left: 22px;
  color: var(--text-3);
  font-size: 0.9688rem;
}

.sma-steg li::marker {
  color: var(--bla);
  font-weight: 700;
}

@media (max-width: 960px) {
  .kontakt-rad {
    grid-template-columns: 1fr;
  }
}

/* ---------- Formulär ---------- */

.formular {
  display: grid;
  gap: 22px;
  margin-top: 36px;
}

.falt-grupp {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.falt-grupp legend {
  margin-bottom: 12px;
  padding: 0;
  font-weight: 650;
}

.falt {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.falt[hidden] {
  display: none;
}

.falt label {
  font-weight: 600;
}

.valfritt {
  color: var(--dampad);
  font-weight: 450;
}

.falt-rad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}

@media (max-width: 600px) {
  .falt-rad {
    grid-template-columns: 1fr;
  }
}

.falt-hjalp {
  color: var(--dampad);
  font-size: 0.9063rem;
  line-height: 1.5;
}

.falt input,
.falt textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--linje-stark);
  border-radius: var(--radie);
  background: var(--vit);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.falt textarea {
  min-height: 150px;
  resize: vertical;
}

.falt input:hover,
.falt textarea:hover {
  border-color: #9ca3af;
}

.falt input:focus,
.falt textarea:focus {
  border-color: var(--bla);
  outline: none;
  box-shadow: 0 0 0 4px rgb(37 99 235 / 0.18);
}

.falt input[aria-invalid="true"],
.falt textarea[aria-invalid="true"] {
  border-color: var(--rod);
  background: #fffafa;
}

.falt input[aria-invalid="true"]:focus,
.falt textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgb(185 28 28 / 0.15);
}

.falt-fel {
  display: none;
  color: var(--rod);
  font-size: 0.9063rem;
  font-weight: 550;
}

.falt-fel:not(:empty) {
  display: block;
}

.segment {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 12px;
  background: var(--gra-bg);
  border: 1px solid var(--linje);
}

.segment-val {
  position: relative;
}

.segment-val input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.segment-val span {
  display: block;
  padding: 10px 18px;
  border-radius: 9px;
  color: var(--text-3);
  font-size: 0.9688rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.segment-val input:checked + span {
  background: var(--vit);
  color: var(--text);
  box-shadow: var(--skugga-liten);
}

.segment-val input:focus-visible + span {
  outline: 3px solid var(--bla);
  outline-offset: 1px;
}

.formular-genomgang-not {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radie);
  background: var(--bla-ljus);
  color: var(--text-2);
}

.formular-genomgang-not[hidden] {
  display: none;
}

.formular-genomgang-not .ikon {
  margin-top: 2px;
  color: var(--bla);
}

.paketval {
  display: grid;
  gap: 10px;
}

.paketval-val {
  position: relative;
  display: block;
  cursor: pointer;
}

.paketval-val input {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: var(--bla);
}

.paketval-kropp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 16px 18px 16px 52px;
  border: 1px solid var(--linje-stark);
  border-radius: 12px;
  background: var(--vit);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.paketval-val:hover .paketval-kropp {
  border-color: #9ca3af;
}

.paketval-val input:checked + .paketval-kropp {
  border-color: var(--bla);
  background: var(--bla-ljus);
  box-shadow: inset 0 0 0 1px var(--bla);
}

.paketval-val input:focus-visible + .paketval-kropp {
  outline: 3px solid var(--bla);
  outline-offset: 2px;
}

.paketval-namn {
  font-weight: 650;
}

.paketval-pris {
  color: var(--text-3);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.falt-grupp[data-ogiltig] .paketval-kropp {
  border-color: var(--rod);
}

.honung {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular-integritet {
  color: var(--dampad);
  font-size: 0.9063rem;
}

.formular-skicka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.formular-status {
  color: var(--text-3);
  font-size: 0.9375rem;
}

.formular-status.ar-fel {
  color: var(--rod);
  font-weight: 550;
}

.formular-fel {
  padding: 16px 18px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: var(--rod-ljus);
  color: #7f1d1d;
}

.formular-fel[hidden] {
  display: none;
}

.formular-fel p + ul {
  margin-top: 8px;
}

.formular-fel ul {
  padding-left: 20px;
}

.formular-fel a {
  color: #7f1d1d;
  font-weight: 600;
}

.laddar {
  width: 18px;
  height: 18px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: var(--vit);
  border-radius: 50%;
  animation: snurra 0.8s linear infinite;
}

@keyframes snurra {
  to {
    transform: rotate(360deg);
  }
}

.bekraftelse {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 36px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid #bbf7d0;
  border-radius: var(--radie-stor);
  background: var(--gron-ljus);
}

.bekraftelse[hidden] {
  display: none;
}

.bekraftelse h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.bekraftelse p {
  color: var(--text-2);
}

.bekraftelse-ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gron);
  color: var(--vit);
}

.bekraftelse-ikon .ikon {
  width: 26px;
  height: 26px;
  stroke-width: 3;
}

.sidrubrik-mitt .bekraftelse-ikon {
  margin: 0 auto 24px;
}

/* ---------- Löptext (integritetspolicy) ---------- */

.text-innehall h2 {
  margin: 40px 0 12px;
  font-size: 1.375rem;
}

.text-innehall p + p {
  margin-top: 14px;
}

.text-innehall p {
  color: var(--text-2);
}

mark.saknas {
  padding: 1px 6px;
  border-radius: 4px;
  background: #fef3c7;
  color: #78350f;
  font-weight: 550;
}

.fellista {
  display: grid;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ---------- Demo-sidan (ramen runt demon) ---------- */

.demo-sida {
  padding-block: clamp(32px, 4vw, 56px) var(--sektion);
  background: var(--gra-bg);
}

.demo-sida-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 32px;
}

.demo-sida-huvud h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.demo-sida-huvud .ingress {
  max-width: 760px;
  margin-top: 14px;
}

.demo-noscript {
  padding: 24px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
}

/* ---------- Sidfot ---------- */

.sidfot {
  padding-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--linje);
  background: var(--gra-bg);
  font-size: 0.9688rem;
}

.sidfot-rad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.sidfot-om p {
  max-width: 320px;
  margin-top: 16px;
  color: var(--text-3);
}

/* ”En del av Nordic Aero Vision” */
.del-av {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 10px 16px 10px 14px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  background: var(--vit);
  color: var(--dampad);
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.del-av:hover {
  border-color: var(--linje-stark);
  box-shadow: var(--skugga-liten);
  color: var(--text-3);
}

.del-av-text {
  white-space: nowrap;
}

.del-av-logga img {
  display: block;
  width: auto;
  height: 26px;
}

.del-av-om {
  margin-top: 24px;
  background: var(--gra-bg);
  border-color: transparent;
}

.logga-sidfot svg {
  height: 36px;
}

.sidfot h2 {
  margin-bottom: 14px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidfot ul {
  display: grid;
  gap: 8px;
  list-style: none;
  color: var(--text-3);
}

.sidfot ul a {
  color: var(--text-2);
  text-decoration: none;
}

.sidfot ul a:hover {
  color: var(--bla);
  text-decoration: underline;
}

.sidfot-botten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 24px 32px;
  border-top: 1px solid var(--linje);
  color: var(--dampad);
  font-size: 0.875rem;
}

@media (max-width: 900px) {
  .sidfot-rad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sidfot-om {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .sidfot-rad {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Förhandsvisningsfilen ---------- */

[data-lage="fil"] .fil-sida[hidden] {
  display: none;
}

/* ---------- Utskrift ---------- */

@media print {
  .sidhuvud,
  .sidfot,
  .avslut,
  .hoppa,
  .forhandsrad {
    display: none !important;
  }
  body {
    font-size: 11pt;
  }
}

/* ---------- Cookierutan ---------- */

.cookieruta {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 60;
  display: grid;
  gap: 12px;
  width: min(440px, calc(100vw - 40px));
  padding: 22px 22px 20px;
  border: 1px solid var(--linje);
  border-radius: var(--radie-kort);
  background: var(--vit);
  box-shadow: 0 24px 60px -18px rgb(17 24 39 / 0.35), 0 2px 6px rgb(17 24 39 / 0.06);
}

.cookieruta[hidden] {
  display: none;
}

.cookieruta h2 {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}

.cookieruta p {
  color: var(--text-3);
  font-size: 0.9063rem;
  line-height: 1.55;
}

.cookieruta-status {
  font-weight: 600;
}

.cookieruta-knappar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

/* Neka och Acceptera ser exakt likadana ut, så att inget val framhävs. */
.knapp-mork {
  background: var(--text);
  color: var(--vit);
}

.knapp-mork:hover {
  background: #1f2937;
  color: var(--vit);
}

@media (max-width: 560px) {
  .cookieruta {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}

@media print {
  .cookieruta {
    display: none !important;
  }
}

.textknapp {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bla);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.textknapp:hover {
  color: var(--bla-mork);
}

.textknapp[hidden] {
  display: none;
}

.sidfot-botten .textknapp {
  margin-left: 8px;
  color: var(--text-3);
}

.textlista {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding-left: 20px;
  color: var(--text-2);
}

.text-innehall code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--gra-bg);
  font-size: 0.9em;
}

/* Paketnamnen (Synlig, Samlad, Skräddarsydd) med en rad om vad paketet är. */
.priskort-typ {
  display: block;
  margin-top: 6px;
  color: var(--bla);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paketval-namn {
  display: grid;
}

.paketval-typ {
  color: var(--dampad);
  font-size: 0.875rem;
  font-weight: 500;
}


/* ---------- Datorer: skärm på fot och laptop ----------
   Samma princip som telefonen: alla mått i cqw (procent av datorns bredd). */

.dator {
  container-type: inline-size;
}

.dator-ram {
  position: relative;
  padding: 1.5cqw;
  border-radius: 2cqw;
  background: #0d1016;
  box-shadow: var(--skugga-stor), inset 0 0 0 0.22cqw #3b4252, inset 0 0 0 0.6cqw #0a0c11;
}

.dator-skarm {
  overflow: hidden;
  border-radius: 0.7cqw;
  background: var(--vit);
}

.dator-skarm img {
  width: 100%;
}

/* Webbläsarens list inne i skärmen. */
.dator-list {
  display: flex;
  align-items: center;
  gap: 2cqw;
  height: max(3.6cqw, 11px);
  padding: 0 1.6cqw;
  border-bottom: 1px solid var(--linje);
  background: #f3f4f6;
}

.dator-list .fonster-prickar {
  gap: 0.7cqw;
}

.dator-list .fonster-prickar i {
  width: 1.05cqw;
  height: 1.05cqw;
}

.dator-adress {
  overflow: hidden;
  flex: 1;
  max-width: 44cqw;
  margin-inline: auto;
  padding: 0 1.4cqw;
  border-radius: 0.8cqw;
  background: var(--vit);
  color: var(--dampad);
  font-size: max(1.55cqw, 7px);
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--linje);
}

/* Skärm på fot, med hals och fot i aluminium. */
.dator-fot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dator-hals {
  width: 15cqw;
  height: 7.5cqw;
  background: linear-gradient(90deg, #aab1bc, #dde1e7 45%, #c3c9d2 70%, #9ca3ae);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.dator-bas {
  width: 32cqw;
  height: 1.6cqw;
  border-radius: 0.6cqw 0.6cqw 1cqw 1cqw;
  background: linear-gradient(#e6e9ee, #b4bbc5);
  box-shadow: 0 1.4cqw 2.6cqw -1cqw rgb(17 24 39 / 0.4);
}

/* Laptop: skärmen är lite smalare än tangentbordsdelen. */
.dator-laptop .dator-ram {
  margin-inline: 6.5cqw;
  padding: 1.9cqw 1.5cqw 1.5cqw;
  border-radius: 2.4cqw 2.4cqw 0.5cqw 0.5cqw;
}

.dator-kamera {
  position: absolute;
  top: 0.6cqw;
  left: 50%;
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background: #2a3242;
  transform: translateX(-50%);
}

.dator-tangentbord {
  position: relative;
  height: 2.4cqw;
  border-radius: 0.3cqw 0.3cqw 3cqw 3cqw / 0.3cqw 0.3cqw 1.8cqw 1.8cqw;
  background: linear-gradient(#eef0f3, #c9ced6 55%, #9aa1ad);
  box-shadow: 0 1.6cqw 3cqw -1.2cqw rgb(17 24 39 / 0.45);
}

.dator-tangentbord span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 15cqw;
  height: 0.9cqw;
  border-radius: 0 0 1cqw 1cqw;
  background: #b2b8c2;
  transform: translateX(-50%);
}

.stor-laptop {
  max-width: 1040px;
  margin-inline: auto;
}

/* ======================================================================
   Designlager v4: varmt papper, svart text och AW-blått som enda accentfärg.
   Tunna linjer i stället för skuggor och gradienter. Ligger sist i filen och
   skriver över reglerna ovan med samma väljare.
   ====================================================================== */

:root {
  --papper: #f4f3ee;
  --papper-2: #ecebe4;
  --black: #0e0f12;
  --gra-bg: #f4f3ee;
  --text: #0e0f12;
  --text-2: #2f3036;
  --text-3: #4a4b52;
  --dampad: #6b6c72;
  --linje: #e2e0d8;
  --linje-stark: #cfccc2;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --natt-text: #c9cad0;
  --natt-dampad: #8d8f97;
  --natt-lank: #93c5fd;
}

/* ---------- Rubriker ---------- */

h1 {
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}

h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

h3 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* Etiketten: liten, i skrivmaskinsstil, med ett blått fönster som i loggan. */
.etikett {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.etikett::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10px;
  border-radius: 2.5px;
  background: linear-gradient(var(--bla) 0 3px, var(--black) 3px);
}

/* ---------- Knappar: svarta, blå när man pekar ---------- */

.knapp {
  border-radius: 999px;
}

.knapp-primar {
  background: var(--black);
  color: var(--vit);
}

.knapp-primar:hover {
  background: var(--bla);
  color: var(--vit);
}

.knapp-primar:active {
  background: var(--bla-mork);
}

.knapp-sekundar {
  border-color: var(--linje-stark);
  background: transparent;
}

.knapp-sekundar:hover {
  border-color: var(--black);
  background: transparent;
}

.knapp:focus-visible {
  border-radius: 999px;
}

/* ---------- Sidhuvud ---------- */

.sidhuvud {
  background: rgb(244 243 238 / 0.9);
}

.sidhuvud.skrollad,
body.meny-oppen .sidhuvud {
  border-bottom-color: var(--linje);
  box-shadow: none;
}

.huvudmeny a {
  color: var(--text-2);
}

.huvudmeny a:hover {
  background: rgb(14 15 18 / 0.05);
}

.huvudmeny a[aria-current="page"] {
  color: var(--text);
}

.huvudmeny a[aria-current="page"]::after {
  right: auto;
  bottom: 1px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.menyknapp {
  border-radius: 999px;
  background: transparent;
}

.mobilmeny {
  background: var(--papper);
}

/* ---------- Startsidans hero ---------- */

.hero {
  padding-block: clamp(36px, 5vw, 72px) clamp(56px, 6vw, 96px);
  background: var(--papper);
}

.hero-etikett {
  margin-bottom: clamp(18px, 2.4vw, 30px);
}

/* Rubriken över hela bredden. Första meningen dämpad, den andra (det som ändras) svart. */
.hero h1 {
  font-size: clamp(2.5rem, 1rem + 6.2vw, 7rem);
}

.hero h1 span:first-child {
  color: #85837b; /* 3,4:1 mot pappret, godkänt för stor text */
}

.hero-rad {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(32px, 4.5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--linje-stark);
}

.hero-text {
  align-self: start;
}

.hero-text .ingress {
  max-width: 500px;
  margin-top: 0;
  color: var(--text-2);
}

.hero-fakta {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.hero-fakta li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-fakta li + li::before {
  content: none;
}

.hero-fakta .ikon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--bla);
  stroke-width: 2.6;
}

@media (max-width: 1000px) {
  .hero-rad {
    grid-template-columns: 1fr;
  }
  .hero-bild {
    max-width: 620px;
  }
}

/* ---------- Systemet i praktiken: flikar som text ---------- */

.flikrad {
  gap: 28px;
  border-bottom: 1px solid var(--linje-stark);
}

.flik {
  padding: 10px 0;
  font-size: 1.0625rem;
}

.flik[aria-selected="true"]::after {
  right: 0;
  left: 0;
  background: var(--black);
}

.flikpanel-bild .fonster {
  box-shadow: none;
  border-color: var(--linje-stark);
}

/* ---------- Projektbanden ---------- */

.sektion-gra + .projektdel {
  padding-top: var(--sektion);
}

.projektband {
  background: var(--papper);
}

.projektband-mork,
.projekt-mork {
  background: var(--black);
}

/* ---------- Arbetsprocessen: fyra spalter med linje överst ---------- */

.process {
  gap: 0;
  border-top: 1px solid var(--black);
}

.process-steg {
  padding: 24px 28px 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.process-steg + .process-steg {
  padding-left: 28px;
  border-left: 1px solid var(--linje);
}

.process-steg:not(:last-child)::after {
  content: none;
}

.process-nr {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: 40px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bla);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

.process-nr::before {
  content: "0";
}

.process-steg h3 {
  font-size: 1.25rem;
}

@media (max-width: 1000px) {
  .process-steg:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .process-steg:nth-child(n + 3) {
    border-top: 1px solid var(--linje);
  }
}

@media (max-width: 560px) {
  .process {
    gap: 0;
  }
  .process-steg,
  .process-steg + .process-steg {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 8px;
    padding: 20px 0;
    border-left: 0;
  }
  .process-steg + .process-steg {
    border-top: 1px solid var(--linje);
  }
  .process-nr {
    grid-row: span 2;
    margin: 4px 0 0;
  }
}

/* ---------- Priser ---------- */

.hempris,
.priskort,
.anpassat {
  border-color: var(--linje-stark);
  border-radius: 18px;
  box-shadow: none;
}

.hempris-markerat {
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--natt-text);
}

.hempris-markerat h3,
.hempris-markerat .hempris-summa,
.hempris-markerat .hempris-plus {
  color: var(--vit);
}

.hempris-markerat .hempris-typ {
  color: var(--natt-lank);
}

.hempris-markerat .hempris-passar,
.hempris-markerat .hempris-engang {
  color: #b9bac1;
}

.hempris-markerat .hempris-belopp {
  border-color: rgb(255 255 255 / 0.14);
}

.hempris-markerat .hempris-krav-ja {
  background: var(--vit);
  color: var(--black);
}

.hempris-markerat .bocklista li {
  color: #dcdde2;
}

.hempris-markerat .bocklista .ikon {
  background: rgb(255 255 255 / 0.1);
  color: var(--vit);
}

.hempris-markerat .knapp-primar {
  background: var(--bla);
}

.hempris-markerat .knapp-primar:hover {
  background: var(--vit);
  color: var(--black);
}

.hempris-markerat .textlank {
  color: var(--natt-lank);
}

.hempris-markerat :focus-visible {
  outline-color: var(--natt-lank);
}

.priskort-markerat {
  border: 1px solid var(--black);
  box-shadow: 8px 8px 0 var(--papper-2), 8px 8px 0 1px var(--linje-stark);
}

.priskort-etikett {
  background: var(--black);
}

.bocklista .ikon {
  background: var(--papper-2);
}

/* ---------- Om mig ---------- */

.om {
  padding-top: 28px;
  border-top: 1px solid var(--black);
}

.om-text .ingress {
  color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  font-weight: 450;
  letter-spacing: -0.015em;
  line-height: 1.45;
}

.om-namn {
  border-left-color: var(--bla);
}

.del-av-om {
  background: var(--papper);
}

/* ---------- Avslut och sidfot: ett mörkt block längst ned ---------- */

.avslut,
.sektion-gra + .avslut,
.demo-sida + .avslut {
  padding-block: clamp(64px, 9vw, 128px) 0;
  background: var(--black);
  /* En tunn linje upptill, så att blocket skiljs från ett mörkt projektband ovanför. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.avslut-ruta {
  justify-items: start;
  gap: 20px;
  padding: 0 0 clamp(56px, 7vw, 96px);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0;
  background: none;
  text-align: left;
}

.avslut-ruta h2 {
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.avslut-ruta p {
  max-width: 520px;
  color: var(--natt-text);
}

.avslut-ruta .knapp-primar {
  background: var(--bla);
}

.avslut-ruta .knapp-primar:hover {
  background: var(--vit);
  color: var(--black);
}

.avslut-ruta :focus-visible {
  outline-color: var(--natt-lank);
}

.sidfot {
  border-top: 0;
  background: var(--black);
  color: var(--natt-dampad);
}

.sidfot-om p,
.sidfot ul {
  color: var(--natt-dampad);
}

.sidfot h2 {
  color: var(--vit);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.sidfot ul a {
  color: var(--natt-text);
}

.sidfot ul a:hover {
  color: var(--vit);
}

.sidfot .del-av {
  border-color: transparent;
  background: var(--vit);
}

.sidfot-botten {
  border-top-color: rgb(255 255 255 / 0.12);
  color: var(--natt-dampad);
}

.sidfot .textknapp {
  color: var(--natt-text);
}

.sidfot :focus-visible {
  outline-color: var(--natt-lank);
}

/* ---------- Undersidornas rubrikdel ---------- */

.sidrubrik {
  padding-block: clamp(40px, 6vw, 88px) clamp(36px, 4.5vw, 64px);
  background: var(--papper);
}

.sidrubrik h1 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
}

.sidrubrik-mitt h1 {
  max-width: none;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.sidrubrik .ingress {
  color: var(--text-2);
}

/* Första bilden eller korten ligger över kanten på rubrikdelen. */
.sektion-overlapp {
  background: linear-gradient(to bottom, var(--papper) 0 clamp(64px, 8vw, 128px), transparent 0);
}

.sidrubrik-kontakt {
  background: var(--papper);
}

/* Rubriken i ett mörkt band kan vara h2 (på /projekt) eller h3 (på startsidan). */
.projektband-mork h2,
.projektband-mork h3 {
  color: var(--vit);
}

/* ======================================================================
   Designlager v5: startsidans nya uppbyggnad. Scenen med tre sajter, hemsidan
   och systemet sida vid sida, systemet i ett appfönster, projektgalleri,
   före/efter i stort format, om mig med arbetsgången och priserna som rader.
   ====================================================================== */

/* ---------- Sidhuvudet över scenen ---------- */

.logga-pa-ljust,
.logga-pa-morkt {
  display: flex;
}

.logga-pa-morkt {
  display: none;
}

/* På startsidan ligger sidhuvudet genomskinligt över den mörka scenen tills man scrollar. */
.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .logga-pa-ljust {
  display: none;
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .logga-pa-morkt {
  display: flex;
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .huvudmeny a {
  color: rgb(255 255 255 / 0.76);
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .huvudmeny a:hover {
  background: rgb(255 255 255 / 0.08);
  color: var(--vit);
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .menyknapp {
  border-color: rgb(255 255 255 / 0.3);
  color: var(--vit);
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .knapp-primar {
  background: var(--vit);
  color: var(--black);
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .knapp-primar:hover {
  background: var(--bla);
  color: var(--vit);
}

.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) :focus-visible {
  outline-color: var(--natt-lank);
}

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

.scen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: calc(-1 * var(--sidhuvud-hojd));
  padding: calc(var(--sidhuvud-hojd) + clamp(32px, 4.4vw, 64px)) 0 clamp(28px, 3vw, 40px);
  background: linear-gradient(to bottom, #1a1b20, var(--black) 55%);
  color: #c9cad0;
  text-align: center;
}

/* Golvet: scenens nedersta del är vit, så att skärmarna står på kanten. */
.scen::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  height: clamp(130px, 17vw, 270px);
  background: var(--vit);
}

.scen-text {
  display: grid;
  justify-items: center;
}

.scen .etikett {
  color: #c9cad0;
}

.scen .etikett::before {
  background: linear-gradient(var(--bla) 0 3px, var(--vit) 3px);
}

.scen h1 {
  max-width: none;
  color: var(--vit);
  font-size: clamp(2.375rem, 0.9rem + 5.6vw, 6.25rem);
}

.scen h1 span {
  display: block;
}

.scen h1 span:first-child {
  color: #85868e;
}

.scen .ingress {
  max-width: 620px;
  margin-top: clamp(20px, 2.4vw, 30px);
  color: #b4b6bf;
}

.scen .knapprad {
  justify-content: center;
  margin-top: 30px;
}

.scen .knapp-primar {
  background: var(--vit);
  color: var(--black);
  box-shadow: 0 10px 30px -10px rgb(255 255 255 / 0.35);
}

.scen .knapp-primar:hover {
  background: var(--bla);
  color: var(--vit);
}

.scen .knapp-sekundar {
  border-color: rgb(255 255 255 / 0.28);
  color: var(--vit);
}

.scen .knapp-sekundar:hover {
  border-color: var(--vit);
  color: var(--vit);
}

.scen :focus-visible {
  outline-color: var(--natt-lank);
}

.scen-fakta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin-top: 22px;
  color: #8d8f97;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  list-style: none;
}

.scen-fakta li + li::before {
  content: "/";
  margin-inline: 14px;
  color: #4b4d55;
}

.scen-bild {
  margin: clamp(40px, 4.4vw, 60px) 0 0;
}

/* Tre skärmar i en solfjäder: mitten störst och framför, sidorna vridna bakåt. */
.scen-ytor {
  position: relative;
  width: min(1320px, 100% - 2 * var(--kant));
  margin-inline: auto;
  aspect-ratio: 1320 / 610;
}

.scen-skarm {
  position: absolute;
  top: 0;
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.08);
}

.scen-skarm .fonster-bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.scen-skarm .fonster-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.scen-mitt {
  left: 50%;
  z-index: 3;
  width: 56%;
  transform: translateX(-50%);
}

.scen-vanster,
.scen-hoger {
  top: 9%;
  z-index: 2;
  width: 41%;
  filter: brightness(0.78);
  transition: filter 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.scen-vanster {
  left: 0;
  transform: perspective(1600px) rotateY(16deg);
  transform-origin: right center;
}

.scen-hoger {
  right: 0;
  transform: perspective(1600px) rotateY(-16deg);
  transform-origin: left center;
}

.scen-vanster:hover,
.scen-hoger:hover {
  filter: none;
}

.scen-telefon {
  position: absolute;
  bottom: 0;
  z-index: 4;
  width: 12.5%;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.45));
}

.scen-telefon-vanster {
  left: 15%;
}

.scen-telefon-hoger {
  right: 15%;
}

@media (prefers-reduced-motion: no-preference) {
  .scen-vanster:hover {
    transform: perspective(1600px) rotateY(8deg);
  }
  .scen-hoger:hover {
    transform: perspective(1600px) rotateY(-8deg);
  }
}

.scen-bild figcaption {
  margin-top: 22px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

@media (max-width: 760px) {
  .scen-fakta {
    display: grid;
    gap: 4px;
  }
  .scen-fakta li + li::before {
    content: none;
  }
  .scen .knapprad .knapp {
    flex: 1 1 100%;
  }
  .scen-ytor {
    width: 100%;
    aspect-ratio: 390 / 300;
  }
  .scen-mitt {
    width: 78%;
  }
  .scen-vanster,
  .scen-hoger {
    top: 12%;
    width: 54%;
  }
  .scen-vanster {
    left: -30%;
  }
  .scen-hoger {
    right: -30%;
  }
  .scen-telefon {
    width: 21%;
  }
  .scen-telefon-vanster {
    left: 3%;
  }
  .scen-telefon-hoger {
    right: 3%;
  }
  .scen::after {
    height: 90px;
  }
}

/* ---------- Det kunden ser. Det du ser. ---------- */

.dela-rad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--linje-stark);
  border-radius: 28px;
}

.dela {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 0;
}

.dela-ljus {
  background: var(--papper);
}

.dela-mork {
  background: var(--black);
  color: var(--natt-text);
}

.dela-flik {
  color: var(--dampad);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dela h3 {
  margin: 10px 0 14px;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.dela-text > p {
  max-width: 46ch;
  color: var(--text-3);
}

.dela .bocklista {
  margin: 22px 0 24px;
}

.dela-mork .dela-flik {
  color: #8d8f97;
}

.dela-mork h3 {
  color: var(--vit);
}

.dela-mork .dela-text > p {
  color: #b4b6bf;
}

.dela-mork .bocklista li {
  color: #dcdde2;
}

.dela-mork .bocklista .ikon {
  background: rgb(255 255 255 / 0.1);
  color: var(--vit);
}

.dela-mork .textlank {
  color: var(--natt-lank);
}

.dela-mork :focus-visible {
  outline-color: var(--natt-lank);
}

/* Skärmbilden går ut genom kortets nederkant. */
.dela-bild {
  margin-top: auto;
}

.dela-bild .fonster {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 30px 60px -30px rgb(14 15 18 / 0.45);
}

.dela-mork .dela-bild .fonster {
  border-color: rgb(255 255 255 / 0.12);
  box-shadow: 0 30px 60px -20px #000;
}

.dela-bild .fonster-bild {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dela-bild .fonster-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (prefers-reduced-motion: no-preference) {
  .dela-bild .fonster {
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .dela:hover .dela-bild .fonster {
    transform: translateY(-8px);
  }
}

@media (max-width: 900px) {
  .dela-rad {
    grid-template-columns: 1fr;
  }
}

/* ---------- Systemet i ett appfönster ---------- */

.app-del {
  background: var(--papper);
}

.app {
  overflow: hidden;
  border: 1px solid var(--black);
  border-radius: 18px;
  background: var(--vit);
  box-shadow: 14px 14px 0 var(--papper-2), 14px 14px 0 1px var(--linje-stark);
}

.app-list {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 16px;
  border-top: 4px solid var(--bla);
  background: var(--black);
  color: #9a9ba3;
  font-family: var(--mono);
  font-size: 0.75rem;
}

.app-list .fonster-prickar i {
  background: var(--vit);
}

.app-list .fonster-prickar i:nth-child(2) {
  opacity: 0.7;
}

.app-list .fonster-prickar i:nth-child(3) {
  opacity: 0.45;
}

.app-kropp {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
}

.app-meny {
  padding: 18px 12px;
  background: #121318;
}

.app-foretag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  color: var(--vit);
  font-size: 0.9375rem;
  font-weight: 600;
}

.app-foretag span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bla);
  font-size: 0.8125rem;
}

.js .app .flikrad {
  display: grid;
  gap: 4px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.app-flik {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #a7a9b1;
  font-size: 0.9688rem;
  text-align: left;
}

.app-flik .ikon {
  width: 18px;
  height: 18px;
}

/* Ett tryck på ikonen eller texten räknas som ett tryck på fliken. */
.app-flik > * {
  pointer-events: none;
}

.app-flik:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--vit);
}

.app-flik[aria-selected="true"] {
  background: rgb(37 99 235 / 0.24);
  box-shadow: inset 3px 0 0 var(--bla);
  color: var(--vit);
}

.app-flik[aria-selected="true"]::after {
  content: none;
}

.app-flik:focus-visible {
  outline-color: var(--natt-lank);
}

.app-vy {
  padding: clamp(20px, 3vw, 36px);
  background: #f7f7f4;
}

.app-panel {
  grid-template-columns: 1fr;
  gap: 24px;
}

.app-panel .flikpanel-text {
  max-width: 640px;
  padding-top: 0;
}

.app-panel .flikpanel-text h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing: -0.035em;
}

/* Skärmbilden visas utan webbläsarlist och utan demons egen sidomeny (19 % av bredden), så att
   appfönstrets meny blir menyn. Förstoringen visar hela bilden. */
.app-panel .fonster {
  border-color: var(--linje-stark);
  box-shadow: 0 24px 50px -30px rgb(14 15 18 / 0.35);
}

.app-panel .fonster-list {
  display: none;
}

.app-panel .fonster-bild {
  overflow: hidden;
}

.app-panel .fonster-bild img {
  width: 123.5%;
  max-width: none;
  margin-left: -23.5%;
}

.app-not {
  margin-top: 30px;
}

@media (max-width: 860px) {
  .app-kropp {
    grid-template-columns: 1fr;
  }
  .app-meny {
    padding: 8px;
  }
  .app-foretag {
    display: none;
  }
  .js .app .flikrad {
    display: flex;
    overflow-x: auto;
  }
  .app-flik {
    width: auto;
    white-space: nowrap;
  }
  .app-flik[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--bla);
  }
}

/* ---------- Projektgalleriet ---------- */

.galleri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}

.fall {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linje-stark);
  border-radius: 22px;
  background: var(--vit);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.fall:hover {
  border-color: var(--black);
  box-shadow: 0 34px 60px -34px rgb(14 15 18 / 0.45);
}

.fall:focus-within {
  outline: 3px solid var(--bla);
  outline-offset: 3px;
}

.fall-lank {
  color: inherit;
  text-decoration: none;
}

.fall-lank:hover {
  color: inherit;
}

.fall-lank:focus-visible {
  outline: none;
}

/* Hela kortet är klickbart. */
.fall-lank::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Mobilen står på en yta i kundens egen färg och sticker upp ur kortet. */
.fall-bild {
  position: relative;
  display: flex;
  justify-content: center;
  height: clamp(300px, 30vw, 380px);
  overflow: hidden;
  padding-top: 40px;
}

.fall-nordic-aero-vision .fall-bild {
  background: linear-gradient(to bottom, #0a2540, #0e3a63);
}

.fall-driviqo .fall-bild {
  background: linear-gradient(to bottom, #eeeff3, #dfe3f2);
}

.fall-tangklev .fall-bild {
  background: linear-gradient(to bottom, #111111, #2a0d0d);
}

.fall-telefon {
  width: 58%;
  max-width: 230px;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .fall:hover {
    transform: translateY(-4px);
  }
  .fall:hover .fall-telefon {
    transform: translateY(-14px);
  }
}

.fall-text {
  display: grid;
  gap: 4px;
  padding: 22px 24px 26px;
}

.fall-logga {
  display: flex;
  align-items: center;
  height: 38px;
  margin-bottom: 12px;
}

.fall-logga img {
  width: auto;
  height: 26px;
}

.fall-tangklev .fall-logga img {
  height: 38px;
}

.galleri-driviqo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b0c0e;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.galleri-driviqo svg {
  width: 30px;
  height: 30px;
}

.fall-namn {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.fall .bricka {
  justify-self: start;
  margin-bottom: 8px;
}

.fall-kort {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.fall-mer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--bla);
  font-weight: 600;
}

.fall-mer .ikon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.fall:hover .fall-mer .ikon {
  transform: translateX(3px);
}

@media (max-width: 960px) {
  .galleri {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .fall {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .fall-bild {
    height: auto;
    min-height: 280px;
  }
  .fall-text {
    align-content: center;
  }
}

@media (max-width: 520px) {
  .fall {
    grid-template-columns: 1fr;
  }
  .fall-bild {
    height: 260px;
    min-height: 0;
  }
}

/* ---------- Före och efter i stort format ---------- */

.fe {
  padding-block: var(--sektion);
  background: var(--black);
  color: var(--natt-text);
}

.fe-huvud {
  display: grid;
  justify-items: center;
  max-width: 760px;
  margin: 0 auto clamp(32px, 4vw, 52px);
  text-align: center;
}

.fe .etikett {
  color: #c9cad0;
}

.fe .etikett::before {
  background: linear-gradient(var(--bla) 0 3px, var(--vit) 3px);
}

.fe h2 {
  color: var(--vit);
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
}

.fe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 16px;
  color: #9a9ba3;
}

.fe .bricka {
  border-color: rgb(255 255 255 / 0.22);
  background: transparent;
  color: #e5e7eb;
}

.fe-bild {
  max-width: 1040px;
  margin-inline: auto;
}

.fe-fakta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  max-width: 1040px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.fe-fakta h3 {
  margin-bottom: 8px;
  color: var(--vit);
  font-size: 1rem;
}

.fe-fakta p,
.fe-fakta ul {
  color: #b4b6bf;
  font-size: 0.9688rem;
}

.fe-fakta ul {
  display: grid;
  gap: 4px;
  padding-left: 1.1em;
}

.fe-lankar {
  display: grid;
  align-content: start;
  gap: 16px;
}

.fe .textlank {
  color: var(--natt-lank);
}

.fe .projektband-not {
  color: #8d8f97;
}

.fe :focus-visible {
  outline-color: var(--natt-lank);
}

@media (max-width: 860px) {
  .fe-fakta {
    grid-template-columns: 1fr;
  }
}

/* ---------- Om mig och arbetsgången ---------- */

.samarbete-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
}

.samarbete-om h2,
.samarbete-rubrik {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
}

.samarbete-om .ingress {
  margin-top: 22px;
  color: var(--text);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  line-height: 1.5;
}

.samarbete-steg .process {
  grid-template-columns: 1fr;
  margin-top: 28px;
  border-top: 1px solid var(--black);
}

.samarbete-steg .process-steg,
.samarbete-steg .process-steg + .process-steg {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 8px;
  padding: 20px 0;
  border-left: 0;
}

.samarbete-steg .process-steg + .process-steg {
  border-top: 1px solid var(--linje);
}

.samarbete-steg .process-nr {
  grid-row: span 2;
  margin: 5px 0 0;
}

.samarbete-steg .process-steg h3 {
  margin-bottom: 6px;
  font-size: 1.1875rem;
}

@media (max-width: 900px) {
  .samarbete-rad {
    grid-template-columns: 1fr;
  }
}

/* ---------- Priserna som rader ---------- */

.prisdel .hempris-rad {
  grid-template-columns: 1fr;
  gap: 16px;
}

.prisdel .hempris {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "namn belopp punkter knappar" "passar belopp punkter knappar";
  align-items: start;
  gap: 6px 36px;
  padding: clamp(24px, 3vw, 36px);
}

.prisdel .hempris-namn {
  grid-area: namn;
}

.prisdel .hempris-passar {
  grid-area: passar;
  font-size: 0.9375rem;
}

.prisdel .hempris-belopp {
  grid-area: belopp;
  grid-row: 1 / span 2;
  padding: 0;
  border: 0;
}

.prisdel .hempris .bocklista {
  grid-area: punkter;
  grid-row: 1 / span 2;
  font-size: 0.9375rem;
}

.prisdel .hempris-knappar {
  grid-area: knappar;
  grid-row: 1 / span 2;
  display: grid;
  justify-items: center;
  gap: 12px;
}

@media (max-width: 1100px) {
  .prisdel .hempris {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "namn belopp" "passar belopp" "punkter knappar";
    row-gap: 18px;
  }
  .prisdel .hempris .bocklista,
  .prisdel .hempris-knappar {
    grid-row: auto;
  }
  .prisdel .hempris-knappar {
    align-self: end;
  }
}

@media (max-width: 680px) {
  .prisdel .hempris {
    grid-template-columns: 1fr;
    grid-template-areas: "namn" "passar" "belopp" "punkter" "knappar";
  }
  .prisdel .hempris-belopp {
    grid-row: auto;
    padding-block: 16px;
    border-block: 1px solid var(--linje);
  }
  .prisdel .hempris-markerat .hempris-belopp {
    border-color: rgb(255 255 255 / 0.14);
  }
}

/* ======================================================================
   Designlager v6: undersidorna i samma stil som startsidan. Mörk scen överst
   (med skärmar på Hemsidor och Affärssystem), innehållet som står på kanten,
   tunna linjer i stället för rutor, svarta ytor för det som ska lyftas fram.
   ====================================================================== */

/* ---------- Rubrikdelen: samma mörka scen som startsidan ---------- */

.scen-sida {
  padding-bottom: clamp(56px, 7vw, 104px);
}

.scen-sida::after {
  content: none;
}

/* Med skärmar: golvet tillbaka, skärmarna står på kanten. */
.scen-sida.scen-med-bild {
  padding-bottom: clamp(28px, 3vw, 40px);
}

.scen-sida.scen-med-bild::after {
  content: "";
}

.scen-sida h1 {
  max-width: 17ch;
  font-size: clamp(2.25rem, 1rem + 4.6vw, 5.25rem);
}

.scen-sida .ingress {
  max-width: 660px;
}

.scen-sida.sidrubrik-mitt {
  padding-block: calc(var(--sidhuvud-hojd) + clamp(56px, 9vw, 128px)) clamp(72px, 10vw, 144px);
}

.scen-sida.sidrubrik-mitt h1 {
  max-width: 20ch;
  margin-inline: auto;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
}

.scen .fellista a {
  color: var(--natt-lank);
}

.scen .fellista a:hover {
  color: #bfdbfe;
}

.scen-sida .bekraftelse-ikon {
  box-shadow: 0 0 0 8px rgb(21 128 61 / 0.25);
}

/* En enda skärm i mitten (Hemsidor): bredare, med mobilerna på var sin sida. */
.scen-bild-en .scen-ytor {
  aspect-ratio: 1320 / 560;
}

.scen-bild-en .scen-mitt {
  width: 62%;
}

.scen-bild-en .scen-telefon-vanster {
  left: 12%;
}

.scen-bild-en .scen-telefon-hoger {
  right: 12%;
}

.scen-bild figcaption {
  max-width: 900px;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .scen-bild-en .scen-ytor {
    aspect-ratio: 390 / 280;
  }
  .scen-bild-en .scen-mitt {
    width: 80%;
  }
  .scen-bild-en .scen-telefon-vanster {
    left: 2%;
  }
  .scen-bild-en .scen-telefon-hoger {
    right: 2%;
  }
}

/* Innehållet direkt under en scen utan bild (Priser, Projekt) står på den mörka kanten. */
.sektion-overlapp {
  background: linear-gradient(to bottom, var(--black) 0 clamp(72px, 9vw, 136px), transparent 0);
}

/* ---------- Gemensamt: noter och frågor ---------- */

.notruta {
  border-color: var(--linje-stark);
  border-radius: 14px;
  background: var(--papper);
}

.notruta .ikon {
  color: var(--bla);
}

.fragor h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}

.fraga {
  border-color: var(--linje-stark);
}

.fraga:first-of-type {
  border-top-color: var(--black);
}

.fraga summary {
  font-size: 1.0625rem;
}

.fraga-ikon {
  border-radius: 50%;
  transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.fraga[open] .fraga-ikon {
  background: var(--black);
  color: var(--vit);
}

/* ---------- /hemsidor: det här får du ---------- */

.delar {
  gap: 0;
  border-top: 1px solid var(--black);
}

.del {
  padding: 26px 28px 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.del + .del {
  padding-left: 28px;
  border-left: 1px solid var(--linje);
}

.del-ikon {
  width: 46px;
  height: 46px;
  margin-bottom: 30px;
  border: 0;
  border-radius: 12px;
  background: var(--black);
  color: var(--vit);
}

.del h3 {
  font-size: 1.25rem;
}

@media (max-width: 1000px) {
  .del:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .del:nth-child(n + 3) {
    border-top: 1px solid var(--linje);
  }
}

@media (max-width: 560px) {
  .del,
  .del + .del {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 0;
    border-left: 0;
  }
  .del + .del {
    border-top: 1px solid var(--linje);
  }
  .del-ikon {
    grid-row: span 2;
    margin-bottom: 0;
  }
}

/* Priset bredvid frågorna: kortet följer med när man skrollar. */
.paketdel-kort {
  position: sticky;
  top: calc(var(--sidhuvud-hojd) + 24px);
  align-self: start;
}

/* ---------- /affarssystem ---------- */

.flode-steg {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--linje);
}

.flode-steg:first-child {
  border-top-color: var(--black);
}

.flode-nr {
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.flode-nr span {
  border-radius: 8px;
  background: var(--black);
  font-family: var(--typsnitt);
  font-weight: 650;
}

.flode-text h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  letter-spacing: -0.035em;
}

.flode-bild .fonster {
  border-color: var(--linje-stark);
  box-shadow: 0 30px 60px -36px rgb(14 15 18 / 0.45);
}

/* Grundfunktionerna på svart, som rutor med tunna linjer emellan. */
.funktioner-del {
  background: var(--black);
  color: var(--natt-text);
}

.funktioner-del h2 {
  color: var(--vit);
}

.funktioner-del .etikett {
  color: #c9cad0;
}

.funktioner-del .etikett::before {
  background: linear-gradient(var(--bla) 0 3px, var(--vit) 3px);
}

.funktioner {
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.14);
}

.funktion {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 0;
  border-radius: 0;
  background: var(--black);
  transition: background-color 0.25s ease;
}

.funktion:hover {
  background: #17181d;
}

.funktion-ikon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
}

.funktion h3 {
  color: var(--vit);
  font-size: 1.125rem;
}

.funktion p {
  color: #b4b6bf;
}

.funktioner-del .notruta {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.04);
  color: #c9cad0;
}

.funktioner-del .notruta .ikon {
  color: var(--natt-lank);
}

/* Tillval: två halvor i samma ram, som på startsidan. */
.tillval {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--linje-stark);
  border-radius: 28px;
}

.tillval-kolumn {
  padding: clamp(28px, 4vw, 52px);
  border: 0;
  border-radius: 0;
  background: var(--papper);
}

.tillval-kolumn-streckad {
  border-left: 1px dashed var(--linje-stark);
  background: var(--vit);
}

.tillval-kolumn h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing: -0.035em;
}

@media (max-width: 800px) {
  .tillval-kolumn-streckad {
    border-top: 1px dashed var(--linje-stark);
    border-left: 0;
  }
}

/* Demon: bilden i ett appfönster med förskjuten skugga. */
.demo-intro-bild .fonster {
  border-color: var(--black);
  box-shadow: 12px 12px 0 var(--papper-2), 12px 12px 0 1px var(--linje-stark);
}

/* ---------- /projekt ---------- */

/* Galleriet som meny, på den mörka kanten. */
.projektmeny {
  margin: 0;
}

.projekt {
  scroll-margin-top: var(--sidhuvud-hojd);
}

.projekt-huvud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 32px;
  margin-bottom: clamp(36px, 5vw, 64px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linje-stark);
}

.projekt-huvud .bricka {
  grid-column: 1 / -1;
}

.projekt-huvud h2 {
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.projekt-kort {
  grid-column: 1;
  max-width: 56ch;
  color: var(--text-3);
  font-size: 1.125rem;
}

.projekt-huvud .textlank {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
}

.projekt-mork .projekt-huvud {
  border-bottom-color: rgb(255 255 255 / 0.14);
}

.projekt-mork .projekt-kort {
  color: #b4b6bf;
}

.projekt-fakta {
  gap: 0;
  border-top: 1px solid var(--black);
}

.projekt-fakta > div {
  padding: 24px 28px 0 0;
}

.projekt-fakta > div + div {
  padding-left: 28px;
  border-left: 1px solid var(--linje);
}

.projekt-mork .projekt-fakta {
  border-top-color: rgb(255 255 255 / 0.5);
}

.projekt-mork .projekt-fakta > div + div {
  border-left-color: rgb(255 255 255 / 0.14);
}

.projekt-mork .projekt-fakta h3,
.projekt-mork .projekt-system h3 {
  color: var(--vit);
}

.projekt-mork .projekt-system {
  border-top-color: rgb(255 255 255 / 0.14);
}

.projekt-mork .bildtext {
  color: #8d8f97;
}

.projekt-system .fonster {
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.5);
}

@media (max-width: 860px) {
  .projekt-huvud {
    grid-template-columns: 1fr;
  }
  .projekt-huvud .textlank {
    grid-column: 1;
    grid-row: auto;
  }
  .projekt-fakta > div,
  .projekt-fakta > div + div {
    padding: 22px 0 0;
    border-left: 0;
  }
  .projekt-fakta > div + div {
    margin-top: 22px;
    border-top: 1px solid var(--linje);
  }
  .projekt-mork .projekt-fakta > div + div {
    border-top-color: rgb(255 255 255 / 0.14);
  }
}

/* ---------- /priser ---------- */

.priskort {
  border-color: var(--linje-stark);
}

.priskort-markerat {
  background: var(--vit);
}

.tabell-omslag {
  border: 1px solid var(--linje-stark);
  border-radius: 18px;
  background: var(--vit);
}

.pristabell thead th {
  background: var(--black);
  color: #c9cad0;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.tabell-pris {
  font-size: 1.125rem;
}

/* Räkneexemplen som kvitton. */
.rakneexempel-rad {
  position: relative;
  gap: 6px;
  padding: 24px 26px 22px;
  border: 1px solid var(--linje-stark);
  border-radius: 6px;
  background: var(--vit);
  box-shadow: 0 1px 0 var(--linje), 6px 6px 0 var(--papper-2);
}

.rakneexempel-namn {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rakneexempel-rakning {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.rakneexempel-summa {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--linje-stark);
  font-size: 1.75rem;
}

/* ---------- /kontakt: formuläret i ett kort, kontaktuppgifterna i svart ---------- */

.sidrubrik-kontakt {
  background: var(--papper);
}

.sidrubrik-kontakt h1 {
  font-size: clamp(2.5rem, 1.4rem + 4vw, 4.75rem);
}

.kontakt-formulardel .formular {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--linje-stark);
  border-radius: 22px;
  background: var(--vit);
}

.kontakt-sida .kontaktkort {
  border-color: var(--black);
}

.kontakt-sida .kontaktkort:first-child {
  background: var(--black);
  color: var(--natt-text);
}

.kontakt-sida .kontaktkort:first-child strong,
.kontakt-sida .kontaktkort:first-child h2,
.kontakt-sida .kontaktkort:first-child h3 {
  color: var(--vit);
}

.kontakt-sida .kontaktkort:first-child a {
  color: var(--natt-lank);
}

.kontakt-sida .kontaktkort:first-child :focus-visible {
  outline-color: var(--natt-lank);
}

/* Galleriet på /projekt: de gamla reglerna för projektmenyn (lista med knappar) gäller inte här. */
.projektmeny .galleri {
  display: grid;
  gap: 24px;
}

.projektmeny .fall-lank {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.projektmeny .fall-lank:hover {
  color: inherit;
}

/* Kontakt: läsbar text i det svarta kortet. */
.kontakt-sida .kontaktkort:first-child p,
.kontakt-sida .kontaktkort:first-child .kontaktkort-person span {
  color: #b4b6bf;
}

.kontakt-sida .kontaktkort:first-child .kontaktkort-person p {
  color: var(--vit);
}

/* Tack och 404 slutar mot den mörka sidfoten: en tunn linje emellan. */
.scen-sida.sidrubrik-mitt {
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

/* ======================================================================
   Designlager v7: startsidans överdel (3 oktober 2026, "denna delen ser för
   dålig ut"). Tätare text så att sajterna syns direkt, hela rubriken i vitt,
   etiketten som en bricka och faktaraden med bockar. (Rutnätet bakom togs bort.)
   ====================================================================== */

.hero.scen {
  padding-top: calc(var(--sidhuvud-hojd) + clamp(36px, 4.6vw, 72px));
  background: linear-gradient(to bottom, #1d1f26, var(--black) 62%);
}

/* Etiketten som en bricka, i vanlig stil i stället för skrivmaskin. */
.hero .scen-etikett {
  gap: 10px;
  margin-bottom: clamp(18px, 2vw, 26px);
  padding: 7px 16px 7px 12px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  color: #dcdde3;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.hero .scen-etikett::before {
  width: 14px;
  height: 11px;
  border-radius: 3px;
  background: linear-gradient(var(--bla) 0 4px, var(--vit) 4px);
}

/* Rubriken: något mindre och tätare, båda raderna tydliga. */
.hero.scen h1 {
  font-size: clamp(2.125rem, 0.95rem + 4.3vw, 5.125rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero.scen h1 span:first-child {
  color: var(--vit);
}

.hero.scen h1 span + span {
  padding-bottom: 0.06em;
  background: linear-gradient(90deg, #dbeafe, #93c5fd 55%, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero.scen .ingress {
  max-width: 640px;
  margin-top: clamp(16px, 1.8vw, 24px);
  color: #b9bbc4;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}

.hero.scen .knapprad {
  margin-top: clamp(22px, 2.2vw, 30px);
}

/* Faktaraden: vanlig text med bockar i stället för små kodrader. */
.hero .scen-fakta {
  gap: 10px 26px;
  margin-top: 20px;
  color: #a4a6af;
  font-family: inherit;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

.hero .scen-fakta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero .scen-fakta li + li::before {
  content: none;
}

.hero .scen-fakta .ikon {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgb(96 165 250 / 0.16);
  color: #93c5fd;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero .scen-bild {
  margin-top: clamp(30px, 3.4vw, 48px);
}

@media (max-width: 760px) {
  .hero .scen-etikett {
    max-width: 100%;
    padding: 6px 12px 6px 10px;
    border-radius: 14px;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: left;
  }
  .hero .scen-fakta {
    justify-items: center;
    gap: 8px;
  }
}

/* ======================================================================
   Designlager v10 (5 oktober 2026): AW:s egen identitet med rubriker i
   Big Noodle Titling. Svalt ljusgrått och vitt, nattsvart och AW-blått,
   fönstret från loggan som etikett, rundade knappar som fylls i blått och
   rörelse: rubriker som glider fram ord för ord, innehåll som tonar in och
   skärmarna i startsidans scen som vrids in när man skrollar.
   ====================================================================== */

:root {
  --rubrik: "Big Noodle Titling", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --papper: #f3f5f9;
  --papper-2: #e8ecf3;
  --gra-bg: #f3f5f9;
  --black: #0a0e18;
  --text: #0a0e18;
  --text-2: #2b3240;
  --text-3: #485163;
  --dampad: #646d80;
  --linje: #e0e5ee;
  --linje-stark: #cbd3e0;
  --bla-ljus-text: #7cb2ff;
  --mjuk: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body {
  background: var(--vit);
}

/* ---------- Rubrikerna i Big Noodle ---------- */

:where(main, .mobilmeny) :is(h1, h2, h3):not(.demo *, .visuellt-dold),
.process-nr,
.hempris-namn,
.hempris-summa,
.priskort-namn {
  font-family: var(--rubrik);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.01em;
  word-spacing: 0.02em;
  text-transform: uppercase;
}

h1,
h2 {
  line-height: 0.88;
}

h3 {
  font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
  line-height: 1;
}

.sektionshuvud h2,
.fe-huvud h2,
.fe h2,
.avslut-ruta h2,
.fragor > h2 {
  font-size: clamp(3.25rem, 1.2rem + 6.4vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
}

.tva-kolumner .sektionshuvud h2,
.samarbete-om h2,
.samarbete-rubrik {
  font-size: clamp(2.75rem, 1.2rem + 4vw, 5.25rem);
  line-height: 0.88;
}

.dela h3 {
  font-size: clamp(3rem, 1.6rem + 3.6vw, 5rem);
}

.projektband h2 {
  font-size: clamp(2.75rem, 1.2rem + 4vw, 5.5rem);
}

.fall-namn {
  font-size: 2rem;
}

.fe-fakta h3 {
  margin-bottom: 10px;
  color: var(--vit);
  font-size: 1.625rem;
}

.process-steg h3,
.samarbete-steg .process-steg h3 {
  margin-bottom: 4px;
  font-size: 1.625rem;
}

.hempris-namn,
.prisdel .hempris-namn,
.priskort-namn {
  font-size: clamp(2.25rem, 1.8rem + 1vw, 2.75rem);
  line-height: 0.95;
}

.hempris-summa {
  font-size: clamp(2.75rem, 2rem + 1.6vw, 3.5rem);
}

.anpassat h3,
.anpassat-text h3 {
  font-size: 2rem;
  line-height: 1;
}

.kontaktkort h2,
.kontaktkort h3 {
  font-size: 1.75rem;
  line-height: 1;
}

/* Undertexten i paketnamnet ("Hemsida", "Anpassat system"). */
.hempris-typ,
.priskort-typ {
  display: block;
  margin-top: 6px;
  font-family: var(--typsnitt);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.anpassat h3 .hempris-typ {
  display: inline-block;
  margin: 0 0 0 10px;
  vertical-align: middle;
}

.mobilmeny a:not(.knapp) {
  font-family: var(--rubrik);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---------- Etiketterna: fönstret från loggan, större och i AW-blått ---------- */

.etikett {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--bla);
  font-family: var(--typsnitt);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.etikett::before {
  content: "";
  flex: none;
  width: 20px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(var(--bla) 0 5px, var(--black) 5px);
  box-shadow: 0 0 0 1px rgb(10 14 24 / 0.08);
}

.scen .etikett,
.fe .etikett,
.avslut .etikett,
.projektband-mork .etikett,
.dela-mork .etikett {
  color: var(--bla-ljus-text);
}

.scen .etikett::before,
.fe .etikett::before,
.avslut .etikett::before,
.projektband-mork .etikett::before {
  background: linear-gradient(var(--bla) 0 5px, var(--vit) 5px);
  box-shadow: none;
}

/* Avsnittshuvudet: etikett, stor rubrik och ingressen under. */
.sektionshuvud {
  max-width: 900px;
  margin-bottom: clamp(36px, 4.6vw, 64px);
}

.sektionshuvud .ingress {
  max-width: 620px;
  margin-top: clamp(18px, 2vw, 26px);
}

/* ---------- Ljusa avsnitt i svalt grått ---------- */

.sektion-gra,
.app-del,
.galleri-del {
  background: var(--papper);
}

.samarbete {
  background: var(--vit);
}

.dela-ljus {
  background: var(--papper);
}

/* ---------- Knappar: rundade, och fylls från vänster när man pekar ---------- */

.knapp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: 0;
  transition: color 0.35s var(--mjuk), border-color 0.35s var(--mjuk), background-color 0.35s var(--mjuk);
}

.knapp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fyllning, var(--black));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--mjuk);
}

.knapp:hover::before {
  transform: scaleX(1);
}

.knapp .ikon {
  transition: transform 0.35s var(--mjuk);
}

.knapp:hover .ikon {
  transform: translateX(4px);
}

.knapp-primar {
  --fyllning: var(--black);
  border-color: var(--bla);
  background: var(--bla);
  color: var(--vit);
}

.knapp-primar:hover {
  border-color: var(--black);
  background: var(--bla);
  color: var(--vit);
}

.knapp-sekundar {
  --fyllning: var(--black);
  border-color: var(--linje-stark);
  background: transparent;
  color: var(--text);
}

.knapp-sekundar:hover {
  border-color: var(--black);
  background: transparent;
  color: var(--vit);
}

/* På mörk botten: vit knapp som fylls i AW-blått, och en genomskinlig. */
.scen .knapp-primar,
.avslut-ruta .knapp-primar,
.hempris-markerat .knapp-primar,
.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .knapp-primar {
  --fyllning: var(--bla);
  border-color: var(--vit);
  background: var(--vit);
  color: var(--black);
}

.scen .knapp-primar:hover,
.avslut-ruta .knapp-primar:hover,
.hempris-markerat .knapp-primar:hover,
.js body:has(main:not([hidden]) > .scen):not(.meny-oppen) .sidhuvud:not(.skrollad) .knapp-primar:hover {
  border-color: var(--bla);
  background: var(--vit);
  color: var(--vit);
}

.scen .knapp-sekundar {
  --fyllning: var(--vit);
  border-color: rgb(255 255 255 / 0.3);
  color: var(--vit);
}

.scen .knapp-sekundar:hover {
  border-color: var(--vit);
  color: var(--black);
}

@media (prefers-reduced-motion: reduce) {
  .knapp::before {
    transition-duration: 0.15s;
  }
  .knapp:hover .ikon {
    transform: none;
  }
}

/* ---------- Länkar: understrykningen ritas fram ---------- */

.textlank {
  position: relative;
  padding-bottom: 3px;
  text-decoration: none;
}

.textlank::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left center;
  transition: transform 0.5s var(--mjuk);
}

.textlank:hover::after,
.textlank:focus-visible::after {
  transform: scaleX(1);
}

.huvudmeny a {
  position: relative;
}

.huvudmeny a::after,
.huvudmeny a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  width: auto;
  height: 2px;
  border-radius: 2px;
  background: var(--bla);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--mjuk);
}

.huvudmeny a:hover::after,
.huvudmeny a[aria-current="page"]::after {
  transform: scaleX(1);
}

.huvudmeny a:hover {
  background: none;
}

/* ---------- Startsidans överdel ---------- */

.scen h1 .rad {
  display: block;
}

.scen h1 .ord,
.scen h1 .ord > span {
  display: inline-block;
}

.hero.scen h1 {
  font-size: clamp(3.5rem, 1rem + 8.6vw, 10rem);
  line-height: 0.86;
  letter-spacing: 0.005em;
}

.hero.scen h1 .rad,
.hero.scen h1 .rad span {
  padding-bottom: 0;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
}

.hero.scen h1 .rad:first-child {
  color: var(--vit);
}

.hero.scen h1 .rad + .rad {
  color: var(--bla-ljus-text);
}

.scen-sida h1 {
  max-width: 20ch;
  font-size: clamp(3.25rem, 1rem + 7vw, 8rem);
}

.scen-sida.sidrubrik-mitt h1 {
  font-size: clamp(2.75rem, 1rem + 5vw, 6rem);
}

.sidrubrik-kontakt h1 {
  font-size: clamp(3rem, 1rem + 5.6vw, 6.5rem);
  line-height: 0.88;
  text-transform: uppercase;
}

/* Sidoskärmarna vrids med --vrid (1 överst, mindre när man skrollar förbi). */
.rorelse:not(.rorelse-lugn) .hero .scen-vanster {
  transform: perspective(1600px) rotateY(calc(16deg * var(--vrid, 1)));
  transition: filter 0.4s ease, transform 0.25s linear;
}

.rorelse:not(.rorelse-lugn) .hero .scen-hoger {
  transform: perspective(1600px) rotateY(calc(-16deg * var(--vrid, 1)));
  transition: filter 0.4s ease, transform 0.25s linear;
}

/* ---------- Rörelse när sidan laddas: rubriken och skärmarna ---------- */

.ord {
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
  vertical-align: top;
}

.ord > span {
  display: inline-block;
}

.js .scen h1 .ord > span {
  animation: aw-ord-upp 0.95s var(--mjuk) backwards;
  animation-delay: calc(var(--i, 0) * 75ms + 120ms);
}

.js .hero .scen-mitt {
  animation: aw-skarm-mitt 1.1s var(--mjuk) 0.45s backwards;
}

.js .hero .scen-vanster {
  animation: aw-skarm-vanster 1.2s var(--mjuk) 0.65s backwards;
}

.js .hero .scen-hoger {
  animation: aw-skarm-hoger 1.2s var(--mjuk) 0.65s backwards;
}

.js .hero .scen-telefon {
  animation: aw-telefon 1s var(--mjuk) 0.95s backwards;
}

.js .scen-sida .scen-bild {
  animation: aw-tona-upp 1s var(--mjuk) 0.4s backwards;
}

@keyframes aw-ord-upp {
  from {
    transform: translateY(105%);
  }
}

@keyframes aw-skarm-mitt {
  from {
    opacity: 0;
    transform: translate(-50%, 70px);
  }
}

@keyframes aw-skarm-vanster {
  from {
    opacity: 0;
    transform: perspective(1600px) rotateY(42deg) translateX(-40px);
  }
}

@keyframes aw-skarm-hoger {
  from {
    opacity: 0;
    transform: perspective(1600px) rotateY(-42deg) translateX(40px);
  }
}

@keyframes aw-telefon {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
}

@keyframes aw-tona-upp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

@keyframes aw-tona {
  from {
    opacity: 0;
  }
}

/* Med "minska rörelse": samma ordning, men allt tonar bara in. */
@media (prefers-reduced-motion: reduce) {
  .js .scen h1 .ord > span,
  .js .hero .scen-mitt,
  .js .hero .scen-vanster,
  .js .hero .scen-hoger,
  .js .hero .scen-telefon,
  .js .scen-sida .scen-bild {
    animation-name: aw-tona;
    animation-duration: 0.7s;
  }
}

/* ---------- Rörelse när innehållet kommer in i bild (skript.js lägger på klasserna) ---------- */

.rorelse .tona-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--mjuk) var(--fordrojning, 0ms), transform 0.95s var(--mjuk) var(--fordrojning, 0ms);
}

.rorelse .tona-in.synlig {
  opacity: 1;
  transform: none;
}

.rorelse .ord-rubrik .ord > span {
  transform: translateY(105%);
  transition: transform 0.9s var(--mjuk);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.rorelse .ord-rubrik.synlig .ord > span {
  transform: none;
}

.rorelse-lugn .tona-in {
  transform: none;
  transition-duration: 0.6s, 0s;
}

.rorelse-lugn .ord-rubrik .ord > span {
  opacity: 0;
  transform: none;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 50ms);
}

.rorelse-lugn .ord-rubrik.synlig .ord > span {
  opacity: 1;
}

/* ---------- Arbetsgången: stora siffror i AW-blått ---------- */

.process-nr,
.samarbete-steg .process-nr {
  margin: 0 0 10px;
  color: var(--bla);
  font-size: clamp(2.75rem, 2rem + 2vw, 4rem);
  line-height: 0.9;
}

.process-nr::before {
  content: "0";
}

.samarbete-steg .process-steg,
.samarbete-steg .process-steg + .process-steg {
  grid-template-columns: clamp(64px, 5.5vw, 84px) minmax(0, 1fr);
  column-gap: 16px;
}

.samarbete-steg .process-nr {
  margin: 0;
}

/* Undersidornas rubrik är helt vit (en äldre regel gjorde första raden grå). */
.scen-sida h1 .rad,
.scen-sida h1 .rad span {
  color: var(--vit);
}

/* Luft ovanför orden, så att prickarna över Å, Ä och Ö inte klipps av rutan. */
.ord {
  padding-top: 0.14em;
  margin-top: -0.14em;
}

/* Big Noodle har höga prickar över Å, Ä och Ö: lite större radavstånd så att de inte når upp i raden ovanför. */
.scen h1,
.hero.scen h1,
.scen-sida h1,
.sidrubrik-kontakt h1,
.sektionshuvud h2,
.fe-huvud h2,
.fe h2,
.avslut-ruta h2,
.fragor > h2,
.samarbete-om h2,
.samarbete-rubrik,
.projektband h2,
.dela h3 {
  line-height: 0.98;
}

/* ======================================================================
   Designlager v11 (5 oktober 2026): bättre effekter ("gör effekterna bättre").
   Mjukare och tydligare in-tonade block (med oskärpa som klarnar), rubriker
   som roterar upp ord för ord, etiketter som ritas fram, en överdel som glider
   undan när man skrollar, kort som lutar efter muspekaren, magnetiska knappar,
   en linje genom arbetsgången och ett sidhuvud som göms när man skrollar nedåt.
   Med "minska rörelse" blir rörelserna kortare och mindre, men de finns kvar.
   ====================================================================== */

:root {
  --utrop: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Block som tonar in ---------- */

.rorelse .tona-in {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(64px) scale(0.97);
  transition:
    opacity 0.9s var(--utrop) var(--fordrojning, 0ms),
    transform 1.2s var(--utrop) var(--fordrojning, 0ms),
    filter 1s var(--utrop) var(--fordrojning, 0ms);
}

.rorelse .tona-in.synlig {
  opacity: 1;
  filter: none;
  transform: none;
}

.rorelse-lugn .tona-in {
  filter: blur(4px);
  transform: translateY(24px);
}

/* ---------- Rubriker: orden roterar upp ur sina rutor ---------- */

.rorelse .ord-rubrik .ord > span,
.rorelse-lugn .ord-rubrik .ord > span {
  opacity: 1;
  transform: translateY(118%) rotate(7deg);
  transform-origin: left bottom;
  transition: transform 1.15s var(--utrop);
  transition-delay: calc(var(--i, 0) * 65ms);
}

.rorelse .ord-rubrik.synlig .ord > span,
.rorelse-lugn .ord-rubrik.synlig .ord > span {
  transform: none;
}

@keyframes aw-ord-upp {
  from {
    transform: translateY(118%) rotate(7deg);
  }
}

.js .scen h1 .ord > span {
  transform-origin: left bottom;
  animation-duration: 1.15s;
  animation-timing-function: var(--utrop);
}

/* Med "minska rörelse": samma rörelser som annars, bara lite kortare. */
@media (prefers-reduced-motion: reduce) {
  .js .scen h1 .ord > span {
    animation-name: aw-ord-upp;
    animation-duration: 0.9s;
  }
  .js .hero .scen-mitt {
    animation-name: aw-skarm-mitt;
  }
  .js .hero .scen-vanster {
    animation-name: aw-skarm-vanster;
  }
  .js .hero .scen-hoger {
    animation-name: aw-skarm-hoger;
  }
  .js .hero .scen-telefon {
    animation-name: aw-telefon;
  }
  .js .scen-sida .scen-bild {
    animation-name: aw-tona-upp;
  }
}

/* ---------- Etiketterna ritas fram från vänster ---------- */

.rorelse .etikett-in {
  clip-path: inset(-10% 100% -10% 0);
  transition: clip-path 1s var(--utrop) 0.05s;
}

.rorelse .etikett-in::before {
  transform: scale(0.2) rotate(-25deg);
  transition: transform 0.8s var(--utrop) 0.1s;
}

.rorelse .etikett-in.synlig {
  clip-path: inset(-10% -10% -10% 0);
}

.rorelse .etikett-in.synlig::before {
  transform: none;
}

/* ---------- Startsidans överdel glider undan när man skrollar (--p från 0 till 1) ---------- */

.rorelse .hero .scen-text {
  opacity: calc(1 - var(--p, 0) * 1.15);
  transform: translateY(calc(var(--p, 0) * -110px)) scale(calc(1 - var(--p, 0) * 0.07));
  transform-origin: center top;
  will-change: transform, opacity;
}

.rorelse .hero .scen-mitt {
  transform: translate(-50%, calc(var(--p, 0) * -70px)) scale(calc(1 + var(--p, 0) * 0.09));
}

.rorelse .hero .scen-telefon-vanster {
  transform: translateY(calc(var(--p, 0) * -130px)) rotate(calc(var(--p, 0) * -4deg));
}

.rorelse .hero .scen-telefon-hoger {
  transform: translateY(calc(var(--p, 0) * -130px)) rotate(calc(var(--p, 0) * 4deg));
}

.rorelse .hero .scen-vanster,
.rorelse-lugn .hero .scen-vanster {
  transform: perspective(1600px) rotateY(calc(16deg * var(--vrid, 1)));
  transition: filter 0.4s ease;
}

.rorelse .hero .scen-hoger,
.rorelse-lugn .hero .scen-hoger {
  transform: perspective(1600px) rotateY(calc(-16deg * var(--vrid, 1)));
  transition: filter 0.4s ease;
}

.rorelse-lugn .hero .scen-text {
  transform: translateY(calc(var(--p, 0) * -50px));
}

.rorelse-lugn .hero .scen-mitt {
  transform: translate(-50%, calc(var(--p, 0) * -30px));
}

/* ---------- Kort som lutar efter muspekaren ---------- */

.lutar {
  transition: transform 0.6s var(--utrop), box-shadow 0.6s var(--utrop), border-color 0.35s ease;
}

.lutar.lutar-aktiv {
  transform: perspective(1100px) rotateX(var(--lx, 0deg)) rotateY(var(--ly, 0deg)) translateY(-6px);
  transition-duration: 0.18s, 0.6s, 0.35s;
  box-shadow: 0 36px 60px -32px rgb(10 14 24 / 0.45);
}

.lutar.lutar-aktiv.fall {
  background-image: linear-gradient(105deg, transparent calc(var(--ljus, 50%) - 30%), rgb(255 255 255 / 0.45) var(--ljus, 50%), transparent calc(var(--ljus, 50%) + 30%));
}

/* ---------- Magnetiska knappar ---------- */

.knapp.magnet,
.textlank.magnet {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition:
    color 0.35s var(--mjuk),
    border-color 0.35s var(--mjuk),
    background-color 0.35s var(--mjuk),
    transform 0.6s var(--utrop);
}

.knapp.magnet:hover,
.textlank.magnet:hover {
  transition-duration: 0.35s, 0.35s, 0.35s, 0.2s;
}

/* ---------- Linjen genom arbetsgången (--fyll från 0 till 1) ---------- */

.process-linje {
  position: relative;
}

.process-linje::before,
.process-linje::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px;
}

.process-linje::before {
  right: 0;
  background: var(--linje);
}

.process-linje::after {
  right: 0;
  background: var(--bla);
  transform: scaleX(var(--fyll, 0));
  transform-origin: left center;
}

/* På startsidan står stegen under varandra: linjen går nedåt längs siffrorna. */
.samarbete-steg .process-linje {
  border-top-color: transparent;
}

.samarbete-steg .process-linje::before,
.samarbete-steg .process-linje::after {
  top: 0;
  bottom: 0;
  left: calc(clamp(64px, 5.5vw, 84px) / 2 - 1px);
  width: 3px;
  height: auto;
}

.samarbete-steg .process-linje::before {
  right: auto;
}

.samarbete-steg .process-linje::after {
  right: auto;
  transform: scaleY(var(--fyll, 0));
  transform-origin: center top;
}

.samarbete-steg .process-linje .process-nr {
  position: relative;
  z-index: 1;
  padding-block: 4px;
  background: var(--vit);
  text-align: center;
}

.process-linje .process-nr {
  color: #b9c2d0;
  transition: color 0.5s var(--utrop), transform 0.6s var(--utrop);
}

.process-linje .process-nadd .process-nr {
  color: var(--bla);
  transform: scale(1.06);
}

/* ---------- Sidhuvudet göms när man skrollar nedåt ---------- */

.sidhuvud {
  transition: transform 0.5s var(--utrop), border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}

.sidhuvud.sidhuvud-gomd {
  transform: translateY(-100%);
}

/* Beloppen räknas upp: siffrorna tar lika stor plats hela tiden. */
.hempris-summa,
.pris-belopp {
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
   Designlager v12 (5 oktober 2026): olika effekter för olika delar
   ("alldeles för enformiga effekter"). skript.js sätter data-effekt på varje
   element. Startläget beskrivs här, och .synlig tar elementet till sitt
   vanliga läge. Allt övergår med samma mjuka kurva men olika rörelser.
   ====================================================================== */

/* Inget som glider in från sidan får ge en vågrät rullningslist. */
main {
  overflow-x: clip;
}

.rorelse .tona-in[data-effekt] {
  transition:
    opacity 0.9s var(--utrop) var(--fordrojning, 0ms),
    transform 1.25s var(--utrop) var(--fordrojning, 0ms),
    filter 1s var(--utrop) var(--fordrojning, 0ms),
    clip-path 1.3s var(--utrop) var(--fordrojning, 0ms),
    letter-spacing 1.4s var(--utrop) var(--fordrojning, 0ms);
}

.rorelse .tona-in[data-effekt].synlig {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Från vänster och höger, med en liten lutning. */
.rorelse .tona-in[data-effekt="fran-vanster"] {
  transform: translateX(-110px) rotate(-1.5deg);
}

.rorelse .tona-in[data-effekt="fran-hoger"] {
  transform: translateX(110px) rotate(1.5deg);
}

/* Före/efter-jämförelsen glider in hela vägen från sidan. */
.rorelse .tona-in[data-effekt="fran-sidan"] {
  filter: none;
  transform: translateX(55vw) rotate(4deg) scale(0.92);
  transform-origin: left center;
  transition-duration: 0.8s, 1.6s, 0s, 0s, 0s;
}

/* Ridån: systemfönstret rullas fram nerifrån. */
.rorelse .tona-in[data-effekt="rida"] {
  opacity: 1;
  filter: none;
  clip-path: inset(100% 0 0 0 round 22px);
  transform: translateY(60px) scale(0.94);
}

.rorelse .tona-in[data-effekt="rida"].synlig {
  clip-path: inset(0 0 0 0 round 22px);
}

/* Projektkorten fälls upp mot betraktaren. */
.rorelse .tona-in[data-effekt="vand"] {
  filter: none;
  transform: perspective(900px) rotateX(-32deg) translateY(90px);
  transform-origin: center bottom;
}

/* Priskorten glider in snett från höger. */
.rorelse .tona-in[data-effekt="glid-in"] {
  filter: none;
  transform: translateX(140px) rotate(2.5deg);
}

/* Ikonkorten studsar fram. */
.rorelse .tona-in[data-effekt="studs"] {
  filter: none;
  transform: scale(0.6);
  transition-timing-function: var(--utrop), cubic-bezier(0.34, 1.56, 0.64, 1), var(--utrop), var(--utrop), var(--utrop);
}

/* Rubriken sveps fram från vänster. */
.rorelse .tona-in[data-effekt="svep"] {
  opacity: 1;
  filter: none;
  clip-path: inset(-20% 100% -20% 0);
  transform: translateX(-30px);
}

.rorelse .tona-in[data-effekt="svep"].synlig {
  clip-path: inset(-20% -5% -20% 0);
}

/* Avslutningens rubrik: bokstäverna samlas ihop. */
.rorelse .tona-in[data-effekt="samla"] {
  filter: blur(10px);
  letter-spacing: 0.3em;
  transform: none;
}

.rorelse .tona-in[data-effekt="samla"].synlig {
  letter-spacing: 0.01em;
}

/* Avslutningen: den mörka rutan växer ut till full bredd. */
.rorelse .tona-in[data-effekt="vaxa"] {
  opacity: 1;
  filter: none;
  clip-path: inset(10% 6% round 40px);
  transform: none;
}

.rorelse .tona-in[data-effekt="vaxa"].synlig {
  clip-path: inset(0 0 round 0);
}

/* "Minska rörelse": samma effekter, men kortare väg. */
.rorelse-lugn .tona-in[data-effekt="fran-vanster"] {
  transform: translateX(-50px);
}

.rorelse-lugn .tona-in[data-effekt="fran-hoger"],
.rorelse-lugn .tona-in[data-effekt="glid-in"] {
  transform: translateX(50px);
}

.rorelse-lugn .tona-in[data-effekt="fran-sidan"] {
  transform: translateX(30vw) scale(0.96);
}

.rorelse-lugn .tona-in[data-effekt="vand"] {
  transform: perspective(900px) rotateX(-16deg) translateY(40px);
}

/* ---------- v12: effekter för undersidorna ---------- */

/* Zoom: skärmen kommer fram ur oskärpa och växer till rätt storlek. */
.rorelse .tona-in[data-effekt="zoom"] {
  filter: blur(12px);
  transform: translateY(50px) scale(0.84);
}

/* Vik: korten viks upp från vänsterkanten, som sidor i en bok. */
.rorelse .tona-in[data-effekt="vik"] {
  filter: none;
  transform: perspective(900px) rotateY(-38deg) translateX(-30px);
  transform-origin: left center;
}

.rorelse-lugn .tona-in[data-effekt="zoom"] {
  transform: translateY(24px) scale(0.93);
}

.rorelse-lugn .tona-in[data-effekt="vik"] {
  transform: perspective(900px) rotateY(-18deg);
}

/* Orden i delade rubriker är egna rutor, så att de kan glida upp inifrån rutan. */
.ord {
  display: inline-block;
}

/* Kontaktsidans rubrik glider också fram ord för ord när sidan laddas. */
.sidrubrik-kontakt h1 .rad {
  display: block;
}

.js .sidrubrik-kontakt h1 .ord > span {
  transform-origin: left bottom;
  animation: aw-ord-upp 1.15s var(--utrop) backwards;
  animation-delay: calc(var(--i, 0) * 75ms + 120ms);
}

/* ---------- Kundens omdöme vid före/efter (Anders, Tångklev) ---------- */

.fe-citat {
  position: relative;
  max-width: 880px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding-top: clamp(36px, 4vw, 52px);
  text-align: center;
}

/* Ett stort citattecken i AW-blått ovanför texten. */
.fe-citat::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -18%);
  color: var(--bla);
  font-family: var(--rubrik);
  font-size: clamp(5rem, 4rem + 4vw, 8rem);
  line-height: 1;
  pointer-events: none;
}

.fe-citat blockquote {
  margin: 0;
}

.fe-citat blockquote p {
  color: var(--vit);
  font-family: var(--typsnitt);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.45;
  text-wrap: balance;
}

.fe-citat figcaption {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 22px;
}

.fe-citat figcaption strong {
  color: var(--vit);
  font-size: 1rem;
  font-weight: 600;
}

.fe-citat figcaption span {
  color: var(--natt-dampad);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* ---------- Etiketterna utan fönsterikon (Anton 5 oktober 2026: "gillar inte den") ---------- */

.etikett::before,
.scen .etikett::before,
.fe .etikett::before,
.avslut .etikett::before,
.projektband-mork .etikett::before,
.funktioner-del .etikett::before,
.hero .scen-etikett::before {
  content: none;
}

/* Sidhuvudet är sidhuvud-hojd + 1 px (kantlinjen längst ned), så den mörka scenen dras upp lika mycket.
   Annars syns sidans vita bakgrund som ett streck överst genom det genomskinliga sidhuvudet. */
.scen,
.hero.scen,
.scen-sida {
  margin-top: calc(-1 * var(--sidhuvud-hojd) - 1px);
}

/* ---------- Kundens omdöme på kontaktsidan (Anders första) ---------- */

.kontakt-citat {
  position: relative;
  margin: 0;
  padding-top: 44px;
}

.kontakt-citat::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 22px;
  color: var(--bla);
  font-family: var(--rubrik);
  font-size: 3.5rem;
  line-height: 1;
  pointer-events: none;
}

.kontakt-citat blockquote {
  margin: 0;
}

.kontakt-citat blockquote p {
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}

.kontakt-citat figcaption {
  display: grid;
  gap: 1px;
  margin-top: 14px;
}

.kontakt-citat figcaption strong {
  font-size: 0.9375rem;
  font-weight: 600;
}

.kontakt-citat figcaption span {
  color: var(--dampad);
  font-family: var(--mono);
  font-size: 0.75rem;
}