/* ==============================================================
   BETALTE UNDERSØKELSER — "Kalk & kobolt"
   --------------------------------------------------------------
   Sajten er en testredaksjon, ikke en annonseplass. Hele uttrykket
   skal si "vi har målt dette" og ikke "tjen penger nå": kald kalk,
   grafitt, én mettet kobolt, og tallene satt i mono slik at en
   karakter leses som en måling.

   Fargelåsen: kobolt er eneste aksent på hele nettstedet. Dukker
   det opp en grønn hake eller en gul stjerne et sted, er det en feil.

   Det finnes nøyaktig ett mørkt felt på siden — testvinneren. Det er
   ikke pynt: det mørke feltet ER konklusjonen, og resten av siden
   holder seg lys slik at det feltet får være det eneste som roper.
   ============================================================== */

:root {
  /* flate */
  --ink:        #0e1116;
  --ink-2:      #1a1f28;
  --ink-3:      #2b323d;
  --chalk:      #f1f3f5;
  --chalk-2:    #e7eaee;
  --surface:    #ffffff;

  /* aksent — den eneste */
  --cobalt:     #2038e8;
  --cobalt-deep:#1628b4;
  --cobalt-wash:#eef0fe;

  /* tekst */
  --grey:       #59616d;
  --grey-light: #9aa2ae;
  --line:       #dde1e6;
  --line-dark:  #2c333e;

  /* form — én radius-skala, ingen blanding */
  --r-lg: 22px;
  --r:    14px;
  --r-sm: 9px;

  --shadow: 0 18px 50px -22px rgba(14, 17, 22, .28);
  --shadow-lift: 0 26px 60px -24px rgba(14, 17, 22, .34);

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.32, .72, 0, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--chalk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

::selection { background: var(--cobalt); color: #fff; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

/* ---------------- typografi ---------------- */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 3.7vw, 2.9rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.015em; }

p { max-width: 66ch; }

.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--grey);
  max-width: 54ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cobalt-deep);
  margin-bottom: 1.1rem;
}

.prose h2 { margin: 3rem 0 1rem; }
.prose h3 { margin: 2.2rem 0 .7rem; }
.prose p + p { margin-top: 1.1rem; }
.prose p { color: var(--ink-2); }
.prose ul { margin: 1.2rem 0; padding-left: 1.3rem; max-width: 66ch; }
.prose li + li { margin-top: .55rem; }
.prose li::marker { color: var(--cobalt); }
.prose strong { font-weight: 700; color: var(--ink); }

/* ---------------- knapper ---------------- */

.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: .8rem .9rem .8rem 1.5rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.btn-primary {
  background: var(--cobalt);
  color: #fff;
  box-shadow: 0 12px 30px -14px rgba(32, 56, 232, .85);
}
.btn-primary:hover { background: var(--cobalt-deep); box-shadow: 0 18px 38px -14px rgba(32, 56, 232, .9); }
.btn-primary:active { transform: scale(.975); }

/* knapp-i-knapp: pilen bor i sin egen sirkel, flush mot høyre innerkant */
.btn .pip {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .17);
  display: grid; place-items: center;
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.btn:hover .pip { transform: translate(3px, -2px); background: rgba(255, 255, 255, .26); }
.btn .pip svg { width: 15px; height: 15px; stroke: currentColor; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  padding: .8rem 1.5rem;
  background-color: var(--surface);
}
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-ghost:active { transform: scale(.975); }

.btn-on-dark {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7);
}
.btn-on-dark:hover { background: #f2f3f5; }
.btn-on-dark:active { transform: scale(.975); }
.btn-on-dark .pip { background: rgba(14, 17, 22, .09); }
.btn-on-dark:hover .pip { background: rgba(14, 17, 22, .15); }

/* ---------------- toppnav ---------------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(241, 243, 245, .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  height: 70px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand-mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px; background: var(--cobalt);
  display: grid; place-items: center;
}
.brand-mark svg { width: 14px; height: 14px; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--grey);
  text-decoration: none; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 600; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; border: 1.5px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm);
  cursor: pointer; position: relative;
}
.nav-toggle span {
  position: absolute; left: 11px; width: 18px; height: 1.8px;
  background: var(--ink); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 70px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .5rem 24px 1.2rem;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .4s var(--ease), visibility .3s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a:last-child { border-bottom: 0; }
}

/* ---------------- seksjonsrytme ---------------- */

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
section.tight { padding: clamp(3rem, 6vw, 4.5rem) 0; }
.on-white { background: var(--surface); }
.on-chalk2 { background: var(--chalk-2); }

.sec-head { max-width: 60ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.sec-head p { margin-top: 1rem; }

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

.hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero h1 { margin-bottom: 1.4rem; }
.hero .lede { margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------------- testkort (dobbeltramme) ---------------- */

.frame {
  background: var(--chalk-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px;
}
.frame-in {
  background: var(--surface);
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow);
  overflow: hidden;
}

.card-top {
  padding: 1.5rem 1.6rem 1.3rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.card-rank {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cobalt-deep);
  background: var(--cobalt-wash);
  padding: .35rem .6rem; border-radius: var(--r-sm);
  white-space: nowrap;
}
.card-name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.card-name + .card-sub { color: var(--grey); font-size: .95rem; margin-top: .15rem; }

.score { text-align: right; flex: none; }
.score-num {
  font-family: var(--mono); font-weight: 700;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.04em;
  color: var(--ink);
}
.score-num small { font-size: .95rem; font-weight: 500; color: var(--grey-light); letter-spacing: 0; }
.score-label {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grey-light); margin-top: .3rem;
}

.card-rows { padding: .4rem 1.6rem 1.1rem; }
.card-rows dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.card-rows dt {
  font-size: .93rem; color: var(--grey);
  padding: .62rem 1rem .62rem 0; border-bottom: 1px solid var(--line);
}
.card-rows dd {
  font-size: .93rem; font-weight: 600; color: var(--ink); text-align: right;
  padding: .62rem 0; border-bottom: 1px solid var(--line);
}
.card-rows dl > :nth-last-child(1),
.card-rows dl > :nth-last-child(2) { border-bottom: 0; }

.card-foot { padding: 0 1.6rem 1.6rem; }
.card-foot .btn { width: 100%; justify-content: space-between; }
.card-note {
  font-size: .78rem; color: var(--grey-light); margin-top: .8rem; text-align: center;
  max-width: none;
}

/* ---------------- metodestripe ---------------- */

.method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.method > div {
  padding: 1.9rem 1.8rem 1.9rem 0;
  border-left: 1px solid var(--line);
  padding-left: 1.8rem;
}
.method > div:first-child { border-left: 0; padding-left: 0; }
.method h3 { margin-bottom: .5rem; }
.method p { font-size: .96rem; color: var(--grey); }
@media (max-width: 800px) {
  .method { grid-template-columns: 1fr; }
  .method > div { border-left: 0; padding: 1.4rem 0; border-top: 1px solid var(--line); }
  .method > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------------- vinnerfeltet (eneste mørke flate) ---------------- */

.winner {
  background: var(--ink);
  color: #cdd3dc;
  position: relative;
  overflow: hidden;
}
.winner::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(78% 120% at 82% 8%, rgba(32, 56, 232, .34), transparent 62%);
  pointer-events: none;
}
.winner .wrap { position: relative; }
.winner h2, .winner h3 { color: #fff; }
.winner .eyebrow { color: #8fa2ff; }
.winner .lede { color: #a9b2be; }

.winner-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 900px) { .winner-grid { grid-template-columns: 1fr; } }

.winner-points { margin: 2rem 0 2.3rem; display: grid; gap: 1.15rem; }
.winner-points li { list-style: none; display: flex; gap: .9rem; align-items: flex-start; }
.winner-points svg { width: 19px; height: 19px; flex: none; margin-top: 3px; stroke: #8fa2ff; }
.winner-points span { color: #c3cad4; max-width: 52ch; }
.winner-points b { color: #fff; font-weight: 600; }

.winner-panel {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r-lg);
  padding: 8px;
}
.winner-panel-in {
  background: rgba(255, 255, 255, .035);
  border-radius: calc(var(--r-lg) - 8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
  padding: 1.8rem 1.7rem;
}
.panel-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.panel-sub { font-size: .92rem; color: #98a1ad; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.winner-panel .score-num { color: #fff; }
.winner-panel .score-num small { color: #6f7885; }
.winner-panel .card-note { color: #6f7885; }

.winner-panel dl { display: grid; grid-template-columns: auto 1fr; gap: 0; }
.winner-panel dt {
  font-size: .93rem; color: #98a1ad;
  padding: .7rem 1rem .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.winner-panel dd {
  font-size: .93rem; font-weight: 600; color: #fff; text-align: right;
  padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.winner-panel dl > :nth-last-child(1),
.winner-panel dl > :nth-last-child(2) { border-bottom: 0; }
.winner-panel .btn { width: 100%; justify-content: space-between; margin-top: 1.5rem; }

/* ---------------- rangeringen (bento) ---------------- */

.rank-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.rank-card {
  grid-column: span 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.rank-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.rank-card.wide { grid-column: span 3; }
.rank-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.rank-card h3 { font-size: 1.22rem; }
.rank-card .score-num { font-size: 1.5rem; }
.rank-card p { font-size: .95rem; color: var(--grey); flex: 1; }
.rank-card .verdict {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-light);
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.rank-card .verdict a { color: var(--cobalt-deep); font-weight: 600; text-decoration: none; }
.rank-card .verdict a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .rank-grid { grid-template-columns: 1fr; }
  .rank-card, .rank-card.wide { grid-column: span 1; }
}

/* ---------------- fremgangsmåte ---------------- */

/* Fremgangsmåten er en rekkefølge, ikke tre likeverdige bokser. Sporet under
   sier det: én kobolt linje gjennom hele bredden, med en node der hvert steg
   begynner. Ingen "Steg 1 / Steg 2"-etiketter — verbet er etiketten. */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  position: relative;
  padding-top: 2.6rem;
}
.steps::before {
  content: ""; position: absolute; top: 7px; left: 0; right: 0;
  height: 2px; background: var(--line);
}
.steps > div { position: relative; }
.steps > div::before {
  content: ""; position: absolute; top: -2.6rem; left: 0;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--surface); border: 2px solid var(--cobalt);
}
.steps > div:first-child::before { background: var(--cobalt); }
.steps h3 { margin-bottom: .5rem; }
.steps p { font-size: .96rem; color: var(--grey); }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 2rem; }
  .steps::before { top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto; }
  .steps > div::before { top: 6px; left: -2rem; }
}

/* ---------------- ærlig-boks ---------------- */

.honest {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.9rem, 3.5vw, 2.8rem);
  box-shadow: var(--shadow);
}
.honest h3 { margin-bottom: .8rem; }
.honest p + p { margin-top: .9rem; }

/* ---------------- funn og kilder ---------------- */

/* Et funn som er alvorlig nok til å styre karakteren. Ikke pynt: dette er
   grunnen til at et panel står der det står, og det skal være mulig å lese
   bare denne boksen og skjønne hvorfor. */
.finding {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
}
.finding h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.finding p { font-size: .98rem; }
.finding p + p { margin-top: .8rem; }
.finding .tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt-deep);
  display: block; margin-bottom: .7rem;
}

/* Kildene. En påstand om at et panel stenger kontoer må kunne etterprøves,
   ellers er den bare enda en anonym anklage på nettet. */
.kilder {
  border-top: 1px solid var(--line);
  margin-top: 3rem; padding-top: 1.5rem;
}
.kilder h2 { font-size: 1.05rem; margin: 0 0 .9rem; }
.kilder ol { padding-left: 1.2rem; margin: 0; }
.kilder li { font-size: .9rem; color: var(--grey); }
.kilder li + li { margin-top: .5rem; }
.kilder a { word-break: break-word; }
.kilder .dato {
  font-family: var(--mono); font-size: .72rem; color: var(--grey-light);
  margin-top: 1rem; display: block;
}

/* sponsormerking */
.sponsor-note {
  background: var(--cobalt-wash);
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  font-size: .93rem;
  color: var(--ink-2);
  max-width: none;
}
.sponsor-note b {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cobalt-deep);
  display: block; margin-bottom: .35rem;
}

/* ---------------- FAQ ---------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 1.35rem 3rem 1.35rem 0;
  font-weight: 600; font-size: 1.06rem; color: var(--ink);
  cursor: pointer; list-style: none; position: relative;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--cobalt-deep); }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.8px solid var(--grey); border-bottom: 1.8px solid var(--grey);
  transform: rotate(45deg);
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 0 1.5rem; color: var(--grey); }
.faq .answer p + p { margin-top: .8rem; }

/* ---------------- skjema ---------------- */

.form-grid { display: grid; gap: 1.2rem; max-width: 520px; }
.field label {
  display: block; font-weight: 600; font-size: .93rem;
  color: var(--ink); margin-bottom: .4rem;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font); font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: .78rem .9rem;
  transition: border-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #7b838f; }
.field input:focus, .field textarea:focus { border-color: var(--cobalt); }
.field .help { font-size: .84rem; color: var(--grey); margin-top: .35rem; }
.field textarea { resize: vertical; min-height: 140px; }

/* ---------------- footer ---------------- */

.foot {
  background: var(--ink);
  color: #98a1ad;
  padding: clamp(3.5rem, 6vw, 5rem) 0 2.2rem;
}
.foot a { color: #c3cad4; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.foot .brand { color: #fff; margin-bottom: .9rem; }
.foot h4 {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6f7885; margin-bottom: 1rem; font-weight: 500;
}
.foot ul { list-style: none; display: grid; gap: .6rem; }
.foot p { font-size: .93rem; max-width: 40ch; }
.foot-base {
  padding-top: 1.6rem; font-size: .85rem; color: #6f7885;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------------- bevegelse ---------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .reveal.in { opacity: 1; transform: none; }
}

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