/* ── RESET / BASE ── */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Source Sans Pro', sans-serif; color: #364151; background: #fff; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── NAV ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid #D1DAE5;
}
.site-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-nav-logo img { height: 28px; width: auto; }
.site-nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #364151;
}
.site-nav-links a:hover { color: #0067FF; }

/* ── FOOTER ── */
.site-footer {
  padding: 48px 40px;
  border-top: 1px solid #D1DAE5;
  text-align: center;
  background: #F8FAFC;
}
.site-footer p { font-size: 15px; color: #64748B; margin: 0 0 6px; }
.site-footer .site-footer-small { font-size: 12px; color: #94A3B8; }

@media (max-width: 800px) {
  .site-nav { padding: 16px 20px; flex-direction: column; gap: 14px; }
  .site-nav-links { gap: 18px; flex-wrap: wrap; justify-content: center; }
  .site-footer { padding: 36px 20px; }
}

/* ── HERO BANNER ── */
.li-hero {
  background: #0F172A;
  color: #fff;
  padding: 72px 40px;
  text-align: center;
  margin-bottom: 0;
}
.li-hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60A5FA;
  background: rgba(96,165,250,0.15);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 20px;
}
.li-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 14px;
}
.li-hero p {
  font-size: 18px;
  color: #94A3B8;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── SECTIONS ── */
.li-section { padding: 64px 40px; border-top: 1px solid #D1DAE5; }
.li-section-header { margin-bottom: 36px; }
.li-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #0067FF;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 10px;
}
.li-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: #0F172A;
  line-height: 1.25;
  margin-bottom: 10px;
}
.li-section-lead {
  font-size: 17px;
  color: #364151;
  max-width: 680px;
  line-height: 1.7;
}
.li-text p { margin-bottom: 14px; line-height: 1.7; max-width: 720px; }
.li-text ol { margin: 0 0 16px 20px; }
.li-text ol li { margin-bottom: 6px; }
.li-text strong { color: #0F172A; font-weight: 600; }

/* ── RÆKKEVIDDE LAYOUT (lyn-intro) ── */
.li-raekkevidde { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }

/* ── BEREGNER ── */
.li-calc { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 24px; position: sticky; top: 20px; }
.li-calc h3 { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.li-calc-sub { font-size: 13px; color: #64748B; margin-bottom: 18px; }
.li-wltp { font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 700; color: #0067FF; text-align: center; line-height: 1; margin-bottom: 4px; }
.li-slider-label { font-size: 12px; color: #64748B; text-align: center; margin-bottom: 10px; }
input[type=range].li-slider {
  width: 100%; height: 6px; -webkit-appearance: none; background: #D1DAE5;
  border-radius: 3px; outline: none; margin-bottom: 20px; cursor: pointer; display: block;
}
input[type=range].li-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; background: #0067FF;
  border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 2px #0067FF;
}
input[type=range].li-slider::-moz-range-thumb {
  width: 22px; height: 22px; background: #0067FF; border-radius: 50%;
  cursor: pointer; border: 3px solid #fff; box-shadow: 0 0 0 2px #0067FF;
}
.li-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.li-rcard { border-radius: 12px; padding: 12px; text-align: center; }
.li-rcard.sommer { background: #FAEEDA; }
.li-rcard.vinter { background: #E6F1FB; }
.li-rcard .li-rlabel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.li-rcard.sommer .li-rlabel { color: #854F0B; }
.li-rcard.vinter .li-rlabel { color: #185FA5; }
.li-rcard .li-rtype { font-size: 11px; margin-bottom: 6px; }
.li-rcard.sommer .li-rtype { color: #854F0B; }
.li-rcard.vinter .li-rtype { color: #185FA5; }
.li-rcard .li-rval { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; }
.li-rcard.sommer .li-rval { color: #633806; }
.li-rcard.vinter .li-rval { color: #0C447C; }
.li-calc-note { font-size: 11px; color: #94A3B8; text-align: center; }

/* ── OPLADNING / CARD-PAIR LAYOUT (reused: lyn-intro charging types, dyk-dybere wheels) ── */
.li-opladning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; }
.li-ocard { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 24px; }
.li-ocard-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.li-oicon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.li-oicon.ac, .li-oicon.small { background: #EEF2FF; }
.li-oicon.dc, .li-oicon.big { background: #FFF7ED; }
.li-ocard-header h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.li-ocard-header span { font-size: 13px; color: #64748B; }
.li-orows { display: flex; flex-direction: column; gap: 10px; }
.li-orow { display: flex; gap: 10px; }
.li-orow-label { font-weight: 600; color: #0F172A; font-size: 12px; min-width: 100px; flex-shrink: 0; padding-top: 1px; }
.li-orow-val { font-size: 13px; color: #364151; line-height: 1.5; }
.li-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 5px; margin-right: 3px; }
.badge-g { background: #DCFCE7; color: #166534; }
.badge-o { background: #FEF3C7; color: #92400E; }

/* ── SAMMENLIGNING (ladekurver, lyn-intro) ── */
.li-charge-compare { margin-top: 32px; }
.li-charge-compare h3 { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; color: #0F172A; margin-bottom: 8px; }
.lk-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.5rem; }
.lk-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #D1DAE5; background: transparent; color: #64748B; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.lk-btn.active { background: #E7F6FF; color: #0067FF; border-color: #0067FF; font-weight: 600; }
.lk-btn:hover:not(.active) { background: #F8FAFC; }
.lk-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 1.5rem; }
.lk-card { border-radius: 12px; border: 1px solid #D1DAE5; padding: 14px; background: #fff; transition: opacity 0.3s; }
.lk-card.dimmed { opacity: 0.3; }
.lk-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lk-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.lk-card-name { font-size: 13px; font-weight: 600; color: #0F172A; }
.lk-badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 8px; margin-bottom: 8px; font-weight: 500; }
.lk-badge-green { background: #DCFCE7; color: #166534; }
.lk-badge-blue { background: #E6F1FB; color: #185FA5; }
.lk-badge-amber { background: #FAEEDA; color: #854F0B; }
.lk-stat-row { display: flex; justify-content: space-between; margin-bottom: 4px; }
.lk-stat-key { font-size: 12px; color: #64748B; }
.lk-stat-num { font-size: 12px; font-weight: 600; color: #0F172A; }
.lk-divider { border: none; border-top: 1px solid #D1DAE5; margin: 10px 0; }
.lk-insight { font-size: 12px; color: #64748B; line-height: 1.5; }
.lk-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 1rem; font-size: 13px; color: #64748B; }
.lk-legend-line { width: 14px; height: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.lk-note { font-size: 11px; color: #94A3B8; margin-top: 1rem; line-height: 1.5; }

/* ── TJEKLISTE (lyn-intro) ── */
.li-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.li-cgroup { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 22px; }
.li-cgroup h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #0F172A; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #D1DAE5; display: flex; align-items: center; gap: 8px; }
.li-cnum { width: 22px; height: 22px; background: #E7F6FF; color: #0067FF; border-radius: 50%; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.li-clist { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.li-citem { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: #364151; }
.li-ccheck { width: 18px; height: 18px; background: #DCFCE7; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.li-ccheck svg { width: 10px; height: 10px; stroke: #16A34A; stroke-width: 2.5; fill: none; }
.li-citem strong { color: #0F172A; font-weight: 600; }
.li-sublist { margin-top: 5px; margin-left: 2px; display: flex; flex-direction: column; gap: 3px; list-style: none; padding: 0; }
.li-sublist li { font-size: 12px; color: #64748B; padding-left: 10px; position: relative; }
.li-sublist li::before { content: '–'; position: absolute; left: 0; color: #94A3B8; }

/* ── IMPACT GRID (dyk-dybere: rækkevidde-faktorer) ── */
.dd-impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
.dd-impact-card { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 20px; }
.dd-impact-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.dd-impact-top h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; }
.dd-badge { flex-shrink: 0; display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.dd-badge.high { background: #FEE2E2; color: #B91C1C; }
.dd-badge.medium { background: #FEF3C7; color: #92400E; }
.dd-badge.low { background: #DCFCE7; color: #166534; }
.dd-impact-card p { font-size: 13px; color: #64748B; line-height: 1.6; }
.dd-wheel-note { margin-top: 20px; font-size: 13px; color: #64748B; background: #F8FAFC; border-radius: 12px; padding: 14px 18px; line-height: 1.6; }

/* ── VARMEPUMPE (dyk-dybere) ── */
.dd-heat-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 8px; }
.dd-heat-list { list-style: none; margin: 0; padding: 0; }
.dd-heat-list li { display: flex; gap: 10px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; color: #364151; }
.dd-heat-list .dd-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; }
.dd-heat-list.good .dd-dot { background: #16A34A; }
.dd-heat-list.meh .dd-dot { background: #CA8A04; }
.dd-heat-subhead { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-bottom: 14px; }
.dd-calc { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 24px; margin-top: 28px; max-width: 560px; }
.dd-calc h3 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.dd-calc-sub { font-size: 13px; color: #64748B; margin-bottom: 18px; }
.dd-toggle-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.dd-toggle-btn { flex: 1; min-width: 140px; padding: 10px 14px; border-radius: 10px; border: 1px solid #D1DAE5; background: #fff; color: #364151; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.dd-toggle-btn.active { background: #0067FF; color: #fff; border-color: #0067FF; }
.dd-calc-result { display: flex; align-items: center; gap: 20px; padding: 16px; background: #F8FAFC; border-radius: 12px; }
.dd-calc-pct { font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: 700; color: #0067FF; line-height: 1; }
.dd-calc-desc { font-size: 13px; color: #64748B; line-height: 1.5; }
.dd-calc-note { font-size: 11px; color: #94A3B8; margin-top: 12px; }

/* ── HOME: START CARDS ── */
.li-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.li-start-card { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.li-start-card h3 { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700; color: #0F172A; margin: 0 0 10px; }
.li-start-card p { font-size: 14px; color: #64748B; line-height: 1.6; margin: 0 0 20px; flex-grow: 1; }
.li-start-card a {
  display: inline-block; text-decoration: none; text-align: center;
  background: #0067FF; color: #fff; font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 10px;
}
.li-start-card a:hover { background: #0052CC; }

/* ── ABOUT ── */
.about-grid { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: start; }
.about-grid img { border-radius: 50%; }
.about-name { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin-top: 12px; }
.about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.about-card { background: #fff; border: 1px solid #D1DAE5; border-radius: 16px; padding: 22px; }
.about-card h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #0F172A; margin: 0 0 10px; }
.about-card p { font-size: 14px; color: #64748B; line-height: 1.6; margin: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 800px) {
  .li-section { padding: 48px 20px; }
  .li-hero { padding: 48px 20px; }
  .li-raekkevidde { grid-template-columns: 1fr; }
  .li-calc { position: static; }
  .li-opladning-grid { grid-template-columns: 1fr; }
  .li-check-grid { grid-template-columns: 1fr; }
  .lk-cards { grid-template-columns: 1fr; }
  .dd-impact-grid { grid-template-columns: 1fr; }
  .dd-heat-columns { grid-template-columns: 1fr; }
  .li-start-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; text-align: center; }
  .about-grid img { margin: 0 auto; }
  .about-cards { grid-template-columns: 1fr; }
}