/* Electricity cost reduction page (NexusBrain) */
:root{
  --elec-deep:#061C3F;
  --elec-deep2:#071a28;
  --elec-ink:#0b1220;
  --elec-muted:#64748b;
  --elec-accent:#D7FF3F;     /* Electric yellow/green */
  --elec-accent2:#17a2ff;    /* Electric blue */
  --elec-card:rgba(255,255,255,.92);
  --elec-line:rgba(15,23,42,.12);
  --elec-shadow:0 18px 44px rgba(2,6,23,.18);
  --elec-radius:18px;
}

.elec-page{width:100%; position:relative; background:linear-gradient(180deg, #ffffff 0%, #f6f8fb 70%, #ffffff 100%); color:var(--elec-ink);}
.elec-page a{color:inherit}
.elec-wrap{max-width:1180px; margin:0 auto; padding:0 22px;}
.elec-section{padding:110px 0;}
@media (min-width: 981px){
  .elec-section{min-height:92vh;}
}
.elec-kicker{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color:rgba(6,28,63,.9);}
.elec-kicker .dot{width:10px; height:10px; border-radius:999px; background:var(--elec-accent); box-shadow:0 0 0 6px rgba(215,255,63,.18);}
.elec-h2{margin:14px 0 14px; font-size:34px; line-height:1.22; letter-spacing:-.6px;}
.elec-p{margin:0; color:rgba(15,23,42,.78); line-height:1.75; font-size:16px; font-weight:400;}
.elec-muted{color:rgba(15,23,42,.62);}

/* Hero */
.elec-hero{
  min-height:calc(100vh - var(--nb-header-h, 72px));
  display:flex; align-items:center; position:relative; overflow:hidden;
  background:radial-gradient(1200px 700px at 20% 10%, rgba(23,162,255,.15), transparent 60%),
             radial-gradient(900px 520px at 80% 30%, rgba(215,255,63,.14), transparent 55%),
             linear-gradient(180deg, #071a28 0%, #041221 100%);
  color:#fff;
}
.elec-hero-bg{
  position:absolute; inset:0;
  background-image:url('/assets/img/solutions/electricity-transformer.webp');
  background-size:cover; background-position:center;
  transform:translate3d(0,0,0);
  filter:saturate(.95) contrast(.98) brightness(.76);
}
.elec-hero::before{
  content:""; position:absolute; inset:0;
  /* 배경이 복잡해도 텍스트/카드 가독성이 유지되도록 중앙부도 충분히 어둡게 처리 */
  background:linear-gradient(90deg, rgba(2,6,23,.88) 0%, rgba(2,6,23,.64) 48%, rgba(2,6,23,.88) 100%);
}
.elec-hero::after{
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(1200px 600px at 60% 20%, rgba(215,255,63,.10), transparent 55%);
  pointer-events:none;
}
.elec-hero-inner{position:relative; z-index:1; width:100%;}
.elec-hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:center;}

.elec-hero-side{display:grid; gap:12px; align-content:start;}
.elec-hero-anim{
  border-radius:var(--elec-radius);
  background:rgba(2,6,23,.36);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 44px rgba(2,6,23,.22);
  padding:12px 12px 10px;
  backdrop-filter: blur(14px) saturate(1.15);
  overflow:hidden;
}
.elec-bill2cash{display:block; width:100%; height:auto;}
.elec-hero-anim-cap{
  margin-top:8px;
  font-size:12px; font-weight:950; letter-spacing:-.2px;
  color:rgba(255,255,255,.84);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-shadow:0 2px 12px rgba(2,6,23,.65);
  /* 캡션 자체의 대비(가독성) 강화 */
  background:rgba(2,6,23,.38);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 10px 9px;
}
.elec-hero-anim-cap .cap-main{
  font-size:13px; font-weight:950;
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap;
  line-height:1.15;
}
.elec-hero-anim-cap .cap-sub{
  font-size:11.7px; font-weight:800;
  color:rgba(255,255,255,.78);
  text-align:center;
  line-height:1.25;
}

/* 상단 캡션(고지서 → 절감액) 이해도/가독성 개선 */
.elec-hero-anim-cap .cap-pill{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(2,6,23,.22);
}
.elec-hero-anim-cap .cap-pill em{
  font-style:normal;
  font-weight:950;
  font-size:11px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  opacity:.92;
}
.elec-hero-anim-cap .cap-arrow{
  font-size:14px;
  font-weight:950;
  color:rgba(255,255,255,.92);
}

.elec-hero-anim-cap .cap-pill.cap-minus{
  background:rgba(255,70,70,.10);
  border-color:rgba(255,70,70,.22);
}
.elec-hero-anim-cap .cap-pill.cap-minus em{
  background:rgba(255,70,70,.18);
}

.elec-hero-anim-cap .cap-pill.cap-plus{
  background:rgba(215,255,63,.10);
  border-color:rgba(215,255,63,.22);
}
.elec-hero-anim-cap .cap-pill.cap-plus em{
  background:rgba(215,255,63,.18);
  color:rgba(215,255,63,.98);
}
.elec-b2c-bill{transform-origin:54px 92px; animation:elecBillMove 3.4s ease-in-out infinite;}
.elec-b2c-cash{transform-origin:0 0; animation:elecCashPop 3.4s ease-in-out infinite;}
@keyframes elecBillMove{
  0%{transform:translate(0,0) scale(1); opacity:1}
  45%{transform:translate(240px,-52px) scale(.92); opacity:1}
  55%{transform:translate(300px,-70px) scale(.86); opacity:0}
  100%{transform:translate(0,0) scale(1); opacity:1}
}
@keyframes elecCashPop{
  0%, 44%{opacity:0; transform:translate(504px,88px) scale(.85)}
  55%{opacity:1; transform:translate(504px,88px) scale(1)}
  78%{opacity:1; transform:translate(504px,88px) scale(1)}
  100%{opacity:0; transform:translate(504px,88px) scale(.90)}
}

.elec-btn.primary.elec-glow{
  position:relative;
  /* 형광 느낌을 줄이고, 신뢰감 있는 블루 계열 중심으로 */
  box-shadow:0 18px 44px rgba(23,162,255,.22), 0 0 0 0 rgba(23,162,255,.18);
  animation:elecGlow 2.2s ease-in-out infinite;
}
.elec-btn.primary.elec-glow::after{
  content:""; position:absolute; inset:-2px;
  border-radius:inherit;
  background:linear-gradient(90deg, rgba(23,162,255,.0), rgba(23,162,255,.34), rgba(34,197,94,.22), rgba(23,162,255,.0));
  filter:blur(10px);
  opacity:.55;
  pointer-events:none;
}
@keyframes elecGlow{
  0%,100%{box-shadow:0 18px 44px rgba(23,162,255,.18), 0 0 0 0 rgba(23,162,255,.16)}
  50%{box-shadow:0 24px 58px rgba(23,162,255,.28), 0 0 0 8px rgba(23,162,255,.06)}
}
.elec-btn.primary.elec-glow:hover{transform:translateY(-2px) scale(1.03);}

.elec-title{margin:0; font-size:46px; line-height:1.12; letter-spacing:-1.2px; font-weight:950; text-shadow:0 3px 18px rgba(0,0,0,.35);}
.elec-title b{color:var(--elec-accent);}
/* Hero micro-highlight (draw-line style) */
.elec-hi{
  position:relative;
  display:inline-block;
  padding:0 .04em;
  z-index:0;
}
.elec-hi b{
  color:var(--elec-accent);
  text-shadow:0 0 18px rgba(215,255,63,.22);
}
.elec-hi::after{
  content:"";
  position:absolute;
  left:-2px; right:-2px;
  bottom:.10em;
  height:.55em;
  border-radius:.55em;
  background:rgba(215,255,63,.22);
  transform:scaleX(0);
  transform-origin:left;
  z-index:-1;
}
.elec-hi.elec-hi-refund::after{
  background:linear-gradient(90deg, rgba(215,255,63,.26), rgba(23,162,255,.18));
}
.elec-title.elec-fadeup.is-on .elec-hi::after{
  animation:elecHi 1.0s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
@keyframes elecHi{to{transform:scaleX(1);}}

/* Hero CTA hierarchy */
.elec-hero .elec-btn-mega{
  padding:16px 18px;
  border-radius:16px;
  font-size:16px;
  color:#fff;
  background:linear-gradient(90deg, rgba(23,162,255,1) 0%, rgba(34,197,94,1) 100%);
  box-shadow:0 18px 44px rgba(23,162,255,.18);
}
.elec-hero .elec-btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.92);
}
.elec-hero .elec-btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.36);
}

.elec-sub{margin:14px 0 0; color:rgba(255,255,255,.96); line-height:1.7; font-size:16px; font-weight:800; text-shadow:0 2px 14px rgba(0,0,0,.55);}
.elec-hero-badges{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px;}
.elec-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.90); font-size:13px; font-weight:700;
  backdrop-filter: blur(8px);
}
.elec-badge .ic{width:18px; height:18px; display:inline-grid; place-items:center; border-radius:7px;
  background:rgba(215,255,63,.18); border:1px solid rgba(215,255,63,.28); color:#fff;
}
.elec-cta{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap;}
.elec-btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  padding:14px 16px; border-radius:14px; font-weight:900; letter-spacing:-.2px;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.elec-btn.primary{
  background:linear-gradient(90deg, var(--elec-accent) 0%, #b7ff6b 100%);
  color:#041221; box-shadow:0 18px 40px rgba(215,255,63,.22);
}
.elec-btn.primary:hover{transform:translateY(-2px); box-shadow:0 22px 54px rgba(215,255,63,.28);}
.elec-btn.ghost{
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18);
}
.elec-btn.ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.26);}

.elec-hero-card{
  border-radius:var(--elec-radius);
  background:rgba(2,6,23,.44);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 44px rgba(2,6,23,.25);
  padding:18px;
  backdrop-filter: blur(14px) saturate(1.15);
}
.elec-hero-card h3{margin:0 0 10px; font-size:18px; font-weight:950;}

/* Hero metric hierarchy ("하나의 숫자" 느낌 강화) */
.elec-hero-metric{
  padding:14px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.elec-hero-metric .label{
  font-size:12.5px;
  font-weight:900;
  color:rgba(255,255,255,.76);
  letter-spacing:-.2px;
}
.elec-hero-metric .value{
  margin-top:8px;
  font-size:32px;
  font-weight:950;
  letter-spacing:-.8px;
  line-height:1.05;
  text-shadow:0 2px 14px rgba(2,6,23,.55);
}
.elec-hero-metric .value small{font-size:14px; color:rgba(255,255,255,.78); font-weight:900;}

.elec-hero-micro{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.elec-hero-micro .chip{
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
  font-weight:900;
  color:rgba(255,255,255,.82);
}
.elec-hero-micro .chip b{color:#fff;}

/* Reveal animations */
.elec-reveal{opacity:0; transform:translateY(12px); transition:opacity .62s ease, transform .62s ease;}
.elec-reveal.is-on{opacity:1; transform:translateY(0);}
.elec-fadeup{opacity:1; transform:none;}
.js-on .elec-fadeup{opacity:0; transform:translateY(18px); transition:opacity .74s ease, transform .74s ease;}
.js-on .elec-fadeup.is-on{opacity:1; transform:translateY(0);}

/* Scroll spy */
.elec-scrollspy{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
}
.elec-spy-dot{
  width:10px; height:10px;
  border-radius:999px;
  background:rgba(6,28,63,.28);
  position:relative;
  outline:none;
}
.elec-spy-dot.is-on{background:var(--elec-accent);}
.elec-spy-dot.is-on::after{
  content:""; position:absolute; inset:-8px;
  border-radius:999px;
  border:1px solid rgba(215,255,63,.45);
  box-shadow:0 0 0 6px rgba(215,255,63,.10);
}
@media (max-width: 980px){
  .elec-scrollspy{display:none;}
}

/* Pain */
.elec-pain-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:18px;}
.elec-card{
  background:var(--elec-card);
  border:1px solid var(--elec-line);
  border-radius:var(--elec-radius);
  box-shadow:0 12px 30px rgba(2,6,23,.08);
  padding:18px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.elec-card:hover{transform:translateY(-4px); box-shadow:var(--elec-shadow);}
.elec-card .tag{display:inline-flex; gap:8px; align-items:center; font-weight:900; color:rgba(6,28,63,.90); font-size:12px;}
.elec-card .tag::before{content:""; width:10px; height:10px; border-radius:4px; background:rgba(23,162,255,.22); border:1px solid rgba(23,162,255,.32);}
.elec-card h3{margin:10px 0 8px; font-size:18px; letter-spacing:-.3px;}
.elec-card p{margin:0; color:rgba(15,23,42,.70); line-height:1.65;}
.elec-card:hover .tag::before{animation:elecShake .45s ease-in-out;}
@keyframes elecShake{
  0%{transform:rotate(0)}
  25%{transform:rotate(8deg)}
  55%{transform:rotate(-7deg)}
  100%{transform:rotate(0)}
}


/* Sticky pain */
.elec-sticky-pain{
  margin-top:18px;
  display:grid;
  grid-template-columns:.90fr 1.10fr;
  gap:16px;
  align-items:start;
}
.elec-sticky-side{position:sticky; top:calc(var(--nb-header-h,72px) + 18px); align-self:start;}
.elec-sticky-card{
  border-radius:calc(var(--elec-radius) + 4px);
  background:linear-gradient(180deg, rgba(6,28,63,.92), rgba(4,18,33,.98));
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 44px rgba(2,6,23,.22);
  padding:16px;
  overflow:hidden;
  position:relative;
}
.elec-sticky-card::before{
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(520px 260px at 20% 20%, rgba(23,162,255,.20), transparent 60%),
             radial-gradient(520px 260px at 80% 70%, rgba(215,255,63,.18), transparent 60%);
  pointer-events:none;
}
.elec-sticky-eyebrow{position:relative; z-index:1; font-weight:950; letter-spacing:-.2px; font-size:12px; color:rgba(255,255,255,.82);}
.elec-sticky-illus{position:relative; z-index:1; margin-top:10px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); padding:10px; overflow:hidden;}
.elec-sticky-illus .illus{display:none;}
.elec-sticky-illus .illus.is-on{display:block;}
.elec-illus-svg{width:100%; height:140px; display:block;}
.elec-sticky-title{position:relative; z-index:1; margin-top:10px; font-size:18px; font-weight:950; letter-spacing:-.4px;}
.elec-sticky-desc{position:relative; z-index:1; margin-top:8px; color:rgba(255,255,255,.82); line-height:1.65; font-weight:800; font-size:13px;}
.elec-sticky-note{position:relative; z-index:1; margin-top:12px; font-size:12px; color:rgba(255,255,255,.68); line-height:1.55;}
.elec-sticky-list{display:grid; gap:12px;}
.elec-pain-item{
  border-radius:calc(var(--elec-radius) + 4px);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  padding:18px;
  min-height: 340px;
  display:grid;
  align-content:start;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.elec-pain-item.is-active{
  border-color:rgba(23,162,255,.32);
  box-shadow:0 18px 44px rgba(2,6,23,.14);
  transform:translateY(-2px);
}
.elec-pain-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:950; font-size:12px; color:rgba(6,28,63,.92);
}
.elec-pain-badge .pulse{
  width:10px; height:10px; border-radius:999px;
  background:rgba(255,59,59,.78);
  box-shadow:0 0 0 0 rgba(255,59,59,.32);
  animation:elecPulse 1.3s ease-in-out infinite;
}
@keyframes elecPulse{
  0%{transform:scale(.9); box-shadow:0 0 0 0 rgba(255,59,59,.22)}
  60%{transform:scale(1); box-shadow:0 0 0 10px rgba(255,59,59,.0)}
  100%{transform:scale(.9); box-shadow:0 0 0 0 rgba(255,59,59,.0)}
}
.elec-pain-item h3{margin:0; font-size:18px; letter-spacing:-.3px;}
.elec-pain-item p{margin:0; color:rgba(15,23,42,.70); line-height:1.7;}
.elec-pain-bullets{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:8px;}
.elec-pain-bullets li{
  display:flex; align-items:center; gap:10px;
  font-weight:900; color:rgba(6,28,63,.86); font-size:13px;
}
.elec-pain-bullets li::before{
  content:""; width:8px; height:8px; border-radius:3px;
  background:rgba(23,162,255,.24); border:1px solid rgba(23,162,255,.34);
}
.elec-mini-h{
  font-size:12px;
  font-weight:950;
  letter-spacing:-.1px;
  color:rgba(15,23,42,.62);
}
.elec-pain-grid{margin-top:10px; display:grid; gap:12px;}
@media (min-width: 980px){
  .elec-pain-grid{grid-template-columns:1fr 1fr;}
}
.elec-pain-box{
  border-radius:16px;
  padding:12px;
  background:rgba(6,28,63,.03);
  border:1px solid rgba(15,23,42,.08);
}
.elec-pain-outs{margin:8px 0 0; padding:0; list-style:none; display:grid; gap:8px;}
.elec-pain-outs li{
  display:flex; gap:10px; align-items:flex-start;
  font-weight:850; color:rgba(15,23,42,.78); font-size:12px; line-height:1.35;
}
.elec-pain-outs li::before{
  content:""; width:8px; height:8px; border-radius:3px;
  margin-top:4px;
  background:rgba(215,255,63,.20);
  border:1px solid rgba(215,255,63,.38);
}
@media (max-width: 980px){
  .elec-sticky-pain{grid-template-columns:1fr;}
  .elec-sticky-side{position:relative; top:auto;}
  .elec-pain-item{min-height:auto;}
}
/* Solution flow */
.elec-solution-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px;}
.elec-flow{
  background:#ffffff;
  border:1px solid var(--elec-line);
  border-radius:calc(var(--elec-radius) + 4px);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  padding:18px;
  overflow:hidden;
}
.elec-flow-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.elec-flow-top h3{margin:0; font-size:20px; font-weight:950;}
.elec-flow-top p{margin:6px 0 0; color:rgba(15,23,42,.86); line-height:1.65; font-weight:750;}
.elec-flow-badges{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.elec-pill{
  padding:8px 10px; border-radius:999px; font-weight:900; font-size:12px;
  background:rgba(6,28,63,.06); border:1px solid rgba(6,28,63,.12);
  color:rgba(6,28,63,.92);
}
.elec-pill strong{color:rgba(6,28,63,1);}

.elec-private{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(6,28,63,.08);
  border:1px solid rgba(6,28,63,.14);
  color:rgba(6,28,63,.92);
  font-size:11px;
  font-weight:950;
  margin-right:6px;
}
.elec-private::before{
  content:"🔒";
  font-size:12px;
}

.elec-flow-viz{margin-top:14px; display:grid; grid-template-columns:1fr 140px 1fr; gap:14px; align-items:center;}
.elec-node{
  border-radius:18px; padding:14px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(6,28,63,.06), rgba(6,28,63,.02));
}
.elec-node .t{font-weight:950; letter-spacing:-.2px;}
.elec-node .s{margin-top:6px; color:rgba(15,23,42,.70); font-weight:800; font-size:13px;}
.elec-arrow{
  position:relative; height:84px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(23,162,255,.10), rgba(215,255,63,.08));
  border:1px solid rgba(15,23,42,.10);
  display:grid; place-items:center;
}
.elec-arrow svg{width:100%; height:100%;}
.elec-flow-line{stroke:rgba(23,162,255,.95); stroke-width:4; fill:none; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260;}
.elec-flow.is-on .elec-flow-line{animation:elecDraw 1.2s ease forwards;}
@keyframes elecDraw{to{stroke-dashoffset:0}}
.elec-coin{fill:rgba(215,255,63,.95);}
.elec-won{fill:rgba(255,255,255,.88); font-weight:950; font-size:18px;}
.elec-flow.is-on .elec-coin{animation:coinPop .9s ease both;}
@keyframes coinPop{
  0%{transform:translateY(10px) scale(.7); opacity:.0}
  45%{opacity:1}
  100%{transform:translateY(0) scale(1); opacity:1}
}



/* Before/After compare slider */
.elec-compare{margin-top:14px;}
.elec-compare-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.elec-compare-k{font-weight:950; color:rgba(6,28,63,.95); letter-spacing:-.2px;}
.elec-compare-hint{font-size:12px; color:rgba(15,23,42,.62); font-weight:900;}
.elec-compare-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 42px 1fr;
  gap:14px;
  align-items:start;
}
.elec-compare-col{
  border-radius:18px;
  padding:12px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(6,28,63,.04), rgba(6,28,63,.02));
}
.elec-compare-col.is-after{
  border-color:rgba(23,162,255,.18);
  background:linear-gradient(180deg, rgba(23,162,255,.06), rgba(6,28,63,.02));
}
.elec-compare-colhead{
  display:flex;
  align-items:center;
  gap:10px;
  padding:2px 4px 10px;
}
.elec-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.1px;
}
.elec-tag.before{
  background:rgba(15,23,42,.06);
  color:rgba(6,28,63,.92);
  border:1px solid rgba(15,23,42,.12);
}
.elec-tag.after{
  background:rgba(23,162,255,.10);
  color:rgba(6,28,63,.95);
  border:1px solid rgba(23,162,255,.22);
}
.elec-compare .elec-sub{
  font-size:12px;
  font-weight:900;
  color:rgba(15,23,42,.62);
}
.elec-compare-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  color:rgba(15,23,42,.45);
}
.elec-compare-cards{display:grid; gap:10px;}
.elec-compare-grid .elec-compare-cards{grid-template-columns:1fr;}
.elec-cc-bul{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.elec-cc-bul li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.35;
  font-weight:850;
  color:rgba(15,23,42,.74);
}
.elec-cc-bul li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:3px;
  margin-top:4px;
  background:rgba(23,162,255,.18);
  border:1px solid rgba(23,162,255,.30);
}
@media (max-width: 980px){
  .elec-compare-grid{grid-template-columns:1fr;}
  .elec-compare-arrow{display:none;}
}
.elec-compare-frame{
  margin-top:10px;
  position:relative;
  height:160px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(180deg, rgba(6,28,63,.04), rgba(6,28,63,.02));
  overflow:hidden;
}
.elec-compare-layer{position:absolute; inset:0; overflow:hidden;}
.elec-compare-layer.before{z-index:1;}
.elec-compare-layer.after{
  z-index:2;
  border-right:2px solid rgba(215,255,63,.65);
  background:linear-gradient(180deg, rgba(215,255,63,.14), rgba(23,162,255,.08));
}
.elec-compare-frame .elec-compare-cards{
  height:100%;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.elec-cc{
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  padding:12px;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}
.elec-compare-layer.after .elec-cc{
  background:rgba(255,255,255,.96);
  border-color:rgba(23,162,255,.18);
}
.elec-cc .k{font-size:12px; font-weight:950; color:rgba(15,23,42,.70);}
.elec-cc .v{margin-top:6px; font-size:18px; font-weight:950; letter-spacing:-.3px; color:rgba(6,28,63,.95);}
.elec-compare-layer.after .elec-cc .v{color:rgba(6,28,63,1);}
.elec-cc .s{margin-top:6px; font-size:12px; line-height:1.45; font-weight:800; color:rgba(15,23,42,.60);}
.elec-compare-handle{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background:rgba(215,255,63,.75);
  z-index:4;
}
.elec-compare-grip{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px;
  border-radius:18px;
  display:grid; place-items:center;
  background:rgba(6,28,63,.92);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.92);
  font-weight:950;
  box-shadow:0 18px 44px rgba(2,6,23,.22);
}
.elec-compare-range{
  width:100%;
  margin-top:10px;
  accent-color: var(--elec-accent);
}
@media (max-width: 980px){
  .elec-compare-frame{height:auto;}
  .elec-compare-frame .elec-compare-cards{grid-template-columns:1fr; }
  .elec-compare-handle{display:none;}
}
/* Solution (expanded) */
.elec-solution-grid2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  margin-top:18px;
  align-items:stretch;
}
.elec-explain{
  background:#fff;
  border:1px solid var(--elec-line);
  border-radius:calc(var(--elec-radius) + 4px);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  padding:18px;
  overflow:hidden;
}
.elec-explain h3{margin:0; font-size:20px; font-weight:950; letter-spacing:-.4px;}
.elec-bullets{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px;}
.elec-bullets li{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:16px;
  background:rgba(6,28,63,.04); border:1px solid rgba(6,28,63,.10);
}
.elec-bullets .ic{
  width:28px; height:28px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(215,255,63,.22); border:1px solid rgba(215,255,63,.34);
  font-weight:950; color:rgba(6,28,63,.95);
  flex:0 0 auto;
}
.elec-bullets b{color:rgba(6,28,63,.95)}
.elec-bullets p{margin:2px 0 0; color:rgba(15,23,42,.72); line-height:1.6;}
.elec-imgbox{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  position:relative;
  background:rgba(6,28,63,.10);
}
.elec-imgbox img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05) brightness(1.10);}
.elec-imgbox::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(2,6,23,.34), rgba(2,6,23,.06));}
.elec-imgbox .cap{
  position:absolute; left:14px; bottom:12px; right:14px;
  color:rgba(255,255,255,.92);
  font-weight:950; letter-spacing:-.3px;
}
.elec-imgbox .cap small{display:block; margin-top:6px; color:rgba(255,255,255,.80); font-weight:800; line-height:1.45;}

/* ROI & cases */
.elec-roi-grid{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start; margin-top:16px;}
.elec-case{
  background:#fff; border:1px solid var(--elec-line);
  border-radius:calc(var(--elec-radius) + 4px);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  padding:18px;
}
.elec-case-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.elec-case h3{margin:0; font-size:18px; font-weight:950;}
.elec-case small{display:block; margin-top:6px; color:rgba(15,23,42,.55); font-weight:800;}
.elec-kpis{margin-top:12px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.elec-kpi{
  border-radius:16px; padding:12px;
  background:rgba(6,28,63,.04); border:1px solid rgba(6,28,63,.10);
}
.elec-kpi .k{font-size:12px; color:rgba(15,23,42,.62); font-weight:900;}
.elec-kpi .v{margin-top:6px; font-size:18px; font-weight:950; letter-spacing:-.3px;}
.elec-kpi .v b{color:rgba(6,28,63,.95)}
.elec-chart{margin-top:14px; padding:14px; border-radius:18px; border:1px solid rgba(15,23,42,.08); background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,251,.92));}
.elec-bars{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:end; height:210px; margin-top:10px;}
.elec-bar{display:flex; flex-direction:column; align-items:stretch; gap:10px;}
.elec-bar .label{font-weight:900; color:rgba(15,23,42,.70); font-size:13px;}
.elec-bar .pillar{
  height:160px; border-radius:16px;
  background:rgba(6,28,63,.06); border:1px solid rgba(6,28,63,.10);
  position:relative; overflow:hidden;
}
.elec-bar .fill{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background:linear-gradient(180deg, rgba(23,162,255,.90), rgba(6,28,63,.92));
  transition:height 1.1s cubic-bezier(.2,.8,.2,1);
}
.elec-bar.after .fill{background:linear-gradient(180deg, rgba(215,255,63,.96), rgba(23,162,255,.65));}
.elec-bar .amt{font-weight:950; font-size:16px; letter-spacing:-.2px;}
.elec-save-chip{
  margin-top:12px; display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  background:rgba(215,255,63,.20); border:1px solid rgba(215,255,63,.32);
  font-weight:950; color:rgba(6,28,63,.95);
}

/* Calculator */
.elec-calc-slot{width:100%;}

.elec-calc{
  position:relative;
  border-radius:calc(var(--elec-radius) + 4px);
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 44px rgba(2,6,23,.10);
  padding:16px;
}
.elec-calc h3{margin:0; font-size:18px; font-weight:950;}
.elec-form{margin-top:12px; display:grid; gap:10px;}
.elec-field{display:grid; gap:6px;}
.elec-label{font-size:12px; color:rgba(15,23,42,.68); font-weight:900;}
.elec-input{
  width:100%; padding:12px 12px; border-radius:14px;
  border:1px solid rgba(15,23,42,.14); background:#fff; outline:0;
  font-weight:900; color:rgba(15,23,42,.88);
}
.elec-input:focus{border:1px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg, rgba(23,162,255,.80), rgba(215,255,63,.70)) border-box; box-shadow:0 0 0 4px rgba(23,162,255,.10);}
.elec-range{
  width:100%;
  height:6px;
  border-radius:999px;
  appearance:none;
  -webkit-appearance:none;
  background:linear-gradient(90deg,
    var(--calc-accent, rgba(215,255,63,.95)) 0%,
    var(--calc-accent, rgba(215,255,63,.95)) var(--calc-pct, 50%),
    rgba(15,23,42,.14) var(--calc-pct, 50%),
    rgba(15,23,42,.14) 100%
  );
  outline:none;
  accent-color: var(--calc-accent, rgba(215,255,63,.95));
}
.elec-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background: var(--calc-accent, rgba(215,255,63,.95));
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 8px 16px rgba(2,6,23,.18);
}
.elec-range:active::-webkit-slider-thumb{transform:scale(1.06)}
.elec-range:focus::-webkit-slider-thumb{box-shadow:0 8px 16px rgba(2,6,23,.18), 0 0 0 6px rgba(215,255,63,.18)}
.elec-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background: var(--calc-accent, rgba(215,255,63,.95));
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 8px 16px rgba(2,6,23,.18);
}
.elec-range::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,
    var(--calc-accent, rgba(215,255,63,.95)) 0%,
    var(--calc-accent, rgba(215,255,63,.95)) var(--calc-pct, 50%),
    rgba(15,23,42,.14) var(--calc-pct, 50%),
    rgba(15,23,42,.14) 100%
  );
}

.elec-calc .hint{margin-top:8px; font-size:12px; color:rgba(15,23,42,.55); line-height:1.55;}
.elec-result{
  margin-top:12px; border-radius:16px; padding:12px;
  background:rgba(6,28,63,.05); border:1px solid rgba(6,28,63,.12);
}
.elec-result .row{display:flex; justify-content:space-between; gap:10px; margin:6px 0;}
.elec-result .k{font-weight:900; color:rgba(15,23,42,.62); font-size:12px;}
.elec-result .v{font-weight:950; color:rgba(6,28,63,.95);}

/* Process */
.elec-timeline{
  margin-top:18px;
  background:#fff; border:1px solid var(--elec-line);
  border-radius:calc(var(--elec-radius) + 4px);
  box-shadow:0 14px 36px rgba(2,6,23,.10);
  padding:18px;
}
.elec-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; position:relative;}
.elec-line-svg{
  position:absolute; left:6%; right:6%; top:26px; height:60px;
  z-index:0;
}
.elec-line-path{
  stroke:rgba(6,28,63,.16);
  stroke-width:6;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
}
.elec-timeline.is-on .elec-line-path{
  stroke:rgba(23,162,255,.90);
  animation:elecLineDraw 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes elecLineDraw{to{stroke-dashoffset:0}}
.elec-step{display:grid; gap:10px; justify-items:center; text-align:center; padding-top:4px; position:relative; z-index:1;}
.elec-ico{
  width:54px; height:54px; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(6,28,63,.06); border:1px solid rgba(6,28,63,.12);
  font-weight:950; color:rgba(6,28,63,.92);
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.elec-timeline.is-on .elec-step:nth-child(1) .elec-ico,
.elec-timeline.is-on .elec-step:nth-child(2) .elec-ico,
.elec-timeline.is-on .elec-step:nth-child(3) .elec-ico,
.elec-timeline.is-on .elec-step:nth-child(4) .elec-ico{
  background:rgba(215,255,63,.18);
  box-shadow:0 18px 40px rgba(215,255,63,.18);
  transform:translateY(-2px);
}
.elec-step h4{margin:0; font-size:15px; font-weight:950;}
.elec-step p{margin:0; color:rgba(15,23,42,.64); line-height:1.55; font-size:13px;}

/* Process – readability + density */
.elec-step .lead{margin:0; font-weight:950; color:rgba(6,28,63,.92); font-size:12px;}
.elec-step-ul{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
  width:100%;
  max-width:220px;
}
.elec-step-ul li{
  display:flex;
  gap:8px;
  align-items:flex-start;
  justify-content:center;
  font-size:12px;
  line-height:1.35;
  color:rgba(15,23,42,.70);
  font-weight:850;
}
.elec-step-ul li::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:3px;
  margin-top:4px;
  background:rgba(23,162,255,.55);
}
.elec-process-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.elec-procard{
  background:rgba(6,28,63,.03);
  border:1px solid rgba(6,28,63,.10);
  border-radius:18px;
  padding:14px;
  text-align:left;
}
.elec-procard h4{margin:0 0 10px; font-size:14px; font-weight:950; color:rgba(6,28,63,.96);}
.elec-procard ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  color:rgba(15,23,42,.78);
  font-weight:850;
  font-size:13px;
  line-height:1.45;
}

/* Reduce empty space only for process section */
.elec-section#process{min-height:auto; padding:74px 0 54px;}

@media(max-width:980px){
  .elec-process-grid{grid-template-columns:1fr;}
  .elec-step-ul{max-width:unset;}
  .elec-section#process{padding:58px 0 46px;}
}
/* Step tooltips */
.elec-step[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  top:74px;
  transform:translateX(-50%) translateY(8px);
  width:min(240px, 80vw);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(15,23,42,.92);
  color:rgba(255,255,255,.92);
  font-size:12px;
  line-height:1.55;
  font-weight:800;
  box-shadow:0 18px 44px rgba(2,6,23,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
.elec-step[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  top:66px;
  transform:translateX(-50%) translateY(8px);
  border:8px solid transparent;
  border-bottom-color:rgba(15,23,42,.92);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
.elec-step:hover::after,
.elec-step:focus::after,
.elec-step:hover::before,
.elec-step:focus::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media (max-width: 980px){
  .elec-step[data-tip]::after,.elec-step[data-tip]::before{display:none;}
}


/* Bottom CTA */
.elec-bottom{
  background:linear-gradient(180deg, #061C3F 0%, #041221 100%);
  color:#fff;
  padding:86px 0;
  position:relative;
  overflow:hidden;
}
.elec-bottom::before{
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(900px 520px at 25% 30%, rgba(23,162,255,.18), transparent 60%),
             radial-gradient(900px 520px at 75% 70%, rgba(215,255,63,.16), transparent 60%);
  pointer-events:none;
}
.elec-bottom-inner{position:relative; z-index:1; text-align:center;}
.elec-bottom h2{margin:0; font-size:38px; line-height:1.18; letter-spacing:-.9px; font-weight:950;}
.elec-bottom p{margin:14px auto 0; max-width:820px; color:rgba(255,255,255,.84); line-height:1.75;}
.elec-bottom .elec-cta{justify-content:center}


.elec-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:rgba(15,23,42,.92); color:#fff;
  padding:10px 12px; border-radius:999px;
  font-weight:900; font-size:13px;
  box-shadow:0 18px 44px rgba(2,6,23,.30);
  opacity:0; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
}
.elec-toast.is-on{opacity:1; transform:translateX(-50%) translateY(-6px);}

/* Responsive */
@media (max-width: 980px){
  .elec-hero-grid{grid-template-columns:1fr; gap:14px;}
  .elec-title{font-size:40px;}
  .elec-roi-grid{grid-template-columns:1fr; }
  .elec-calc{position:relative; top:auto;}
  .elec-pain-grid{grid-template-columns:1fr; }
  .elec-flow-viz{grid-template-columns:1fr; }
  .elec-solution-grid2{grid-template-columns:1fr; }
  .elec-arrow{height:70px;}
  .elec-steps{grid-template-columns:1fr; gap:10px;}
  .elec-line-svg{display:none;}
}
@media (min-width: 1180px){
  .elec-sticky{display:block;}
}


/* Pain item icon + hover (make it feel clickable) */
.elec-pain-icon{
  width:56px; height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(6,28,63,.04);
  border:1px solid rgba(6,28,63,.10);
}
.elec-pain-icon .pi-svg{width:44px; height:44px; display:block;}
.elec-pain-item:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 66px rgba(2,6,23,.14);
  border-color:rgba(23,162,255,.22);
}
.elec-pain-item.is-active .elec-pain-icon{
  box-shadow:0 18px 44px rgba(215,255,63,.16);
  border-color:rgba(215,255,63,.28);
}
.pi-dot{transform-origin:46px 46px; animation:piDot 1.2s ease-in-out infinite;}
@keyframes piDot{0%,100%{transform:scale(.9); opacity:.75} 50%{transform:scale(1.08); opacity:1}}
.pi-bolt{transform-origin:36px 28px; animation:piBolt 1.4s ease-in-out infinite;}
@keyframes piBolt{0%,55%,100%{opacity:.65} 60%{opacity:1} 75%{opacity:.75}}


/* ROI bar "rise" satisfaction */
.elec-bar.after .fill{transition-delay:.14s;}
.elec-bar .fill{will-change:height;}
.elec-bar .fill::after{
  content:"";
  position:absolute;
  top:-30px; bottom:-30px;
  left:-60%;
  width:40%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:0;
  transform:skewX(-18deg) translateX(0);
}
.elec-case.is-on .elec-bar.after .fill::after{
  opacity:.45;
  animation:elecShine 1.2s ease .85s 1 both;
}
@keyframes elecShine{
  from{transform:skewX(-18deg) translateX(-140%);}
  to{transform:skewX(-18deg) translateX(420%);}
}


/* Process line: electric pulse identity */
.elec-line-pulse{
  stroke:rgba(215,255,63,.88);
  stroke-width:4;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:18 16;
  stroke-dashoffset:0;
  opacity:0;
  filter:drop-shadow(0 0 10px rgba(215,255,63,.18));
}
.elec-timeline.is-on .elec-line-pulse{
  opacity:1;
  animation:elecPulseLine 1.15s linear infinite 1.45s;
}
@keyframes elecPulseLine{to{stroke-dashoffset:-34;}}

.elec-step:hover .elec-ico,
.elec-step:focus .elec-ico{
  transform:translateY(-4px) scale(1.04);
  background:rgba(215,255,63,.20);
  box-shadow:0 24px 60px rgba(215,255,63,.16);
}


/* Form reassurance + shimmer when ready */
.elec-assure{
  margin-top:10px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:12px;
  line-height:1.55;
  color:rgba(15,23,42,.62);
  font-weight:800;
}
.elec-assure .lock{filter:drop-shadow(0 6px 16px rgba(2,6,23,.14));}
.elec-btn.primary.is-ready{
  position:relative;
  overflow:hidden;
}
.elec-btn.primary.is-ready::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,0) 80%);
  transform:translateX(-120%);
  animation:elecShimmer 1.25s ease-in-out infinite;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:overlay;
}
@keyframes elecShimmer{to{transform:translateX(120%);} }


/* === Micro-detail polish (v29) === */

/* Hero: Ken Burns + subtle glow line */
.elec-hero-bg{
  will-change: transform;
  animation: elecKenBurns 22s ease-in-out infinite alternate;
}
@keyframes elecKenBurns{
  from{ transform:translate3d(0,0,0) scale(1.02); }
  to{ transform:translate3d(-1.2%, -0.8%, 0) scale(1.07); }
}
.elec-hero-bg::before{
  content:"";
  position:absolute; inset:-20%;
  background:linear-gradient(120deg,
    rgba(215,255,63,0) 0%,
    rgba(215,255,63,.14) 36%,
    rgba(23,162,255,.10) 44%,
    rgba(215,255,63,0) 62%,
    rgba(215,255,63,0) 100%);
  transform:translateX(-55%);
  animation: elecGlowSweep 9.5s linear infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes elecGlowSweep{
  0%{ transform:translateX(-55%) translateY(0); opacity:.0; }
  10%{ opacity:.65; }
  50%{ opacity:.42; }
  100%{ transform:translateX(55%) translateY(-2%); opacity:0; }
}

/* Hero CTA: stronger depth on primary, calmer ghost */
.elec-hero .elec-btn-mega{
  box-shadow:0 18px 44px rgba(2,6,23,.28), 0 18px 44px rgba(215,255,63,.20);
  transform:translateZ(0);
}
.elec-hero .elec-btn-ghost{
  box-shadow:none;
  opacity:.88;
  backdrop-filter:saturate(1.1);
}
.elec-hero .elec-btn-ghost:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.38);
}

/* Pain cards: clearer icon + hover feedback */
.elec-pain-item{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.elec-pain-item:hover{
  transform:translateY(-5px);
  background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(23,162,255,.03));
  box-shadow:0 18px 44px rgba(2,6,23,.12);
  border-color:rgba(23,162,255,.22);
}
.elec-pain-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(215,255,63,.10);
  border:1px solid rgba(215,255,63,.22);
  box-shadow:0 10px 26px rgba(215,255,63,.08);
}
.elec-pain-icon .pi-svg{width:34px; height:34px;}

/* ROI case: make "절감" chip pop for visual reward */
.elec-save-chip{
  opacity:0;
  transform:translateY(8px) scale(.98);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.elec-case.is-anim .elec-save-chip{
  opacity:1;
  transform:translateY(0) scale(1);
}
.elec-case.is-anim .elec-bar.after .fill{
  filter:drop-shadow(0 12px 26px rgba(215,255,63,.22));
}

/* Mini calculator: thin neon border animation */
.elec-calc{overflow:hidden;}
.elec-calc::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:calc(var(--elec-radius) + 6px);
  padding:1px;
  background:conic-gradient(
    from 180deg,
    rgba(215,255,63,0) 0%,
    rgba(215,255,63,.55) 12%,
    rgba(23,162,255,.28) 22%,
    rgba(215,255,63,.12) 34%,
    rgba(215,255,63,0) 55%,
    rgba(215,255,63,.50) 70%,
    rgba(23,162,255,.22) 82%,
    rgba(215,255,63,0) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  animation:elecBorderSpin 8.5s linear infinite;
  pointer-events:none;
}
@keyframes elecBorderSpin{to{transform:rotate(360deg);}}

/* Apply: trust line + CTA tooltip */
.elec-trustline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  background:rgba(215,255,63,.10);
  border:1px solid rgba(215,255,63,.22);
  margin:10px 0 10px;
}
.elec-trustline .t{
  color:rgba(15,23,42,.78);
  font-size:13px;
  line-height:1.55;
}
.elec-cta-submit{
  position:relative;
}
.elec-cta-submit[data-ctatip]::after{
  content:attr(data-ctatip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  padding:8px 10px;
  border-radius:12px;
  background:rgba(2,6,23,.88);
  border:1px solid rgba(215,255,63,.22);
  color:rgba(255,255,255,.92);
  font-size:12px;
  letter-spacing:-.1px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  white-space:nowrap;
  box-shadow:0 18px 44px rgba(2,6,23,.22);
}
.elec-cta-submit[data-ctatip]::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 2px);
  transform:translateX(-50%) translateY(6px);
  width:10px; height:10px;
  background:rgba(2,6,23,.88);
  border-left:1px solid rgba(215,255,63,.22);
  border-top:1px solid rgba(215,255,63,.22);
  transform-origin:center;
  rotate:45deg;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.elec-cta-submit:hover[data-ctatip]::after,
.elec-cta-submit:focus-visible[data-ctatip]::after,
.elec-cta-submit:hover[data-ctatip]::before,
.elec-cta-submit:focus-visible[data-ctatip]::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Process: slightly larger description text */
.elec-step p{
  font-size:14px;
  line-height:1.65;
}


/* ------------------------------------------------------------
   Visual upgrades (v20260105_07)
------------------------------------------------------------ */

/* Hero highlight: stronger neon + shimmer */
.elec-hi.elec-hi-lime b{
  color:var(--elec-accent);
  text-shadow:0 0 22px rgba(215,255,63,.26), 0 0 44px rgba(215,255,63,.10);
}
.elec-title.elec-fadeup.is-on .elec-hi::before{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  bottom:.08em;
  height:.60em;
  border-radius:.70em;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 30%,
    rgba(255,255,255,0) 60%);
  transform:translateX(-35%) scaleX(.85);
  opacity:0;
  pointer-events:none;
  z-index:-1;
  animation:elecHiShimmer 1.15s cubic-bezier(.2,.8,.2,1) .55s forwards;
}
@keyframes elecHiShimmer{
  0%{opacity:0; transform:translateX(-35%) scaleX(.85)}
  35%{opacity:.65}
  100%{opacity:0; transform:translateX(35%) scaleX(1)}
}

/* Bill → Refund SVG: keep it crisp on photo background */
.elec-bill2cash text{ font-family:system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Pain illus coins leaking */
.elec-illus-svg .coin{
  transform-box:fill-box;
  transform-origin:center;
  animation:elecCoinDrop 1.6s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(2,6,23,.18));
}
.elec-illus-svg .coin.c1{animation-delay:0s}
.elec-illus-svg .coin.c2{animation-delay:.18s}
.elec-illus-svg .coin.c3{animation-delay:.32s}
.elec-illus-svg .coin.c4{animation-delay:.46s}
@keyframes elecCoinDrop{
  0%{transform:translateY(0); opacity:0}
  10%{opacity:1}
  60%{transform:translateY(26px); opacity:1}
  100%{transform:translateY(44px); opacity:0}
}

/* Level badge */
.elec-result [data-out="level"]{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  letter-spacing:-.2px;
  background:rgba(15,23,42,.06);
}
.elec-calc[data-level="great"] .elec-result [data-out="level"]{background:rgba(215,255,63,.22); color:rgba(6,28,63,.92)}
.elec-calc[data-level="good"]  .elec-result [data-out="level"]{background:rgba(23,162,255,.18); color:rgba(6,28,63,.92)}
.elec-calc[data-level="ok"]    .elec-result [data-out="level"]{background:rgba(15,23,42,.08); color:rgba(6,28,63,.88)}
.elec-calc[data-level="warn"]  .elec-result [data-out="level"]{background:rgba(255,70,70,.14); color:rgba(110,0,0,.88)}


/* Pain cards: hover float + softer shadow */
.elec-pain-item{
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.elec-pain-item:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 60px rgba(2,6,23,.18);
  background:rgba(255,255,255,.03);
  border-color:rgba(215,255,63,.28);
}

/* ROI calculator docking */
.elec-calc.is-docked{
  position:fixed !important;
  top:auto !important;
  bottom:24px;
  z-index:1000;
}
.elec-calc.is-stopped{
  position:absolute !important;
  top:auto;
  bottom:auto;
  z-index:60;
}