/* ===== Ferguson Solar — brand + motion layer ===== */
:root{
 --ink:#0a1b36;--ink-2:#0f2f5e;--paper:#f5f8fc;--muted:#5a6b82;--line:#dbe4f0;
 --solar:#ffc22e;--green:#2f80ed;--teal:#1d6fd6;--blue:#0f2f5e;--amber:#ffb020;
 --navy:#0f2f5e;--navy-deep:#061630;--navy-mid:#0a2a5a;--sky:#4c9bff;
 --shadow:0 24px 70px rgba(10,27,54,.15);--shadow-sm:0 12px 35px rgba(10,27,54,.10);
}
body{animation:pageIn .7s ease both;background:#fff}
body.leaving{opacity:0;transition:opacity .25s ease}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
::selection{background:var(--solar);color:var(--ink)}

/* ---- brand ---- */
.brand{color:var(--navy)}
.brand small{color:#6b7f9c;letter-spacing:.18em}
.brand-logo{width:42px;height:auto;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-logo{transform:rotate(180deg) scale(1.06)}
.brand-mark{display:none}
.site-footer .brand,footer .brand{color:#fff}
footer .brand-logo{filter:brightness(0) invert(1)}
footer .brand small{color:#8fa6c6}
.drawer-head .brand{color:var(--navy)}
.nav-link:after{background:var(--solar);height:3px;border-radius:3px}
.footer-badge{background:rgba(255,194,46,.1);color:var(--solar)}

/* ---- topbar marquee ---- */
.topbar{background:#040f22;color:#b6c5dc}
.topbar .ticker{flex:1;min-width:0;mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;gap:34px;width:max-content;animation:marquee 32s linear infinite}
.topbar:hover .ticker-track{animation-play-state:paused}
.topbar-contact{white-space:nowrap;flex:none}
.topbar-contact a{color:#fff;font-weight:700}.topbar-contact a:hover{color:var(--solar)}
@media(max-width:720px){.topbar .ticker span:nth-child(n+2){display:inline}.topbar .container>span:last-child{display:none}.topbar-contact{display:none}}

/* ---- buttons ---- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,background .25s}
.btn:before{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-22deg);transition:left .7s;z-index:-1}
.btn:hover:before{left:140%}
.btn.solar{background:linear-gradient(135deg,#ffd45c,#ffb020);color:#0a1b36;box-shadow:0 8px 24px rgba(255,176,32,.28)}
.btn.solar:hover{box-shadow:0 14px 34px rgba(255,176,32,.45)}
.btn:not(.solar):not(.ghost):not(.white){background:var(--navy)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .7s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ---- preloader ---- */
.preloader{position:fixed;inset:0;z-index:9999;background:#fff;display:grid;place-items:center;transition:opacity .6s ease,visibility .6s,transform .8s cubic-bezier(.7,0,.2,1)}
.preloader.done{opacity:0;visibility:hidden;transform:translateY(-6%)}
.no-pl .preloader{display:none}
.pl-inner{position:relative;display:grid;justify-items:center;gap:18px}
.pl-logo{width:120px;animation:plIn 1s cubic-bezier(.2,.9,.2,1) both}
.pl-ring{position:absolute;top:-24px;left:50%;margin-left:-82px;width:164px;height:164px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 60%,var(--solar) 100%);mask:radial-gradient(circle,transparent 66%,#000 67%);-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%);animation:spin 1.1s linear infinite}
.pl-word{font-weight:900;letter-spacing:.24em;color:var(--navy);font-size:15px;margin-top:22px;animation:fadeUp .8s .35s both}
.pl-word b{color:#e89a00}
.pl-bar{width:160px;height:3px;border-radius:3px;background:#e4ecf7;overflow:hidden}
.pl-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--solar),var(--green));transform-origin:left;animation:plBar 1.2s .1s ease-out both}
@keyframes plIn{from{opacity:0;transform:scale(.55) rotate(-25deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes plBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- scroll progress + sun ---- */
.progress{background:linear-gradient(90deg,var(--solar),#ff9d1c,var(--green));height:4px}
.sun-dot{position:fixed;top:-5px;left:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c4,var(--solar) 60%);box-shadow:0 0 0 4px rgba(255,194,46,.25),0 0 18px 4px rgba(255,194,46,.75);z-index:2001;pointer-events:none;will-change:left}

/* ---- header ---- */
.site-header{transition:transform .35s ease,box-shadow .25s,background .25s}
.site-header.hide{transform:translateY(-100%)}
.mega-feature{background:linear-gradient(145deg,#0a2a5a,#0f2f5e 60%,#1a4a96)}

/* ---- hero ---- */
.hero{background:radial-gradient(circle at 72% 32%,rgba(47,128,237,.35),transparent 30%),radial-gradient(circle at 12% 90%,rgba(255,194,46,.10),transparent 30%),linear-gradient(135deg,#061630 0%,#0a2a5a 55%,#0f3f85 100%)}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero:before{content:'';position:absolute;width:760px;height:760px;right:-220px;top:-120px;background:url('img/icon-white.png') center/contain no-repeat;opacity:.045;animation:spin 120s linear infinite;pointer-events:none}
.hero h1 em{color:var(--solar);position:relative;display:inline-block}
.hero h1 em:after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.08em;background:var(--solar);border-radius:4px;transform-origin:left;animation:underline 1s .9s cubic-bezier(.2,.8,.2,1) both;opacity:.6}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rotator{transition:opacity .35s,transform .35s,filter .35s}
.rotator.out{opacity:0;transform:translateY(-.35em);filter:blur(6px)}
.rotator.pre{opacity:0;transform:translateY(.35em);filter:blur(6px);transition:none}
.hero-copy .kicker,.hero-copy h1,.hero-copy p,.hero-copy .hero-actions,.hero-copy .hero-proof{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) both}
.hero-copy .kicker{animation-delay:.9s}.hero-copy h1{animation-delay:1.0s}.hero-copy p{animation-delay:1.15s}.hero-copy .hero-actions{animation-delay:1.3s}.hero-copy .hero-proof{animation-delay:1.45s}
.no-pl .hero-copy .kicker{animation-delay:.1s}.no-pl .hero-copy h1{animation-delay:.2s}.no-pl .hero-copy p{animation-delay:.35s}.no-pl .hero-copy .hero-actions{animation-delay:.5s}.no-pl .hero-copy .hero-proof{animation-delay:.65s}
.hero .kicker{color:var(--solar)}
.pulse{box-shadow:0 0 0 0 rgba(255,194,46,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,194,46,0)}100%{box-shadow:0 0 0 0 rgba(255,194,46,0)}}
.sun-orb{background:radial-gradient(circle at 38% 36%,#fffbe0 0 8%,#ffd34d 10% 34%,#ffb020 56%,rgba(255,176,32,.15) 74%);box-shadow:0 0 90px rgba(255,194,46,.55);translate:calc(var(--px,0)*26px) calc(var(--py,0)*26px)}
.sun-orb:before{content:'';position:absolute;inset:-70px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,194,46,.38) 0 3deg,transparent 3deg 15deg);mask:radial-gradient(circle,transparent 0 33%,#000 40%,transparent 70%);-webkit-mask:radial-gradient(circle,transparent 0 33%,#000 40%,transparent 70%);animation:spin 46s linear infinite}
.sun-orb:after{content:'';position:absolute;inset:-26px;border-radius:50%;border:2px solid rgba(255,194,46,.35);animation:halo 3.2s ease-out infinite}
@keyframes halo{from{transform:scale(.85);opacity:.9}to{transform:scale(1.7);opacity:0}}
.orbit{animation:spin 60s linear infinite;border-color:rgba(255,255,255,.14);border-style:dashed}
.solar-stage{translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-10px)}
.panel3d{background:linear-gradient(135deg,#0a2a5a,#1a5cc0);border-color:#b7c9e6;opacity:0;animation:panelIn .9s cubic-bezier(.2,.8,.2,1) both,glow 6s ease-in-out infinite;animation-delay:calc(1s + var(--i,0)*80ms),calc(2.2s + var(--i,0)*300ms)}
.no-pl .panel3d{animation-delay:calc(.15s + var(--i,0)*70ms),calc(1.4s + var(--i,0)*300ms)}
.panel3d:after{content:'';position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);transform:translateX(-60%);animation:sweep 5s ease-in-out infinite;animation-delay:calc(1.6s + var(--i,0)*.22s)}
@keyframes panelIn{from{opacity:0;translate:0 -50px 60px}to{opacity:1;translate:0 0 0}}
@keyframes sweep{0%{transform:translateX(-70%)}45%,100%{transform:translateX(70%)}}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
.energy-line{background:linear-gradient(90deg,transparent,var(--solar),transparent);filter:drop-shadow(0 0 10px var(--solar))}
.float-card{translate:calc(var(--px,0)*var(--d,12)*1px) calc(var(--py,0)*var(--d,12)*1px);border-radius:18px}
.fc1{--d:-18}.fc2{--d:22}.fc3{--d:-10}
.float-card b{background:linear-gradient(90deg,#0f2f5e,#1d6fd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-visual{translate:0 calc(var(--sy,0)*-.06px)}
.hero-wave{background:#fff}

/* ---- marquee band ---- */
.band{background:linear-gradient(90deg,#061630,#0f2f5e,#061630);overflow:hidden;padding:22px 0;position:relative;z-index:4}
.band-track{display:flex;gap:38px;width:max-content;animation:marquee 38s linear infinite;align-items:center}
.band:hover .band-track{animation-play-state:paused}
.band-track span{font-size:clamp(22px,3.2vw,38px);font-weight:900;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.55);text-transform:uppercase;white-space:nowrap;transition:color .3s}
.band-track span:hover{color:var(--solar);-webkit-text-stroke-color:var(--solar)}
.band-track i{font-style:normal;color:var(--solar);font-size:26px;animation:spin 8s linear infinite;display:inline-block}

/* ---- headings / kicker ---- */
.kicker{color:#1d6fd6}
.kicker:before{content:'';width:0;height:2px;background:currentColor;border-radius:2px;transition:width .8s .2s cubic-bezier(.2,.8,.2,1);display:inline-block}
.reveal.in .kicker:before,.in>.kicker:before,.kicker.in:before{width:26px}
.hero .kicker:before{width:26px}
.accent{color:#1d6fd6;background:linear-gradient(90deg,#1d6fd6,#4c9bff,#1d6fd6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmerText 6s linear infinite}
@keyframes shimmerText{to{background-position:-200% 0}}

/* ---- reveal system ---- */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.split>.reveal:first-child{transform:translateX(-46px)}
.split>.reveal:last-child{transform:translateX(46px)}
.reveal.in,.split>.reveal.in{opacity:1;transform:none}
.hero-copy.reveal,.hero-visual.reveal{transition-delay:0s}

/* ---- cards ---- */
.spot{position:relative}
.spot:before{content:'';position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,194,46,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:0}
.spot:hover:before{opacity:1}
.card{border-color:var(--line)}
.service-card:after{background:var(--solar);opacity:.2;transition:transform .6s,opacity .3s}
.service-card:hover:after{transform:scale(2.6);opacity:.12}
.service-card .icon,.service-row .icon{background:linear-gradient(145deg,#eaf2ff,#fff4d6);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.card:hover .icon,.service-row:hover .icon{transform:rotate(-10deg) scale(1.14)}
.service-card a{color:#1d6fd6;transition:letter-spacing .3s}
.service-card a:hover{letter-spacing:.14em}
.label{background:#e9f1fd;color:#1a5cc0}
.label.dark{background:rgba(255,194,46,.13);color:var(--solar)}
.bullet{transition:transform .3s,box-shadow .3s,border-color .3s}
.bullet:hover{transform:translateX(6px);box-shadow:var(--shadow-sm);border-color:#ffd77a}
.bullet i{background:#fff1cc;color:#a86b00;transition:transform .4s}
.bullet:hover i{transform:rotate(360deg) scale(1.1)}
.mini-proof{transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden}
.mini-proof:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.article{position:relative}.article-media{background:linear-gradient(135deg,#0a2a5a,#2f80ed 70%,#ffc22e)}
.service-row{position:relative;overflow:hidden}
.arrow{transition:transform .3s,background .3s}.service-row:hover .arrow{transform:translateX(6px);background:var(--solar)}

/* ---- stats ---- */
.stats-band{background:linear-gradient(135deg,#061630,#0f2f5e);position:relative;overflow:hidden}
.stats-band:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--bx,20%) 0,rgba(255,194,46,.14),transparent 40%);animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{--bx:80%;transform:translateX(12%)}}
.stat{position:relative}.stat strong{background:linear-gradient(180deg,#ffe28a,#ffb020);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- process ---- */
.step{border-top:2px solid #d4e2f5;background:linear-gradient(90deg,var(--solar),var(--green)) top left/0 2px no-repeat;background-origin:border-box;transition:opacity .8s,transform .8s,background-size 1.2s .3s ease}
.step.in{background-size:100% 2px}
.step-num{color:#1d6fd6}
.step:after{background:var(--solar);box-shadow:0 0 0 6px rgba(255,194,46,.2);transform:scale(0);transition:transform .5s .9s cubic-bezier(.3,1.8,.5,1)}
.step.in:after{transform:scale(1);animation:ping 2.4s 1.6s infinite}
.step h3{transition:color .3s}.step:hover h3{color:#1d6fd6}

/* ---- photo / dashboard ---- */
.photo:before{border-color:rgba(255,255,255,.35);animation:borderPulse 4s ease-in-out infinite}
@keyframes borderPulse{50%{inset:30px;border-color:rgba(255,194,46,.6)}}
.badge-float{animation:float 5s ease-in-out infinite}
.dashboard,.stage{background:#061630}
.chart span{background:linear-gradient(#ffd45c,#2f80ed);transition:height 1s cubic-bezier(.3,.9,.3,1)}
.dash-box strong{font-variant-numeric:tabular-nums}
.live:before{background:#ffc22e}
.dark{background:#061630}

/* ---- projects ---- */
.project-card{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s,filter .4s;background-size:110%;background-position:center}
.project-card:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--shadow);background-size:122%}
.project-card:after{background:linear-gradient(transparent 25%,rgba(6,22,48,.92))}
.project-card .cap{transition:transform .4s}.project-card:hover .cap{transform:translateY(-6px)}
.filter{transition:all .25s}.filter:hover{transform:translateY(-2px);border-color:var(--solar)}
.filter.active{background:var(--navy);border-color:var(--navy)}
.project-card.pop{animation:popIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.9)}}

/* ---- products / tabs / testimonials ---- */
.product-stage{background:linear-gradient(145deg,#e6effc,#f7faff)}
.product-stage .sun-disc{background:radial-gradient(#fff6cf,var(--solar));animation:float 7s ease-in-out infinite}
.panel-product{background:linear-gradient(135deg,#0a2a5a,#1a5cc0);animation:panelTilt 8s ease-in-out infinite}
@keyframes panelTilt{50%{transform:rotateX(52deg) rotateZ(-12deg) translateY(-8px)}}
.tab.active{background:#fff4d6;border-color:#ffd77a;color:#8a5a00}
.product-info.active{animation:fadeUp .5s both}
.testimonial-stage{background:linear-gradient(145deg,#061630,#0f2f5e);position:relative;overflow:hidden}
.testimonial-stage:before{content:'';position:absolute;width:320px;height:320px;right:-90px;bottom:-90px;background:url('img/icon-white.png') center/contain no-repeat;opacity:.06;animation:spin 90s linear infinite}
.testimonial-stage.swap blockquote,.testimonial-stage.swap .person{animation:fadeUp .6s both}
.quote-mark{color:var(--solar)}
.dots button.active{background:var(--solar)}

/* ---- page hero + cta ---- */
.page-hero{background:radial-gradient(circle at 78% 24%,rgba(47,128,237,.28),transparent 28%),linear-gradient(135deg,#061630,#0f2f5e)}
.page-hero:before{content:'';position:absolute;width:520px;height:520px;right:-120px;top:-80px;background:url('img/icon-white.png') center/contain no-repeat;opacity:.05;animation:spin 100s linear infinite;pointer-events:none}
.page-hero>.container{position:relative;z-index:2}
.page-hero h1{animation:fadeUp .9s .1s both}
.cta{background:radial-gradient(circle at 90% 20%,rgba(255,194,46,.35),transparent 26%),linear-gradient(135deg,#0a2a5a,#1a5cc0)}
.cta:before{content:'';position:absolute;width:420px;height:420px;left:-140px;bottom:-200px;background:url('img/icon-white.png') center/contain no-repeat;opacity:.07;animation:spin 80s linear infinite reverse}
.cta>*{position:relative;z-index:2}
.calc-result,.dashboard{background:#061630}
.result-box.feature strong{color:var(--solar)}
.result-box strong.tick{animation:tick .5s}
@keyframes tick{40%{transform:scale(1.12);color:var(--solar)}}
.range-val{background:#fff4d6;color:#8a5a00}
input[type=range]{accent-color:#ffb020}
input:focus,select:focus,textarea:focus{border-color:#4c9bff;box-shadow:0 0 0 4px rgba(47,128,237,.14)}
.step-pill.active{background:linear-gradient(90deg,var(--green),var(--solar))}
.wizard-step.active{animation:fadeUp .5s both}
.success .check-big{background:#fff4d6;color:#a86b00;animation:pop .6s cubic-bezier(.3,1.8,.5,1) both}
@keyframes pop{from{transform:scale(0) rotate(-40deg)}}
.contact-chip{transition:transform .3s,box-shadow .3s,border-color .3s;background:#fff}
a.contact-chip:hover{transform:translateX(6px);border-color:#ffd77a;box-shadow:var(--shadow-sm)}
.contact-chip .icon{background:#e9f1fd}
.timeline:before{background:#d4e2f5}.milestone:before{background:var(--solar);box-shadow:0 0 0 6px rgba(255,194,46,.2)}.milestone small{color:#1d6fd6}
.faq button span{color:#1d6fd6}

/* ---- visit section ---- */
.visit{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:stretch}
.visit h2{font-size:clamp(34px,4.2vw,52px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 14px}
.map-frame{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);min-height:420px;border:1px solid var(--line);position:relative;background:#e6effc}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
a.contact-chip{color:inherit}
@media(max-width:1040px){.visit{grid-template-columns:1fr}.map-frame{min-height:340px}}

/* ---- floating actions ---- */
.float-action{transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;position:relative;color:var(--navy)}
.float-action:hover{transform:scale(1.14) rotate(-6deg)}
.float-action.whatsapp{background:#25d366;color:#fff}
.float-action.whatsapp:before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:halo 2.2s ease-out infinite}
.float-action.call{background:var(--navy);color:#fff;border-color:var(--navy)}
.float-action.calc{background:var(--solar);border-color:var(--solar)}
.to-top{position:fixed;left:18px;bottom:18px;z-index:900;width:46px;height:46px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:18px;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:.35s;box-shadow:var(--shadow-sm)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}.to-top:hover{background:var(--solar);color:var(--navy)}

/* ---- footer ---- */
footer{background:#040f22;color:#9db2cf}
.footer-grid a{position:relative;width:fit-content;transition:color .25s,transform .25s}
.footer-grid a:not(.btn):hover{transform:translateX(5px);color:#fff}
.modal-panel{transition:transform .4s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.drawer-links a,.drawer-links button{transition:padding .25s,color .25s}.drawer-links a:hover{padding-left:12px;color:#1d6fd6}

@media(max-width:1040px){.hero:before{width:520px;height:520px}}
@media(max-width:720px){.brand-logo{width:34px}.map-frame{min-height:300px}.to-top{left:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){body{animation:none}.reveal{opacity:1;transform:none}.preloader{display:none}.ticker-track,.band-track{animation:none}}
.reveal.done{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .3s,opacity .3s,background-size 1.2s}
.step.reveal.done{transition:transform .35s,opacity .3s}
.cta>canvas.hero-fx{position:absolute;z-index:1}
.service-card .label{align-self:flex-start}
.hero-copy{padding-bottom:130px}
.person b{display:block}
.project-card,.project-card:hover{background-size:cover}
@media(max-width:1040px){.hero-copy{padding-bottom:20px}}
.footer-grid .brand{display:flex;margin:0 0 14px;width:fit-content}
.map-frame.wide{min-height:440px;margin-bottom:22px}