/* ---- Fonter ------------------------------------------------------------ */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --bg: #0b0d10;
  --bg-upphojd: #131720;
  --fg: #f2f4f7;
  --fg-svag: #9aa3b2;
  --accent: #5ee0c8;
  --linje: #232a36;

  --matt-1: 0.5rem;
  --matt-2: 1rem;
  --matt-3: 1.75rem;
  --matt-4: 3rem;
  --matt-5: 5rem;
  --matt-6: 8rem;

  --font-rubrik: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-brod: "Inter", ui-sans-serif, system-ui, sans-serif;

  --maxbredd: 68rem;
}

/* ---- Grund ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-brod);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: var(--font-rubrik);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem); margin: 0 0 var(--matt-3); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin: 0 0 var(--matt-3); }
h3 { font-size: 1.25rem; margin: 0 0 var(--matt-1); }
p  { max-width: 68ch; }
a  { color: var(--accent); text-underline-offset: 0.2em; }
img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Layout ------------------------------------------------------------ */
.behallare {
  width: 100%;
  max-width: var(--maxbredd);
  margin-inline: auto;
  padding-inline: var(--matt-3);
}
.sektion { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }

.sidhuvud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--matt-2);
  max-width: var(--maxbredd);
  margin-inline: auto;
  padding: var(--matt-3);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-rubrik);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-decoration: none;
}
.wordmark svg {
  width: 2.9rem;
  height: 2.9rem;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Lagerstapeln ska inte snurra — den ska lyfta. Rotation läste som en
   laddindikator när märket blev en stapel i stället för en kub. */
.wordmark:hover svg { transform: translateY(-2px); }
/* o:et är kärnan — ordbilden bär namnets betydelse så att märket slipper.
   Texten måste ligga i ETT element: .wordmark är flex med gap, så lösa
   textnoder blir egna flex-objekt och ordet spricker till "inc o re". */
.wordmark .ordbild { white-space: nowrap; }
.wordmark .karna { color: var(--accent); }
.sprakval { display: flex; gap: var(--matt-1); font-size: 0.875rem; letter-spacing: 0.08em; }
.sprakval [aria-current] { color: var(--fg); }
.sprakval a { color: var(--fg-svag); text-decoration: none; }
.sprakval a:hover { color: var(--accent); }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--matt-6) var(--matt-5);
  /* Tre lager: horisontellt mörker som skyddar textens kontrast, vertikal
     nedtoning mot sidans bakgrund, och därunder bilden. Hero-bilden har ljust
     centrum — utan det första lagret hamnar rubriken under 4.5:1. */
  background-image:
    linear-gradient(to right, rgb(11 13 16 / 0.94) 0%, rgb(11 13 16 / 0.74) 45%, rgb(11 13 16 / 0.38) 100%),
    linear-gradient(to bottom, rgb(11 13 16 / 0.5), rgb(11 13 16 / 0.2) 40%, var(--bg) 96%),
    url("/assets/img/hero.webp");
  background-size: cover;
  background-position: center;
}
.ingress { font-size: 1.25rem; color: var(--fg-svag); margin-bottom: var(--matt-4); }

.knapp {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  background: var(--accent);
  color: #06231e;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 200ms ease, filter 200ms ease;
}
.knapp:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---- Kortrader --------------------------------------------------------- */
.kortrad {
  display: grid;
  gap: var(--matt-3);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .kortrad { grid-template-columns: repeat(3, 1fr); }
}
.kortrad article {
  padding: var(--matt-3);
  background: var(--bg-upphojd);
  border: 1px solid var(--linje);
  border-radius: 12px;
}
.kortrad p { color: var(--fg-svag); margin-bottom: 0; }

/* Scopat till tjänstesektionen — arbetssättsblocket delar .kortrad men ska
   inte ärva motiven. */
.tjanster .kortrad article {
  background-size: cover;
  background-position: center;
}
.tjanster .kortrad article:nth-child(1) { background-image: linear-gradient(rgb(19 23 32 / 0.78), rgb(19 23 32 / 0.94)), url("/assets/img/tjanst-system.webp"); }
.tjanster .kortrad article:nth-child(2) { background-image: linear-gradient(rgb(19 23 32 / 0.78), rgb(19 23 32 / 0.94)), url("/assets/img/tjanst-devops.webp"); }
.tjanster .kortrad article:nth-child(3) { background-image: linear-gradient(rgb(19 23 32 / 0.78), rgb(19 23 32 / 0.94)), url("/assets/img/tjanst-ai.webp"); }

.beta {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  font-family: var(--font-brod);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg-svag);
  border-radius: 999px;
  vertical-align: 0.15em;
}

/* ---- Band bakom arbetssättet ------------------------------------------- */
/* Helbredd med tung nedtoning i kanterna, så sektionen tonar in ur sidans
   bakgrund i stället för att stå som en klistrad ruta. */
.arbetssatt {
  background-image:
    linear-gradient(to bottom,
      var(--bg) 0%,
      rgb(11 13 16 / 0.84) 18%,
      rgb(11 13 16 / 0.8) 82%,
      var(--bg) 100%),
    url("/assets/img/band.webp");
  background-size: cover;
  background-position: center;
}

/* ---- Sektionsmarkör ---------------------------------------------------- */
.sektion h2::before, .sidfot h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--matt-2);
}

/* ---- Bakgrundslista ---------------------------------------------------- */
.bevislista { list-style: none; margin: 0; padding: 0; }
.bevislista li {
  display: grid;
  gap: var(--matt-1) var(--matt-3);
  padding-block: var(--matt-3);
  border-top: 1px solid var(--linje);
}
.bevislista li:last-child { border-bottom: 1px solid var(--linje); }
@media (min-width: 48rem) {
  .bevislista li { grid-template-columns: 14rem 12rem 1fr; align-items: baseline; }
}
.organisation { font-family: var(--font-rubrik); font-weight: 700; }
.relation { color: var(--accent); font-size: 0.9375rem; }
.beskrivning { color: var(--fg-svag); max-width: 62ch; }

/* ---- Om och sidfot ----------------------------------------------------- */
.omtext p + p { margin-top: var(--matt-2); }

.sidfot { border-top: 1px solid var(--linje); padding-block: var(--matt-5); }
.kontaktlankar { display: flex; flex-wrap: wrap; gap: var(--matt-3); font-size: 1.125rem; }
.bolagsuppgifter { color: var(--fg-svag); font-size: 0.875rem; margin-top: var(--matt-3); }

/* Delningsraden hålls visuellt lättare än kontaktuppgifterna ovanför —
   det är en sekundär åtgärd, inte ett sätt att nå fram. */
.delarad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--matt-2);
  margin-top: var(--matt-3);
  font-size: 0.9375rem;
}
.delarad a { text-decoration: none; border-bottom: 1px solid transparent; }
.delarad a:hover { border-bottom-color: currentColor; }

.delaetikett {
  position: relative;
  padding-left: 1.55rem;
  color: var(--fg-svag);
}
.delaetikett::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.52rem;
  background: currentColor;
  /* Delningsikon: nod uppe till höger, nod nere till vänster, streck emellan. */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="10.5" x2="15.4" y2="6.5"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="10.5" x2="15.4" y2="6.5"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/></svg>') center / contain no-repeat;
}

/* Knapparna skapas av JavaScript. De ska se ut som länkarna bredvid, inte
   som formulärkontroller. */
.delaknapp {
  appearance: none;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  transition: color 200ms ease;
}
.delaknapp:hover { border-bottom-color: currentColor; }
.delaknapp-klar { color: var(--fg); border-bottom-color: transparent; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Sektionsingress ---------------------------------------------------- */
/* Egen grad. Tidigare återanvändes .ingress här, vilket gav en sektionsledtext
   samma tyngd som sidans huvudlöfte. */
.sektionslead {
  font-size: 1.0625rem;
  color: var(--fg-svag);
  margin-bottom: var(--matt-4);
}

/* ---- Produktlista ------------------------------------------------------- */
/* Radlista och inte kort: sidan hade tre likadana kortrutnät i följd, och
   kortet blev en behållare utan mening. Här bär raden en länk, vilket gör
   hela ytan till en handling. */
.produktlista { list-style: none; margin: 0; padding: 0; }
.produktlista li {
  position: relative;
  padding-block: var(--matt-3);
  border-top: 1px solid var(--linje);
  transition: border-color 250ms ease;
}
.produktlista li:last-child { border-bottom: 1px solid var(--linje); }
.produktlista h3 {
  display: flex;
  align-items: center;
  gap: var(--matt-1);
  margin-bottom: var(--matt-1);
}
.produktlista h3 a {
  color: var(--fg);
  text-decoration: none;
}
/* Hela raden blir klickbar utan att länktexten tappar sitt namn. */
.produktlista h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.produktlista h3 a::before {
  content: "↗";
  position: absolute;
  right: 0;
  top: var(--matt-3);
  color: var(--accent);
  opacity: 0;
  transform: translate(-0.4rem, 0.4rem);
  transition: opacity 250ms ease, transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.produktlista p { color: var(--fg-svag); margin: 0; padding-right: 3rem; }
.produktlista li:hover { border-color: var(--accent); }
.produktlista li:hover h3 a { color: var(--accent); }
.produktlista li:hover h3 a::before { opacity: 1; transform: none; }
.produktlista li:has(a:focus-visible) { border-color: var(--accent); }

/* ---- Principer ---------------------------------------------------------- */
/* Fristående text på bandet i stället för kort. Bandet är bakgrunden — att
   lägga rutor ovanpå det dolde just det som gör sektionen till en paus. */
.principer {
  display: grid;
  gap: var(--matt-4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .principer { grid-template-columns: repeat(3, 1fr); gap: var(--matt-3); }
}
.principer article { border-top: 2px solid var(--accent); padding-top: var(--matt-2); }
.principer h3 { margin-bottom: var(--matt-1); }
.principer p { color: var(--fg-svag); margin: 0; }

/* ---- Rörelse ------------------------------------------------------------ */
/* Ett medvetet ögonblick: sidans löfte träder fram vid ankomst. Ingen
   återkommande sektionsentré — den läser som en mall, inte som avsikt.
   Animationen är ren CSS, så innehållet finns även utan JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .ingress, .hero .knapp {
    animation: stig 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  .hero .ingress { animation-delay: 90ms; }
  .hero .knapp { animation-delay: 180ms; }
}
@keyframes stig {
  from { opacity: 0; transform: translateY(0.75rem); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}