/* ============================================================
   Vendorade typsnitt. CSP:n är default-src 'self' — inga externa
   anrop, alltså inga Google Fonts-länkar. Filerna ligger i
   vendor/fonts/ tillsammans med sina OFL-licenser.

   Båda är VARIABLA: en fil per subset täcker vikt 400–700. Därför
   font-weight-intervallet i deklarationen; sätt aldrig upp separata
   filer per vikt, det vore fyra gånger så mycket att ladda.

   Familjen Grotesk  — logotyp och rubriker. Svenskritad, spetsigt k.
   Schibsted Grotesk — brödtext. Ritad för redaktionellt bruk och
                       bär långa stycken bättre än Familjen.
   ============================================================ */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/familjen-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/familjen-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   BitBlocks 01 AB — site styles
   Shares its structure with the Roslagen Resources sheet; the accent is
   retuned from copper to teal, with violet as the second AI accent.
   Mobile-first. Breakpoints: 320 / 768 / 1024 / 1280.
   ============================================================ */

:root {
  /* — brand palette — */
  --berg:        #171C24;
  --berg-2:      #12161D;
  --berg-3:      #232C38;
  --paper:       #F4F6F8;
  --paper-2:     #E7EBF0;
  --grayberg:    #8A94A6;
  /* Three accent tones, each measured against the surface it sits on:
     --volt     solid fill, white text on it   → 5.2:1
     --volt-lt  accent text on berg            → 8.9:1
     --volt-ink accent text on paper           → 5.6:1                       */
  --volt:      #0E7A6E;
  --volt-lt:   #35D0C0;
  --volt-ink:  #0E6F65;
  --signal:    #8B7BF7;   /* second accent — AI/graph, 5.1:1 on berg */
  --copper:    #B9722F;   /* the group tone, used sparingly */

  /* — semantic — */
  --ink:         #20262E;
  --ink-soft:    #4A5462;   /* 6.9:1 on paper */
  --on-dark:     #F1F4F7;
  --on-dark-soft:#B4BDCA;   /* 8.6:1 on berg */
  --rule:        #DCE1E7;
  --rule-dark:   #333D4C;

  /* — spacing scale (4px base) — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --radius: 8px;
  --shadow-1: 0 1px 2px rgba(23,28,36,.08), 0 4px 16px rgba(23,28,36,.06);
  --shadow-2: 0 2px 6px rgba(23,28,36,.10), 0 16px 40px rgba(23,28,36,.10);
  /* Brodtext respektive display. Reservkedjan ar densamma i bada, sa
     ett uteblivet typsnitt ger degradering och inte layoutkollaps. */
  --font:         "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-display: "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --header-h: 64px;
  --wrap: 1180px;
}

/* — reset — */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2; margin: 0 0 var(--s4); letter-spacing: -0.015em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.25rem; letter-spacing: -0.005em; }
p  { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* text containment (per project UI standards) */
h1, h2, h3, p, dd, li, .card-content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Body copy may hyphenate; display type must not — auto-hyphenation turns
   "någon" into "nå-gon" across a line break in the hero. */
p, dd, li, .card-content { hyphens: auto; }
h1, h2, h3 { hyphens: manual; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--volt); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--radius); text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: var(--s3); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s4);
}

/* ============================ header ============================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18,22,29,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.site-header.is-scrolled {
  background: rgba(18,22,29,.96);
  border-bottom-color: var(--rule-dark);
}
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s4);
}

.brand {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--on-dark);
  margin-right: auto; min-height: 44px;
}
/* Märket är numera en <img>, inte inline-SVG. Radien måste sättas här —
   filen har fyrkantiga hörn så att samma fil kan användas i alla grader. */
.brand-mark { width: 34px; height: 34px; flex: none; border-radius: 7px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1rem; letter-spacing: .01em; }

.nav-toggle {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--rule-dark); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--on-dark); border-radius: 2px; transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle-bar::before { transform: translateY(-6px); }
.nav-toggle-bar::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-2px) rotate(-45deg); }

.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(18,22,29,.98);
  border-bottom: 1px solid var(--rule-dark);
  padding: var(--s2) var(--s4) var(--s4);
}
.nav-list.is-open { display: block; }
.nav-list a {
  display: flex; align-items: center; min-height: 44px;
  color: var(--on-dark-soft); text-decoration: none; font-size: 1rem;
  border-bottom: 1px solid var(--rule-dark);
}
.nav-list li:last-child a { border-bottom: 0; }
.nav-list a:hover, .nav-list a:focus-visible { color: var(--volt-lt); }

.lang-switch { display: flex; border: 1px solid var(--rule-dark); border-radius: var(--radius); overflow: hidden; flex: none; }
.lang-switch button {
  min-width: 44px; min-height: 44px; padding: 0 var(--s2);
  background: none; border: 0; cursor: pointer;
  color: var(--on-dark-soft); font: inherit; font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
}
.lang-switch button:hover { color: var(--on-dark); }
.lang-switch button.is-active { background: var(--volt); color: #fff; }

/* ── narrow phones: the header lockup, not the layout, is what overflows ── */
@media (max-width: 480px) {
  .header-inner { gap: var(--s2); }
  .brand { gap: var(--s2); }
  .brand-mark { width: 30px; height: 30px; }
  .brand-text strong { font-size: .9375rem; }
  .lang-switch button { min-width: 40px; padding: 0 var(--s1); }
}
@media (max-width: 420px) {
  /* drop the second word rather than truncating or clipping the first */
  .bn-2 { display: none; }
}

/* ============================ hero ============================ */
.hero {
  position: relative;
  min-height: min(76vh, 660px);
  display: flex; align-items: flex-end;
  background: var(--berg-2);
  color: var(--on-dark);
  overflow: hidden;
  padding-block: var(--s8) var(--s6);
}
.hero-scene { position: absolute; inset: 0; }
.hero-scene .mine { width: 100%; height: 100%; }
.hero-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(18,22,29,.55) 0%, rgba(18,22,29,.30) 26%, rgba(18,22,29,.80) 76%, var(--berg-2) 100%),
    linear-gradient(to right, rgba(18,22,29,.72) 0%, rgba(18,22,29,.30) 55%, rgba(18,22,29,.10) 100%);
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { max-width: 18ch; text-shadow: 0 2px 24px rgba(10,14,20,.75); }
.eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--volt-ink); margin-bottom: var(--s3);
}
.hero .eyebrow, .band-dark .eyebrow, .band-tech .eyebrow { color: var(--volt-lt); }
/* the third beat of the headline — its own line, its own weight */
.hero-kicker {
  font-size: 1.25rem; font-weight: 700; line-height: 1.35;
  color: var(--volt-lt); max-width: 30ch;
  margin: calc(var(--s4) * -1) 0 var(--s4);
  text-shadow: 0 2px 20px rgba(10,14,20,.8);
}
.lede { font-size: 1.125rem; max-width: 58ch; color: var(--on-dark-soft); }

/* single-statement band — no cards, just the claim */
.statement { max-width: 760px; }
.statement-lede { font-size: 1.375rem; line-height: 1.45; color: var(--on-dark); margin-bottom: var(--s4); }
.statement-body { font-size: 1.0625rem; color: var(--on-dark-soft); max-width: 62ch; }


.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s5);
  border-radius: var(--radius); text-decoration: none;
  font-weight: 700; font-size: 1rem; border: 2px solid transparent;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--volt); color: #fff; }
.btn-primary:hover { background: var(--volt-ink); }
.btn-ghost { border-color: var(--grayberg); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--volt-lt); color: var(--volt-lt); }

.scroll-hint {
  position: absolute; left: 50%; bottom: var(--s5); translate: -50% 0; z-index: 2;
  width: 26px; height: 42px; border: 2px solid var(--grayberg); border-radius: 14px;
  display: none;
}
.scroll-hint span {
  position: absolute; left: 50%; top: 8px; translate: -50% 0;
  width: 4px; height: 8px; border-radius: 2px; background: var(--volt-lt);
  animation: scrollDot 1.9s ease-in-out infinite;
}
@keyframes scrollDot { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(14px); opacity: .2 } }

/* ── hero SVG animation ── */
.sheave-a, .sheave-b { transform-box: fill-box; transform-origin: center; }
.sheave-a { animation: spin 5.5s linear infinite; }
.sheave-b { animation: spinBack 5.5s linear infinite; }
@keyframes spin     { to { transform: rotate(360deg) } }
@keyframes spinBack { to { transform: rotate(-360deg) } }

.cage { animation: hoist 14s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes hoist {
  0%   { transform: translateY(384px) }
  8%   { transform: translateY(384px) }
  42%  { transform: translateY(392px) }
  50%  { transform: translateY(700px) }
  58%  { transform: translateY(700px) }
  92%  { transform: translateY(392px) }
  100% { transform: translateY(384px) }
}

.cart      { animation: haul 11s linear infinite; }
.cart-1    { animation-duration: 13s; }
.cart-2    { animation-duration: 17s; animation-direction: reverse; }
.cart-3    { animation-duration: 15s; animation-delay: -4s; }
@keyframes haul {
  0%   { transform: translateX(190px) }
  46%  { transform: translateX(548px) }
  54%  { transform: translateX(660px) }
  100% { transform: translateX(1020px) }
}

.lamps circle { animation: flicker 4.2s ease-in-out infinite; }
.lamps circle:nth-child(2) { animation-delay: -1.6s; }
.lamps circle:nth-child(3) { animation-delay: -3.1s; }
@keyframes flicker { 0%,100% { opacity: .55 } 45% { opacity: 1 } 70% { opacity: .72 } }


.win { fill: #FFD9A0; animation: win 5s steps(1) infinite; }
.win-2 { animation-delay: -2.4s; }
@keyframes win { 0%,70% { opacity: .85 } 71%,100% { opacity: .28 } }


/* ── hero SVG: IT/AI layer ── */
.net-nodes circle { animation: nodePulse 4.6s ease-in-out infinite; }
.net-nodes circle:nth-child(2n)  { animation-delay: -1.5s; }
.net-nodes circle:nth-child(3n)  { animation-delay: -2.9s; }
@keyframes nodePulse { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

.net-edges path { stroke-dasharray: 5 11; animation: dataFlow 7s linear infinite; }
@keyframes dataFlow { to { stroke-dashoffset: -64 } }

.traces path { stroke-dasharray: 11 17; animation: traceFlow 3.6s linear infinite; }
.traces path:nth-child(2) { animation-delay: -1.1s; }
.traces path:nth-child(3) { animation-delay: -2.0s; }
.traces path:nth-child(4) { animation-delay: -0.6s; }
@keyframes traceFlow { to { stroke-dashoffset: -56 } }

.vias circle { animation: nodePulse 3.2s ease-in-out infinite; }

.leds rect { animation: led 2.4s steps(1) infinite; }
.leds rect:nth-child(2n) { animation-delay: -.7s; }
.leds rect:nth-child(3n) { animation-delay: -1.5s; }
.leds rect:nth-child(5n) { animation-delay: -1.9s; }
@keyframes led { 0%,45% { opacity: 1 } 46%,100% { opacity: .22 } }

/* data packets running the shaft */
.pk   { animation: packet 3.6s linear infinite; }
.pk-2 { animation-delay: -1.2s; }
.pk-3 { animation-delay: -2.4s; }
@keyframes packet {
  0%   { transform: translateY(372px); opacity: 0 }
  12%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { transform: translateY(748px); opacity: 0 }
}

/* ============================ bands ============================ */
.band { padding-block: var(--s8); }
.band-paper { background: var(--paper); color: var(--ink); }
.band-dark  { background: var(--berg); color: var(--on-dark); }
.band-tech  { background: linear-gradient(180deg, var(--berg) 0%, var(--berg-2) 100%); color: var(--on-dark); }
.band-dark .eyebrow, .band-tech .eyebrow { color: var(--volt-lt); }
.band-dark .section-lede, .band-tech .section-lede,
.band-tech p { color: var(--on-dark-soft); }

.section-lede { font-size: 1.125rem; max-width: 62ch; color: var(--ink-soft); margin-bottom: var(--s6); }

/* ============================ cards ============================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5);
  align-items: stretch;
}
.card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card-content { flex: 1; color: var(--ink-soft); margin: 0; }
.card h3 { margin-bottom: var(--s3); }

.card-dark {
  background: var(--berg-3);
  border-color: var(--rule-dark);
  box-shadow: none;
}
.card-dark .card-content { color: var(--on-dark-soft); }
.card-dark:hover { box-shadow: 0 16px 40px rgba(0,0,0,.35); border-color: var(--volt); }

.card-icon { width: 44px; height: 44px; margin-bottom: var(--s4); }
.card-icon svg {
  width: 100%; height: 100%;
  fill: none; stroke: var(--volt-ink);
  stroke-linecap: round; stroke-linejoin: round;
}
.card-icon svg .solid { fill: var(--volt-ink); stroke: none; }

.tag {
  display: inline-flex; align-self: flex-start; align-items: center;
  height: 24px; padding: 0 var(--s3); margin-bottom: var(--s3);
  border-radius: 12px; background: rgba(53,208,192,.16); color: var(--volt-lt);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.fineprint { font-size: .875rem; color: var(--grayberg); margin-top: var(--s6); max-width: 70ch; }
.band-paper .fineprint { color: var(--ink-soft); }

/* content the owner still has to supply — visible in dev, harmless in prod */
.needs-review { color: var(--volt-ink); font-style: italic; }
.band-dark .needs-review, .band-tech .needs-review,
.site-footer .needs-review { color: var(--volt-lt); }

/* ============================ tech / block model ============================ */
.tech-grid { display: grid; gap: var(--s7); align-items: center; }
.tech-copy h2 { color: var(--on-dark); }

.spec-list { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.spec-list li {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between;
  padding: var(--s3) 0; border-top: 1px solid var(--rule-dark);
  font-size: .9375rem;
}
.spec-list span { color: var(--grayberg); }
.spec-list b { color: var(--on-dark); font-weight: 700; }

.tech-viz { margin: 0; }
.viz-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 45%, #2A3340 0%, #151A22 72%);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;
}
/* Gäller ALLA figurer, inte en enskild id. Regeln var hårdkodad till
   #blockCanvas från Roslagen-sajten, där det fanns exakt en figur — nya
   canvaser fick därför ingen storlek alls och kollapsade till 1 px. */
.viz-frame canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.viz-frame canvas:active { cursor: grabbing; }
.viz-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s5); text-align: center; color: var(--on-dark-soft); }

.viz-legend {
  position: absolute; left: var(--s4); bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
  font-size: .75rem; color: var(--on-dark-soft);
  background: rgba(18,22,29,.72); padding: var(--s2) var(--s3); border-radius: var(--radius);
}
.lg-swatch {
  width: 76px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #1F3A46 0%, #0E7A6E 34%, #35D0C0 68%, #8B7BF7 100%);
  order: 2;
}
.lg-lo { order: 1; } .lg-hi { order: 3; }

.viz-controls { margin-top: var(--s4); }
.viz-controls label {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  font-size: .9375rem; color: var(--on-dark-soft); margin-bottom: var(--s2);
}
.viz-controls output { color: var(--volt-lt); font-weight: 700; font-variant-numeric: tabular-nums; }
input[type="range"] {
  width: 100%; height: 44px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--rule-dark); }
input[type="range"]::-moz-range-track            { height: 6px; border-radius: 3px; background: var(--rule-dark); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -9px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--volt-lt);
  border: 3px solid var(--berg-2); box-shadow: 0 1px 6px rgba(0,0,0,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border: 3px solid var(--berg-2); border-radius: 50%;
  background: var(--volt-lt);
}
.viz-count { margin: var(--s2) 0 0; font-size: .9375rem; color: var(--on-dark-soft); }
.viz-count b { color: var(--on-dark); font-variant-numeric: tabular-nums; }
.viz-controls .fineprint { margin-top: var(--s3); }
/* ersatt av den generella regeln längst ned i filen */

/* ============================ contact ============================ */
.contact-grid { display: grid; gap: var(--s7); align-items: start; }
.contact-list { margin: 0; }
.contact-list > div {
  display: grid; gap: var(--s1);
  padding: var(--s4) 0; border-top: 1px solid var(--rule);
}
.contact-list > div:last-child { border-bottom: 1px solid var(--rule); }
.contact-list dt { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.contact-list dd { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.contact-list a { color: var(--volt-ink); text-underline-offset: 3px; }

/* ============================ footer ============================ */
.site-footer {
  background: var(--berg-2); color: var(--on-dark-soft);
  padding-block: var(--s6); border-top: 1px solid var(--rule-dark);
  font-size: .875rem;
}
/* En rad, inte ett rutnät. Wrap gör att den bryter snyggt på telefon
   i stället för att spilla ut. */
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.site-footer a { color: var(--on-dark-soft); text-decoration: underline;
                 text-underline-offset: 2px; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--volt-lt); }
.site-footer p { margin: 0; }

/* ============================ breakpoints ============================ */
@media (min-width: 768px) {
  .wrap { padding-inline: var(--s5); }
  h1 { font-size: 3rem; }
  /* 72 px, inte 96. Sex band à 96 upp och ned blir nästan 1 200 px ren
     luft — mer än en hel skärm. 72 ger fortfarande tydlig sektionsgräns. */
  .band { padding-block: 72px; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .footer-inner { grid-template-columns: 1fr auto; align-items: center; }
  .scroll-hint { display: block; }
}

@media (min-width: 1024px) {
  .wrap { padding-inline: var(--s6); }
  h1 { font-size: 3.5rem; }
  .nav-toggle { display: none; }
  .nav-list {
    display: flex; gap: var(--s5);
    position: static; background: none; border: 0; padding: 0;
  }
  .nav-list a { border-bottom: 0; font-size: .9375rem; font-weight: 600; }
  .tech-grid { grid-template-columns: 1fr 1.15fr; gap: var(--s8); }

  /* Two-column hero: copy owns the left, the mine gets its own stage on the
     right. Narrowing the scene box also means the SVG is sliced far less
     aggressively, so the underground levels stay in frame. */
  .hero { align-items: center; }
  .hero-scene { left: 36%; }
  .hero-fade {
    background:
      linear-gradient(to bottom, rgba(18,22,29,.42) 0%, rgba(18,22,29,0) 30%, rgba(18,22,29,.55) 84%, var(--berg-2) 100%),
      linear-gradient(to right, var(--berg-2) 0%, rgba(18,22,29,.62) 24%, rgba(18,22,29,0) 56%);
  }
  /* constrain the copy, not the wrapper — the wrapper keeps the page gutter */
  .hero-copy > * { max-width: 620px; }
  /* this headline is a full two sentences, so it takes a smaller size than
     Roslagen's — at 3.5rem it ran to five lines and swallowed the hero */
  .hero-copy h1 { font-size: 2.75rem; max-width: 21ch; }
}

@media (min-width: 768px) {
  .hero-kicker { font-size: 1.5rem; }
  .statement-lede { font-size: 1.5rem; }
}

@media (min-width: 1280px) {
  .hero-copy h1 { font-size: 3.125rem; }
}

/* ============================ motion / print ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheave-a, .sheave-b, .cage, .cart, .lamps circle, .scroll-hint span,
  .net-nodes circle, .net-edges path, .traces path, .vias circle,
  .leds rect, .pk { animation: none !important; }
  .cage { transform: translateY(392px); }
  .cart-1 { transform: translateX(300px); }
  .cart-2 { transform: translateX(760px); }
  .cart-3 { transform: translateX(430px); }
  .net-edges path, .traces path { stroke-dasharray: none; }
  .pk-1 { transform: translateY(430px) }
  .pk-2 { transform: translateY(560px) }
  .pk-3 { transform: translateY(690px) }
  .btn:hover, .card:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}

@media print {
  .site-header, .hero-scene, .scroll-hint, .viz-controls, .lang-switch { display: none !important; }
  body { background: #fff; color: #000; }
  .band, .hero { padding-block: 16pt; }
}

/* ======================= datakällor (#data) ======================= */
/* Samma rutnätsmönster som .card-grid — lika höga kort, stretch, 280px
   minimibredd — men som lista, eftersom källorna är just en uppräkning. */
.src-grid {
  list-style: none; margin: 0 0 var(--s6); padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5);
  align-items: stretch;
}
.src {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.src h3 { margin: var(--s3) 0 var(--s2); font-size: 1.125rem; }
.src .card-content { flex: 1; }

/* Etiketten säger vad källan är för slags data. Färgen bär betydelse, men
   aldrig ensam — texten står alltid utskriven. */
.src-tag {
  align-self: flex-start;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid currentColor;
}
.src-open { color: var(--volt-ink); }   /* 5.6:1 mot vitt */
.src-lic  { color: #6B4DD6; }           /* signal är för ljus mot vitt — mörkad */
.src-own  { color: #8A5217; }           /* copper-ink, 5.7:1 mot vitt */

/* Grinden är sektionens poäng och ska läsas som ett påstående, inte som
   ännu ett kort. Därför bredare, mörkare och utan rutnät. */
.gate {
  display: flex; gap: var(--s5); align-items: flex-start;
  background: var(--berg);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: var(--s6);
}
.gate-icon { width: 40px; height: 40px; flex: none; }
.gate-icon rect, .gate-icon path { stroke: var(--volt-lt); }
.gate-icon circle { fill: var(--volt-lt); }
.gate-copy h3 { margin: 0 0 var(--s3); color: var(--on-dark); }
.gate-copy p  { margin: 0; color: var(--on-dark-soft); max-width: 68ch; }

@media (max-width: 560px) {
  /* Ikonen ovanför texten i stället för bredvid — sida vid sida lämnar
     under 200px åt brödtexten på en telefon. */
  .gate { flex-direction: column; gap: var(--s4); padding: var(--s5); }
}

/* Sajten är låst till engelska via <html data-lang-lock>. Växlaren ligger kvar
   i markup och båda ordböckerna finns kvar i content.js — bara valet är dolt.
   display:none tar den ur tabbordningen också, vilket aria-hidden inte gör.
   Ta bort den här regeln och attributet i <html> för att slå på svenskan igen. */
[data-lang-lock] .lang-switch { display: none; }

/* ===================== Skarns lockup (#plattform) ===================== */
/* Produktmärket, inte bolagets. BitBlocks märke sitter kvar i sidhuvudet.
   Vill du byta till kontaktlinsen: peka src på logo-skarn-alt.svg. */
.skarn-lockup {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s4);
}
.skarn-mark { width: 72px; height: 72px; flex: none; border-radius: 14px; }
.skarn-lockup h2 {
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
@media (max-width: 560px) {
  /* Märket krymper men stannar bredvid ordet — staplat blir lockupen
     två separata saker i stället för en. */
  .skarn-lockup { gap: var(--s3); }
  .skarn-mark { width: 52px; height: 52px; border-radius: 10px; }
}

/* ==================== figurer: sida → struktur ==================== */
/* Figurer behöver inte gå i full bredd. En 640×300-ritning uppblåst till
   1 114 px blir 520 px hög av ren skalning — måttet, inte innehållet, är
   det som gör sidan lång. Maxbredden håller höjden nere och ser mer
   komponerad ut än ett fullbrett diagram. */
.page-viz-fig { margin: 0 0 var(--s6); max-width: 880px; }
.page-viz {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s4); box-shadow: var(--shadow-1); overflow: hidden;
}
.page-viz svg { width: 100%; height: auto; display: block; }
.pv-th { fill: var(--volt-ink); font-weight: 700; letter-spacing: .1em; }
.pv-td { fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pv-num { fill: var(--ink); font-weight: 600; }
/* Raderna tonas in en och en. Fördröjningen kommer ur --i, satt per rad i JS
   — utan trappan ser tabellen ut att bara tändas, och då försvinner idén om
   att sidan LÄSES rad för rad.

   Grundtillståndet är SYNLIGT, inte dolt. Animationen använder fill-mode
   backwards, så det dolda läget gäller bara under fördröjningen och bara när
   .is-on faktiskt satts. Gjorde man tvärtom — dolt tills en observer utlöser —
   blir tabellen permanent osynlig så fort observern inte kör, vilket den inte
   gör i en dold flik eller bakgrundspanel. Innehåll får inte bero på det. */
.pv-row, .pv-arrow { opacity: 1; }
.is-on .pv-row {
  animation: pvIn .42s ease backwards;
  animation-delay: calc(var(--i) * .07s + .25s);
}
.is-on .pv-arrow { animation: pvIn .5s ease backwards; }
@keyframes pvIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-row, .pv-arrow { animation: none; }
}
.page-viz-fig figcaption { margin-top: var(--s3); }

/* ==================== figurer: källorna som lager ==================== */
.source-viz { margin: var(--s6) auto 0; max-width: 940px; }
.source-viz .viz-frame { aspect-ratio: 2 / 1; }
/* På telefon ger 2/1 bara ~142 px höjd, och då går fem plan i djupled inte
   att läsa. Formatet ska följa skärmen: brett och lågt när det finns bredd,
   högre när det inte gör det. */
@media (max-width: 700px) {
  .source-viz .viz-frame { aspect-ratio: 4 / 3; }
}
.src-legend {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-size: .875rem; color: var(--ink-soft);
}
.src-legend li { display: flex; align-items: center; gap: var(--s2); }
.src-legend i {
  width: 22px; height: 3px; border-radius: 2px; flex: none;
}
.k-open { background: #35D0C0; }
.k-lic  { background: #8B7BF7; }
.k-own  { background: #D68F4A; }

/* ==================== sektionen "i praktiken" ==================== */
.mat-grid {
  display: grid; gap: var(--s6) var(--s7);
  /* min() i minmax är inte pedanteri. Enbart minmax(320px, 1fr) tvingar
     spalten till 320 px även när bara 288 finns — spillet göms sedan av
     body{overflow-x:hidden} och syns aldrig i en spillmätning. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.mat-grid h3 { color: var(--on-dark); margin-bottom: var(--s2); }
.mat-body {
  color: var(--on-dark-soft); margin: 0 0 var(--s4);
  font-size: .9375rem; max-width: 46ch;
}
.mat-grid .viz-frame { aspect-ratio: 4 / 3; }

/* Går WebGL inte att skapa döljs canvasen och dess reglage i alla figurer,
   inte bara blockmodellens. Regeln var tidigare hårdkodad till #blockCanvas
   från Roslagen-sajten, där den var den enda figuren. */
.viz-unavailable canvas,
.viz-unavailable + .viz-controls input { display: none; }
.viz-unavailable {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(53,208,192,.10), transparent 70%),
    var(--berg-2);
}