/* DB ElTeknik – startsidan
   Mörk hero i företagets marinblå, ljusa innehållssektioner, en enda signaturdetalj:
   ledarfärgerna (brun, svart, grå, blå, gul/grön) som en rand under heron. */
:root {
  --ink: #0f1b2a;
  --ink-2: #182a3d;
  --ink-line: rgba(255, 255, 255, .14);
  --paper: #f1f3f5;
  --white: #ffffff;
  --text: #16202c;
  --muted: #566272;
  --line: #d9dee4;
  --cyan: #26c0e0;
  --cyan-dark: #0a7690;
  --cyan-light: #7ad9ee;
  --display: 'Barlow Semi Condensed', 'Arial Narrow', 'Inter', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--cyan-dark); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; }
h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.2px; text-wrap: balance; }
h3 { font-size: 22px; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* ---------- Knappar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 17px var(--body); padding: 15px 28px; border-radius: 4px; border: 2px solid transparent; text-decoration: none; cursor: pointer; }
.btn-main { background: var(--cyan); color: var(--ink); }
.btn-main:hover { background: #4ccde8; }
.btn-quiet { border-color: currentColor; color: inherit; background: none; }
.btn-block { width: 100%; }

/* ---------- Sidhuvud ---------- */
.top { background: var(--ink); color: #fff; position: relative; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand-mark { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--cyan); color: var(--ink); font-size: 19px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font: 700 23px var(--display); letter-spacing: .6px; }
.brand-name em { font-style: normal; color: var(--cyan); }
.brand-tag { font-size: 13px; color: #a9b6c6; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: #d7dee7; text-decoration: none; font-size: 16px; font-weight: 500; }
.nav a:hover { color: #fff; text-decoration: underline; }
.nav .nav-phone { color: #fff; font-weight: 600; padding: 9px 16px; border: 2px solid var(--cyan); border-radius: 4px; }
.nav .nav-phone i { color: var(--cyan); margin-right: 4px; }
.nav .nav-phone:hover { background: var(--cyan); color: var(--ink); text-decoration: none; }
.nav .nav-phone:hover i { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 2px solid var(--ink-line); color: #fff; width: 46px; height: 46px; border-radius: 4px; font-size: 18px; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: #fff; position: relative; }
.hero-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-top: 56px; padding-bottom: 96px; }
.hero h1 { font-size: clamp(46px, 6.4vw, 84px); font-weight: 700; letter-spacing: -1px; line-height: .98; text-wrap: balance; }
.lead { font-size: 20px; line-height: 1.55; color: #c9d3de; max-width: 34em; margin: 26px 0 34px; }
.lead strong { color: #fff; font-weight: 600; }
.hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.call { color: #d7dee7; text-decoration: none; font-size: 17px; }
.call strong { color: #fff; font-weight: 600; border-bottom: 2px solid var(--cyan); padding-bottom: 1px; }
.call:hover strong { color: var(--cyan-light); }
.creds { list-style: none; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--ink-line); display: grid; gap: 10px; font-size: 15.5px; color: #c9d3de; }
.creds li { display: flex; gap: 12px; align-items: baseline; }
.creds i { color: var(--cyan); font-size: 14px; }
.creds a { color: var(--cyan-light); }

.hero-photo { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; background: var(--ink-2); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-card { background: var(--ink-2); border-radius: 6px; padding: 36px 36px 32px; }
.hero-card h2 { font-size: 28px; font-weight: 600; color: #fff; }
.steps { list-style: none; counter-reset: step; margin: 22px 0 0; padding: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--ink-line); }
.steps li::before { content: counter(step); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cyan); color: var(--cyan); display: grid; place-items: center; font: 700 16px var(--display); }
.steps strong { font-weight: 600; font-size: 17px; color: #fff; }
.steps span { color: #b3c0cf; font-size: 15.5px; margin-top: 2px; }
.hc-hours { margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-line); color: #b3c0cf; font-size: 15px; display: flex; gap: 10px; align-items: baseline; }
.hc-hours i { color: var(--cyan); }

/* Ledarfärgerna: brun (L1), svart (L2), grå (L3), blå (N), gul/grön (PE) */
.conductors { display: flex; height: 10px; position: relative; overflow: hidden; }
.conductors span { flex: 1; }
/* Ljuspuls som vandrar längs ledarna, som ström */
.conductors::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(190, 245, 255, .9) 50%, rgba(255, 255, 255, .55) 55%, transparent);
  transform: translateX(-120%); animation: current-pulse 6s cubic-bezier(.45, .05, .35, 1) 1.2s infinite;
  pointer-events: none; mix-blend-mode: screen;
}
@keyframes current-pulse {
  0% { transform: translateX(-120%); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translateX(620%); opacity: 1; }
  52%, 100% { transform: translateX(620%); opacity: 0; }
}
/* Jordledaren glider långsamt */
@keyframes pe-slide { to { background-position: 72px 0; } }
.conductors span:nth-child(1) { background: #7b4a26; }
.conductors span:nth-child(2) { background: #151515; }
.conductors span:nth-child(3) { background: #8b939b; }
.conductors span:nth-child(4) { background: #2c6fbb; }
.conductors span:nth-child(5) { background: repeating-linear-gradient(115deg, #e9c21d 0 18px, #2f8a3c 18px 36px); background-size: 72px 100%; animation: pe-slide 4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .conductors::after, .conductors span:nth-child(5) { animation: none; }
  .conductors::after { display: none; }
}

/* ---------- Sektioner ---------- */
.band { padding: 96px 0; }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); }
.band--ink { background: var(--ink); color: #fff; }
.sec-head { max-width: 640px; margin-bottom: 48px; }
.sec-head p { color: var(--muted); margin: 14px 0 0; font-size: 18px; }

/* Tjänster: rubrik till vänster som följer med, lista till höger */
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #22364d; }
.svc-wrap { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.svc-side { position: sticky; top: 32px; }
.svc-side p { color: var(--muted); font-size: 18px; margin: 16px 0 28px; }
.svc-side .svc-call { font-size: 15.5px; margin: 20px 0 0; }
.svc { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.svc li { display: grid; grid-template-columns: 56px 1fr auto; gap: 22px; align-items: start; padding: 28px 20px 28px 0; border-bottom: 1px solid var(--line); }
.svc-ico { width: 56px; height: 56px; border-radius: 6px; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; color: var(--cyan-dark); font-size: 22px; }
.svc h3 { font-size: 25px; }
.svc p { margin: 8px 0 0; color: var(--muted); max-width: 34em; }
.svc-link { align-self: center; white-space: nowrap; font-weight: 600; font-size: 15px; color: var(--cyan-dark); text-decoration: none; }
.svc li:hover .svc-link, .svc-link:focus-visible { text-decoration: underline; }
.svc li:hover .svc-ico { border-color: var(--cyan-dark); }

/* Avdrag */
.ded { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.ded-text > p, .ded-text > .rt { color: var(--muted); max-width: 32em; font-size: 18px; margin: 18px 0 0; }
.receipt { margin-top: 36px; background: var(--paper); border-radius: 6px; padding: 26px 28px 20px; max-width: 480px; }
.receipt h3 { font-size: 20px; margin-bottom: 6px; }
.receipt dl { margin: 0; padding: 14px 0; font-variant-numeric: tabular-nums; }
.receipt dl + dl { border-top: 1px dashed #b9c2cc; }
.receipt dl div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.receipt dt small { display: block; color: var(--muted); font-size: 13.5px; }
.receipt dd { margin: 0; white-space: nowrap; }
.receipt .r-ded { color: #1d7a45; }
.receipt .r-sum { font-weight: 700; border-top: 1px solid #b9c2cc; margin-top: 6px; padding-top: 10px; }
.receipt .r-sum dd { font: 700 22px/1.1 var(--display); }
.receipt > p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.ded-table { width: 100%; border-collapse: collapse; }
.ded-table caption { text-align: left; font: 700 20px var(--display); padding-bottom: 12px; }
.ded-table th, .ded-table td { padding: 22px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ded-table tr:first-child th, .ded-table tr:first-child td { border-top: 2px solid var(--text); }
.ded-table th { font-weight: 600; font-size: 18px; }
.ded-table th small { display: block; font-weight: 400; font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.ded-table td { text-align: right; white-space: nowrap; }
.ded-table td { font: 700 40px/1 var(--display); color: var(--cyan-dark); }
.ded-rates .fine { color: var(--muted); font-size: 14.5px; margin-top: 20px; }

/* Om oss */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.about h2 { margin-bottom: 22px; }
.prose p { margin: 0 0 16px; }
.prose { color: #37424f; max-width: 36em; }
.facts { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; color: var(--muted); }
.facts strong { font: 700 28px var(--display); color: var(--text); margin-right: 4px; }
.why { list-style: none; margin: 0; padding: 0; background: var(--white); border-radius: 6px; }
.why li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.why li:last-child { border-bottom: 0; }
.why i { color: var(--cyan-dark); font-size: 19px; margin-top: 3px; }
.why h3 { font-size: 20px; }
.why p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }

/* Utförda jobb */
.work { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 36px 28px; }
.work figure { margin: 0; }
.work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.work figcaption { padding-top: 14px; }
.work span { color: var(--muted); font-size: 15px; }
.work p { margin: 6px 0 0; color: var(--muted); font-size: 16px; }

/* Omdömen och certifieringar */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.reviews blockquote { margin: 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--cyan); }
.reviews p { margin: 0 0 14px; font-size: 19px; line-height: 1.55; }
.reviews footer { font-weight: 600; }
.reviews footer span { font-weight: 400; color: var(--muted); }
.certs { list-style: none; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; }
.certs li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.certs img { height: 38px; width: auto; max-width: 120px; object-fit: contain; }
.certs strong { color: var(--text); }

/* Kontakt / offert */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
.contact-info h2 { color: #fff; margin-bottom: 16px; }
.contact-info > p, .contact-info > .rt { color: #c9d3de; max-width: 30em; }
.contact-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; align-items: baseline; color: #d7dee7; }
.contact-list i { color: var(--cyan); width: 18px; text-align: center; }
.contact-list a { color: #fff; text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }
.form-card { background: var(--white); color: var(--text); border-radius: 6px; padding: 36px; }
.qform { display: grid; gap: 18px; }
.qform label { display: grid; gap: 7px; font-size: 15px; font-weight: 600; }
.qform label small { font-weight: 400; color: var(--muted); }
.qform input, .qform select, .qform textarea { width: 100%; font: 400 16px var(--body); color: var(--text); background: var(--white); border: 1.5px solid #c3cbd4; border-radius: 4px; padding: 12px 13px; }
.qform textarea { resize: vertical; }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: none; border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(38, 192, 224, .25); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.qform .file { border: 1.5px dashed #c3cbd4; border-radius: 4px; padding: 14px; font-weight: 500; }
.qform .file input { border: 0; padding: 4px 0; }
.qform .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14.5px; color: var(--muted); }
.qform .check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cyan-dark); }
.seg { display: flex; gap: 0; border: 0; padding: 0; margin: 0; }
.seg label { flex: 1; display: block; position: relative; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; top: 0; left: 0; }
.seg span { display: block; text-align: center; padding: 11px; border: 1.5px solid #c3cbd4; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg label:first-of-type span { border-radius: 4px 0 0 4px; }
.seg label:last-of-type span { border-radius: 0 4px 4px 0; border-left: 0; }
.seg input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form-error { background: #fdecec; border: 1.5px solid #e6a3a3; color: #8a1f1f; border-radius: 4px; padding: 10px 16px; margin-bottom: 18px; }
.form-error p { margin: 4px 0; }

/* Sidfot */
.foot { background: #0a131e; color: #b6c2d0; padding: 64px 0 28px; font-size: 15px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot .brand-name { color: #fff; }
.foot h3 { font: 600 17px var(--body); color: #fff; }
.foot p { margin: 10px 0 0; line-height: 1.7; }
.foot a { color: #d7dee7; }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink-line); color: #7f8da0; font-size: 14px; }
.foot-bottom a { color: #7f8da0; }

/* ---------- Mindre skärmar ---------- */
@media (max-width: 1000px) {
  .hero-in, .ded, .about, .contact { grid-template-columns: 1fr; gap: 48px; }
  .hero-photo { aspect-ratio: 16 / 10; }
  .svc-wrap { grid-template-columns: 1fr; gap: 36px; }
  .svc-side { position: static; }
  .nav-toggle { display: grid; place-items: center; }
  .nav { display: none; position: absolute; top: 88px; left: 16px; right: 16px; z-index: 10; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; background: var(--ink-2); border-radius: 6px; }
  .nav.open { display: flex; }
  .nav a { padding: 14px; }
  .nav .nav-phone { margin-top: 8px; text-align: center; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .top-in { padding-top: 16px; padding-bottom: 16px; }
  .hero-in { padding-top: 28px; padding-bottom: 64px; }
  .lead { font-size: 18px; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .call { text-align: center; }
  .band { padding: 64px 0; }
  .grid2 { grid-template-columns: 1fr; }
  .form-card, .hero-card { padding: 24px 20px; }
  .foot-in { grid-template-columns: 1fr; }
  .ded-table td { font-size: 30px; }
  .svc li { grid-template-columns: 44px 1fr; gap: 16px; padding-right: 0; }
  .svc-ico { width: 44px; height: 44px; font-size: 18px; }
  .svc-link { grid-column: 2; justify-self: start; }
  .svc h3 { font-size: 22px; }
  .receipt { padding: 20px; }
}
.foot-links { display: inline-flex; gap: 18px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .svc-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; }
  .site-footer a, footer a { display: inline-block; padding: 8px 0; }
  input, select, textarea { font-size: 16px; }
}

/* ---------- Senaste jobben (Instagram) ---------- */
.ig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: none; }
.ig-follow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; padding: 8px 0; }
.ig-follow i { font-size: 20px; background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ig-card { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: #dfe5ec; color: #fff; text-decoration: none; }
.ig-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ig-card:hover img, .ig-card:focus-visible img { transform: scale(1.04); }
.ig-cap { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(8, 16, 30, .88)); display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.4; }
.ig-cap span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig-cap time { font-size: 12.5px; opacity: .8; }
.ig-play { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); display: grid; place-items: center; color: #fff; font-size: 13px; }
.ig-more { margin: 28px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-ghost-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: #fff; }
.jobb-page { padding-top: 48px; min-height: 70vh; }
.jobb-page h1 { font-size: clamp(30px, 5vw, 44px); margin: 0; }
.jobb-nav { display: flex; gap: 18px; align-items: center; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.feed-item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px rgba(11, 20, 36, .07); display: flex; flex-direction: column; scroll-margin-top: 90px; }
.feed-item:target { box-shadow: 0 0 0 3px var(--cyan); }
.feed-img { position: relative; display: block; aspect-ratio: 1; background: #dfe5ec; }
.feed-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.feed-body time { font-size: 13px; color: var(--muted); font-weight: 600; }
.feed-body p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.feed-link { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14px; color: var(--ink); }
.feed-pages { display: flex; gap: 12px; justify-content: center; margin: 34px 0 0; }
.feed-cta { margin: 56px auto 0; max-width: 620px; text-align: center; padding: 34px 24px; border-radius: 18px; background: var(--ink); color: #fff; }
.feed-cta h2 { margin: 0 0 8px; } .feed-cta p { margin: 0 0 18px; opacity: .85; }
.feed-cta .btn-ghost-dark { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
@media (max-width: 760px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ig-card { border-radius: 10px; }
  .ig-cap { padding: 30px 10px 10px; font-size: 13px; }
  .ig-cap span { -webkit-line-clamp: 2; }
  .jobb-nav a:first-child { display: none; }
  .feed { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ig-card img { transition: none; } }

/* =================================================================== Levande toppen */
/* Elcentralen som slås på (en gång) */
.panel-art { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; align-items: center; }
.panel-art svg { width: 100%; height: auto; display: block; max-height: 520px; }
.panel-art .encl { fill: var(--ink-2); stroke: #2b4260; stroke-width: 2; }
.panel-art .encl-inner { fill: #13243a; }
.panel-art .rail { fill: #2b4260; }
.panel-art .rcd { fill: #e8ecf1; }
.panel-art .rcd-face { fill: #cfd6df; }
.panel-art .rcd-txt, .panel-art .mcb-txt { font: 600 11px var(--body); fill: #40506a; }
.panel-art .test-btn { fill: #f2c94c; }
.panel-art .mcb-body { fill: #eef1f5; stroke: #c9d1db; }
.panel-art .mcb-slot { fill: #c3ccd7; }
.panel-art .lever { fill: #24364f; }
.panel-art .led { fill: #4b5b70; }
.panel-art .grp-no { font: 700 13px var(--display); fill: #8fa3bb; }
.panel-art .wire-base { fill: none; stroke: #2b4260; stroke-width: 6; stroke-linecap: round; }
.panel-art .wire-flow { fill: none; stroke: var(--cyan); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(38, 192, 224, .7)); }
.grp-list { display: grid; gap: 6px; font-size: 14.5px; color: #c7d3e1; }
.grp-title { font: 600 15px var(--display); color: #fff; margin-bottom: 2px; }
.grp-row { display: grid; grid-template-columns: 22px 1fr 10px; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--ink-line); }
.grp-row b { font-family: var(--display); color: #8fa3bb; }
.grp-row i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }

/* Rörelsen – bara för den som inte valt "minska rörelse" */
/* Släckt läge tills centralen syns (sätts av skript – utan skript visas slutbilden direkt) */
.panel-art.armed .wire-flow { opacity: 0; }
.panel-art.armed .lever { transform: translateY(12px); }
.panel-art.armed .mcb .led { fill: #4b5b70; filter: none; }
.panel-art.armed .grp-row i { background: #4b5b70; box-shadow: none; }
/* Påslaget när centralen syns */
.panel-art.play .wire-flow { opacity: 1; }
.panel-art.play .flow-in { animation: wire-on .7s ease-in .15s both; }
.panel-art.play .main-lever { animation: lever-on .22s ease-out .87s both; }
.panel-art.play .flow-bus { animation: wire-on .45s ease-out 1.1s both; }
.panel-art.play .wire-flow[style] { animation: wire-on .35s ease-out calc(var(--d) - .15s) both; }
.panel-art.play .mcb .mcb-lever { animation: lever-on .18s ease-out calc(var(--d) - .15s) both; }
.panel-art.play .mcb .led { animation: led-on .25s ease-out calc(var(--d) - .15s) both; }
.panel-art.play .grp-row i { animation: dot-on .25s ease-out calc(var(--d) - .15s) both; }
@media (prefers-reduced-motion: no-preference) {
  .conductors::after { animation: current-pulse 1.6s cubic-bezier(.45, .05, .35, 1) 2.7s 1 both !important; }
}
.panel-art .mcb .led { fill: #34d399; filter: drop-shadow(0 0 4px #34d399); }
@keyframes wire-on { from { stroke-dashoffset: 100; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes lever-on { from { transform: translateY(12px); } to { transform: translateY(0); } }
@keyframes led-on { from { fill: #4b5b70; filter: none; } to { fill: #34d399; filter: drop-shadow(0 0 4px #34d399); } }
@keyframes dot-on { from { background: #4b5b70; box-shadow: none; } to { background: #34d399; box-shadow: 0 0 8px #34d399; } }
@media (prefers-reduced-motion: reduce) { .conductors::after { animation: none !important; display: none; } }

/* Öppet nu */
.open-now { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: 15px; color: #b3c0cf; }
.on-dot { width: 9px; height: 9px; border-radius: 50%; background: #8fa3bb; }
.open-now.is-open { color: #d4f7e6; } .open-now.is-open .on-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }

/* Så går det till – egen rad under toppen */
.steps-band { background: var(--ink-2); color: #fff; }
.steps-in { padding-top: 44px; padding-bottom: 48px; }
.steps-in h2 { font-size: 30px; font-weight: 600; margin-bottom: 6px; }
.steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin-top: 18px; }
.steps-row li { border-top: 1px solid var(--ink-line); }
.steps-band .hc-hours { margin: 22px 0 0; color: #b3c0cf; font-size: 15px; }

/* Tjänsterna: ledarfärger som kant – samma ordning som randen under toppen */
.svc li { position: relative; }
.svc li::before { content: ""; position: absolute; left: -14px; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--wire, #7a4a2a); }
.svc li:nth-child(5n+1) { --wire: #8a5a33; } .svc li:nth-child(5n+2) { --wire: #232a33; } .svc li:nth-child(5n+3) { --wire: #8c949c; }
.svc li:nth-child(5n+4) { --wire: #2f6fd6; } .svc li:nth-child(5n+5) { --wire: linear-gradient(180deg, #e3c921 0 50%, #2fa34a 50% 100%); }

/* Mobil: fast list med Ring / Begär offert */
.mob-cta { display: none; }
@media (max-width: 760px) {
  .mob-cta { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); background: rgba(15, 27, 42, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--ink-line); transition: transform .25s ease; }
  .mob-cta a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font: 700 16px var(--body); text-decoration: none; }
  .mc-call { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
  .mc-quote { background: var(--cyan); color: var(--ink); }
  .mob-cta.is-hidden { transform: translateY(110%); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .panel-art { grid-template-columns: 1fr; }
  .grp-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
  .grp-title { grid-column: 1 / -1; }
  .grp-row { grid-template-columns: 1fr; justify-items: center; text-align: center; border: 0; padding: 0; gap: 3px; }
  .grp-row b { display: none; }
  .steps-row { grid-template-columns: 1fr; }
  .svc li::before { left: -8px; }
}
@media (prefers-reduced-motion: reduce) { .mob-cta { transition: none; } }
.conductors span:nth-child(5) { animation: none; }
.svc li:nth-child(5n+1) { --wire: #7b4a26; } .svc li:nth-child(5n+2) { --wire: #151515; } .svc li:nth-child(5n+3) { --wire: #8b939b; }
.svc li:nth-child(5n+4) { --wire: #2c6fbb; } .svc li:nth-child(5n+5) { --wire: repeating-linear-gradient(115deg, #e9c21d 0 6px, #2f8a3c 6px 12px); }
.hero-in:has(.panel-art) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; }
.panel-art { grid-template-columns: minmax(0, 1fr) 132px; }
.panel-art svg { max-height: 600px; }
@media (max-width: 900px) {
  .hero-in:has(.panel-art) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .panel-art { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .panel-art svg { max-width: 340px; max-height: 340px; }
  .grp-list { display: none; }
}

/* Logga (bild) */
.brand-logo { display: block; height: 58px; width: auto; }
.foot-logo { display: block; height: 52px; width: auto; margin-bottom: 14px; }
@media (max-width: 760px) { .brand-logo { height: 44px; } }

/* =================================================================== Spinnhjul */
.wheel-fab { position: fixed; left: 18px; bottom: 18px; z-index: 55; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border: 0; border-radius: 99px; background: #f6c236; color: var(--ink); font: 700 15px var(--body); cursor: pointer; box-shadow: 0 10px 28px rgba(11, 20, 36, .3); transition: transform .15s; }
.wheel-fab:hover { transform: translateY(-2px); }
.wheel-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wf-ico { font-size: 20px; line-height: 1; }
.wheel-tease { position: fixed; left: 18px; bottom: 78px; z-index: 55; display: flex; align-items: flex-start; gap: 4px; max-width: 280px; padding: 12px 10px 12px 14px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 12px 32px rgba(11, 20, 36, .25); font-size: 14.5px; }
.wheel-tease[hidden] { display: none; }
.wheel-tease button { border: 0; background: none; text-align: left; font: 600 14.5px var(--body); color: var(--ink); cursor: pointer; padding: 0; }
.wheel-tease .wt-x { font-size: 20px; line-height: 1; color: #6b7a90; padding: 0 4px; }
.wheel-dlg { width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; padding: 26px 24px 20px; border: 0; border-radius: 22px; background: var(--ink); color: #fff; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.wheel-dlg::backdrop { background: rgba(5, 10, 20, .7); }
.wheel-dlg h2 { font: 700 26px var(--display); margin: 0; }
.wd-sub { margin: 4px 0 14px; color: #b3c0cf; }
.wd-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 17px; cursor: pointer; }
.wheel-wrap { position: relative; width: min(320px, 78vw); margin: 0 auto; }
.wheel { width: 100%; height: auto; display: block; overflow: visible; }
.wh-rim { fill: #0b1424; stroke: #2b4260; stroke-width: 2; }
.wh-bulb { fill: #f6c236; opacity: calc(.35 + var(--b) * .65); }
.wheel-dlg.spinning .wh-bulb { animation: bulb .32s steps(1) infinite; animation-delay: calc(var(--b) * .16s); }
@keyframes bulb { 0% { opacity: 1; } 50% { opacity: .3; } }
.wh-rot { transform-origin: 0 0; }
.wh-seg { stroke: #0b1424; stroke-width: 1.4; }
.wh-edge { fill: none; stroke: #0b1424; stroke-width: 3; }
.wh-big { font: 800 15px var(--display); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 2.4px; }
.wh-small { font: 600 7.6px var(--body); fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 1.8px; }
.wh-hub { fill: var(--ink); stroke: #f6c236; stroke-width: 3; }
.wh-hub-txt { font: 900 17px var(--display); fill: #fff; letter-spacing: -.5px; }
.wh-pointer { fill: #f6c236; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.wd-actions { margin-top: 16px; }
.wd-spin { min-width: 200px; font-size: 18px; padding: 14px 26px; }
.wd-spin:disabled { opacity: .7; cursor: wait; }
.wd-result { margin-top: 10px; }
.wr-win { margin: 0; color: #b3c0cf; }
.wr-prize { margin: 2px 0 12px; font: 800 28px var(--display); color: #f6c236; }
.wr-code { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 2px dashed rgba(246, 194, 54, .6); border-radius: 14px; }
.wr-code span { color: #b3c0cf; font-size: 14px; }
.wr-code strong { font: 800 26px ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: 2px; }
.wr-copy { border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; border-radius: 8px; padding: 6px 12px; font: 600 14px var(--body); cursor: pointer; }
.wr-exp { font-size: 13.5px; color: #b3c0cf; margin: 8px 0 14px; }
.wr-err { color: #fca5a5; }
.wd-terms { margin: 14px 0 0; font-size: 12.5px; color: #8fa3bb; line-height: 1.5; }
.confetti { position: absolute; left: 50%; top: 40%; pointer-events: none; }
.confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: conf 1.6s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes conf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(calc(var(--x) * 190px), calc(var(--y) * -60px + 260px)) rotate(var(--r)); opacity: 0; } }
.promo-field input { text-transform: uppercase; letter-spacing: 1px; }
.promo-hint { color: #2f8a3c !important; font-weight: 600 !important; }
@media (max-width: 760px) {
  .wheel-fab { left: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); padding: 10px 14px 10px 12px; font-size: 14px; }
  .wheel-tease { left: 12px; bottom: calc(134px + env(safe-area-inset-bottom)); }
  .mob-cta.is-hidden ~ .wheel-fab, body:has(.mob-cta.is-hidden) .wheel-fab { bottom: 14px; }
  .wheel-dlg { padding: 22px 16px 16px; }
  .wr-prize { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .wheel-fab { transition: none; } .wheel-dlg.spinning .wh-bulb { animation: none; } }
.wheel-dlg [hidden] { display: none !important; }

/* Text från textredigeraren */
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 .75em; }
.rt h2 { font-size: 1.35em; line-height: 1.25; margin: 1em 0 .4em; }
.rt h3, .rt h4 { font-size: 1.12em; line-height: 1.3; margin: .9em 0 .35em; }
.rt ul, .rt ol { margin: 0 0 .75em; padding-left: 1.4em; }
.rt li { margin: .2em 0; }
.rt blockquote { margin: 0 0 .75em; padding: 2px 0 2px 14px; border-left: 3px solid var(--cyan); font-style: italic; }
.rt hr { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 1.1em 0; }
.rt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.prose.rt a { color: #0b6fb8; }
.lead.rt p { margin-bottom: .5em; }
.reviews blockquote .rt blockquote { border: 0; padding: 0; }

/* Tack efter förfrågan */
.form-done { text-align: left; padding: 8px 4px 4px; outline: none; }
.fd-check { display: block; margin: 0 0 14px; }
.fd-ring { stroke: #1e8a4c; stroke-dasharray: 183; stroke-dashoffset: 183; animation: fdDraw .7s ease-out forwards; }
.fd-tick { stroke: #1e8a4c; stroke-dasharray: 40; stroke-dashoffset: 40; animation: fdDraw .4s .55s ease-out forwards; }
@keyframes fdDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fd-ring, .fd-tick { animation: none; stroke-dashoffset: 0; } }
.fd-kicker { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #1e8a4c; }
.form-done h3 { font-size: 30px; margin: 0 0 8px; text-align: left; }
.form-done .fd-lead { color: #37424f; font-size: 17px; margin: 0 0 22px; }
.fd-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; }
.fd-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; position: relative; padding-bottom: 16px; }
.fd-steps li:not(:last-child)::before { content: ''; position: absolute; left: 16px; top: 32px; bottom: 2px; width: 2px; background: var(--line); }
.fd-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; background: #e6f6fa; color: var(--cyan-dark); }
.fd-steps li.done .fd-n { background: #1e8a4c; color: #fff; font-size: 14px; }
.fd-steps strong { display: block; font-size: 16px; color: var(--text); padding-top: 5px; }
.fd-steps small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.fd-promo, .fd-mail { margin: 0 0 12px; padding: 11px 14px; border-radius: 8px; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; }
.fd-promo { background: #fff7dc; border: 1px solid #f6c236; }
.fd-mail { background: #f1f5f8; color: #37424f; }
.form-done .fd-promo i, .form-done .fd-mail i { font-size: 15px; color: var(--cyan-dark); }
.fd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.fd-actions .btn { padding: 13px 20px; font-size: 16px; }
.fd-again { font-size: 14px; color: var(--muted); }
@media (max-width: 600px) { .fd-actions .btn { width: 100%; } .form-done h3 { font-size: 26px; } }
.spam-q { display: block; margin: 6px 0; font-weight: 600; } .spam-q input { display: block; width: 120px; margin-top: 6px; }

/* ===== Elcentralen går att leka med: slå av säkringar / jordfelsbrytaren ===== */
.panel-art { position: relative; }
.panel-art [data-sw] { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.panel-art .mcb, .panel-art .rcd-g { transition: transform .15s ease, filter .15s ease; transform-box: fill-box; transform-origin: center; }
.panel-art .mcb:hover, .panel-art .rcd-g:hover { filter: brightness(1.06) drop-shadow(0 4px 10px rgba(34, 211, 238, .35)); }
.panel-art .mcb:focus-visible .mcb-body, .panel-art .rcd-g:focus-visible .rcd { stroke: var(--cyan); stroke-width: 3; }
.panel-art .mcb:active, .panel-art .rcd-g:active { transform: scale(.97); }
.panel-art .test-btn { transition: filter .15s; }
.panel-art .test-btn:hover { filter: drop-shadow(0 0 5px #f2c94c); }
.panel-art .lever { transition: transform .14s cubic-bezier(.3, 1.6, .5, 1); }
/* Avslagen säkring */
.panel-art .mcb.is-off .mcb-lever { animation: none !important; transform: translateY(12px); }
.panel-art .mcb.is-off .led { animation: none !important; fill: #ef4444; filter: drop-shadow(0 0 4px #ef4444); }
.panel-art .wire-flow.is-off { animation: none !important; opacity: .08 !important; transition: opacity .2s; }
.panel-art .grp-row.is-off { color: #6b7d93; }
.panel-art .grp-row.is-off i { animation: none !important; background: #ef4444; box-shadow: 0 0 8px #ef4444; }
/* Jordfelsbrytaren utlöst: allt efter den blir strömlöst */
.panel-art.rcd-off .main-lever { animation: none !important; transform: translateY(12px); }
.panel-art.rcd-off .flow-bus, .panel-art.rcd-off .w-in { animation: none !important; opacity: .08 !important; }
.panel-art.rcd-off .mcb .led { animation: none !important; fill: #4b5b70; filter: none; }
.panel-art.rcd-off .test-btn { animation: tb-blink 1s ease-in-out infinite; }
@keyframes tb-blink { 50% { fill: #fff3c4; } }
/* Lite mörkare i toppen när hela huset är strömlöst */
.hero-text, .panel-art svg, .grp-list { transition: filter .35s ease; }
.pa-blackout .hero-text { filter: brightness(.42) saturate(.6); }
.pa-blackout .panel-art svg, .pa-blackout .grp-list { filter: brightness(.8); }
/* Tipset under centralen */
.pa-hint { grid-column: 1 / -1; margin: -4px 0 0; text-align: center; font-size: 13.5px; color: #8fa3bb; opacity: 0; animation: pa-hint-in .6s ease 3.4s forwards; }
.pa-hint span { display: inline-block; animation: pa-tap 1.6s ease-in-out 4s 3; }
.panel-art.touched .pa-hint { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes pa-hint-in { to { opacity: 1; } }
@keyframes pa-tap { 50% { transform: translateY(-4px); } }
/* Popupen */
.pa-pop { position: absolute; left: 50%; top: 14px; z-index: 5; width: min(360px, calc(100% - 16px)); display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start;
  padding: 14px 16px; border-radius: 16px; background: #fff; color: #0f1b2a; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .5);
  transform: translate(-50%, -8px) scale(.92); opacity: 0; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; }
.pa-pop.in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.pa-pop[hidden] { display: none; }
.pa-pop-ico { font-size: 28px; line-height: 1; grid-row: span 2; animation: pa-wobble .6s ease .1s; }
.pa-pop-txt { display: flex; flex-direction: column; gap: 3px; }
.pa-pop-txt strong { font: 700 15.5px/1.3 var(--body); }
.pa-pop-txt span { font-size: 13.5px; line-height: 1.45; color: #475569; }
.pa-pop-btn { grid-column: 2; justify-self: start; margin-top: 6px; border: 0; border-radius: 999px; padding: 8px 15px; font: 700 14px var(--body); cursor: pointer; color: var(--ink, #0f1b2a); background: var(--cyan); }
.pa-pop-btn:hover { filter: brightness(1.08); }
@keyframes pa-wobble { 25% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } }
@media (max-width: 900px) { .pa-hint { margin-top: 2px; } }
@media (prefers-reduced-motion: reduce) {
  .pa-hint { animation: none; opacity: 1; } .pa-hint span, .pa-pop-ico, .panel-art.rcd-off .test-btn { animation: none; }
  .pa-pop, .hero-text, .panel-art svg, .grp-list { transition: none; }
}

/* Snabbtest: Är ditt hem elsäkert? */
.ec-band { position: relative; overflow: hidden; }
.ec-band::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(38, 192, 224, .18), transparent 65%); pointer-events: none; }
.ec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; position: relative; }
.ec-kicker { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-light); margin-bottom: 14px; }
.ec-intro p { color: rgba(255, 255, 255, .78); font-size: 18px; margin: 16px 0 24px; max-width: 470px; }
.ec-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ec-points li { display: flex; gap: 12px; align-items: center; color: rgba(255, 255, 255, .88); }
.ec-points i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(38, 192, 224, .14); color: var(--cyan); font-size: 14px; flex: none; }
.ec-card { background: var(--white); color: var(--text); border-radius: 14px; padding: 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); min-height: 430px; display: flex; flex-direction: column; justify-content: center; }
.ec-start { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ec-start p { color: var(--muted); margin: 0 0 8px; }
.ec-gauge-mini { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; color: var(--cyan-dark); background: radial-gradient(circle, rgba(38, 192, 224, .16), rgba(38, 192, 224, .04)); box-shadow: inset 0 0 0 3px rgba(38, 192, 224, .3); margin-bottom: 6px; }
.ec-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.ec-step { font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ec-bar { flex: 1; height: 6px; border-radius: 99px; background: #e5e9ee; overflow: hidden; }
.ec-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--cyan-dark)); border-radius: 99px; transition: width .35s ease; }
.ec-q { margin-bottom: 18px; }
.ec-qi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(38, 192, 224, .12); color: var(--cyan-dark); font-size: 19px; margin-bottom: 12px; }
.ec-q h3 { font-size: 26px; }
.ec-hint { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.ec-opts { display: grid; gap: 10px; }
.ec-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; border-radius: 10px; border: 2px solid var(--line); background: var(--white); color: var(--text); font: 500 16.5px var(--body); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.ec-opt:hover { border-color: var(--cyan); background: rgba(38, 192, 224, .05); }
.ec-opt:active { transform: scale(.99); }
.ec-opt.on { border-color: var(--cyan-dark); background: rgba(38, 192, 224, .1); }
.ec-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #b8c1cb; flex: none; display: grid; place-items: center; }
.is-multi .ec-mark { border-radius: 5px; }
.ec-opt.on .ec-mark { border-color: var(--cyan-dark); background: var(--cyan-dark); box-shadow: inset 0 0 0 3px var(--white); }
.is-multi .ec-opt.on .ec-mark { box-shadow: none; }
.is-multi .ec-opt.on .ec-mark::after { content: "✓"; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.ec-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; min-height: 40px; }
.ec-back { background: none; border: 0; color: var(--muted); font: 500 15px var(--body); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 8px 4px; }
.ec-back:hover { color: var(--text); }
.ec-next[disabled] { opacity: .45; cursor: default; }
.ec-res { text-align: center; }
.ec-gauge { position: relative; width: 150px; height: 150px; margin: 0 auto 12px; }
.ec-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ec-g-bg { fill: none; stroke: #e8edf2; stroke-width: 10; }
.ec-g-fg { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.lvl-green .ec-g-fg { stroke: #16a34a; } .lvl-yellow .ec-g-fg { stroke: #e0a100; } .lvl-red .ec-g-fg { stroke: #dc2626; }
.ec-g-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ec-g-n b { font: 700 42px/1 var(--display); }
.ec-g-n small { color: var(--muted); font-size: 13px; }
.ec-res h3 { font-size: 28px; }
.lvl-green h3 { color: #15803d; } .lvl-yellow h3 { color: #a16207; } .lvl-red h3 { color: #b91c1c; }
.ec-rtext { color: var(--muted); margin: 8px 0 16px; }
.ec-urgent { display: flex; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 10px; background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d; font-size: 15px; margin-bottom: 16px; }
.ec-urgent i { color: #dc2626; font-size: 20px; margin-top: 2px; }
.ec-res h4 { font-size: 15px; text-align: left; margin: 0 0 8px; font-family: var(--body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ec-tips { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; text-align: left; }
.ec-tips li { display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; background: var(--paper); font-size: 15px; line-height: 1.5; }
.ec-tips li i { margin-top: 3px; color: #e0a100; }
.ec-tips li.w3 i { color: #dc2626; }
.ec-good { color: #15803d; font-size: 15px; margin: 0 0 14px; }
.ec-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.ec-cta .btn-quiet { color: var(--text); border-color: var(--line); }
.ec-fine { font-size: 12.5px; color: var(--muted); margin: 16px 0 0; }
@media (max-width: 1000px) { .ec { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 640px) {
  .ec-card { padding: 22px 18px; min-height: 0; border-radius: 12px; }
  .ec-q h3 { font-size: 22px; }
  .ec-opt { font-size: 16px; padding: 13px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ec-g-fg, .ec-bar span { transition: none; } }

/* Live/dold-list – syns bara för inloggade */
.live-bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 760px; margin: -28px auto 28px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #fff; color: #16202c; font: 500 14px/1.3 var(--body, system-ui), sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); border: 1px solid rgba(0, 0, 0, .08); width: fit-content; }
.live-bar .lb-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa5b1; flex-shrink: 0; }
.live-bar.is-on .lb-dot { background: #1fb954; box-shadow: 0 0 0 4px rgba(31, 185, 84, .2); animation: lbPulse 2s infinite; }
.live-bar .lb-txt { flex: 1; min-width: 0; }
.live-bar button { border: 0; border-radius: 999px; padding: 7px 14px; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; background: #16202c; color: #fff; }
.live-bar.is-off button { background: #1fb954; }
.live-bar button:hover { filter: brightness(1.15); }
.live-off > :not(.live-bar) { opacity: .45; filter: grayscale(.5); }
.live-off { outline: 3px dashed rgba(154, 165, 177, .6); outline-offset: -10px; }
@keyframes lbPulse { 50% { box-shadow: 0 0 0 7px rgba(31, 185, 84, 0); } }
@media (max-width: 600px) { .live-bar { border-radius: 14px; margin: -20px 16px 20px; } }