:root{
  --navy:#071d3d;
  --navy2:#0b2c58;
  --blue:#0b64f4;
  --blue2:#063dbb;
  --text:#0b2447;
  --muted:#66758b;
  --line:#d8e0ec;
  --light:#f5f8fc;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.5}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin:0 auto}
.section{padding:44px 0}

.hero{position:relative;min-height:330px;background:#07192f;overflow:hidden;border-bottom:1px solid #cdd8e8}
.hero-image{position:absolute;inset:0;background:url('assets/hero-controls.png') center 58%/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,42,.98) 0%,rgba(4,20,42,.94) 35%,rgba(4,20,42,.70) 50%,rgba(4,20,42,.15) 70%,rgba(4,20,42,.03) 100%)}
.hero-content{position:relative;z-index:2;padding-top:16px;padding-bottom:38px;color:#fff}
.hero-quote-button{display:inline-flex;align-items:center;gap:24px;margin-top:18px;color:#fff;text-decoration:none;border:1px solid #4b8cff;background:#0b4dc7;padding:12px 20px;border-radius:4px;font-weight:800;font-size:15px;letter-spacing:.2px;box-shadow:0 5px 14px rgba(0,0,0,.18)}
.hero-quote-button:hover{background:#0d5be8}
.hero-quote-button span{font-size:22px;line-height:1}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:.5px;margin:0 0 20px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hero h1{font-size:48px;line-height:.96;margin:0 0 14px;font-weight:800;letter-spacing:-1px;text-shadow:0 2px 5px rgba(0,0,0,.45)}
.hero h1 span{color:#3f82ff}
.hero-lead{max-width:520px;font-size:18px;line-height:1.42;font-weight:700;margin:0 0 10px;text-shadow:0 2px 4px rgba(0,0,0,.65)}
.hero-angle{position:absolute;right:-1%;bottom:-1px;width:54%;height:55px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 100%);border-top:6px solid var(--blue)}

.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding-left:30px;margin:10px 0;font-weight:700}
.check-list li:before{content:'✓';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-size:13px}
.hero-checks{font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.65)}

.section-heading{text-align:center;margin-bottom:34px}
.section-heading h2{font-size:29px;color:#0b2b65;margin:0 0 5px;font-weight:800}
.section-heading p{font-size:19px;max-width:820px;margin:0 auto;color:#111827}
.section-heading.compact{margin-bottom:22px}

.before-after{display:grid;grid-template-columns:1fr 100px 1fr 220px;gap:20px;align-items:center}
.control-panel{min-width:0}
.panel-label{height:34px;border-radius:18px;color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 0 9px}
.panel-label.gray{background:linear-gradient(#a7a7a7,#8f8f8f)}
.panel-label.blue{background:linear-gradient(90deg,#1548c7,#033399)}
.image-box{border:1px solid #d8dde6;border-radius:3px;background:#fff;overflow:hidden;min-height:240px;display:grid;place-items:center}
.image-box img{width:100%;height:100%;object-fit:contain}
.big-arrow{font-size:80px;line-height:1;color:#0639a0;font-weight:800;text-align:center}
.side-checks{font-size:15px}

.wiring-note{margin:24px auto 0;max-width:980px;border:1px solid #cbd7ea;background:linear-gradient(90deg,#f5f8ff,#fff);border-radius:14px;padding:18px 24px;display:flex;gap:18px;align-items:center}
.note-icon{width:58px;height:58px;border-radius:50%;background:#083b9c;color:#fff;display:grid;place-items:center;font-size:27px;flex:none}
.wiring-note h3{margin:0 0 2px;color:#0b2b65;font-size:18px}
.wiring-note p{margin:0;color:#101828}

.light{background:#fbfcfe}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{border:1px solid #cbd6e6;background:#f6f9fd;border-radius:12px;padding:16px 22px 20px;box-shadow:0 2px 0 rgba(10,35,70,.03)}
.card h3{text-align:center;color:#0b2b65;font-size:16px;margin:0 0 10px}
.card img{width:100%;height:185px;object-fit:contain;background:#fff;border-radius:6px;margin-bottom:14px}
.card ul{margin:0;padding-left:20px;font-size:14px;color:#13243c}
.card li{margin:7px 0}

.benefits{padding-top:18px;padding-bottom:18px;background:linear-gradient(#f6f9fd,#eef3fa)}
.benefits-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.benefits article{text-align:center;padding:16px 20px;border-right:1px solid #b8c6db}
.benefits article:last-child{border-right:none}
.benefit-icon{font-size:38px;color:#0b3d9f;height:50px}
.benefits h3{font-size:14px;color:#0b2b65;line-height:1.25;min-height:35px;margin:8px 0}
.benefits p{font-size:13px;color:#111827;margin:0}

.cta{background:linear-gradient(90deg,#073c9f,#05206b);color:#fff;padding:22px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
.cta-copy{display:flex;align-items:center;gap:20px}
.cta-icon{width:72px;height:72px;border-radius:50%;background:#fff;color:#0a3f9e;display:grid;place-items:center;font-size:34px;flex:none}
.cta h2{margin:0;font-size:28px}
.cta p{margin:2px 0 0;font-size:16px}
.cta-button{display:inline-flex;align-items:center;gap:28px;color:#fff;text-decoration:none;border:1px solid #2c76ff;background:#0b4dc7;padding:14px 18px;border-radius:4px;font-weight:800;white-space:nowrap}
.cta-button:hover{background:#0d5be8}
.cta-button span{font-size:25px;line-height:1}

@media (max-width:980px){
  .hero h1{font-size:44px}
  .before-after{grid-template-columns:1fr 70px 1fr}.side-checks{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
  .cards{gap:16px}.benefits-grid{grid-template-columns:repeat(2,1fr)}.benefits article{border-right:none;border-bottom:1px solid #c8d2e2}.benefits article:last-child{grid-column:1/-1}
}
@media (max-width:700px){
  .section{padding:32px 0}.hero{min-height:390px}.hero-image{background-position:62% center}.hero-overlay{background:linear-gradient(90deg,rgba(4,20,42,.98) 0%,rgba(4,20,42,.92) 58%,rgba(4,20,42,.42) 100%)}.hero h1{font-size:38px}.hero-lead{font-size:18px}.hero-angle{width:75%;height:55px}
  .before-after{grid-template-columns:1fr}.arrow-wrap{transform:rotate(90deg);height:56px}.big-arrow{font-size:58px}.side-checks{grid-column:auto;display:block}
  .cards{grid-template-columns:1fr}.card img{height:190px}.benefits-grid{grid-template-columns:1fr}.benefits article:last-child{grid-column:auto}.cta-inner,.cta-copy{align-items:flex-start}.cta-inner{flex-direction:column}.cta h2{font-size:23px}.cta-icon{width:58px;height:58px}.cta-button{width:100%;justify-content:space-between}
}