/* Solar Solution page: animated solar hero visual (from desing/Rainbow_Automation_Solar.html) */
.ra-solar-hero{position:relative;background:linear-gradient(145deg,#ffffff,#f4f8fd);border:1px solid #e4ebf4;border-radius:36px;padding:18px;box-shadow:0 34px 80px rgba(27,54,88,.16);min-height:500px;animation:raFloat 8.5s ease-in-out infinite}
.ra-solar-topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.ra-live-badge,.ra-status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid #e2eaf4;font-size:11px;font-weight:900;color:#425f80;box-shadow:0 8px 18px rgba(17,24,39,.05)}
.ra-live-badge i{width:9px;height:9px;border-radius:50%;background:#2eb454;box-shadow:0 0 0 6px rgba(46,180,84,.14);animation:raSolarPulse 2.3s ease-in-out infinite}
.ra-solar-stage{position:relative;height:340px;border-radius:28px;background:radial-gradient(circle at 22% 14%,rgba(255,225,123,.28),transparent 18%),radial-gradient(circle at 75% 18%,rgba(46,180,84,.10),transparent 24%),linear-gradient(180deg,#eef6ff 0%,#f8fbff 54%,#edf4fb 100%);border:1px solid #e0e8f3;overflow:hidden}
.ra-solar-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(38,132,217,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(38,132,217,.08) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 85%)}
.ra-solar-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(77,154,98,.06) 30%,rgba(115,171,102,.16) 100%)}
.ra-sun-core{position:absolute;left:22px;top:18px;display:flex;align-items:center;gap:12px;z-index:3}
.ra-sun-core span{font-size:11px;font-weight:800;color:#7d6631}
.ra-sun{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff8c8 0%,#ffd55d 35%,#ffb11d 68%,#f38f13 100%);box-shadow:0 0 0 16px rgba(255,205,79,.13),0 0 50px rgba(255,190,45,.4);animation:raSunGlow 4.5s ease-in-out infinite}
.ra-sun::before,.ra-sun::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,182,33,.38);animation:raSpin 18s linear infinite}.ra-sun::after{inset:-19px;border-color:rgba(255,198,62,.18);animation-direction:reverse;animation-duration:24s}
.ra-house-wrap{position:absolute;left:164px;bottom:38px;width:260px;height:180px;z-index:3}
.ra-roof{position:absolute;left:28px;top:20px;width:205px;height:60px;background:linear-gradient(145deg,#44556d,#2a3647);clip-path:polygon(8% 100%,50% 0,92% 100%);box-shadow:0 10px 18px rgba(24,36,52,.18)}
.ra-house-body{position:absolute;left:53px;top:74px;width:154px;height:92px;background:linear-gradient(180deg,#ffffff,#ecf2f8);border:1px solid #d9e3ef;border-radius:8px 8px 14px 14px;box-shadow:0 14px 22px rgba(27,54,88,.08)}
.ra-window{position:absolute;top:94px;width:30px;height:28px;border-radius:8px;background:linear-gradient(180deg,#dff2ff,#b5d7f4);border:1px solid #c8dff3;box-shadow:inset 0 -10px 0 rgba(255,255,255,.42)}
.ra-window.left{left:74px}.ra-window.right{left:156px}.ra-door{position:absolute;left:119px;top:108px;width:26px;height:58px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#8ea4bc,#60788f)}
.ra-panel-array{position:absolute;left:72px;top:38px;display:grid;grid-template-columns:repeat(2,34px);gap:6px;transform:skewX(-16deg) rotate(-12deg)}
.ra-panel-array .panel{display:block;width:34px;height:22px;border-radius:4px;background:linear-gradient(180deg,#2d87d4,#114e90);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 -8px 8px rgba(0,0,0,.12)}
.ra-panel-array .panel::before{content:"";display:block;height:100%;background-image:linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:8px 8px;opacity:.75}
.ra-inverter-box,.ra-battery-box,.ra-meter-box{position:absolute;border-radius:16px;background:linear-gradient(180deg,#ffffff,#eef4fa);border:1px solid #dce6f1;box-shadow:0 12px 22px rgba(27,54,88,.09)}
.ra-inverter-box{left:218px;top:76px;width:42px;height:56px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#3d6e9d}
.ra-battery-box{left:222px;top:144px;width:34px;height:74px;padding:4px}.ra-battery-box::before{content:"";position:absolute;top:-7px;left:12px;width:10px;height:7px;border-radius:4px 4px 0 0;background:#9bb0c7}
.ra-battery-level{position:absolute;left:5px;right:5px;bottom:5px;height:58px;border-radius:10px;background:linear-gradient(180deg,#4ed972,#2eb454);animation:raBatteryFill 4.2s ease-in-out infinite;box-shadow:0 0 16px rgba(46,180,84,.28)}
.ra-meter-box{left:266px;top:120px;width:82px;height:58px;padding:12px 10px;display:flex;align-items:flex-end;gap:6px}.ra-meter-box .line{display:block;width:12px;border-radius:6px;background:linear-gradient(180deg,#89caf7,#256bd1)}.ra-meter-box .l1{height:16px}.ra-meter-box .l2{height:28px}.ra-meter-box .l3{height:22px}.ra-meter-box .line{animation:raMeterDance 2.4s ease-in-out infinite}.ra-meter-box .l2{animation-delay:.25s}.ra-meter-box .l3{animation-delay:.5s}
.ra-grid-tower{position:absolute;right:46px;bottom:54px;width:80px;height:156px;z-index:2}.ra-grid-tower small{position:absolute;left:-6px;bottom:-20px;font-size:10px;font-weight:800;color:#5c6d7f;white-space:nowrap}.ra-grid-tower .tower-line{position:absolute;bottom:0;border-radius:999px;background:#7d8da1}.ra-grid-tower .t1{left:22px;width:3px;height:148px}.ra-grid-tower .t2{left:9px;width:3px;height:126px;transform:rotate(18deg)}.ra-grid-tower .t3{left:37px;width:3px;height:126px;transform:rotate(-18deg)}.ra-grid-tower::before,.ra-grid-tower::after{content:"";position:absolute;left:7px;right:7px;height:3px;background:#7d8da1;border-radius:999px}.ra-grid-tower::before{top:48px}.ra-grid-tower::after{top:84px}.tower-head{position:absolute;top:26px;left:-4px;width:88px;height:3px;background:#7d8da1;border-radius:999px}
.ra-energy-svg{position:absolute;inset:0;z-index:1;width:100%;height:100%}.energy-path{fill:none;stroke-linecap:round;stroke-width:5;stroke-dasharray:14 12}.energy-path.main{stroke:url(#raFlowA);animation:raEnergyFlow 6.5s linear infinite}.energy-path.secondary,.energy-path.tertiary{stroke:url(#raFlowB);animation:raEnergyFlow 7.2s linear infinite}.energy-path.tertiary{animation-direction:reverse;opacity:.65}
.pulse-dot{fill:#fff;stroke:#2e7be3;stroke-width:4}.pulse-dot.d1,.pulse-dot.d3{stroke:#36b46b}.pulse-dot{animation:raDotPulse 2.2s ease-in-out infinite}.pulse-dot.d2{animation-delay:.35s}.pulse-dot.d3{animation-delay:.7s}.pulse-dot.d4{animation-delay:1s}
.ra-info-card{position:absolute;background:rgba(255,255,255,.96);border:1px solid #deebf5;border-radius:18px;padding:12px 14px;box-shadow:0 16px 26px rgba(27,54,88,.10);backdrop-filter:blur(10px);z-index:4;animation:raCardFloat 7s ease-in-out infinite}
.ra-info-card strong{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:#6a7e95;margin-bottom:4px}.ra-info-card b{display:block;font-size:22px;line-height:1.1;color:#1d3652;margin-bottom:4px}.ra-info-card span{display:block;font-size:11px;color:#65778c;line-height:1.45}
.ra-info-card.generation{left:20px;bottom:20px;width:154px}.ra-info-card.battery{right:24px;top:26px;width:138px;animation-delay:.6s}.ra-info-card.monitor{right:100px;bottom:24px;width:170px;animation-delay:1.2s}
.ra-hero-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.ra-feature-chip{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #e4ebf3;border-radius:16px;padding:13px 12px;box-shadow:0 10px 24px rgba(27,54,88,.05)}
.chip-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex:0 0 12px;box-shadow:0 0 0 6px rgba(38,132,217,.06)}.chip-dot.green{background:#2eb454}.chip-dot.gold{background:#f3a51b}.chip-dot.blue{background:#287dcc}
.ra-feature-chip b{display:block;font-size:12px;color:#213b58;margin-bottom:2px}.ra-feature-chip small{display:block;font-size:10px;color:#76879a;line-height:1.5}
@keyframes raSolarPulse{0%,100%{box-shadow:0 0 0 5px rgba(46,180,84,.14)}50%{box-shadow:0 0 0 10px rgba(46,180,84,.06)}}
@keyframes raSunGlow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes raSpin{to{transform:rotate(360deg)}}
@keyframes raEnergyFlow{to{stroke-dashoffset:-180}}
@keyframes raDotPulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.22);opacity:1}}
@keyframes raBatteryFill{0%,100%{height:50px}50%{height:60px}}
@keyframes raMeterDance{0%,100%{transform:scaleY(.75);opacity:.75}50%{transform:scaleY(1.1);opacity:1}}
@keyframes raCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(max-width:1050px){.ra-solar-hero{min-height:auto}.ra-hero-features{grid-template-columns:1fr 1fr}.ra-info-card.monitor{right:20px}.ra-grid-tower{right:24px}}
@media(max-width:740px){.ra-solar-stage{height:360px}.ra-house-wrap{left:95px;transform:scale(.88);transform-origin:left bottom}.ra-grid-tower{right:12px;transform:scale(.88);transform-origin:bottom right}.ra-info-card.generation{width:136px}.ra-info-card.battery{width:124px}.ra-info-card.monitor{right:12px;bottom:16px;width:156px}.ra-hero-features{grid-template-columns:1fr}}
@media(max-width:560px){.ra-solar-hero{padding:14px;border-radius:24px}.ra-solar-topbar{flex-wrap:wrap}.ra-solar-stage{height:410px;border-radius:22px}.ra-sun-core{left:14px;top:14px}.ra-sun{width:48px;height:48px}.ra-house-wrap{left:22px;bottom:78px;transform:scale(.8)}.ra-grid-tower{right:10px;bottom:115px;transform:scale(.74)}.ra-info-card.generation{left:14px;bottom:16px}.ra-info-card.battery{top:74px;right:12px}.ra-info-card.monitor{right:12px;bottom:16px;width:148px}.ra-feature-chip{padding:12px}}
@media(prefers-reduced-motion:reduce){.ra-solar-hero,.ra-live-badge i,.ra-sun,.ra-sun::before,.ra-sun::after,.energy-path,.pulse-dot,.ra-battery-level,.ra-meter-box .line,.ra-info-card{animation:none!important}}