/* ======================= ELECTRICAL — Dark Theme ======================= */
* { box-sizing: border-box; }
.elx{
  /* tokens */
  --ink:#e6edf6;                 /* main text */
  --ink-soft:#9fb0c0;            /* muted text */
  --paper:#0b1427;               /* card surface */
  --bg:#0b1220;                  /* page background */
  --line:rgba(255,255,255,.06);  /* subtle borders */
  --brand:#3aa8e5;               /* primary blue */
  --brand-2:#74c0ff;             /* light blue */
  --radius:16px;
  --shadow:0 10px 30px rgba(2,10,25,.35);

  color:var(--ink);
  background:var(--bg);
}
.elx-container{ width:min(1180px,92vw); margin:0 auto; padding: clamp(32px,4vw,56px) 0; }
.hd{ margin-bottom:14px; }
.hd h2{ margin:0 0 6px; font-weight:800; font-size:clamp(24px,3.2vw,40px); }
.hd p{ margin:0; color:var(--ink-soft); }
.hd.center{ text-align:center; }
.hd.left{ text-align:left; }

.btn{ display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn.pri{ background:var(--brand); color:#fff; box-shadow:var(--shadow); }
.btn.pri:hover{ filter:brightness(1.05); }
.btn.ghost{ color:var(--brand-2); border:1px solid var(--brand-2); background:transparent; }
.btn.ghost:hover{ background:rgba(116,192,255,.12); }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Emergency (dark gradient hero + card) ---------- */
.elx-hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65) 85%),
    linear-gradient(180deg, #0d1528 0%, #0b1220 100%);
  overflow: clip;
}
.elx-hero .elx-container{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(18px, 3.5vw, 42px); align-items:center; }
.tag{ display:inline-block; background:rgba(116,192,255,.12); color:#bfe2ff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; }
.elx-hero h1{ margin:8px 0 4px; font-size: clamp(28px, 4.6vw, 54px); font-weight:800; letter-spacing:-.01em; }
.elx-hero p{ margin:0 0 12px; color:var(--ink-soft); max-width:60ch; }
.hero-bullets{ display:flex; gap:12px; flex-wrap:wrap; padding:0; margin:12px 0 0; list-style:none; }
.hero-bullets li{ background:var(--paper); border:1px solid var(--line); padding:8px 12px; border-radius:999px; box-shadow: var(--shadow); font-size:14px; }

.hero-card{ background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow: var(--shadow); overflow:hidden; transform:rotate(1deg); }
.hero-card figure{ background-image:var(--img); background-size:cover; background-position:center; aspect-ratio:16/10; }
.hero-card__body{ padding:16px; }
.hero-card__body p{ color:var(--ink-soft); }
@media (max-width: 900px){ .elx-hero .elx-container{ grid-template-columns:1fr; } .hero-card{ transform:none; } }

/* ---------- Services cards ---------- */
.elx-services{ background:var(--bg); }
.svc-grid{ display:grid; gap:16px; grid-template-columns: repeat(5, 1fr); }
.svc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow: var(--shadow); }
.svc h3{ margin:0 0 8px; font-size:18px; }
.check{ margin:0; padding:0; list-style:none; }
.check li{ position:relative; padding-left:22px; color:var(--ink-soft); margin:6px 0; }
.check li::before{
  content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:conic-gradient(var(--brand) 0 75%, #1f2a44 0);
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px rgba(116,192,255,.35);
}
@media (max-width: 1100px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .svc-grid{ grid-template-columns: 1fr; } }

/* ---------- Panels split + vertical steps ---------- */
.elx-panels{ background:var(--bg); }
.split{ display:grid; gap: clamp(16px,3vw,36px); align-items:center; }
.photo{
  background-image:var(--img); background-size:cover; background-position:center;
  border-radius:20px; aspect-ratio: 4/3; border:1px solid var(--line); box-shadow: var(--shadow);
}
.steps{ counter-reset: step; list-style:none; margin:12px 0 0; padding:0; position:relative; }
.steps li{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 14px 14px 46px;
  margin:10px 0; box-shadow: var(--shadow); position:relative;
}
.steps li::before{ counter-increment: step; content: counter(step); position:absolute; left:12px; top:14px;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--brand);
}
.steps li + li::after{ content:""; position:absolute; left:24px; top:-10px; width:2px; height:10px; background:rgba(116,192,255,.35); }
@media (max-width: 900px){ .split{ grid-template-columns:1fr; } }

/* ---------- Surge protection ---------- */
.elx-surge{ background:var(--bg); }
.quick-links{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 16px; }
.quick-links a{ display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); }
.quick-links a:hover{ background:rgba(255,255,255,.06); color:var(--brand-2); }

.faq-grid{ display:grid; gap:14px; grid-template-columns: repeat(3,1fr); }
.faq{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: var(--shadow); }
.faq h3{ margin:0 0 6px; font-size:18px; }
.faq p{ margin:0; color:var(--ink-soft); }
@media (max-width: 900px){ .faq-grid{ grid-template-columns:1fr; } }

.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.mosaic figure{
  aspect-ratio: 3/2; border-radius:14px;
  background-image:var(--img); background-size:cover; background-position:center;
  border:1px solid var(--line); box-shadow: var(--shadow);
}
@media (max-width: 900px){ .mosaic{ grid-template-columns:1fr; } }

/* ---------- EV charging ---------- */
.elx-ev{ background:var(--bg); }
.ev-banner{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(16px,3vw,36px); align-items:center; }
.ev-img{ background-image:var(--img); background-size:cover; background-position:center; border-radius:20px; aspect-ratio: 16/10; border:1px solid var(--line); box-shadow: var(--shadow); }
.ev-copy h2{ margin:0 0 6px; font-size:clamp(22px,3.2vw,38px); font-weight:800; }
.ev-copy p{ margin:0 0 12px; color:var(--ink-soft); }
@media (max-width: 900px){ .ev-banner{ grid-template-columns:1fr; } }

.ev-compare{
  margin-top:16px; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; box-shadow: var(--fshadow); overflow:hidden;
}
.ev-compare h3{ margin:0; padding:12px 14px; border-bottom:1px solid var(--line); font-size:18px; }
.ev-compare table{ width:100%; border-collapse: collapse; }
.ev-compare th, .ev-compare td{ padding:12px 14px; border-top:1px solid var(--line); text-align:left; }
.ev-compare thead th{ background:rgba(255,255,255,.05); border-top:0; }

.ev-features{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; margin-top:16px; }
.ev-features article{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: var(--shadow); }
.ev-features h4{ margin:0 0 6px; font-size:16px; }
.ev-features p{ margin:0; color:var(--ink-soft); }
@media (max-width: 900px){ .ev-features{ grid-template-columns:1fr; } }