/* Bangerpack Group — bangerpack.com
   Palett och typografi följer Bangerpacks designfacit (butiken bangerpack.se):
   Anton för display, Geist för brödtext, rosa #FF3DB4 som accent.
   Group-sidan kör mörkt läge; butiken kör ljust. */

:root {
  --svart: #08090B;
  --svart-2: #0E0F12;
  --svart-3: #16181D;
  --linje: #23262E;
  --linje-stark: #343846;
  --vit: #FFFFFF;
  --dimma: #C4C7D4;
  --dimma-svag: #8A8FA0;
  --accent: #FF3DB4;
  --accent-djup: #D6198F;
  --live: #B7FF2E;
  --radie: 16px;
  --radie-stor: 20px;
  --radie-pill: 999px;
  --max: 1180px;
  --gutter: 28px;

  /* Typografiskala. Fyra innehållssteg plus ett för UI-chrome (nav). Mätningen
     hittade sju storlekar mellan 11 och 19px — 14 och 15 gick inte att skilja
     åt, vilket läser som slarv snarare än hierarki. */
  --txt-etikett: 12px;
  --txt-chrome: 13px;
  --txt-liten: 15px;
  --txt-bas: 17px;
  --txt-stor: 19px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--svart);
  color: var(--dimma);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--txt-bas);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* ---------- topp ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  background: rgba(8, 9, 11, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linje);
}

.topp-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: none;
}

.topp-logo { width: 168px; height: auto; }

.topp-group {
  font-family: 'Anton', 'Geist', sans-serif;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 1px solid var(--linje-stark);
  padding-left: 12px;
  line-height: 1;
}

.topp-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: var(--txt-chrome);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.topp-nav a {
  text-decoration: none;
  color: var(--dimma);
  transition: color 0.15s ease;
}

.topp-nav a:hover { color: var(--vit); }

.topp-cta {
  padding: 9px 18px;
  border-radius: var(--radie-pill);
  background: var(--accent);
  color: var(--svart) !important;
  font-weight: 700;
}

.topp-cta:hover { background: var(--vit); }

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

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 104px var(--gutter) 84px;
}

.hero-innehall { max-width: 74ch; }

.ogonbryn {
  margin: 0 0 20px;
  font-size: var(--txt-etikett);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

.hero-rubrik {
  margin: 0 0 28px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(52px, 10vw, 124px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--vit);
}

.hero-accent { color: var(--accent); }

.hero-text {
  max-width: 62ch;
  margin: 0 0 36px;
  font-size: var(--txt-stor);
  color: var(--dimma);
}

.hero-knappar { display: flex; flex-wrap: wrap; gap: 14px; }

.knapp {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radie-pill);
  font-size: var(--txt-liten);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

.knapp-sekundar {
  border: 1px solid var(--linje-stark);
  color: var(--vit);
}

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

/* ---------- nyckeltal ---------- */

/* Griden bär bakgrunden själv, så breddbegränsningen får inte komma från padding —
   annars färgas gutter-zonen. Därför max-width minus gutter i stället. */
.tal {
  width: min(calc(var(--max) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin: 0 auto 92px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linje);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  overflow: hidden;
}

.tal-post {
  background: var(--svart-2);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tal-siffra {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1;
  color: var(--vit);
}

.tal-etikett {
  font-size: var(--txt-etikett);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dimma-svag);
}

/* ---------- varumärkesrad ---------- */

/* Ingen egen bottenmarginal: nästa sektion har redan 92px padding-top. Med båda
   blev gapet 184px här och 92px överallt annars — ojämn rytm som inte var vald. */
.marken {
  width: min(calc(var(--max) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 26px 0 0;
  border-top: 1px solid var(--linje);
}

.marken-etikett {
  margin: 0 0 16px;
  font-size: var(--txt-etikett);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dimma-svag);
}

/* Grid med explicit kolumnantal, inte flex-wrap. Med sju namn (ett primtal) gav
   wrap ett ensamt namn sist i två breda band — och wrap går inte att styra. Åtta
   namn i 8/4/3/2 kolumner fördelar sig jämnt vid varje brytpunkt: 8, 4+4, 3+3+2,
   2+2+2+2. Ingen kombination lämnar ett ensamt namn på sista raden. */
.marken-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: space-between;
  gap: 12px 24px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(14px, 1.34vw, 19px);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--vit);
}

/* ---------- sektioner ---------- */

.sektion {
  max-width: var(--max);
  margin: 0 auto;
  padding: 92px var(--gutter);
}

.sektion-band {
  max-width: none;
  background: var(--svart-2);
  border-top: 1px solid var(--linje);
  border-bottom: 1px solid var(--linje);
}

/* Bandsektionernas barn måste landa på SAMMA vänsterkant som resten av sidan.
   Två fel satt här: max-width var 1180 (sidans yttermått) i stället för 1124
   (innehållsbredden innanför gutter), och `.pelare { margin: 0 }` vann över
   `.sektion-band > *` på lika specificitet — så pelarna och bolagsfaktan låg
   kvar på 28px medan texten ovanför låg på 118px. Extra klass höjer
   specificiteten till 0,2,0 så auto-marginalen håller. */
.sektion.sektion-band > * {
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
}

/* Radbredden begränsas på texten, inte på huvudet. I .sektion-band centreras varje
   direkt barn — hade huvudet haft egen smal max-width skulle rubriken centrerats
   i stället för att ligga i linje med korten under. */
.sektion-huvud { margin-bottom: 52px; }

.sektion-rubrik {
  margin: 0 0 22px;
  text-wrap: balance;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--vit);
}

.sektion-text { max-width: 66ch; margin: 0; font-size: var(--txt-stor); }

/* ---------- marknader ---------- */

/* ---------- marknadsintro med karta ---------- */

/* Kartan är sektionens visuella ankare och får därför mer bredd än texten. */
.marknad-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 56px;
  margin-bottom: 56px;
}

.marknad-intro-text .sektion-text { margin-bottom: 26px; }

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: var(--txt-etikett);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dimma-svag);
}

.legend li { display: flex; align-items: center; gap: 9px; }

.legend-prick {
  width: 9px;
  height: 9px;
  border-radius: var(--radie-pill);
  background: var(--linje-stark);
}

.legend-prick-live { background: var(--live); }

.karta-ram {
  background: var(--svart-2);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  overflow: hidden;
}

.karta { display: block; width: 100%; height: auto; }

/* Konturerna kommer från Natural Earth 110m, projicerade i bygget. Icke-marknader
   ligger dämpade i bakgrunden så de sju marknaderna läser som figur mot grund. */
.karta-land path {
  fill: #161920;
  stroke: #22252C;
  stroke-width: 0.8;
  stroke-linejoin: round;
}

.karta-land-marknad path { fill: #3B414F; stroke: #5A6072; }

.karta-linjer path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.55;
}

.karta-prick { fill: var(--accent); stroke: var(--svart-2); stroke-width: 2; }

.karta-ring {
  fill: none;
  stroke: var(--live);
  stroke-width: 1.6;
}

.karta-nod-live .karta-prick { fill: var(--live); }

.karta-kod {
  fill: var(--vit);
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--svart-2);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.karta-nod-live .karta-kod { font-size: 23px; }

/* Sju kort + live-kortets dubbla bredd = 8 slots. 8 delas jämnt av 4 och 2 men
   inte av 3 — därför explicita kolumnantal i stället för auto-fill, som annars
   landar på 3 kolumner runt 1100px och lämnar ett hål i sista raden.
   grid-auto-rows: 1fr — utan den blev rad 1 303px och rad 2 327px eftersom
   texterna är olika långa, vilket läser som slarv i en annars strikt grid. */
.marknader {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
}

.marknad {
  background: var(--svart-2);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.marknad:hover { border-color: var(--linje-stark); transform: translateY(-2px); }

.marknad-live {
  grid-column: span 2;
  border-color: #4C6B14;
  background: #12160B;
}

.marknad-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marknad-kod {
  font-family: 'Anton', sans-serif;
  font-size: var(--txt-liten);
  line-height: 1;
  color: var(--dimma-svag);
  letter-spacing: 0.16em;
}

.marknad-live .marknad-kod { color: var(--live); }

.marknad-status {
  font-size: var(--txt-etikett);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radie-pill);
  border: 1px solid var(--linje-stark);
  color: var(--dimma-svag);
}

.marknad-status-live {
  background: var(--live);
  border-color: var(--live);
  color: var(--svart);
}

.marknad-land {
  margin: 4px 0 0;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--vit);
}

.marknad-text { max-width: 46ch; margin: 0; font-size: var(--txt-liten); line-height: 1.6; }

.marknad-lank {
  margin-top: auto;
  padding-top: 14px;
  font-size: var(--txt-liten);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}

.marknad-lank:hover { color: var(--vit); }

.marknad-lank-vilande { color: var(--dimma-svag); }

.marknader-fot {
  max-width: 78ch;
  margin: 26px 0 0;
  font-size: var(--txt-etikett);
  line-height: 1.6;
  color: var(--dimma-svag);
}

/* ---------- pelare ---------- */

.pelare {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.pelare-post {
  background: var(--svart);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  padding: 28px 26px;
}

.pelare-nummer {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 14px;
}

.pelare-rubrik {
  margin: 0 0 10px;
  font-size: var(--txt-stor);
  font-weight: 700;
  color: var(--vit);
}

.pelare-text { margin: 0; font-size: var(--txt-liten); line-height: 1.62; }

/* ---------- principer ---------- */

.principer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 42px;
}

.princip { border-top: 2px solid var(--accent); padding-top: 20px; }

.princip-rubrik {
  margin: 0 0 10px;
  font-size: var(--txt-stor);
  font-weight: 700;
  color: var(--vit);
}

.princip-text { margin: 0; font-size: var(--txt-liten); line-height: 1.62; }

/* ---------- bolagsfakta ---------- */

.bolagsfakta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linje);
  border: 1px solid var(--linje);
  border-radius: var(--radie-stor);
  overflow: hidden;
}

.bolagsfakta-post { background: var(--svart); padding: 24px 26px; }

.bolagsfakta dt {
  font-size: var(--txt-etikett);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dimma-svag);
  margin-bottom: 8px;
}

.bolagsfakta dd {
  margin: 0;
  font-size: var(--txt-bas);
  font-weight: 500;
  color: var(--vit);
}

.bolagsfakta dd a { color: var(--accent); text-decoration: none; }
.bolagsfakta dd a:hover { color: var(--vit); }

/* ---------- slut-CTA ---------- */

.slut {
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px var(--gutter) 104px;
  text-align: center;
}

.slut-rubrik {
  margin: 0 0 18px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5.8vw, 68px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--vit);
}

.slut-text {
  max-width: 58ch;
  margin: 0 auto 30px;
  font-size: var(--txt-stor);
}

/* ---------- fot ---------- */

.fot {
  border-top: 1px solid var(--linje);
  background: var(--svart-2);
  padding: 44px var(--gutter);
}

.fot-rad {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 26px;
}

.fot-logo { width: 148px; height: auto; opacity: 0.9; }

.fot-copy { margin: 0; font-size: var(--txt-liten); color: var(--dimma-svag); }

.fot-rad-lankar {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--linje);
  font-size: var(--txt-liten);
  color: var(--dimma-svag);
  gap: 10px;
}

.fot-rad-lankar a { color: var(--dimma); text-decoration: none; }
.fot-rad-lankar a:hover { color: var(--accent); }

.fot-avdelare { color: var(--linje-stark); }

/* ---------- responsivt ---------- */

@media (max-width: 1000px) {
  .marken-lista { grid-template-columns: repeat(4, 1fr); justify-content: stretch; }
  .marknader { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tal { grid-template-columns: repeat(2, 1fr); }
  .topp-nav { gap: 16px; }
  .marknad-intro { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  /* Headern är sticky — den får aldrig radbrytas till dubbel höjd. Nav-länkarna
     måste därför försvinna i SAMMA andetag som nowrap sätts. Låg gränsen kvar på
     480px sköt headern ut till 599px fast innehåll och gav upp till 115px
     horisontell scroll i bandet 484–596px, med CTA:n avklippt i högerkanten. */
  .topp { flex-wrap: nowrap; gap: 12px; }
  .topp-nav a:not(.topp-cta) { display: none; }
  .topp-logo { width: 120px; }
  .topp-group { font-size: 13px; padding-left: 10px; }
  .topp-nav { gap: 14px; }
  .topp-cta { padding: 8px 14px; font-size: var(--txt-etikett); white-space: nowrap; }
  .hero { padding: 64px var(--gutter) 56px; }
  .sektion { padding: 64px var(--gutter); }
  .principer { gap: 30px; }

  /* Kartans text skalas med viewBox. Vid 360px blev 18px effektivt 8px och
     landkoderna oläsliga — de måste räknas upp i SVG-enheter, inte i px. */
  .karta-kod { font-size: 30px; stroke-width: 5.5; }
  .karta-nod-live .karta-kod { font-size: 38px; }
  .karta-prick { r: 7; }
  .karta-nod-live .karta-prick { r: 9; }
  .karta-ring { r: 21; stroke-width: 2.4; }

  /* Lika höga kort köper ingenting i en enkolumnsstack — det ger bara döda
     luckor över domänraden i de korta korten. */
  .marken-lista { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .tal { grid-template-columns: 1fr; }
  .tal-post { padding: 20px 22px; }
  .marken-lista { grid-template-columns: repeat(2, 1fr); }
  .topp-logo { width: 112px; }
  /* Avdelarna staplar illa och lämnar en hängande "/" sist på raden. */
  .fot-avdelare { display: none; }
  .fot-rad-lankar { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Under 620px stackas marknadskorten — då finns inget att spänna över, och lika
   höga kort ger bara döda luckor över domänraden i de korta korten. */
@media (max-width: 620px) {
  .marknader { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .marknad-live { grid-column: auto; }
}

/* Under ~340px räcker inte bredden till logga + GROUP + CTA på en rad. */
@media (max-width: 350px) {
  .topp-group { display: none; }
  .topp-cta { padding: 8px 12px; }
  .topp-logo { width: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marknad { transition: none; }
}