/* AIENERGY.AE renewables modules (solar + wind) - extends solutions.css; all data illustrative */
.wrap{max-width:1180px;margin:0 auto;padding:34px 20px}.eyebrow{color:var(--blue);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.lead{color:var(--mute);max-width:720px;margin:-6px 0 18px}.sim{position:absolute;top:10px;inset-inline-end:12px;font-size:.68rem;font-weight:800;color:#ffd93b;border:1px solid #ffd93b;border-radius:999px;padding:1px 10px}
.rhero{max-width:1180px;margin:0 auto;padding:48px 20px 10px;display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:center}
.rhero h1{font-size:clamp(32px,5.2vw,58px);font-weight:900;line-height:1.15;margin:6px 0 12px}.rhero h1 em{font-style:normal;background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.rhero p{color:var(--mute);margin-bottom:20px}.kpis{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.kpi{padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.kpi b{display:block;color:var(--green);font-size:1.25rem;line-height:1.2}.kpi small{color:var(--mute)}
.stage{border:1px solid var(--line);border-radius:20px;background:linear-gradient(#07142b,#0a2347);overflow:hidden}.stage svg{display:block;width:100%;height:auto}
.spin{animation:sp 6s linear infinite;transform-box:fill-box;transform-origin:center}.spin.s2{animation-duration:9s}.spin.s3{animation-duration:7.5s;animation-direction:reverse}@keyframes sp{to{transform:rotate(360deg)}}
.pulse{animation:pl 2s ease-in-out infinite}
.map{position:relative}.map svg{width:100%;height:auto;background:#07142b;border-radius:14px}.land{fill:#0d2a52;stroke:var(--blue);stroke-width:1.5;opacity:.9}.mk{cursor:pointer}.mk circle.d{stroke:#031022;stroke-width:2}.mk:focus{outline:none}.mk.on circle.ring{stroke:var(--green);stroke-width:2;fill:none}.mk text{fill:var(--ink);font-size:11px;font-weight:700;paint-order:stroke;stroke:#07142b;stroke-width:3px}
.badge{display:inline-block;padding:1px 10px;border-radius:999px;font-size:.75rem;font-weight:800;border:1px solid var(--green);color:var(--green)}.badge.pl{border-color:#ffd93b;color:#ffd93b}.badge.pi{border-color:var(--blue);color:var(--blue)}
.st{cursor:pointer}.st.on{border-color:var(--green)}.st .live{color:var(--green);font-weight:800}.st small{color:var(--mute);display:block}
.ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.ctl label span{color:var(--green);font-weight:800}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}.out div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#07142b}.out b{display:block;color:var(--green);font-size:1.35rem;line-height:1.2}.out small{color:var(--mute)}.out .w b{color:#ffb84d}
.bar{height:10px;border-radius:9px;background:#07142b;border:1px solid var(--line);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .4s}
.pan{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:12px 0}.pan i{aspect-ratio:1.5;border-radius:4px;border:1px solid rgba(255,255,255,.2);transition:background .4s}
.chart{width:100%;height:auto;margin-top:10px}.chart text{fill:var(--mute);font-size:10px}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--mute)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px}
.sec{border-top:1px solid var(--line)}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mono{font-variant-numeric:tabular-nums}
.ctab{padding-top:50px;padding-bottom:50px}.ctab h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}.ctab .box{padding:36px 20px;background:radial-gradient(ellipse at 50% 0,rgba(31,200,255,.18),var(--card))}
@media(max-width:800px){.rhero,.two{grid-template-columns:1fr}.mapgrid{grid-template-columns:1fr}.wrap{padding:24px 14px}}
@media(prefers-reduced-motion:reduce){.spin,.pulse{animation:none!important}}
.kpi b,.out b,.st small b,.live,.sim,.mono{direction:ltr;unicode-bidi:isolate;display:inline-block}.kpi b,.out b{display:block;text-align:start}[dir=rtl] .kpi b,[dir=rtl] .out b{text-align:right}

.cb{opacity:.95}.cbt{fill:#fff;font-size:9px;font-weight:800;stroke:none!important;paint-order:normal}.mk.on .cb{stroke-width:2}
/* Responsive hardening: mobile / tablet / desktop */
html,body{overflow-x:hidden}
.stage svg,.map svg,.chart,.two svg{max-width:100%}
input[type=range]{width:100%;min-height:32px;touch-action:pan-y;accent-color:#5dff6a}
select{width:100%;min-height:44px}
.mk{touch-action:manipulation}.mk circle.ring{r:18px}
.st{min-height:44px}
.ctab .btn{min-height:46px;justify-content:center}
.ctab .box{border-color:rgba(93,255,106,.35);box-shadow:0 0 40px rgba(31,200,255,.12)}
@media(max-width:1024px){.rhero{grid-template-columns:1fr;padding-top:32px}.mapgrid{grid-template-columns:1fr}.two{grid-template-columns:1fr}.ctl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media(max-width:560px){.rhero h1{font-size:clamp(28px,9vw,40px)}.kpis{gap:8px}.kpi{flex:1 1 140px}.out{grid-template-columns:1fr 1fr}.out b{font-size:1.1rem}.pan{gap:3px}.ctab .btn{display:flex;width:100%;margin:8px 0}.ctab .box{padding:26px 14px}.cbt{font-size:8px}.mk text{font-size:10px}.legend{gap:8px}.box{padding:14px}}
section#map{height:auto;background:none;border-radius:0;margin-bottom:0}
/* AI Bill Analyzer framework cards */
.bf{display:flex;flex-direction:column;gap:22px;margin:20px 0;color:#eef6ff;font-family:'Cairo',sans-serif}
.bf section{border:1px solid rgba(120,200,255,.22);border-radius:18px;padding:18px;background:rgba(7,20,43,.7)}
.bf h3{margin:0 0 12px;font-size:1.1rem;font-weight:900}.bf h4{margin:0 0 4px;font-size:1rem}
.bf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bf-card{padding:12px 14px;border:1px solid rgba(120,200,255,.22);border-radius:14px;background:#07142b}
.bf-card small{display:block;color:#9db4d3;font-size:.78rem}.bf-card b{display:block;font-size:1.5rem;line-height:1.25;color:#1fc8ff;direction:ltr;unicode-bidi:isolate;text-align:start}
.bf-card em{font-style:normal;color:#9db4d3;font-size:.75rem}.bf-card.warn b{color:#ffb84d}.bf-card.good b{color:#5dff6a}
.bf-sum,.bf-note{margin:12px 0 0;color:#cfe0f5;line-height:1.7}.bf-note{font-size:.78rem;color:#9db4d3}
.bf-recs{display:grid;gap:10px}.bf-rec{display:flex;gap:12px;padding:12px;border:1px solid rgba(93,255,106,.3);border-radius:14px;background:rgba(93,255,106,.05)}
.bf-rec.off{opacity:.55;border-color:rgba(120,200,255,.2);background:transparent}.bf-ric{font-size:1.6rem}.bf-rec p{margin:0 0 6px;color:#cfe0f5;font-size:.9rem;line-height:1.6}
.bf-pill{display:inline-block;padding:2px 12px;border-radius:999px;border:1px solid #5dff6a;color:#5dff6a;font-size:.78rem;font-weight:800}
.bf-cta{text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(31,200,255,.18),rgba(7,20,43,.8))!important;border-color:rgba(93,255,106,.4)!important}
.bf-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.bf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;border-radius:999px;font-weight:800;font-family:inherit;font-size:.95rem;border:0;cursor:pointer;background:linear-gradient(90deg,#1fc8ff,#5dff6a);color:#031022;text-decoration:none}
.bf-btn.ghost{background:transparent;color:#eef6ff;border:1px solid rgba(120,200,255,.4)}
@media(max-width:560px){.bf section{padding:14px}.bf-btn{width:100%}.bf-card b{font-size:1.25rem}}
/* ===== Map: pins, zoom, cards ===== */
.map{position:relative}.map svg{touch-action:manipulation}
.map svg .land{fill:#0b2a52;stroke:#1fc8ff;stroke-width:1.5}
.map .grid{stroke:rgba(120,200,255,.07);stroke-width:1}
.map text{font-family:'Cairo','Tajawal',sans-serif}
.map text.geo{fill:#4a7ab0;font-weight:700;pointer-events:none;direction:ltr}.map text.geo.city{fill:#9db4d3;font-weight:600}
.mk .hit{fill:transparent;pointer-events:all}
.mk .halo{opacity:.55;transform-box:fill-box;transform-origin:center;animation:halo 2s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.65}100%{transform:scale(3.2);opacity:0}}
.mk .ring{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1}
.mk.on .ring{stroke:var(--green);stroke-width:2.5}.mk.on .halo{animation-duration:1.2s}
.mk text.pn{fill:var(--ink);font-size:11px;font-weight:800;paint-order:stroke;stroke:#07142b;stroke-width:3px;direction:ltr;unicode-bidi:plaintext}
.mk text.cbt{fill:#fff;font-size:9px;font-weight:800;stroke:none;direction:ltr}.mk .cb{stroke-width:1}
.mk:not(.on) text.pn{opacity:.9}
.map-reset{position:absolute;top:10px;inset-inline-start:10px;z-index:3;min-height:38px;padding:4px 14px;border-radius:999px;border:1px solid var(--green);background:rgba(3,16,34,.9);color:var(--green);font:800 .8rem 'Cairo','Tajawal',sans-serif;cursor:pointer}
.map .note{margin-top:8px}
.sim{z-index:4}
/* project cards */
.st{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(7,20,43,.7);transition:border-color .2s,background .2s;-webkit-tap-highlight-color:transparent}
.st:hover{border-color:rgba(31,200,255,.5)}.st.on{border-color:var(--green);background:rgba(93,255,106,.07);box-shadow:0 0 18px rgba(93,255,106,.12)}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.st-h b{font-size:1rem;font-weight:800}
.st-r{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:.82rem;color:var(--mute);line-height:1.7}
.st-r>span:last-child{color:var(--ink);font-weight:700}.st-r .live{color:var(--green);font-weight:800}
.st:focus-visible,.mk:focus-visible .ring{outline:2px solid var(--green);outline-offset:2px}
/* ===== Arabic typography / RTL for the renewables modules ===== */
.num,.mono,.live,bdi.num{direction:ltr;unicode-bidi:isolate;display:inline-block;font-variant-numeric:tabular-nums}
html[lang="ar"] .wrap,html[lang="ar"] .box,html[lang="ar"] .card,html[lang="ar"] .st,html[lang="ar"] .mapgrid,html[lang="ar"] .ctl,html[lang="ar"] .out,html[lang="ar"] .lead,html[lang="ar"] .note,html[lang="ar"] .alert,html[lang="ar"] .ctab{direction:rtl;text-align:right;font-family:'Cairo','Tajawal',sans-serif}
html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] button{font-family:'Cairo','Tajawal',sans-serif}
html[lang="ar"] .eyebrow,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;text-transform:none}
html[lang="en"] .st,html[lang="en"] .box{direction:ltr;text-align:left}
@media(max-width:560px){.st-h b{font-size:.95rem}.map-reset{top:6px}}

.st{flex-shrink:0}#stlist{padding-inline-end:2px}
