@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/skyttel/typsnitt/geist-19f9c92546.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/skyttel/typsnitt/geist-mono-684ad5b531.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/skyttel/typsnitt/source-serif-4-f2ea9c12d2.woff2) format("woff2")}
/* ---------- Grunden: färger, typsnitt, knappar, toppen, fönstren och sidfoten ---------- */
:root {
  --svart: #000;
  --yta: #0a0a0a;
  --yta-2: #101010;
  --yta-3: #161616;
  --kant: rgba(255, 255, 255, 0.08);
  --kant-2: rgba(255, 255, 255, 0.12);
  --kant-3: rgba(255, 255, 255, 0.2);
  --text: #f0f0f0;
  --text-2: #a1a1a1;
  --text-3: #8b8b8b;
  --orange: #ff6a2b;
  --orange-2: #ff9a63;
  --gron: #3dd68c;
  --gul: #f5b84b;
  --rod: #ff6b6b;
  --bla: #8b9bff;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --bredd: 1200px;
  --kantmarg: clamp(20px, 4vw, 40px);
  --topp-h: 64px;
  --mjuk: cubic-bezier(0.22, 1, 0.36, 1);
  --radie: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: #000; color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-color: #2a2a2a #000; }
body { margin: 0; background: #000; color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
b, strong { font-weight: 600; }
::selection { background: rgba(255, 106, 43, 0.35); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.ram { width: min(var(--bredd), 100% - 2 * var(--kantmarg)); margin-inline: auto; }
.hoppa { position: fixed; left: 16px; top: -80px; z-index: 200; background: #fff; color: #000; padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.hoppa:focus { top: 12px; }
.vy { display: none; }
.vy.aktiv { display: block; }
.etikett { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Typografin ---------- */
.rubrik, .sidrubrik { font-family: var(--sans); font-weight: 480; letter-spacing: -0.038em; line-height: 1.04; color: var(--text); text-wrap: balance; }
.rubrik { font-size: clamp(34px, 4.3vw, 56px); }
.sidrubrik { font-size: clamp(42px, 5.6vw, 76px); letter-spacing: -0.045em; line-height: 1; }
.ingress { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.ingress b { color: var(--text); font-weight: 500; }
.glod-text { color: var(--orange); }
/* Delade rubriker: raderna maskas så att orden glider upp */
.rad-mask { padding-bottom: 0.24em; margin-bottom: -0.24em; }

/* ---------- Knappar och länkar ---------- */
.knapp { --h: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: background-color 0.25s, box-shadow 0.25s, color 0.25s, transform 0.4s var(--mjuk); }
.knapp:active { transform: scale(0.97); }
.knapp--ljus { background: #f0f0f0; color: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 10px 30px -12px rgba(255, 255, 255, 0.35); }
.knapp--ljus:hover { background: #fff; box-shadow: inset 0 0 0 1px #fff, 0 12px 40px -10px rgba(255, 255, 255, 0.5); }
.knapp--mork { background: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: inset 0 0 0 1px var(--kant-2); }
.knapp--mork:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px var(--kant-3); }
.knapp--liten { --h: 34px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.knapp--stor { --h: 52px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.pil { display: inline-block; font-size: 1.15em; line-height: 1; transform: translateY(-0.04em); transition: transform 0.35s var(--mjuk); }
a:hover > .pil, button:hover > .pil, .kort:hover .pil, .formaga:hover .pil, .kundkort:hover .pil { transform: translate(3px, -0.04em); }
.knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
.knappar--mitt { justify-content: center; }
.lank { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--text); transition: color 0.2s; }
.lank:hover { color: #fff; }
.lank .pil { color: var(--orange); }

/* ---------- Taggar och val ---------- */
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tagg { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--kant); white-space: nowrap; }
.tagg i { width: 6px; height: 6px; border-radius: 50%; background: var(--k, var(--text-3)); flex: none; }
.tagg--status i { background: var(--text-3); }
.tagg--drift i { background: var(--gron); box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.16); }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; color: var(--text-2); background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--kant); transition: color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.chip b { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.chip.aktiv, .chip[aria-pressed="true"] { color: #000; background: #f0f0f0; box-shadow: inset 0 0 0 1px #fff; }
.chip.aktiv b, .chip[aria-pressed="true"] b { color: rgba(0, 0, 0, 0.55); }

/* ---------- Ljuset som följer pekaren över korten ---------- */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.04) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 0.4s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.045), transparent 60%); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ---------- Toppen ---------- */
.topp { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--topp-h); border-bottom: 1px solid transparent; transition: background-color 0.35s, border-color 0.35s, transform 0.5s var(--mjuk); }
.topp.fast { background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom-color: var(--kant); }
.topp.gomd { transform: translateY(-100%); }
.topp-inre { height: 100%; width: min(var(--bredd), 100% - 2 * var(--kantmarg)); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.logga { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
/* Ikonen ur glödlampan: svart botten som försvinner mot menyns glas */
.logga .mark { width: 36px; height: 36px; display: block; border-radius: 50%; mix-blend-mode: lighten; filter: drop-shadow(0 0 10px rgba(255, 214, 170, 0.16)); }
.logga-ord { font-size: 20px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.meny { display: flex; gap: 2px; margin-inline: auto; }
.meny a { padding: 7px 12px; border-radius: 9px; font-size: 14px; color: var(--text-2); transition: color 0.2s, background-color 0.2s; }
.meny a:hover { color: var(--text); }
.meny a.aktiv { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.topp-hoger { display: flex; align-items: center; gap: 10px; }
.menyknapp { display: none; width: 40px; height: 40px; border-radius: 10px; place-items: center; box-shadow: inset 0 0 0 1px var(--kant-2); }
.menyknapp span { display: grid; gap: 5px; width: 16px; }
.menyknapp i { display: block; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 0.4s var(--mjuk); }
.menyknapp[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menyknapp[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mobilmeny { position: fixed; inset: 0; z-index: 55; background: #000; padding: calc(var(--topp-h) + 28px) var(--kantmarg) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.mobilmeny[hidden] { display: none; }
.mobilmeny nav { display: grid; }
.mobilmeny nav a { font-size: 34px; font-weight: 480; letter-spacing: -0.04em; padding: 10px 0; border-bottom: 1px solid var(--kant); }
.mobilmeny-fot { display: grid; gap: 16px; justify-items: start; color: var(--text-2); }

/* ---------- Avsnitten ---------- */
.avsnitt { position: relative; padding: clamp(80px, 9vw, 124px) 0; }
.avsnitt-huvud { max-width: 760px; }
.avsnitt-huvud--mitt { margin-inline: auto; text-align: center; }
.avsnitt-huvud--mitt .ingress { margin-inline: auto; }
.avsnitt-huvud--rad { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px 64px; align-items: end; }
.avsnitt-huvud--rad .ingress { margin-top: 0; }
.avsnitt-ikon { width: 108px; height: 108px; margin: 0 auto 26px; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent); mask: radial-gradient(closest-side, #000 72%, transparent); }
.avsnitt-ikon--vanster { margin-left: -14px; }

/* ---------- Fönstren som demoskärmarna visas i ---------- */
.fonster { position: relative; width: 100%; border-radius: 14px; background: #0b0b0b; box-shadow: 0 0 0 1px var(--kant-2), 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 50px 100px -50px rgba(0, 0, 0, 0.9); overflow: hidden; }
.fonster-list { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--kant); background: #0e0e0e; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.fonster-prickar { display: flex; gap: 6px; }
.fonster-prickar i { width: 9px; height: 9px; border-radius: 50%; background: #262626; }
.fonster-namn { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fonster-live { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.fonster-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 8px var(--gron); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.fonster-skarm { padding: 16px; }
.fonster--tv .fonster-skarm { background: radial-gradient(120% 90% at 50% 0%, #121212, #080808); }
.fonster-not { padding: 10px 14px; border-top: 1px solid var(--kant); font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ---------- Avslutet och sidfoten ---------- */
.slut { position: relative; overflow: hidden; padding: clamp(110px, 13vw, 180px) 0 0; text-align: center; border-top: 1px solid var(--kant); }
.slut::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(760px, 90vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); }
.slut::after { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 100vw); height: 340px; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 0%, rgba(255, 255, 255, 0.07), transparent); pointer-events: none; }
.slut-ram { position: relative; z-index: 2; }
.slut-rubrik { padding-bottom: 0.16em; margin-bottom: -0.16em; font-family: var(--serif); font-weight: 340; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.025em; color: #fff; -webkit-mask-image: linear-gradient(175deg, #000 30%, rgba(0, 0, 0, 0.5)); mask-image: linear-gradient(175deg, #000 30%, rgba(0, 0, 0, 0.5)); text-wrap: balance; }
.slut .knappar { margin-top: 40px; }
.slut-jatte { position: relative; z-index: 1; margin-top: clamp(60px, 8vw, 110px); font-size: clamp(84px, 16.5vw, 250px); font-weight: 600; letter-spacing: -0.07em; line-height: 0.74; color: #1a1a1a; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 92%); mask-image: linear-gradient(180deg, #000 20%, transparent 92%); user-select: none; pointer-events: none; transform: translateY(8%); }
.fot { border-top: 1px solid var(--kant); padding: 64px 0 28px; }
.fot-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
.fot-vanster { display: grid; gap: 14px; align-content: start; justify-items: start; color: var(--text-2); font-size: 14px; }
.fot-vanster p { max-width: 24em; }
.fot-epost:hover, .fot-telefon:hover { color: var(--text); }
.fot-foretag { display: grid; gap: 6px; margin-top: 6px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.fot-foretag address { font-style: normal; }
.status { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--kant); background: rgba(61, 214, 140, 0.05); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.18); animation: blink 2.4s ease-in-out infinite; }
.fot-kolumner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fot-kolumner h3 { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.fot-kolumner a { display: block; padding: 4px 0; font-size: 14px; color: var(--text-3); transition: color 0.2s; }
.fot-kolumner a:hover { color: var(--text); }
.fot-botten { display: flex; justify-content: space-between; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--kant); font-size: 13px; color: var(--text-3); }

/* ---------- Startsidan ---------- */

/* Hjälten */
.hjalte { position: relative; min-height: min(100svh, 980px); display: grid; grid-template-rows: 1fr auto; align-items: center; padding: calc(var(--topp-h) + 32px) 0 40px; overflow: hidden; isolation: isolate; }
.hjalte-strale { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: 6%; height: 260px; background: linear-gradient(90deg, transparent 8%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.11) 58%, transparent 86%); filter: blur(46px); transform: rotate(-14deg); pointer-events: none; }
.hjalte::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, #000); pointer-events: none; z-index: -1; }
.hjalte-ram { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: 16px; }
.hjalte-text { position: relative; z-index: 2; max-width: 600px; }
.piller { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px 0 11px; border-radius: 999px; font-size: 13px; color: var(--text-2); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--kant-2); transition: color 0.2s, background-color 0.2s; }
.piller:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.piller-prick { width: 6px; height: 6px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.18); }
.hjalte-rubrik { padding-bottom: 0.16em; margin-bottom: -0.16em; margin-top: 0; font-family: var(--serif); font-weight: 340; font-size: clamp(52px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; -webkit-mask-image: linear-gradient(172deg, #000 34%, rgba(0, 0, 0, 0.42) 100%); mask-image: linear-gradient(172deg, #000 34%, rgba(0, 0, 0, 0.42) 100%); }
.hjalte-ingress { margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 31em; text-wrap: pretty; }
/* Glödlampan: Klotet är en stillbild som tonar fram, och glödtråden ritas i en canvas ovanpå. Bildens svarta botten försvinner mot sidan med lighten. */
.hjalte-klot { position: relative; aspect-ratio: 1 / 1; width: min(112%, 680px); justify-self: end; margin-right: calc(-0.4 * var(--kantmarg)); perspective: 1400px; }
.klot-sken { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 170, 0.1), rgba(255, 255, 255, 0.03) 60%, transparent); filter: blur(40px); pointer-events: none; }
.klot-bild { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.klot-trad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.hjalte-klienter { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--kant); }
.hjalte-klienter-rubrik { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.logorad { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(32px, 5vw, 72px); }
.logorad a { display: block; opacity: 0.62; transition: opacity 0.3s; }
.logorad li { opacity: 0.62; }
.logorad a:hover, .logorad a:focus-visible { opacity: 1; }
.logorad-bild { height: calc(var(--h) * 0.7); width: auto; }

/* Klienterna */
.klienter { position: relative; padding: 8px 0 clamp(64px, 7vw, 96px); text-align: center; }
.horisont { position: relative; height: 150px; margin-bottom: -56px; overflow: hidden; pointer-events: none; }
.horisont::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1500px, 150vw); height: 600px; transform: translateX(-50%); border-radius: 50%; border-top: 1px solid rgba(255, 255, 255, 0.24); box-shadow: inset 0 40px 80px -60px rgba(255, 255, 255, 0.18); -webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 40%, #000 60%, transparent 88%); mask-image: linear-gradient(90deg, transparent 12%, #000 40%, #000 60%, transparent 88%); }
.klienter-rubrik { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 30em; margin: 0 auto; text-wrap: balance; }
.klienter-rubrik .etikett { display: block; margin-bottom: 14px; color: var(--text-3); }
.logovagg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--kant); }
.logovagg li + li { border-left: 1px solid var(--kant); }
.logo-cell { display: grid; place-items: center; height: 164px; border-radius: inherit; overflow: hidden; }
.logovagg li:first-child .logo-cell { border-radius: 20px 0 0 20px; }
.logovagg li:last-child .logo-cell { border-radius: 0 20px 20px 0; }
.logo-bild { height: var(--h); width: auto; opacity: 0.86; transition: transform 0.6s var(--mjuk), opacity 0.3s; }
.logo-fakta { position: absolute; left: 0; right: 0; bottom: 22px; font-size: 13px; color: var(--text-2); opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.6s var(--mjuk); }
.logo-fakta b { color: var(--text); font-weight: 500; }
.logo-cell:hover .logo-bild, .logo-cell:focus-visible .logo-bild { transform: translateY(-12px); opacity: 1; }
.logo-cell:hover .logo-fakta, .logo-cell:focus-visible .logo-fakta { opacity: 1; transform: none; }
.kopplat { margin-top: 72px; text-align: center; }
.kopplat-rubrik { font-size: 15px; color: var(--text-2); }
.kopplat-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 0; max-width: 980px; }
.kopplat-lista li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--text-2); background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 0 0 1px var(--kant); transition: color 0.25s, background-color 0.25s; }
.kopplat-lista li:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.kopplat-lista svg { width: 16px; height: 16px; flex: none; }
.kopplat-lista--vanster { justify-content: flex-start; margin: 0; }

/* Utvalda system som flikar */
.flikar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.flik { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border-radius: 12px; font-size: 14px; color: var(--text-2); background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--kant); overflow: hidden; transition: color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.flik:hover { color: var(--text); }
.flik[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--kant-3); }
.flik-ikon svg { width: 16px; height: 16px; }
.flik[aria-selected="true"] .flik-ikon { color: var(--orange); }
.flik-mat { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); transform: scaleX(0); transform-origin: left; }
.visning-yta { position: relative; margin-top: 24px; }
.visning-panel { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); border-radius: 22px; background: linear-gradient(180deg, #0c0c0c, #060606); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.07); overflow: hidden; }
.visning-panel[hidden] { display: none; }
.visning-text { position: relative; padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--kant); }
.visning-text h3 { font-size: 30px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; margin-top: 6px; }
.visning-rubrik { font-size: 16px; color: var(--text); line-height: 1.55; }
.visning-rubrik span { color: var(--text-2); }
.visning-tal { display: grid; gap: 0; margin-top: auto; border-top: 1px solid var(--kant); }
.visning-tal div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--kant); }
.visning-tal dt { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; }
.visning-tal dd { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.visning-demo { position: relative; padding: clamp(24px, 3vw, 40px); display: grid; align-items: center; background: radial-gradient(70% 70% at 60% 40%, rgba(255, 106, 43, 0.07), transparent 70%), radial-gradient(60% 60% at 30% 100%, rgba(139, 155, 255, 0.05), transparent 70%); }
.visning-alla { margin-top: 28px; text-align: center; }

/* Driften: loggen och siffrorna */
.drift-ram { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.tal-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--kant); }
.tal-rad div { padding: 22px 0 20px; border-bottom: 1px solid var(--kant); }
.tal-rad div:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--kant); }
.tal-rad div:nth-child(even) { padding-left: 24px; }
.tal-rad dt { font-size: clamp(34px, 3.6vw, 46px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.tal-rad dd { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.logg { font-family: var(--mono); }
.logg-huvud, .logg-rad { display: grid; grid-template-columns: 74px 150px minmax(0, 1fr) 96px; gap: 14px; align-items: center; padding: 0 16px; }
.logg-huvud { height: 34px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--kant); }
.logg-rader { position: relative; height: 448px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.logg-rad { height: 56px; overflow: hidden; font-size: 12.5px; color: var(--text-2); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.logg-rad .logg-tid { color: var(--text-3); font-variant-numeric: tabular-nums; }
.logg-rad .logg-system { color: var(--text); font-family: var(--sans); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logg-rad .logg-text { font-family: var(--sans); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logg-rad.ny { background: linear-gradient(90deg, rgba(255, 106, 43, 0.08), transparent 60%); }
.badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-family: var(--mono); white-space: nowrap; }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge--ok { color: var(--gron); background: rgba(61, 214, 140, 0.1); box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.22); }
.badge--gul { color: var(--gul); background: rgba(245, 184, 75, 0.1); box-shadow: inset 0 0 0 1px rgba(245, 184, 75, 0.22); }
.badge--rod { color: var(--rod); background: rgba(255, 107, 107, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.24); }
.badge--bla { color: var(--bla); background: rgba(139, 155, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(139, 155, 255, 0.24); }

/* Registret */
.register-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.register-yta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3vw, 40px); align-items: center; margin-top: 22px; padding: clamp(18px, 2.6vw, 34px); border-radius: 22px; background: linear-gradient(180deg, #0b0b0b, #060606); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.register-rutnat { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: clamp(4px, 0.45vw, 6px); }
.cell { aspect-ratio: 1; border-radius: 5px; background: rgba(255, 255, 255, 0.06); transition: background-color 0.35s, box-shadow 0.35s, opacity 0.35s, transform 0.35s var(--mjuk); cursor: crosshair; }
.cell.s-d { background: rgba(240, 240, 240, 0.86); }
.cell.s-p { background: rgba(240, 240, 240, 0.4); }
.cell.s-b { background: transparent; box-shadow: inset 0 0 0 1px rgba(240, 240, 240, 0.32); }
.cell.s-a { background: rgba(255, 255, 255, 0.07); }
.register-rutnat.farg .cell.s-d { background: var(--k); }
.register-rutnat.farg .cell.s-p { background: color-mix(in srgb, var(--k) 45%, transparent); }
.register-rutnat.farg .cell.s-b { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 70%, transparent); }
.cell.ping { box-shadow: 0 0 0 2px rgba(255, 106, 43, 0.9), 0 0 18px 2px rgba(255, 106, 43, 0.55); background: var(--orange) !important; }
.cell.dov { opacity: 0.1; }
.cell.vald { transform: scale(1.25); box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(255, 255, 255, 0.4); }
.register-info { align-self: stretch; display: grid; align-content: center; min-height: 220px; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--kant); color: var(--text); }
.register-stor { display: block; font-size: 56px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.register-info-tom > span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); }
.register-status { display: grid; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--text-2); }
.register-status li { display: flex; align-items: center; gap: 10px; }
.register-status b { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--text); }
.register-status .cell { width: 12px; height: 12px; aspect-ratio: auto; border-radius: 3px; cursor: default; }
.register-tips { margin-top: 20px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.reg-vald { display: grid; gap: 10px; justify-items: start; }
.reg-kat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.reg-kat i { width: 9px; height: 9px; border-radius: 3px; }
.reg-namn { font-size: 24px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.15; }
.reg-kund { font-size: 14px; color: var(--text-2); }
.badge--gra { color: var(--text-2); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--kant-2); }
.register-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 20px; }
.legend-knapp { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: 13.5px; color: var(--text-2); transition: color 0.2s; }
.legend-knapp i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.legend-knapp b { font-family: var(--mono); font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.legend-knapp:hover, .legend-knapp[aria-pressed="true"] { color: var(--text); }
.legend-knapp[aria-pressed="true"] i { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--k); }
.register-lista { margin-top: 26px; }
.register-lista summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.register-lista summary:hover { color: var(--text); }
.register-lista-inre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; margin-top: 24px; }
.register-lista-inre h3 { font-size: 14px; font-weight: 500; margin-bottom: 10px; }
.register-lista-inre li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13.5px; color: var(--text); }
.register-lista-inre small { display: block; font-size: 12px; color: var(--text-3); }

/* Förmågorna */
.formagor-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4vw, 56px); margin-top: 64px; }
.formaga { display: flex; flex-direction: column; gap: 12px; }
.formaga-ikon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--text); background: linear-gradient(180deg, #1a1a1a, #0d0d0d); box-shadow: inset 0 0 0 1px var(--kant-2), inset 0 1px 0 rgba(255, 255, 255, 0.1); margin-bottom: 8px; transition: color 0.3s, box-shadow 0.3s; }
.formaga-ikon svg { width: 20px; height: 20px; }
.formaga:hover .formaga-ikon { color: var(--k); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 50%, transparent), 0 0 24px -6px var(--k); }
.formaga h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.formaga p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.formaga-fot { display: flex; align-items: center; margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--text-3); }
.formaga-fot b { font-family: var(--mono); font-weight: 400; color: var(--text); }
.formaga-fot .lank { font-size: 13.5px; }

/* Kunderna */
.kund-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.kundkort { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 22px; background: linear-gradient(180deg, #0c0c0c, #070707); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.kundkort-topp { height: 56px; display: flex; align-items: center; border-bottom: 1px solid var(--kant); padding-bottom: 22px; box-sizing: content-box; }
.kundkort-logga { height: var(--h); width: auto; opacity: 0.92; }
.kundkort-topp { gap: 14px; }
.kundkort-ikon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--k, #FF6A2B); box-shadow: inset 0 0 0 1px var(--kant); background: rgba(255, 255, 255, 0.02); }
.kundkort-ikon svg { width: 22px; height: 22px; }
.kundkort-namn { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }
.kundkort-bransch { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.kundkort > p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.kundkort-byggt { font-size: 14px !important; color: var(--text) !important; }
.kundkort .lank { margin-top: auto; padding-top: 8px; }

/* Arbetssättet */
.process-steg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 72px; }
.process-steg::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--kant-2); }
.process-steg::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); box-shadow: 0 0 12px rgba(255, 106, 43, 0.7); transform-origin: left; transform: scaleX(var(--fyllt, 0)); }
.steg { position: relative; padding-top: 40px; }
.steg::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px var(--kant-3); transition: box-shadow 0.5s, background-color 0.5s; z-index: 1; }
.steg.tand::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.2), 0 0 18px rgba(255, 106, 43, 0.8); }
.steg-nr { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.steg h3 { margin-top: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.steg p { margin-top: 10px; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }

/* Väven */
.boras-ram { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* Ansiktena: de fyra som svarar, så att man ser att det finns människor bakom */
.ansikten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 420px; justify-self: center; }
.ansikte { position: relative; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--kant), 0 30px 60px -40px rgba(255, 106, 43, 0.5); }
.ansikte-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #e6e6e6; }
.ansikte-bild--initialer { display: grid; place-items: center; font-size: clamp(36px, 4vw, 56px); font-weight: 600; letter-spacing: -0.05em; color: #161616; background: linear-gradient(180deg, #ededed, #d6d6d6); }
.ansikte-namn { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; font-weight: 500; color: #fff; }
.boras-text .rubrik { margin-top: 0; }
.drift-lank { margin-top: 28px; }
.boras-text .ingress b { color: var(--orange-2); font-weight: 500; }
.boras-text .lank { margin-top: 26px; }

/* Frågorna */
.fragor-ram { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.fragor-huvud .lank { margin-top: 24px; }
.fragor-lista { border-top: 1px solid var(--kant); }
.fraga { border-bottom: 1px solid var(--kant); }
.fraga summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--text); transition: color 0.2s; }
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after { content: ""; width: 14px; height: 14px; flex: none; color: var(--text-3); background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform 0.45s var(--mjuk), color 0.2s; }
.fraga summary:hover::after, .fraga[open] summary::after { color: var(--orange); }
.fraga[open] summary::after { transform: rotate(45deg); }
.fraga p { padding: 0 40px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-2); max-width: 40em; }

/* ---------- Undersidorna: referenser, case, tjänster, om och kontakt ---------- */
.sidhuvud { position: relative; padding: calc(var(--topp-h) + clamp(64px, 9vw, 120px)) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.sidhuvud::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); height: 420px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(255, 255, 255, 0.06), transparent); pointer-events: none; }
.sidhuvud .sidrubrik { max-width: 15em; }
.sidhuvud .ingress { margin-top: 24px; font-size: 18px; }

/* Referenserna */
.referenser { padding-bottom: clamp(96px, 10vw, 140px); }
.filter { position: sticky; top: calc(var(--topp-h) + 10px); z-index: 20; display: grid; gap: 8px; padding: 12px; margin: 0 -12px; border-radius: 16px; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
.filter-rad { display: flex; flex-wrap: wrap; gap: 8px; }
.kort-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.kort { display: flex; flex-direction: column; border-radius: 20px; background: linear-gradient(180deg, #0c0c0c, #070707); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.5s var(--mjuk); }
.kort:hover { transform: translateY(-3px); }
.kort.dold { display: none; }
.kort-demo { position: relative; padding: 18px 18px 0; border-radius: 20px 20px 0 0; overflow: hidden; background: radial-gradient(80% 80% at 50% 0%, color-mix(in srgb, var(--k) 12%, transparent), transparent 70%); }
.kort-demo .fonster { border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px var(--kant-2); }
.kort-demo .fonster-skarm { height: 228px; overflow: hidden; padding: 12px; }
.kort-demo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #0b0b0b); pointer-events: none; }
.kort-text { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 20px 24px 22px; border-top: 1px solid var(--kant); }
.kort-text h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; }
.kort-text > p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.kort-text .kort-tal { font-size: 13.5px; color: var(--text-3); }
.kort-text .kort-tal b { color: var(--text); font-weight: 500; }
.kort-fot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--text-3); }
.kort-status { display: inline-flex; align-items: center; gap: 7px; }
.kort-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.kort-status--drift i { background: var(--gron); box-shadow: 0 0 0 3px rgba(61, 214, 140, 0.15); }
.kort-fot .lank { font-size: 13.5px; }
.filter-tomt { margin-top: 40px; color: var(--text-2); }

/* Ett case */
.case-detalj { display: none; }
.case-detalj.aktiv { display: block; }
.case-huvud { position: relative; padding: calc(var(--topp-h) + clamp(48px, 7vw, 96px)) 0 clamp(36px, 5vw, 56px); overflow: hidden; }
.case-huvud::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1100px, 120vw); height: 460px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, color-mix(in srgb, var(--k) 13%, transparent), transparent); pointer-events: none; }
.case-tillbaka { display: inline-flex; gap: 6px; font-size: 14px; color: var(--text-2); margin-bottom: 22px; }
.case-tillbaka:hover { color: var(--text); }
.case-huvud .sidrubrik { margin-top: 22px; }
.case-rubrik { margin-top: 22px; max-width: 38em; font-size: 19px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.case-rubrik span { color: var(--text-2); }
.case-scen { padding: clamp(16px, 3vw, 44px); border-radius: 24px; background: radial-gradient(70% 80% at 50% 0%, color-mix(in srgb, var(--k) 10%, transparent), transparent 70%), linear-gradient(180deg, #0b0b0b, #050505); box-shadow: inset 0 0 0 1px var(--kant); }
.case-scen .fonster { max-width: 880px; margin-inline: auto; }
.case-kolumner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); margin-top: clamp(64px, 8vw, 104px); }
.case-kolumner h2, .case-blockrubrik { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.case-kolumner p { font-size: 17px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.case-block { margin-top: clamp(56px, 7vw, 88px); }
.case-steg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--kant); }
.case-steg li { padding: 22px 22px 24px; font-size: 15px; line-height: 1.5; color: var(--text); }
.case-steg li + li { border-left: 1px solid var(--kant); }
.case-steg span { display: block; font-family: var(--mono); font-size: 12px; color: var(--orange); margin-bottom: 14px; }
.case-resultat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--kant); }
.case-resultat div { padding: 26px 24px 8px 0; }
.case-resultat div + div { padding-left: 24px; border-left: 1px solid var(--kant); }
.case-resultat dt { font-size: clamp(32px, 3.8vw, 48px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; color: var(--text); }
.case-resultat dd { margin-top: 10px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; max-width: 22em; }
.case-teknik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--kant); }
.case-teknik-rubrik { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-right: 8px; }
.case-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: clamp(56px, 7vw, 88px) 0 clamp(80px, 9vw, 120px); }
.case-nav a { display: grid; gap: 6px; padding: 22px 24px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--kant); transition: background-color 0.25s, box-shadow 0.25s; }
.case-nav a:last-child { text-align: right; }
.case-nav a:hover { background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--kant-3); }
.case-nav small { font-size: 13px; color: var(--text-3); }
.case-nav b { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }

/* Tjänsterna */
.tjanster { padding-bottom: clamp(40px, 5vw, 64px); }
.tjanst { display: grid; grid-template-columns: 132px minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(20px, 3.4vw, 48px); align-items: center; padding: clamp(28px, 3.5vw, 40px) 0; border-top: 1px solid var(--kant); }
.tjanst:last-child { border-bottom: 1px solid var(--kant); }
.tjanst-ikon { width: 132px; height: 132px; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent); mask: radial-gradient(closest-side, #000 72%, transparent); transition: transform 0.8s var(--mjuk); }
.tjanst:hover .tjanst-ikon { transform: translateY(-6px) rotate(-4deg) scale(1.04); }
.tjanst-nr { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.tjanst-nr b { color: var(--text); font-weight: 400; }
.tjanst h2 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 480; letter-spacing: -0.035em; line-height: 1.1; }
.tjanst-text p { margin-top: 12px; font-size: 15.5px; color: var(--text-2); line-height: 1.65; max-width: 34em; }
.tjanst-ex { display: grid; }
.tjanst-ex a { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--kant); font-size: 14.5px; color: var(--text-2); transition: color 0.2s; }
.tjanst-ex a:first-child { border-top: 1px solid var(--kant); }
.tjanst-ex a:hover { color: var(--text); }
.tjanst-ex .pil { color: var(--orange); }

/* Uppläggen */
.upplagg-rutnat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; align-items: stretch; }
.upplagg-kort { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 22px; background: linear-gradient(180deg, #0c0c0c, #070707); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.upplagg-kort--glod { background: radial-gradient(100% 60% at 50% 0%, rgba(255, 106, 43, 0.14), transparent 70%), linear-gradient(180deg, #0f0d0c, #070707); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.35), inset 0 1px 0 rgba(255, 180, 140, 0.18), 0 30px 80px -40px rgba(255, 106, 43, 0.4); }
.upplagg-nr { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-family: var(--mono); font-size: 13px; color: var(--text); box-shadow: inset 0 0 0 1px var(--kant-2); }
.upplagg-kort h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; margin-top: 6px; }
.upplagg-kort p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.upplagg-kort ul { display: grid; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--kant); }
.upplagg-kort li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text); }
.upplagg-kort li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(-45deg); }
.upplagg-kort .knapp { margin-top: auto; align-self: flex-start; }

/* Verktygen */
.verktyg-ram { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }

/* Om oss */
.om-huvud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.om-ikon { width: clamp(180px, 22vw, 300px); height: auto; -webkit-mask: radial-gradient(closest-side, #000 74%, transparent); mask: radial-gradient(closest-side, #000 74%, transparent); }
.om-foto { margin: 0; width: clamp(280px, 40vw, 580px); -webkit-mask-image: radial-gradient(68% 64% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(68% 64% at 50% 50%, #000 52%, transparent 100%); }
.om-foto img { display: block; width: 100%; height: auto; }
.om-bred { margin: 0; border-radius: 20px; overflow: hidden; background: #050505; box-shadow: 0 0 0 1px var(--kant), 0 40px 100px -50px rgba(255, 106, 43, 0.35); }
.om-bred img { display: block; width: 100%; height: auto; }
.om-bred figcaption { padding: 14px 18px; border-top: 1px solid var(--kant); font-size: 13.5px; color: var(--text-3); }
.om-bred--smal { max-width: 860px; }
/* Om oss: bolaget sedan 2004 och vi som svarar, med stora porträtt så att människorna syns direkt */
.om-citysalj-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.skal-lista { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.skal-lista li { position: relative; padding-left: 24px; color: var(--text-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.skal-lista li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255, 106, 43, 0.7); }
.skal-lista b { color: var(--text); font-weight: 500; }
.team-rubrik { margin-top: clamp(48px, 6vw, 80px); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.person { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #0b0b0b; box-shadow: inset 0 0 0 1px var(--kant), 0 40px 80px -60px rgba(255, 106, 43, 0.45); }
.person-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #e6e6e6; }
.person-bild--initialer { display: grid; place-items: center; font-size: clamp(48px, 5.4vw, 80px); font-weight: 600; letter-spacing: -0.05em; color: #161616; background: linear-gradient(180deg, #ededed, #d6d6d6); }
.person-text { padding: 16px 18px 18px; }
.person h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.person p { margin-top: 3px; font-size: 14px; color: var(--text-3); }
.person-epost { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--text-2); transition: color 0.2s; }
.person-epost:hover, .person-epost:focus-visible { color: var(--text); }
.team-fot { margin-top: 18px; font-size: 15px; color: var(--text-3); }
.team-fot a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 106, 43, 0.6); text-underline-offset: 3px; }
.om-loggan { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 7vw, 96px); }
.om-loggan-bild { margin: 0; }
.om-loggan-bild img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; -webkit-mask-image: radial-gradient(70% 60% at 50% 46%, #000 60%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 46%, #000 60%, transparent 100%); }
.om-loggan-text h3 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 480; letter-spacing: -0.035em; line-height: 1.05; }
.om-loggan-text p { margin-top: 18px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-2); max-width: 26em; }
.om-historia-ram { display: grid; gap: clamp(40px, 5vw, 64px); }
.om-fraga { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.om-stor { font-size: clamp(26px, 3vw, 40px); font-weight: 450; letter-spacing: -0.03em; line-height: 1.3; color: var(--text); max-width: 26em; text-wrap: pretty; }
.om-stor .ord { opacity: 0.18; }
.om-spalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; max-width: 980px; }
.om-spalter p { font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.om-spalter b { color: var(--orange-2); font-weight: 500; }
.principer-rutnat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.princip { padding: 30px; border-radius: 22px; background: linear-gradient(180deg, #0c0c0c, #070707); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.princip-nr { font-family: var(--mono); font-size: 12px; color: var(--orange); }
.princip h3 { margin-top: 0; font-size: 21px; font-weight: 500; letter-spacing: -0.03em; }
.princip p { margin-top: 10px; font-size: 15px; color: var(--text-2); line-height: 1.6; }
.om-inifran-ram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }

/* Kontakt */
.kontakt { position: relative; padding: calc(var(--topp-h) + clamp(56px, 8vw, 110px)) 0 clamp(96px, 10vw, 140px); overflow: hidden; }
.kontakt::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1200px, 120vw); height: 520px; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 0%, rgba(255, 106, 43, 0.09), transparent); pointer-events: none; }
.kontakt-ram { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.kontakt-rubrik { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.03em; color: #fff; -webkit-mask-image: linear-gradient(172deg, #000 34%, rgba(0, 0, 0, 0.45)); mask-image: linear-gradient(172deg, #000 34%, rgba(0, 0, 0, 0.45)); }
.kontakt-kort { padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: linear-gradient(180deg, #0d0d0d, #070707); box-shadow: inset 0 0 0 1px var(--kant), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 120px -60px rgba(255, 106, 43, 0.35); }
.kontakt-fraga { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.amnen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.kontakt-knappar { display: flex; flex-wrap: wrap; gap: 10px; }
/* Telefonen är AI-växeln: numret stort, och en rad om hur den svarar */
.kontakt-telefon { display: grid; gap: 6px; margin-top: 24px; padding: 20px 0; border-block: 1px solid var(--kant); }
.kontakt-telefon-nr { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); transition: color 0.2s; }
.kontakt-telefon-text { font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 32em; }
.kontakt-telefon:hover .kontakt-telefon-nr, .kontakt-telefon:focus-visible .kontakt-telefon-nr { color: var(--orange); }
.kopiera { position: relative; }
.kopiera-klart { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); font-size: 12px; color: var(--gron); white-space: nowrap; }
.kontakt-foretag { display: grid; gap: 6px; margin-top: 26px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.kontakt-foretag strong { font-weight: 500; color: var(--text); }
.kontakt-foretag address { font-style: normal; }
.kontakt-foretag a { justify-self: start; text-decoration: underline; text-underline-offset: 4px; }
.kontakt-foretag a:hover, .kontakt-foretag a:focus-visible { color: var(--text); }
.kontakt-ort { margin-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* ---------- Demoskärmarna: små levande versioner av systemen, ritade i 640 px och skalade till fönstret ---------- */
.vis { position: relative; width: 640px; max-width: none; color: var(--text); font-size: 14px; line-height: 1.45; }
.vis-demo { display: none; }
.vis-panel { position: relative; }
.vis-rad { display: flex; align-items: center; gap: 10px; }
.vis-mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.vis-live { display: inline-flex; align-items: center; gap: 7px; }
.vis-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gron); box-shadow: 0 0 8px var(--gron); animation: blink 2.4s ease-in-out infinite; }
.konfetti { position: absolute; width: 6px; height: 10px; border-radius: 2px; pointer-events: none; z-index: 6; }
.vis-yta { border-radius: 12px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* Säljtavlan */
.vis--tavla .vis-panel { padding: 6px 4px 2px; }
.tavla-huvud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.tavla-mal { flex: 1; margin: 0 16px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.tavla-mal i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #c2410c, var(--orange)); border-radius: 6px; transition: width 0.8s var(--mjuk); }
.tavla-summa { color: var(--text); font-weight: 500; }
.tavla-lista { display: grid; gap: 6px; }
.tavla-rad { display: grid; grid-template-columns: 24px 32px 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.tavla-rad.forst { background: linear-gradient(90deg, rgba(255, 106, 43, 0.16), rgba(255, 106, 43, 0.02)); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.28); }
.tavla-plats { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.tavla-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: #000; }
.tavla-namn { font-weight: 500; }
.tavla-poang { font-family: var(--mono); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tavla-flode { margin-top: 12px; height: 34px; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 10px; color: var(--text-2); font-size: 13px; }
.tavla-fot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

/* AI-växeln: samtalet besvaras och förfrågan tas emot medan ljudvågen rör sig */
.vis--vaxel .vis-panel { display: grid; gap: 12px; }
.vaxel-topp { display: flex; justify-content: space-between; gap: 12px; }
.vaxel-topp b { font-size: 17px; font-weight: 500; }
.vaxel-vag { display: flex; align-items: center; gap: 3px; height: 48px; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.vaxel-vag i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(180deg, transparent, rgba(255, 106, 43, 0.85) 28%, #ff9a63 50%, rgba(255, 106, 43, 0.85) 72%, transparent); transform: scaleY(0.16); animation: vaxel-vag 1.2s ease-in-out infinite; opacity: 0.45; transition: opacity 0.4s; }
.talar-ai .vaxel-vag i { opacity: 1; }
@keyframes vaxel-vag { 0%, 100% { transform: scaleY(0.16); } 50% { transform: scaleY(var(--h, 0.8)); } }
.vaxel-samtal { display: grid; gap: 9px; min-height: 162px; align-content: start; font-size: 13.5px; line-height: 1.45; }
.vaxel-samtal p { display: grid; grid-template-columns: 58px 1fr; gap: 10px; opacity: 0; }
.vaxel-samtal b { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
.vaxel-ai b { color: #ff9a63; }
.vaxel-ai span { color: var(--text); }
.vaxel-kund span { color: var(--text-2); }
.vaxel-utfall { display: flex; flex-wrap: wrap; gap: 6px; }
.vaxel-utfall span { padding: 5px 10px; border-radius: 999px; background: rgba(61, 214, 140, 0.1); box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.22); color: var(--gron); font-size: 12.5px; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vaxel-vag i { animation: none; transform: scaleY(var(--h, 0.6)); } }

/* Svarsassistenten */
.vis--chatt .vis-panel { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 330px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.chatt-arende { padding: 16px; border-right: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 12px; }
.chatt-bubbla { padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, 0.06); font-size: 13.5px; line-height: 1.45; }
.chatt-ai { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, rgba(255, 106, 43, 0.07), transparent 45%); }
.chatt-ai-rubrik { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.chatt-ai-rubrik i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.chatt-sammanf { font-size: 12.5px; color: var(--text-2); display: grid; gap: 5px; }
.chatt-sammanf li { display: flex; gap: 8px; }
.chatt-sammanf li::before { content: "›"; color: var(--orange); }
.chatt-forslag { flex: 1; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.35); background: rgba(255, 106, 43, 0.03); font-size: 13.5px; line-height: 1.5; min-height: 120px; white-space: pre-wrap; }
.chatt-forslag::after { content: "▍"; color: var(--orange); animation: blink 1s steps(2) infinite; }
.chatt-forslag.klar::after { display: none; }
.chatt-kallor { display: flex; flex-wrap: wrap; gap: 6px; }
.chatt-kallor span { font-family: var(--mono); font-size: 10px; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--text-2); }

/* Ringkortet */
.vis--ringkort .vis-panel { display: grid; gap: 12px; }
.ring-bolag { display: flex; justify-content: space-between; gap: 12px; }
.ring-bolag b { font-size: 17px; font-weight: 500; }
.ring-fakta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ring-fakta div { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 13px; }
.ring-fakta small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.ring-stod { display: flex; flex-wrap: wrap; gap: 6px; }
.ring-stod span { padding: 5px 10px; border-radius: 999px; background: rgba(61, 214, 140, 0.1); box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.22); color: var(--gron); font-size: 12.5px; }
.ring-sparr { font-size: 12.5px; color: #ff9b8a; display: flex; gap: 8px; align-items: center; }
.ring-lyssnar { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); min-height: 96px; display: grid; gap: 6px; align-content: start; font-size: 13px; }
.ring-lyssnar p { opacity: 0; transform: translateY(6px); }
.ring-lyssnar mark { background: rgba(255, 106, 43, 0.22); color: var(--orange-2); padding: 0 3px; border-radius: 4px; }
.ring-mejl { padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.35); font-size: 13px; opacity: 0; }

/* Manus */
.vis--manus .vis-panel { padding: 6px 4px; min-height: 300px; }
.manus-rad { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.manus-text { font-size: 16px; line-height: 1.65; color: var(--text); min-height: 220px; }
.manus-text .koll { background: rgba(61, 214, 140, 0.12); color: var(--gron); border-radius: 4px; padding: 0 3px; }
.manus-text .koll::after { content: " ✓"; font-size: 11px; }
.manus-tid { font-family: var(--mono); font-size: 12px; color: var(--orange-2); }

/* Vågform och poäng */
.vis--vagform .vis-panel { display: grid; gap: 14px; }
.vag { height: 66px; display: flex; align-items: center; gap: 2px; }
.vag i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.18); height: 20%; }
.vag i.spelad { background: var(--orange); }
.vag-text { font-size: 13px; color: var(--text-2); min-height: 40px; }
.dim { display: grid; gap: 7px; }
.dim div { display: grid; grid-template-columns: 110px 1fr 26px; gap: 10px; align-items: center; font-size: 12.5px; }
.dim span { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dim span i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6d7cff, #b7c0ff); border-radius: 6px; }
.dim b { font-family: var(--mono); font-weight: 500; text-align: right; }
.vag-stampel { justify-self: end; padding: 7px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--gron); color: var(--gron); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; transform: rotate(-3deg); opacity: 0; }

/* Röst (Academy) */
.vis--rost .vis-panel { padding: 10px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.rost-klot { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9bf, var(--orange) 45%, #6b1d02 100%); box-shadow: 0 0 60px rgba(255, 106, 43, 0.45); }
.rost-rad { min-height: 46px; font-size: 14px; color: var(--text); max-width: 400px; }
.rost-rad b { color: var(--orange-2); font-weight: 500; }

/* Kedjan */
.vis--kedja .vis-panel { padding: 14px 6px 6px; }
.kedja-klocka { position: absolute; left: 6px; top: 0; font-family: var(--mono); font-size: 13px; color: var(--orange-2); }
.kedja-noder { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.kedja-nod { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; font-size: 13px; color: var(--text-2); transition: color 0.4s; }
.kedja-nod span { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--text-2); background: linear-gradient(180deg, #1b1b1b, #0e0e0e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: color 0.4s, box-shadow 0.4s; }
.kedja-nod span svg { width: 24px; height: 24px; }
.kedja-nod.tand { color: var(--text); }
.kedja-nod.tand span { color: var(--orange); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.6), 0 0 26px -4px rgba(255, 106, 43, 0.6); }
.kedja-linje { position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 1px; background: rgba(255, 255, 255, 0.12); z-index: 1; }
.kedja-linje i { position: absolute; left: 0; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.kedja-logg { margin-top: 24px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 11.5px; color: var(--text-2); min-height: 108px; }
.kedja-logg p { display: flex; gap: 10px; }
.kedja-logg p b { color: var(--gron); font-weight: 500; }

/* Fakturorna */
.vis--faktura .vis-panel { display: grid; gap: 8px; min-height: 300px; align-content: start; }
.fakt { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.fakt small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.fakt b { font-family: var(--mono); font-weight: 500; }
.fakt-flagga { font-family: var(--mono); font-size: 10.5px; padding: 4px 8px; border-radius: 6px; background: rgba(61, 214, 140, 0.1); color: var(--gron); }
.fakt-flagga.varn { background: rgba(245, 184, 75, 0.12); color: var(--gul); }

/* Radarn */
.vis--radar .vis-panel { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.radar-skiva { position: relative; width: 200px; height: 200px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 32px, rgba(255, 255, 255, 0.07) 32px 33px), radial-gradient(circle, rgba(255, 106, 43, 0.06), transparent 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
.radar-svep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 106, 43, 0.4), rgba(255, 106, 43, 0) 70deg, transparent 360deg); }
.radar-prick { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.radar-prick.traff { background: var(--orange); box-shadow: 0 0 12px var(--orange); width: 9px; height: 9px; margin: -4.5px; }
.radar-lista { display: grid; gap: 6px; font-size: 13px; }
.radar-lista li { padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); display: flex; justify-content: space-between; gap: 10px; transition: opacity 0.4s, background-color 0.4s, box-shadow 0.4s; }
.radar-lista li.bort { opacity: 0.3; text-decoration: line-through; }
.radar-lista li.traff { background: rgba(255, 106, 43, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, 0.3); }
.radar-lista small { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.radar-summa { grid-column: 1 / -1; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text-2); border-top: 1px solid rgba(255, 255, 255, 0.07); padding-top: 10px; }

/* Filerna */
.vis--filer .vis-panel { display: grid; gap: 10px; }
.fil { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.fil-ikon { width: 34px; height: 40px; border-radius: 6px; background: linear-gradient(180deg, #1d1d1d, #111); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-family: var(--mono); font-size: 9px; color: var(--text-2); }
.fil-steg { display: flex; gap: 6px; }
.fil-steg span { font-family: var(--mono); font-size: 10px; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.35); transition: background-color 0.3s, color 0.3s; }
.fil-steg span.ok { background: rgba(61, 214, 140, 0.12); color: var(--gron); }
.fil-kvitto { font-family: var(--mono); font-size: 11.5px; color: var(--text-2); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* Pulsen (vakterna) */
.vis--puls .vis-panel { display: grid; gap: 12px; }
.puls-linje { height: 80px; width: 100%; }
.puls-linje path { fill: none; stroke: var(--gron); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(61, 214, 140, 0.6)); }
.puls-kontroller { display: grid; gap: 6px; }
.puls-kontroller li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 13px; transition: background-color 0.4s, box-shadow 0.4s; }
.puls-kontroller li b { font-family: var(--mono); font-weight: 500; font-size: 11px; color: var(--gron); }
.puls-kontroller li.larm { background: rgba(255, 107, 107, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.3); }
.puls-kontroller li.larm b { color: var(--rod); }

/* Dashboarden */
.vis--dashboard .vis-panel { display: grid; gap: 14px; }
.dash-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-kpi div { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.dash-kpi small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; }
.dash-kpi b { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.dash-kpi em { font-family: var(--mono); font-style: normal; font-size: 11px; color: var(--gron); margin-left: 6px; }
.dash-staplar { height: 150px; display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.dash-staplar i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08)); height: 10%; }
.dash-staplar i:nth-last-child(1) { background: linear-gradient(180deg, var(--orange), rgba(255, 106, 43, 0.2)); }
.dash-fraga { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 13px; color: var(--text); min-height: 42px; }
.dash-fraga::before { content: "?"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #000; font-weight: 600; font-size: 12px; flex-shrink: 0; }

/* Trafikljusen */
.vis--trafikljus .vis-panel { display: grid; gap: 7px; }
.trafik-rad { display: grid; grid-template-columns: 1fr 70px 90px 22px; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 13.5px; }
.trafik-rad small { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.trafik-mat { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.trafik-mat i { display: block; height: 100%; border-radius: 6px; background: var(--ljus, var(--gron)); transition: width 0.8s var(--mjuk), background-color 0.5s; }
.trafik-lampa { width: 13px; height: 13px; border-radius: 50%; background: var(--ljus, var(--gron)); box-shadow: 0 0 12px var(--ljus, var(--gron)); transition: background-color 0.5s, box-shadow 0.5s; }
.trafik-summa { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text-2); padding-top: 8px; }
.trafik-summa b { color: var(--text); font-size: 16px; font-weight: 500; }

/* Schemat */
.schema-rutnat { display: grid; grid-template-columns: repeat(28, 1fr); gap: 2px; margin-top: 12px; }
.schema-rutnat i { aspect-ratio: 1 / 2.4; border-radius: 3px; background: rgba(139, 155, 255, 0.1); }
.schema-axel { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); margin-top: 8px; }
.schema-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 12px; }
.schema-legend span { display: inline-flex; align-items: center; gap: 6px; }
.schema-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Analysen (urval som räknar om allt) */
.vis--analys .vis-panel { display: grid; grid-template-columns: 150px 1fr; gap: 14px; }
.ana-listor { display: grid; gap: 10px; align-content: start; }
.ana-box { border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); padding: 8px; }
.ana-box small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; margin-bottom: 4px; }
.ana-box button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; color: var(--text); transition: background-color 0.3s, color 0.3s, opacity 0.3s; }
.ana-box button:hover { background: rgba(255, 255, 255, 0.06); }
.ana-box button.vald { background: #1f9d63; color: #fff; }
.ana-box button.utesl { opacity: 0.3; }
.ana-hoger { display: grid; gap: 12px; align-content: start; }
.ana-summa small { font-family: var(--mono); font-size: 10px; color: var(--text-3); text-transform: uppercase; }
.ana-summa b { display: block; font-size: 30px; font-weight: 500; letter-spacing: -0.04em; }
.ana-staplar { display: grid; gap: 6px; }
.ana-staplar div { display: grid; grid-template-columns: 70px 1fr 64px; gap: 8px; align-items: center; font-size: 12px; }
.ana-staplar span { height: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.ana-staplar span i { display: block; height: 100%; background: linear-gradient(90deg, #6d7cff, #c3c9ff); border-radius: 4px; transition: width 0.6s var(--mjuk); }
.ana-staplar b { font-family: var(--mono); font-weight: 500; font-size: 11px; text-align: right; }
.ana-tips { font-size: 11.5px; color: var(--text-3); }

/* CRM */
.vis--crm .vis-panel { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
.crm-kort { display: grid; gap: 10px; align-content: start; }
.crm-kort b { font-size: 17px; font-weight: 500; }
.crm-falt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.crm-falt div { padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); font-size: 12.5px; }
.crm-falt small { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--text-3); text-transform: uppercase; }
.crm-dagbok { display: grid; gap: 8px; align-content: start; border-left: 1px solid rgba(255, 255, 255, 0.07); padding-left: 16px; }
.crm-post { position: relative; padding-left: 16px; font-size: 12.5px; }
.crm-post::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #c9b8ff; }
.crm-post small { display: block; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.crm-post.ny::before { background: var(--orange); box-shadow: 0 0 10px var(--orange); }
.crm-matris { grid-column: 1 / -1; display: grid; grid-template-columns: 120px repeat(4, 1fr); gap: 4px; font-size: 11.5px; }
.crm-matris span { padding: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); text-align: center; }
.crm-matris span.x { background: rgba(61, 214, 140, 0.12); color: var(--gron); }
.crm-matris span.h { text-align: left; background: transparent; color: var(--text-3); font-family: var(--mono); font-size: 10px; }

/* Kartan */
.karta-svg { width: 100%; height: auto; }
.karta-svg .nod rect { fill: #141414; stroke: rgba(255, 255, 255, 0.14); }
.karta-svg .nod text { fill: var(--text); font-family: var(--sans); font-size: 13px; }
.karta-svg .nod.mitt rect { fill: rgba(255, 106, 43, 0.16); stroke: var(--orange); }
.karta-svg .kant { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; fill: none; }
.karta-svg .kant-ljus { stroke: var(--orange); stroke-width: 2; fill: none; filter: drop-shadow(0 0 4px rgba(255, 106, 43, 0.8)); }

/* TV:n */
.vis--tv .vis-panel { aspect-ratio: 16 / 9; display: grid; grid-template-rows: auto 1fr auto; border-radius: 10px; overflow: hidden; background: radial-gradient(90% 90% at 70% 10%, #1d1410, #0a0a0a 60%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.tv-topp { display: flex; justify-content: space-between; padding: 14px 18px 0; font-size: 12px; color: var(--text-2); }
.tv-dag { text-transform: capitalize; color: var(--text); }
.tv-klocka { font-family: var(--mono); font-size: 26px; color: var(--text); letter-spacing: -0.02em; }
.tv-mitt { display: grid; place-content: center; text-align: center; padding: 0 20px; }
.tv-mitt p { font-family: var(--serif); font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; }
.tv-mitt small { margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
.tv-rad { overflow: hidden; background: var(--orange); color: #000; font-size: 12.5px; font-weight: 500; white-space: nowrap; padding: 6px 0; }
.tv-rad span { display: inline-block; padding-left: 100%; animation: tvrad 22s linear infinite; }
@keyframes tvrad { to { transform: translateX(-100%); } }

/* Mätaren (Tempot) */

/* Artikeln */
.vis--artikel .vis-panel { display: grid; gap: 12px; }
.art-kalla { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.art-rubrik { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.art-text { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.art-text span { border-radius: 4px; transition: background-color 0.4s, color 0.4s; }
.art-text span.ok { background: rgba(61, 214, 140, 0.12); color: var(--gron); }
.art-text span.stryk { background: rgba(255, 107, 107, 0.14); color: #ff9da0; text-decoration: line-through; }
.art-fot { display: flex; gap: 8px; flex-wrap: wrap; }
.art-fot span { font-family: var(--mono); font-size: 10.5px; padding: 4px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--text-2); }

/* ---------- Brytpunkter ---------- */
@media (max-width: 1100px) {
  .visning-panel { grid-template-columns: minmax(0, 1fr); }
  .visning-text { border-right: 0; border-bottom: 1px solid var(--kant); }
  .visning-demo { order: -1; }
  .visning-text { order: 2; }
  .drift-ram { grid-template-columns: minmax(0, 1fr); }
  .kort-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formagor-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tjanst { grid-template-columns: 110px minmax(0, 1fr); }
  .tjanst-ikon { width: 110px; height: 110px; }
  .tjanst-ex { grid-column: 2; }
  .register-yta { grid-template-columns: minmax(0, 1fr); }
  .register-info { min-height: 0; padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--kant); }
  .register-rutnat { grid-template-columns: repeat(26, minmax(0, 1fr)); }
  .register-lista-inre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --topp-h: 60px; }
  .meny, .topp-cta { display: none; }
  .menyknapp { display: grid; }
  .topp-hoger { margin-left: auto; }
  .hjalte { min-height: 0; padding-top: calc(var(--topp-h) + 8px); }
  .hjalte-ram { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hjalte-klot { order: -1; width: min(88%, 440px); justify-self: center; margin: -2% 0 -6%; }
  .hjalte-text { max-width: none; }
  .hjalte-rubrik { margin-top: 22px; }
  .avsnitt-huvud--rad { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kund-rutnat, .upplagg-rutnat { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: calc(-1 * var(--kantmarg)); padding-inline: var(--kantmarg); scroll-padding-inline: var(--kantmarg); }
  .kund-rutnat::-webkit-scrollbar, .upplagg-rutnat::-webkit-scrollbar { display: none; }
  .kundkort, .upplagg-kort { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; }
  .process-steg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .process-steg::before, .process-steg::after { display: none; }
  .boras-ram { grid-template-columns: minmax(0, 1fr); }
  .ansikten { max-width: 360px; }
  .case-kolumner, .om-inifran-ram, .verktyg-ram, .kontakt-ram, .fragor-ram { grid-template-columns: minmax(0, 1fr); }
  .case-steg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-steg li:nth-child(3) { border-left: 0; }
  .case-steg li:nth-child(n + 3) { border-top: 1px solid var(--kant); }
  .fot-ram { grid-template-columns: minmax(0, 1fr); }
  .om-huvud { grid-template-columns: minmax(0, 1fr); }
  .om-ikon { order: -1; width: 160px; }
  .om-foto { order: -1; width: min(100%, 440px); }
  .om-loggan { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .om-citysalj-ram { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .person-text { padding: 12px 12px 14px; }
  .person h3 { font-size: 15.5px; }
  .person p { font-size: 13px; }
  .person-epost { font-size: 12.5px; margin-top: 8px; }
  .om-loggan-bild { width: min(80%, 360px); margin: 0 auto; }
  .om-spalter { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .hjalte-rubrik { font-size: clamp(44px, 14.5vw, 70px); }
  .hjalte-ingress { font-size: 17px; }
  .hjalte-klienter { flex-direction: column; align-items: flex-start; gap: 16px; }
  .logorad { gap: 16px 28px; }
  .knappar .knapp { flex: 1 1 auto; }
  .logovagg { grid-template-columns: minmax(0, 1fr); }
  .logovagg li + li { border-left: 0; border-top: 1px solid var(--kant); }
  .logovagg li:first-child .logo-cell { border-radius: 20px 20px 0 0; }
  .logovagg li:last-child .logo-cell { border-radius: 0 0 20px 20px; }
  .logo-cell { height: auto; padding: 28px 16px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
  .logo-fakta { position: static; opacity: 1; transform: none; font-size: 12.5px; }
  .logo-cell:hover .logo-bild { transform: none; }
  .kopplat-lista li { height: 32px; padding: 0 12px; font-size: 13px; }
  .flikar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--kantmarg)); padding-inline: var(--kantmarg); }
  .flikar::-webkit-scrollbar { display: none; }
  .flik { flex: none; }
  .visning-demo { padding: 14px; }
  .visning-tal div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 12px 0; }
  .tal-rad dt { font-size: 34px; }
  .logg-huvud, .logg-rad { grid-template-columns: 62px minmax(0, 1fr) 86px; gap: 10px; padding: 0 12px; }
  .logg-huvud span:nth-child(3), .logg-rad .logg-text { display: none; }
  .logg-rad { height: 52px; }
  .logg-rader { height: 416px; }
  .register-rutnat { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 5px; }
  .register-stor { font-size: 44px; }
  .register-lista-inre { grid-template-columns: minmax(0, 1fr); }
  .formagor-rutnat { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; box-shadow: none; margin-inline: calc(-1 * var(--kantmarg)); padding-inline: var(--kantmarg); scroll-padding-inline: var(--kantmarg); }
  .formagor-rutnat::-webkit-scrollbar { display: none; }
  .formaga:nth-child(n) { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; padding: 26px 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--kant); background: linear-gradient(180deg, #0c0c0c, #070707); }
  .process-steg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kort-rutnat { grid-template-columns: minmax(0, 1fr); }
  .filter { position: static; margin: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .filter-rad { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--kantmarg)); padding-inline: var(--kantmarg); }
  .filter-rad::-webkit-scrollbar { display: none; }
  .filter-rad .chip { flex: none; }
  .tjanst { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tjanst-ikon { width: 96px; height: 96px; }
  .tjanst-ex { grid-column: auto; }
  .case-steg { grid-template-columns: minmax(0, 1fr); }
  .case-steg li + li { border-left: 0; border-top: 1px solid var(--kant); }
  .case-resultat { grid-template-columns: minmax(0, 1fr); }
  .case-resultat div, .case-resultat div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--kant); }
  .case-nav { grid-template-columns: minmax(0, 1fr); }
  .case-nav a:last-child { text-align: left; }
  .principer-rutnat { grid-template-columns: minmax(0, 1fr); }
  .fot-kolumner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fot-botten { flex-direction: column; gap: 6px; }
  .slut-rubrik { font-size: clamp(36px, 10.5vw, 52px); }
  .kontakt-knappar .knapp { width: 100%; }
}

/* ---------- Minskad rörelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .om-stor .ord { opacity: 1; }
}