/* ============================================
   Consenta.se — Huvudstilmall
   ============================================ */

/* Variabler */
:root {
  --blå: #1E3A8A;
  --blå-hover: #1E40AF;
  --blå-ljus: #EFF6FF;
  --blå-kant: #BFDBFE;
  --gul: #FFCD00;
  --gul-ljus: #FEF9C3;
  --text-primär: #111827;
  --text-sekundär: #6B7280;
  --text-subtil: #9CA3AF;
  --bakgrund: #FFFFFF;
  --bakgrund-alt: #F8F9FA;
  --kant: #E5E7EB;
  --kant-subtil: #F3F4F6;
  --radie-sm: 6px;
  --radie-md: 8px;
  --radie-lg: 12px;
  --radie-xl: 16px;
  --skugga-sm: 0 1px 3px rgba(0,0,0,0.06);
  --skugga-md: 0 4px 12px rgba(0,0,0,0.08);
  --max-bredd: 1100px;
  --sektion-padding: 5rem 2rem;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Bas */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--text-primär);
  background: var(--bakgrund);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--blå);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================
   Layout
   ============================================ */

.container {
  max-width: var(--max-bredd);
  margin: 0 auto;
  padding: 0 2rem;
}

.sektion {
  padding: var(--sektion-padding);
  border-bottom: 1px solid var(--kant);
}

.sektion-alt {
  background: var(--bakgrund-alt);
}

.sektion-titel {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.sektion-sub {
  text-align: center;
  font-size: 1rem;
  color: var(--text-sekundär);
  margin-bottom: 3rem;
}

/* ============================================
   Navigering
   ============================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bakgrund);
  border-bottom: 1px solid var(--kant);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logga {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--blå);
  letter-spacing: -0.3px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-logga span {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: var(--gul);
  border-radius: 50%;
  margin-left: 1px;
  margin-bottom: -1px;
  flex-shrink: 0;
}

.nav-länkar {
  display: flex;
  gap: 2rem;
  align-items: center;
  list-style: none;
}

.nav-länkar a {
  font-size: 0.875rem;
  color: var(--text-sekundär);
  text-decoration: none;
  transition: color 0.15s;
}

.nav-länkar a:hover {
  color: var(--text-primär);
  text-decoration: none;
}

.nav-meny-knapp {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-primär);
}

/* ============================================
   Knappar
   ============================================ */

.knapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radie-md);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.knapp-primär {
  background: var(--blå);
  color: white;
  border-color: var(--blå);
}

.knapp-primär:hover {
  background: var(--blå-hover);
  border-color: var(--blå-hover);
  text-decoration: none;
  color: white;
}

.knapp-sekundär {
  background: transparent;
  color: var(--blå);
  border-color: var(--blå);
}

.knapp-sekundär:hover {
  background: var(--blå-ljus);
  text-decoration: none;
}

.knapp-nav {
  background: var(--blå);
  color: white !important;
  border-color: var(--blå);
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
}

.knapp-nav:hover {
  background: var(--blå-hover);
  text-decoration: none;
  color: white;
}

/* ============================================
   Badge / pill
   ============================================ */

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 999px;
}

.badge-blå {
  background: var(--blå-ljus);
  color: var(--blå);
  border: 1px solid var(--blå-kant);
}

.badge-gul {
  background: var(--gul-ljus);
  color: var(--blå);
}

.badge-grön {
  background: #ECFDF5;
  color: #065F46;
  font-size: 0.6875rem;
}

/* ============================================
   Hero
   ============================================ */

.hero {
  padding: 6rem 2rem 5rem;
  text-align: center;
  background: var(--bakgrund);
  border-bottom: 1px solid var(--kant);
}

.hero-badge {
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 1.25rem;
  color: var(--text-primär);
}

.hero h1 span {
  color: var(--blå);
}

.hero-ingress {
  font-size: 1.0625rem;
  color: var(--text-sekundär);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.hero-knappar {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.hero-not {
  font-size: 0.75rem;
  color: var(--text-subtil);
}

/* ============================================
   Banner-preview
   ============================================ */

.preview-wrap {
  max-width: 560px;
  margin: 0 auto;
}

.preview-etikett {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-sekundär);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

.banner-preview {
  background: var(--bakgrund);
  border-radius: var(--radie-lg);
  border: 1px solid var(--kant);
  padding: 1.75rem;
  box-shadow: var(--skugga-md);
}

.banner-logga {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blå);
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.banner-logga span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gul);
  border-radius: 50%;
  margin-left: 1px;
  margin-bottom: -1px;
  flex-shrink: 0;
}

.banner-avdelare {
  height: 1px;
  background: var(--kant);
  margin-bottom: 1rem;
}

.banner-titel {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.4rem;
}

.banner-text {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.banner-kategorier {
  border: 1px solid var(--kant);
  border-radius: var(--radie-md);
  overflow: hidden;
  margin-bottom: 1rem;
}

.banner-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--kant-subtil);
  background: var(--bakgrund);
}

.banner-rad:last-child {
  border-bottom: none;
}

.banner-kategori-namn {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primär);
}

.banner-kategori-beskrivning {
  font-size: 0.6875rem;
  color: var(--text-sekundär);
}

/* Toggle */
.toggle {
  position: relative;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-spår {
  position: absolute;
  inset: 0;
  background: #CBD5E1;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-spår::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle input:checked + .toggle-spår {
  background: var(--blå);
}

.toggle input:checked + .toggle-spår::before {
  transform: translateX(17px);
}

.toggle input:disabled + .toggle-spår {
  background: var(--blå);
  opacity: 0.7;
  cursor: not-allowed;
}

.toggle input:disabled + .toggle-spår::before {
  transform: translateX(17px);
}

/* Banner-knappar */
.banner-knappar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.banner-knapp {
  padding: 9px 6px;
  border-radius: var(--radie-md);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--blå);
  background: transparent;
  color: var(--blå);
  text-align: center;
  transition: all 0.15s;
}

.banner-knapp:hover {
  background: var(--blå-ljus);
}

.banner-knapp-primär {
  background: var(--blå);
  color: white;
}

.banner-knapp-primär:hover {
  background: var(--blå-hover);
}

.banner-footer {
  text-align: center;
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  color: var(--text-sekundär);
}

.banner-footer a {
  color: var(--blå);
  font-weight: 500;
}

.banner-tagline {
  font-size: 0.625rem;
  color: var(--text-subtil);
  text-align: center;
}

/* ============================================
   USP-kort
   ============================================ */

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.usp-kort {
  background: var(--bakgrund);
  border-radius: var(--radie-lg);
  padding: 1.5rem;
  border: 1px solid var(--kant);
}

.usp-ikon {
  font-size: 1.5rem;
  color: var(--blå);
  margin-bottom: 0.875rem;
}

.usp-titel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.4rem;
}

.usp-text {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  line-height: 1.65;
}

/* ============================================
   GDPR-sektion
   ============================================ */

.gdpr-ingress {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-primär);
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.gdpr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.gdpr-nummer {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blå);
  margin-bottom: 0.25rem;
}

.gdpr-titel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.5rem;
}

.gdpr-text {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  line-height: 1.7;
}

.gdpr-lenk {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: var(--blå);
}

/* ============================================
   Server-sektion
   ============================================ */

.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

.server-kort {
  background: var(--bakgrund);
  border-radius: var(--radie-lg);
  padding: 1.5rem;
  border: 1px solid var(--kant);
}

.server-ikon {
  font-size: 1.5rem;
  color: var(--blå);
  margin-bottom: 0.875rem;
}

.server-titel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.5rem;
}

.server-text {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

/* ============================================
   Steg
   ============================================ */

.steg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.steg-kort {
  background: var(--bakgrund);
  border-radius: var(--radie-lg);
  padding: 1.5rem;
  border: 1px solid var(--kant);
}

.steg-nummer {
  width: 32px;
  height: 32px;
  background: var(--blå);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.steg-titel {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primär);
  margin-bottom: 0.4rem;
}

.steg-text {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  line-height: 1.65;
}

.steg-not {
  font-size: 0.6875rem;
  color: var(--text-subtil);
  margin-top: 0.4rem;
}

/* ============================================
   Priser
   ============================================ */

.pris-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.pris-kort {
  background: var(--bakgrund-alt);
  border-radius: var(--radie-lg);
  padding: 1.5rem;
  border: 1px solid var(--kant);
  position: relative;
}

.pris-kort-featured {
  background: var(--bakgrund);
  border: 2px solid var(--blå);
}

.featured-etikett {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blå);
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.pris-plan {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-sekundär);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}

.pris-belopp {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primär);
  letter-spacing: -0.5px;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.pris-belopp span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-sekundär);
}

.pris-avdelare {
  height: 1px;
  background: var(--kant);
  margin: 0.875rem 0;
}

.pris-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
}

.pris-features li {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.4;
}

.pris-features li i {
  color: var(--blå);
  font-size: 0.875rem;
  margin-top: 1px;
  flex-shrink: 0;
}

.pris-features li.inaktiv {
  opacity: 0.4;
}

.pris-features li.inaktiv i {
  color: var(--text-sekundär);
}

.pris-gdpr {
  font-size: 0.6875rem;
  color: var(--blå);
  background: var(--blå-ljus);
  padding: 4px 10px;
  border-radius: var(--radie-md);
  text-align: center;
}

/* ============================================
   Jämförelsetabell
   ============================================ */

.jämför-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bakgrund);
  border-radius: var(--radie-lg);
  border: 1px solid var(--kant);
  overflow: hidden;
}

.jämför-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  table-layout: fixed;
}

.jämför-wrap th {
  padding: 11px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  border-bottom: 1px solid var(--kant);
  background: var(--bakgrund-alt);
}

.jämför-wrap th.hl {
  color: var(--blå);
  background: var(--blå-ljus);
}

.jämför-wrap td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--kant-subtil);
  color: var(--text-primär);
}

.jämför-wrap tr:last-child td {
  border-bottom: none;
}

.jämför-wrap td.hl {
  background: #F8FBFF;
  font-weight: 500;
  color: var(--blå);
}

.check { color: var(--blå); }
.minus { color: var(--text-subtil); }

/* ============================================
   FAQ
   ============================================ */

.faq-lista {
  max-width: 680px;
  margin: 0 auto;
}

.faq-punkt {
  border-bottom: 1px solid var(--kant);
}

.faq-fråga {
  padding: 1.125rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primär);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
  user-select: none;
}

.faq-fråga::-webkit-details-marker {
  display: none;
}

.faq-fråga i {
  color: var(--text-sekundär);
  font-size: 1rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

details[open] .faq-fråga i {
  transform: rotate(180deg);
}

.faq-svar {
  font-size: 0.875rem;
  color: var(--text-sekundär);
  line-height: 1.75;
  padding-bottom: 1.125rem;
}

/* ============================================
   CTA
   ============================================ */

.cta {
  padding: 6rem 2rem;
  text-align: center;
}

.cta h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primär);
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.cta p {
  font-size: 1rem;
  color: var(--text-sekundär);
  margin-bottom: 2rem;
}

/* ============================================
   Footer
   ============================================ */

.footer {
  background: var(--bakgrund);
  border-top: 1px solid var(--kant);
  padding: 2.5rem 2rem;
}

.footer-inner {
  max-width: var(--max-bredd);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-logga {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--blå);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.footer-logga span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--gul);
  border-radius: 50%;
  margin-left: 1px;
  margin-bottom: -1px;
  flex-shrink: 0;
}

.footer-tagline {
  font-size: 0.75rem;
  color: var(--text-subtil);
  margin-top: 2px;
}

.footer-lenkar {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-lenkar a {
  font-size: 0.8125rem;
  color: var(--text-sekundär);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-lenkar a:hover {
  color: var(--text-primär);
}

/* ============================================
   Responsivitet
   ============================================ */

@media (max-width: 768px) {
  :root {
    --sektion-padding: 3.5rem 1.25rem;
  }

  .nav-länkar {
    display: none;
  }

  .nav-meny-knapp {
    display: block;
  }

  .nav-länkar.öppen {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bakgrund);
    border-bottom: 1px solid var(--kant);
    padding: 1rem 2rem;
    gap: 1rem;
  }

  .hero {
    padding: 4rem 1.25rem 3rem;
  }

  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-knappar {
    flex-direction: column;
    align-items: center;
  }

  .pris-grid {
    grid-template-columns: 1fr 1fr;
  }

  .banner-knappar {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .pris-grid {
    grid-template-columns: 1fr;
  }

  .sektion-titel {
    font-size: 1.625rem;
  }
}