/* ==========================================================================
   Sunlight Technology Solar — Design System
   Palette: Ink Navy (night sky) -> Solar Gold / Amber (sunrise) -> Teal (eco)
   Display: Space Grotesk | Body: Inter | Data/Mono: JetBrains Mono
   ========================================================================== */

:root{
  --ink:#0B1E3D;
  --ink-2:#122A54;
  --ink-3:#1B3A6B;
  --gold:#FFB627;
  --amber:#FF7A1A;
  --teal:#15B79E;
  --teal-dark:#0E7C6B;
  --cream:#FBF9F2;
  --cream-2:#F3EEE1;
  --slate:#5B6B7C;
  --slate-light:#8894A3;
  --white:#FFFFFF;
  --line:rgba(11,30,61,0.09);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:10px;
  --radius-md:18px;
  --radius-lg:28px;
  --shadow-soft:0 20px 60px -25px rgba(11,30,61,0.35);
  --shadow-card:0 10px 30px -12px rgba(11,30,61,0.18);
  --container:1200px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
  animation:pageFadeIn .6s var(--ease);
}
/* Pages that have no full-bleed hero need top padding for the fixed header */
body.has-header-offset{
  padding-top:var(--header-h, 84px);
}
@keyframes pageFadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes pulse{0%,100%{opacity:.7; transform:scale(1);} 50%{opacity:1; transform:scale(1.06);}}
@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(18px,-14px) scale(1.08);} 66%{transform:translate(-12px,10px) scale(.96);}}
html{max-width:100%; overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit; transition:color .25s;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0 0 .5em;letter-spacing:-0.01em;}
p{line-height:1.7;color:var(--slate);margin:0 0 1em;}
button{font-family:inherit;cursor:pointer;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}

/* custom scrollbar */
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--cream-2);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--amber)); border-radius:100px; border:2px solid var(--cream-2);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--amber),var(--gold));}
html{scrollbar-color:var(--amber) var(--cream-2); scrollbar-width:thin;}
::selection{background:var(--amber); color:#fff;}
::-moz-selection{background:var(--amber); color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}

/* -------------------- Eyebrow / labels -------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); font-weight:600; margin-bottom:14px;
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--amber);display:inline-block;border-radius:2px; animation:eyebrowGrow 1.6s var(--ease) infinite;}
@keyframes eyebrowGrow{0%,100%{width:20px;} 50%{width:32px;}}
.eyebrow.on-dark{color:var(--gold);}

.section{padding:100px 0;}
.section.tight{padding:70px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,4vw,42px);}
.on-dark{color:var(--white);}
.on-dark p{color:rgba(255,255,255,.72);}
.on-dark h2, .on-dark h3, .on-dark h4{color:var(--white);}

.bg-ink{background:var(--ink); position:relative;}
.bg-cream2{background:var(--cream-2);}
.bg-blue{background:var(--ink); position:relative;}
.bg-blue::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); pointer-events:none;}
.bg-blue .section-head h2, .bg-blue h3, .bg-blue p, .bg-blue span:not(.dot), .bg-blue li, .bg-blue b{color:#fff;}
.bg-white{background:#fff;}

/* -------------------- Buttons -------------------- */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:100px; border:2px solid transparent;
  font-weight:600; font-size:15px; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-140%); transition:transform .7s var(--ease);
}
.btn:hover::before{transform:translateX(140%);}
.btn > *{position:relative; z-index:2;}
.btn i,.btn svg{transition:transform .35s var(--ease);}
.btn:hover i,.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.95) !important; transition-duration:.12s;}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--amber)); color:var(--ink); box-shadow:0 12px 28px -10px rgba(255,122,26,.55);}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 18px 36px -12px rgba(255,122,26,.65);}
.btn-outline{border-color:rgba(255,255,255,.35); color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.1); border-color:var(--white); transform:translateY(-3px);}
.btn-dark{background:var(--ink); color:var(--white);}
.btn-dark:hover{background:var(--ink-3); transform:translateY(-3px) scale(1.02);}
.btn-teal{background:var(--teal); color:var(--white); box-shadow:0 12px 28px -10px rgba(21,183,158,.5);}
.btn-teal:hover{transform:translateY(-3px) scale(1.02);}
.btn-whatsapp{background:#25D366; color:#fff; box-shadow:0 12px 28px -10px rgba(37,211,102,.55);}
.btn-whatsapp:hover{background:#20bd5a; transform:translateY(-3px) scale(1.02); box-shadow:0 18px 36px -12px rgba(37,211,102,.65);}
.btn-block{width:100%;}
.btn-sm{padding:10px 20px; font-size:13.5px;}
.card-actions{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap;}
.header-actions .btn-primary.btn-sm{animation:ctaPulse 3.2s ease-in-out infinite;}
.header-actions .btn-primary.btn-sm:hover{animation-play-state:paused;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 12px 28px -10px rgba(255,122,26,.55);}
  50%{box-shadow:0 12px 30px -6px rgba(255,122,26,.85);}
}

/* -------------------- Header -------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
  border-bottom:1px solid rgba(255,255,255,0.08);
  animation:headerDrop .6s var(--ease);
  background:transparent;
}
@keyframes headerDrop{from{transform:translateY(-100%);} to{transform:translateY(0);}}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:transparent;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px; flex-wrap:nowrap;}
.header-inner > *{min-width:0;}
.logo{display:flex; align-items:center; flex-shrink:1; min-width:0; transition:transform .35s var(--ease);}
.logo:hover{transform:scale(1.04);}
.logo img{height:100px; width:auto; max-width:380px; object-fit:contain; display:block; transition:filter .3s; filter:drop-shadow(0 0 6px rgba(255,255,255,0.3));}
.main-nav ul{display:flex; gap:30px;}
.main-nav a{
  font-weight:600; font-size:14.5px; color:#ffffff; position:relative; padding:8px 0;
  transition:color .3s, transform .3s var(--ease);
}
.main-nav a:hover{transform:translateY(-2px); color:#FFB627;}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--gold),var(--amber));
  transition:width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--amber);}
.header-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.phone-pill{
  display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:13px;
  font-weight:600; color:#ffffff; white-space:nowrap; transition:transform .3s var(--ease);
}
.phone-pill:hover{transform:translateY(-2px); color:#FFB627;}
.phone-pill i{color:var(--amber); display:inline-block; animation:ringWiggle 2.6s ease-in-out infinite;}
@keyframes ringWiggle{0%,80%,100%{transform:rotate(0);} 82%{transform:rotate(-18deg);} 85%{transform:rotate(14deg);} 88%{transform:rotate(-10deg);} 91%{transform:rotate(6deg);} 94%{transform:rotate(0);}}
.nav-toggle{
  display:none; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; background:none; border:none; padding:0; font-size:20px; color:#ffffff;
  transition:transform .35s var(--ease);
}
.nav-toggle:hover{transform:scale(1.12);}
.nav-toggle.open{transform:rotate(90deg);}
.nav-toggle i{pointer-events:none;}

/* -------------------- Hero -------------------- */
.hero{
  position:relative; overflow:hidden; color:var(--white);
  background:linear-gradient(160deg,#060e1e 0%, #0d1f3c 40%, #112448 75%, #1a3560 100%);
  padding:calc(var(--header-h, 84px) + 80px) 0 100px;
  min-height:100vh; display:flex; align-items:center;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:2.5;
  background:linear-gradient(100deg, rgba(4,9,20,.82) 0%, rgba(4,9,20,.68) 28%, rgba(4,9,20,.4) 50%, rgba(4,9,20,.15) 68%, transparent 85%),
             linear-gradient(180deg, rgba(4,9,20,.35) 0%, transparent 22%, transparent 78%, rgba(4,9,20,.4) 100%);
  pointer-events:none;
}
.hero .container{position:relative; z-index:3;}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:50px; align-items:center;}
.hero-copy .eyebrow, .hero-copy h1, .hero-copy p.lede, .hero-copy .hero-cta, .hero-copy .hero-stats{
  opacity:0; animation:heroItemInLeft 1s var(--ease) forwards;
}
.hero-copy .eyebrow{animation-delay:.1s;}
.hero-copy h1{animation-delay:.22s;}
.hero-copy p.lede{animation-delay:.36s;}
.hero-copy .hero-cta{animation-delay:.5s;}
.hero-copy .hero-stats{animation-delay:.64s;}
@keyframes heroItemIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}}
@keyframes heroItemInLeft{from{opacity:0; transform:translateX(-70px);} to{opacity:1; transform:translateX(0);}}
.hero-panel-in{opacity:0; animation:heroPanelInRight 1.1s var(--ease) .35s forwards;}
@keyframes heroPanelInRight{from{opacity:0; transform:translateX(90px);} to{opacity:1; transform:translateX(0);}}
@media (prefers-reduced-motion: reduce){
  .hero-copy .eyebrow, .hero-copy h1, .hero-copy p.lede, .hero-copy .hero-cta, .hero-copy .hero-stats, .hero-panel-in{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}
.hero-copy h1{font-size:clamp(30px,4.2vw,52px); margin-bottom:22px;}
.hero-copy h1 .accent{
  background:linear-gradient(100deg,var(--gold),var(--amber),var(--gold)); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:accentShimmer 5s linear infinite;
}
@keyframes accentShimmer{to{background-position:-220% center;}}
.hero-copy p.lede{font-size:18px; color:rgba(255,255,255,.78); max-width:520px; margin-bottom:34px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:44px;}
.hero-stats{display:flex; gap:36px; flex-wrap:wrap;}
.hero-stats .stat{transition:transform .3s var(--ease);}
.hero-stats .stat:hover{transform:translateY(-3px);}
.hero-stats .stat b{
  display:block; font-family:var(--font-mono); font-size:28px; line-height:1.1;
  transition:transform .4s var(--ease);
}
.hero-stats .stat b span[data-count]{
  background:linear-gradient(135deg,var(--gold),var(--amber));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-family:var(--font-mono); font-size:inherit; font-weight:inherit;
}
.hero-stats .stat:hover b{transform:scale(1.08);}
.hero-stats .stat > span{font-size:12px; color:rgba(255,255,255,.7); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono);}

/* ── Sun-flare lighting overlay (photographic reference image) ── */
.hero-flare-img{
  position:absolute;
  top:-20%; left:-18%;
  width:140%; height:160%;
  background-image:url('../images/sun-flare-ref.jpg');
  background-size:210% 210%;
  background-position:0% 0%;
  background-repeat:no-repeat;
  mix-blend-mode:screen;
  opacity:0.85;
filter: brightness(0.68) saturate(1.0) contrast(1.05);
  pointer-events:none; z-index:2;
  -webkit-mask-image:linear-gradient(128deg, #000 0%, #000 55%, rgba(0,0,0,.55) 80%, transparent 98%);
  mask-image:linear-gradient(128deg, #000 0%, #000 55%, rgba(0,0,0,.55) 80%, transparent 98%);
}
@media (max-width:900px){
  .hero-flare-img{width:190%; height:105%; left:-35%; top:-12%; background-size:cover; background-position:10% 8%;}
}

/* ── Panel rig ── */
.panel-rig{
  position:relative; width:115%; max-width:680px;
  aspect-ratio:1/1;
  margin:0 auto 0 -4%;
}

/* ── Soft shadow panel casts on bg ── */
.panel-rig::after{
  content:'';
  position:absolute;
  bottom:-8%; right:-6%; width:80%; height:40%;
  background:radial-gradient(ellipse at 40% 50%, rgba(0,0,0,.55), transparent 70%);
  filter:blur(18px);
  transform:skewX(-12deg);
  pointer-events:none; z-index:0;
}

/* ── Ambient bg glow behind panel ── */
.panel-rig-glow{
  position:absolute; inset:-10%;
  background:radial-gradient(ellipse at 55% 48%, rgba(255,165,30,.10) 0%, transparent 65%);
  pointer-events:none; z-index:0;
  animation:pulse 5s ease-in-out infinite;
}

/* ── Solar panel — tilted like rooftop (25-30deg perspective) ── */
.solar-panel{
  position:absolute;
  left:5%; right:3%; top:6%; bottom:5%;
  display:flex; flex-direction:column; align-items:stretch;
  transform: perspective(1100px) rotateX(28deg) rotateY(-12deg) rotateZ(-2deg);
  transform-style:preserve-3d;
}

.panel-frame{
  position:relative; width:100%; flex:1;
  border-radius:10px; background:#071628;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:
    0 40px 80px -20px rgba(4,10,22,.9),
    0 8px 20px -4px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
  transform-style:preserve-3d;
}

/* Solar cells grid */
.panel-cells{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(174,205,255,.38) 0, rgba(174,205,255,.38) 1.5px,
      transparent 1.5px, transparent calc(100%/7)),
    repeating-linear-gradient(0deg,
      rgba(174,205,255,.30) 0, rgba(174,205,255,.30) 1.5px,
      transparent 1.5px, transparent calc(100%/5)),
    linear-gradient(148deg, #12345a 0%, #0c2540 40%, #071628 100%);
}

/* Sunlight hitting panel — brightest top-left, fading diagonally */
.panel-light-hit{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(
      135deg,
      rgba(255,245,180,.75) 0%,
      rgba(255,200,60,.40) 18%,
      rgba(255,160,20,.15) 42%,
      transparent 65%
    );
  mix-blend-mode:screen;
  animation:lightHitPulse 5s ease-in-out infinite;
}
@keyframes lightHitPulse{0%,100%{opacity:.85;} 50%{opacity:1;}}

/* Glossy reflection sweep */
.panel-shine{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg,
    transparent 15%,
    rgba(255,255,255,.14) 38%,
    rgba(255,255,255,.07) 50%,
    transparent 65%
  );
  animation:panelSweep 5s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes panelSweep{0%,100%{transform:translateX(-130%) skewX(-8deg);} 55%{transform:translateX(140%) skewX(-8deg);}}

/* Bright edge highlight where light first hits */
.panel-edge-glow{
  position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, rgba(255,230,100,.9) 0%, rgba(255,200,60,.5) 40%, transparent 75%);
  border-radius:10px 10px 0 0;
}
.panel-edge-glow-left{
  position:absolute; top:0; left:0; width:3px; height:60%;
  background:linear-gradient(180deg, rgba(255,230,100,.85) 0%, rgba(255,185,40,.3) 60%, transparent 100%);
  border-radius:10px 0 0 0;
}

/* Panel bottom thickness (3D depth illusion) */
.panel-depth{
  height:14px;
  background:linear-gradient(180deg, #0a1e38 0%, #050f1c 100%);
  border-radius:0 0 8px 8px;
  border:2px solid rgba(255,255,255,.08);
  border-top:none;
  box-shadow:0 8px 24px -4px rgba(0,0,0,.7);
}

.hero-panel-badge{
  position:absolute; top:4%; left:-2%; transform:none;
  background:rgba(10,20,38,.75); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  padding:10px 16px; border-radius:100px; font-family:var(--font-mono); font-size:12px;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  z-index:5;
  animation:badgeFloat 3.4s ease-in-out infinite;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
@keyframes badgeFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
.hero-panel-badge .dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px 2px rgba(21,183,158,.8); animation:blink 1.6s ease-in-out infinite; flex:none;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.35;}}
.hero-panel-badge--pulse{width:46px; height:46px; padding:0; border-radius:50%; justify-content:center; position:relative; background:rgba(10,20,38,.75);}
.hero-panel-badge--pulse .pulse-core{width:12px; height:12px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px 3px rgba(255,182,39,.8);}
.hero-panel-badge--pulse .pulse-ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--gold); opacity:0; animation:pulseRing 2.2s var(--ease) infinite;}
.hero-panel-badge--pulse .pulse-ring--delay{animation-delay:1.1s;}
@keyframes pulseRing{0%{transform:scale(.4); opacity:.8;} 100%{transform:scale(1.6); opacity:0;}}

/* -------------------- Cable leaving the panel: visually starts electricity flow at the panel itself -------------------- */
#power-flow-overlay{display:none !important;}
.power-flow-path{stroke-linecap:round; fill:none;}
.power-flow-path--glow{stroke:#FF7A1A; stroke-width:10; opacity:.35; filter:blur(6px);}
.power-flow-path--core{stroke:#FFB627; stroke-width:3; filter:drop-shadow(0 0 6px rgba(255,182,39,.9));}
.power-flow-dot{fill:#FFF3C4; filter:drop-shadow(0 0 10px #FFB627) drop-shadow(0 0 18px #FFB627);}
.power-flow-spark{fill:#FFE1A0; filter:drop-shadow(0 0 10px #FFB627) drop-shadow(0 0 18px #FFB627); animation:cableSparkPulse 1.4s ease-in-out infinite; transform-origin:center;}
@keyframes cableSparkPulse{0%,100%{opacity:.7; transform:scale(.9);} 50%{opacity:1; transform:scale(1.25);}}

.hero-scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.55); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;}
.hero-scroll-hint .line{width:1px; height:30px; background:linear-gradient(rgba(255,255,255,.7), transparent); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;}50.01%{transform-origin:bottom;}100%{transform:scaleY(0); transform-origin:bottom;}}

/* -------------------- Content stacking safety -------------------- */
.section-head{position:relative; z-index:2;}
.card h3, .card p, .card .icon-wrap{position:relative; z-index:2;}


.wire-gold{color:var(--amber);}
.wire-teal{color:var(--teal);}
.wire-line{
  position:relative; display:block; width:4px; margin:0 auto;
  background-image:repeating-linear-gradient(180deg, currentColor 0 7px, transparent 7px 14px);
  opacity:1; border-radius:2px;
  filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
  animation:wireFlow .4s linear infinite;
}
@keyframes wireFlow{to{background-position:0 14px;}}
.wire-line::after{
  content:""; position:absolute; left:50%; top:0; width:10px; height:10px; border-radius:50%;
  background:currentColor; box-shadow:0 0 14px 5px currentColor, 0 0 26px 8px currentColor;
  transform:translateX(-50%); animation:wireDrip .85s linear infinite;
}
.wire-line::before{
  content:""; position:absolute; left:50%; top:0; width:10px; height:10px; border-radius:50%;
  background:currentColor; box-shadow:0 0 14px 5px currentColor, 0 0 26px 8px currentColor;
  transform:translateX(-50%); animation:wireDrip .85s linear infinite; animation-delay:.42s;
}
@keyframes wireDrip{0%{top:-3%; opacity:0;} 12%{opacity:1;} 92%{opacity:1;} 100%{top:100%; opacity:0;}}

/* -------------------- Power bulb: electricity arrives in section 1 -------------------- */
.power-bulb{
  position:relative; width:74px; height:88px; margin:-40px auto 0; z-index:5; pointer-events:none;
}
.power-bulb > .wire-line{position:absolute; top:-40px; left:50%; transform:translateX(-50%); z-index:4;}
.power-bulb svg{width:100%; height:100%; overflow:visible;}
.power-bulb .bulb-bridge{position:absolute; top:-225px; left:50%; width:260px; height:225px; transform:translateX(-72%); overflow:visible; z-index:6;}
.power-bulb .bulb-glow{animation:bulbGlowPulse 1.7s ease-in-out infinite; transform-origin:30px 34px;}
.power-bulb .bulb-glass{animation:bulbFlicker 1.7s ease-in-out infinite;}
.power-bulb .bulb-filament{animation:filamentPulse 1.7s ease-in-out infinite;}
@keyframes bulbGlowPulse{
  0%,100%{opacity:.75; transform:scale(1);}
  50%{opacity:1; transform:scale(1.3);}
}
@keyframes bulbFlicker{
  0%,19%,21%,100%{filter:drop-shadow(0 0 6px rgba(255,182,39,.55)) drop-shadow(0 0 14px rgba(255,182,39,.35));}
  20%{filter:drop-shadow(0 0 2px rgba(255,182,39,.2));}
  50%{filter:drop-shadow(0 0 26px rgba(255,182,39,1)) drop-shadow(0 0 46px rgba(255,182,39,.7));}
}
@keyframes filamentPulse{
  0%,100%{stroke:#FF7A1A; opacity:.85;}
  50%{stroke:#FFF3C4; opacity:1;}
}
@media (max-width: 720px){
  .power-bulb{width:52px; height:64px; margin-top:-30px;}
  .power-bulb .bulb-bridge{top:-130px; width:140px; height:130px; transform:translateX(-60%);}
  .power-bulb > .wire-line{top:-28px; height:40px !important;}
}

/* Wire hanging from the bottom of section 1 down toward the fan */
.wire-out-bottom{
  position:absolute; left:50%; bottom:-64px; transform:translateX(-50%);
  height:64px; width:3px; z-index:2; pointer-events:none;
}
@media (max-width: 720px){
  .wire-out-bottom{height:40px; bottom:-40px;}
}

/* -------------------- Power fan: electricity arrives in section 2 -------------------- */
.power-fan{
  position:relative; width:80px; height:80px; margin:-36px auto 0; z-index:5; pointer-events:none;
}
.power-fan > .wire-line{position:absolute; top:-40px; left:50%; transform:translateX(-50%); z-index:4;}
.power-fan svg{width:100%; height:100%; overflow:visible;}
.power-fan .fan-wire{position:absolute; top:-56px; left:50%; height:56px; transform:translateX(-50%);}
.power-fan .fan-bridge{position:absolute; top:-800px; left:50%; width:260px; height:800px; transform:translateX(-72%); overflow:visible; z-index:6; pointer-events:none;}
.power-fan .fan-blades{
  animation:fanSpin 1.6s linear infinite, fanSpeedSurge 3.2s ease-in-out infinite;
  filter:drop-shadow(0 0 8px rgba(255,182,39,.7));
  transform-origin:35px 35px;
}
.power-fan .fan-glow-ring{animation:fanRingPulse 2.4s ease-in-out infinite; transform-origin:35px 35px; stroke-width:2;}

/* Solar energy halo — ring of golden light around fan */
.power-fan::after{
  content:'';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:110px; height:110px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,182,39,0.22) 0%, rgba(255,122,26,0.12) 45%, transparent 70%);
  animation:fanSolarHalo 3.2s ease-in-out infinite;
  pointer-events:none;
  z-index:1;
}
/* Electric spark dots orbiting the fan */
.fan-spark{
  position:absolute;
  width:5px; height:5px;
  border-radius:50%;
  background:#FFF3C4;
  box-shadow:0 0 8px 3px #FFB627, 0 0 20px 6px rgba(255,182,39,.5);
  pointer-events:none;
  animation:fanSparkOrbit 1.6s linear infinite;
  transform-origin:35px 35px;
}
.fan-spark:nth-child(2){animation-delay:-0.53s;}
.fan-spark:nth-child(3){animation-delay:-1.07s;}

@keyframes fanSpin{to{transform:rotate(360deg);}}
@keyframes fanSpeedSurge{
  0%,100%{animation-duration:1.6s;}
  40%,60%{animation-duration:0.7s;}
}
@keyframes fanRingPulse{0%,100%{opacity:.35; transform:scale(.96);} 50%{opacity:.85; transform:scale(1.1);}}
@keyframes fanSolarHalo{
  0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.3);}
}
@keyframes fanSparkOrbit{
  0%{transform:translate(35px,0) rotate(0deg) translateX(-35px);}
  100%{transform:translate(35px,0) rotate(360deg) translateX(-35px);}
}
@media (max-width: 720px){
  .power-fan{width:58px; height:58px; margin-top:-26px;}
  .power-fan .fan-wire{top:-36px; height:36px;}
  .power-fan .fan-bridge{top:-440px; width:140px; height:440px; transform:translateX(-60%);}
  .power-fan > .wire-line{top:-28px;}
}

/* ---- Power bolt (sun) on Why Choose Us ---- */
.power-bolt{position:relative;width:110px;height:68px;margin:-34px auto 0;z-index:5;pointer-events:none;}
.power-bolt > .wire-line{position:absolute; top:-34px; left:50%; transform:translateX(-50%); z-index:4;}
.power-bolt svg{width:100%;height:100%;overflow:visible;}
.ac-light{animation:acBlink 1.4s ease-in-out infinite;}
.ac-wind{
  animation:acWindPower 1.0s ease-in-out infinite;
  filter:drop-shadow(0 0 6px rgba(126,200,227,.9)) drop-shadow(0 0 14px rgba(21,183,158,.6));
}
.ac-wind2{
  animation:acWindPower 1.0s ease-in-out infinite .35s;
  filter:drop-shadow(0 0 6px rgba(126,200,227,.9)) drop-shadow(0 0 14px rgba(21,183,158,.6));
}
/* Solar glow on whole AC body */
.power-bolt svg{
  animation:acBodyGlow 2.8s ease-in-out infinite;
}
/* Golden solar border on AC unit */
.power-bolt::before{
  content:'';
  position:absolute;
  inset:-5px; border-radius:14px;
  background:linear-gradient(135deg,#FFB627,#15B79E,#FFB627) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  border:1.5px solid transparent;
  animation:acBorderGlow 2.8s linear infinite;
  background-size:300% 300%;
  pointer-events:none; z-index:2;
  opacity:0.7;
}
/* Animated "Solar Powered" label that pulses */
.power-bolt::after{
  content:'☀ Solar';
  position:absolute;
  top:-22px; left:50%;
  transform:translateX(-50%);
  font-size:9px; font-weight:700; letter-spacing:.1em;
  color:#FFB627;
  text-shadow:0 0 8px rgba(255,182,39,.8);
  animation:solarLabelPulse 2.8s ease-in-out infinite;
  white-space:nowrap;
  font-family:monospace;
  pointer-events:none;
}
/* Cool breeze cloud elements */
.ac-cool-cloud{
  position:absolute;
  bottom:-18px; left:8px; right:8px;
  height:20px; overflow:hidden; pointer-events:none;
}
.ac-cool-cloud span{
  position:absolute; bottom:0;
  width:8px; height:8px; border-radius:50%;
  background:rgba(126,200,227,0.5);
  filter:blur(3px);
  animation:cloudFloat 1.5s ease-out infinite;
}
.ac-cool-cloud span:nth-child(1){left:10%; animation-delay:0s;}
.ac-cool-cloud span:nth-child(2){left:30%; animation-delay:.25s; width:6px; height:6px;}
.ac-cool-cloud span:nth-child(3){left:55%; animation-delay:.5s;}
.ac-cool-cloud span:nth-child(4){left:75%; animation-delay:.75s; width:5px; height:5px;}

@keyframes acBlink{
  0%,100%{opacity:.5; filter:drop-shadow(0 0 3px #15B79E);}
  50%{opacity:1; filter:drop-shadow(0 0 18px #15B79E) drop-shadow(0 0 32px #15B79E) drop-shadow(0 0 8px #FFB627);}
}
@keyframes acWindPower{
  0%{transform:translateX(0) translateY(0); opacity:.65;}
  50%{transform:translateX(6px) translateY(2px); opacity:1;}
  100%{transform:translateX(14px) translateY(0); opacity:0;}
}
@keyframes acBodyGlow{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,182,39,.12));}
  50%{filter:drop-shadow(0 0 14px rgba(255,182,39,.45)) drop-shadow(0 0 8px rgba(21,183,158,.25));}
}
@keyframes acBorderGlow{
  0%{background-position:0% 50%; opacity:.4;}
  50%{background-position:100% 50%; opacity:.9;}
  100%{background-position:0% 50%; opacity:.4;}
}
@keyframes solarLabelPulse{
  0%,100%{opacity:.5; text-shadow:0 0 6px rgba(255,182,39,.4);}
  50%{opacity:1; text-shadow:0 0 12px rgba(255,182,39,1) ,0 0 24px rgba(255,182,39,.6);}
}
@keyframes cloudFloat{
  0%{transform:translateY(0); opacity:.8;}
  100%{transform:translateY(-18px); opacity:0;}
}
@keyframes boltSpin{to{transform:rotate(360deg);}}
@keyframes boltGlow{0%,100%{opacity:.75;}50%{opacity:1;}}

/* small page hero (inner pages) */
.page-hero{
  position:relative; overflow:hidden; color:var(--white);
  background:linear-gradient(150deg,#081226, var(--ink) 55%, var(--ink-3));
  padding:calc(var(--header-h, 84px) + 80px) 0 90px; text-align:center;
}
.page-hero::before, .page-hero::after{
  content:""; position:absolute; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,182,39,.18), transparent 70%);
  animation:orbDrift 13s ease-in-out infinite;
}
.page-hero::before{width:320px; height:320px; top:-90px; left:-60px;}
.page-hero::after{width:280px; height:280px; bottom:-90px; right:-40px; background:radial-gradient(circle, rgba(21,183,158,.16), transparent 70%); animation-duration:16s; animation-delay:1.5s;}
.page-hero .container{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(32px,5vw,54px); opacity:0; animation:heroItemIn .7s var(--ease) .1s forwards;}
.breadcrumb{display:flex; gap:8px; justify-content:center; font-family:var(--font-mono); font-size:13px; color:rgba(255,255,255,.6); margin-top:16px; opacity:0; animation:heroItemIn .7s var(--ease) .28s forwards;}
.breadcrumb a{color:var(--gold); transition:color .3s;}
.breadcrumb a:hover{color:var(--white);}

/* -------------------- Cards / grids -------------------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  background:var(--white); border-radius:var(--radius-md); padding:34px 28px;
  box-shadow:var(--shadow-card); border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{transform:translateY(-8px); box-shadow:0 24px 46px -18px rgba(11,30,61,.28);}
.card .icon-wrap{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FFF3DC,#FFE3BE); margin-bottom:20px;
  transition:transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
  animation:iconFloat 3.6s ease-in-out infinite;
}
.card:nth-child(2) .icon-wrap{animation-delay:.2s;}
.card:nth-child(3) .icon-wrap{animation-delay:.4s;}
.card:nth-child(4) .icon-wrap{animation-delay:.6s;}
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.card:hover .icon-wrap{
  transform:rotate(-8deg) scale(1.12); background:linear-gradient(135deg,var(--gold),var(--amber));
  box-shadow:0 14px 26px -10px rgba(255,122,26,.55); animation-play-state:paused;
}
.card:hover .icon-wrap img{transform:scale(1.1) rotate(6deg);}
.card .icon-wrap img{width:32px; height:32px; transition:transform .45s var(--ease);}
.card h3{font-size:20px; margin-bottom:10px;}
.card p{margin-bottom:0; font-size:14.5px;}

.service-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; background:var(--ink);
  min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
  isolation:isolate; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.service-card:hover{transform:translateY(-8px); box-shadow:0 26px 50px -20px rgba(8,18,38,.55);}
.service-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease), filter .6s var(--ease);}
.service-card::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(8,18,38,.95) 10%, rgba(8,18,38,.35) 65%, rgba(8,18,38,.05));}
.service-card:hover img{transform:scale(1.1) rotate(.5deg); filter:brightness(1.08);}
.service-card h3{color:var(--white); font-size:21px; margin-bottom:8px;}
.service-card p{color:rgba(255,255,255,.75); font-size:14px; margin-bottom:14px;}
.service-card .tag{
  position:absolute; top:20px; left:20px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px); font-family:var(--font-mono); font-size:11px; padding:6px 12px; border-radius:100px; color:var(--gold);
  transition:transform .4s var(--ease), background .4s var(--ease);
}
.service-card:hover .tag{transform:translateY(-2px); background:rgba(255,182,39,.22);}
.card-link{display:inline-flex; align-items:center; gap:6px; color:var(--amber); font-weight:700; font-size:14px; position:relative; transition:color .3s, gap .3s var(--ease);}
.card-link .arrow{transition:transform .3s var(--ease);}
.card-link:hover{gap:10px; color:var(--gold);}
.card-link:hover .arrow{transform:translateX(3px);}
.on-dark .card-link, .bg-blue .card-link{color:var(--amber) !important;}
.service-card:hover .arrow{transform:translateX(5px);}

/* -------------------- About split -------------------- */
.about-split{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.about-media{position:relative;}
.about-media .img-main{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .5s var(--ease), box-shadow .5s var(--ease);}
.about-media .img-main img{transition:transform .6s var(--ease);}
.about-media:hover .img-main{transform:translateY(-4px) rotate(-.4deg); box-shadow:0 30px 70px -22px rgba(11,30,61,.45);}
.about-media:hover .img-main img{transform:scale(1.06);}
.about-media .img-float{
  position:absolute; width:46%; border-radius:var(--radius-md); overflow:hidden; box-shadow:0 20px 40px -14px rgba(11,30,61,.4);
  border:6px solid var(--cream); bottom:-40px; right:-30px;
  animation:mediaFloat 5s ease-in-out infinite; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.about-media .img-float img{transition:transform .6s var(--ease);}
.about-media:hover .img-float{box-shadow:0 26px 50px -14px rgba(11,30,61,.5); animation-play-state:paused;}
.about-media:hover .img-float img{transform:scale(1.08);}
@keyframes mediaFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* ══════════════════════════════════════════════════════
   3D INVERTER ANIMATION — Our Story Section
══════════════════════════════════════════════════════ */
.inv3d-wrap{
  position:relative; border-radius:var(--radius-lg); overflow:visible;
  display:flex; align-items:center; justify-content:center;
  min-height:420px; padding:20px 10px 40px;
  animation:inv3dFloat 5s ease-in-out infinite;
}
@keyframes inv3dFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* Ambient glow behind unit */
.inv3d-glow{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,182,39,.18) 0%, rgba(21,183,158,.10) 45%, transparent 70%);
  animation:inv3dGlowPulse 3.5s ease-in-out infinite;
}
@keyframes inv3dGlowPulse{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}

/* Rotating energy rings */
.inv3d-ring{
  position:absolute; border-radius:50%; border:1.5px solid transparent;
  pointer-events:none; z-index:0;
}
.inv3d-ring-1{
  width:280px; height:280px; top:50%; left:50%; transform:translate(-50%,-55%);
  border-color:rgba(255,182,39,.12) rgba(255,182,39,.06) rgba(255,182,39,.12) rgba(255,182,39,.06);
  animation:inv3dSpin 12s linear infinite;
}
.inv3d-ring-2{
  width:340px; height:340px; top:50%; left:50%; transform:translate(-50%,-55%);
  border-color:rgba(21,183,158,.10) rgba(21,183,158,.04) rgba(21,183,158,.10) rgba(21,183,158,.04);
  animation:inv3dSpin 18s linear infinite reverse;
}
.inv3d-ring-3{
  width:200px; height:200px; top:50%; left:50%; transform:translate(-50%,-60%);
  border-color:rgba(255,182,39,.08) transparent rgba(255,182,39,.08) transparent;
  animation:inv3dSpin 8s linear infinite;
}
@keyframes inv3dSpin{to{transform:translate(-50%,-55%) rotate(360deg);}}
.inv3d-ring-3{animation-name:inv3dSpin3;}
@keyframes inv3dSpin3{to{transform:translate(-50%,-60%) rotate(360deg);}}

/* Main SVG */
.inv3d-svg{position:relative;z-index:1;width:100%;max-width:360px;height:auto;filter:drop-shadow(0 30px 60px rgba(11,30,61,.55));}

/* Shadow ellipse animation */
.inv3d-shadow{animation:inv3dShadow 5s ease-in-out infinite;}
@keyframes inv3dShadow{0%,100%{transform:scaleX(1);opacity:.45;}50%{transform:scaleX(.85);opacity:.3;}}

/* KW value subtle pulse */
.inv3d-kwval{animation:inv3dKW 2.8s ease-in-out infinite;}
@keyframes inv3dKW{0%,100%{opacity:1;}50%{opacity:.82;}}

/* Sine wave pulse on screen */
.inv3d-sine{opacity:0.75;animation:inv3dSine 2.2s ease-in-out infinite;}
@keyframes inv3dSine{0%,100%{opacity:.75;filter:drop-shadow(0 0 2px rgba(21,183,158,.4));}50%{opacity:1;filter:drop-shadow(0 0 7px rgba(21,183,158,.9));}}

/* LED blinks */
.inv3d-led-g{animation:inv3dLedG 1.8s ease-in-out infinite;}
@keyframes inv3dLedG{0%,100%{opacity:1;}50%{opacity:.25;}}
.inv3d-led-a{animation:inv3dLedA 1.8s ease-in-out .9s infinite;}
@keyframes inv3dLedA{0%,100%{opacity:1;}50%{opacity:.25;}}

/* Floating energy sparks */
.inv3d-sparks{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;}
.inv3d-spark{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;}
.inv3d-spark.s1{left:30%;background:#FFB627;box-shadow:0 0 8px 3px rgba(255,182,39,.7);animation:inv3dSparkRise 3s ease-in 0s infinite;}
.inv3d-spark.s2{left:55%;background:#15B79E;box-shadow:0 0 8px 3px rgba(21,183,158,.7);animation:inv3dSparkRise 3s ease-in .7s infinite;}
.inv3d-spark.s3{left:42%;background:#FFB627;box-shadow:0 0 6px 2px rgba(255,182,39,.6);animation:inv3dSparkRise 3s ease-in 1.4s infinite;}
.inv3d-spark.s4{left:68%;background:#15B79E;box-shadow:0 0 6px 2px rgba(21,183,158,.6);animation:inv3dSparkRise 3s ease-in 2s infinite;}
.inv3d-spark.s5{left:22%;background:#FFB627;box-shadow:0 0 6px 2px rgba(255,182,39,.5);animation:inv3dSparkRise 3s ease-in 2.6s infinite;}
@keyframes inv3dSparkRise{
  0%{bottom:30%;opacity:0;transform:scale(.5);}
  15%{opacity:1;}
  85%{opacity:.6;}
  100%{bottom:85%;opacity:0;transform:scale(1.3) translateX(12px);}
}

/* Live badge */
.inv3d-badge{
  position:absolute; bottom:4px; right:10px; z-index:3;
  background:linear-gradient(135deg,rgba(13,31,60,.95),rgba(11,30,61,.98));
  border:1px solid rgba(255,182,39,.3); border-radius:100px;
  padding:6px 14px; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px -6px rgba(11,30,61,.6);
}
.inv3d-badge-dot{
  width:7px;height:7px;border-radius:50%;background:#15B79E;flex:none;
  box-shadow:0 0 8px 2px rgba(21,183,158,.7);
  animation:inv3dLedG 1.8s ease-in-out infinite;
}
.inv3d-badge b{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.inv3d-badge-kw{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#FFB627;animation:inv3dKW 2.8s ease-in-out infinite;}

@media(max-width:720px){.inv3d-wrap{min-height:320px;padding:10px 0 30px;}}
@media(max-width:480px){.inv3d-wrap{min-height:260px;}}

/* ══════════════════════════════════════════════════════
   INVERTER ANIMATION OVERLAY — Our Story Section
══════════════════════════════════════════════════════ */
.inverter-overlay{
  position:absolute; bottom:-32px; left:-22px; z-index:4; width:272px;
  background:linear-gradient(148deg,rgba(13,31,60,.97) 0%,rgba(11,30,61,.99) 100%);
  border:1px solid rgba(255,182,39,.28); border-radius:18px;
  padding:13px 16px 12px;
  box-shadow:0 22px 55px -12px rgba(11,30,61,.7),0 0 0 1px rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.07);
  animation:mediaFloat 6s ease-in-out 2s infinite;
}
/* Header */
.ivo-header{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.ivo-leds{display:flex;gap:5px;}
.ivo-led{width:8px;height:8px;border-radius:50%;display:block;flex:none;}
.ivo-led-g{background:#15B79E;box-shadow:0 0 8px 2px rgba(21,183,158,.7);animation:ivoBlink 1.8s ease-in-out infinite;}
.ivo-led-a{background:#FFB627;box-shadow:0 0 6px 2px rgba(255,182,39,.55);animation:ivoBlink 1.8s ease-in-out .9s infinite;}
@keyframes ivoBlink{0%,100%{opacity:1;}50%{opacity:.2;}}
.ivo-title{flex:1;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.75);}
.ivo-live{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;color:#15B79E;background:rgba(21,183,158,.12);border:1px solid rgba(21,183,158,.3);padding:2px 7px;border-radius:100px;animation:ivoLive 2s step-start infinite;}
@keyframes ivoLive{0%,49%{opacity:1;}50%,100%{opacity:.35;}}
/* Diagram row */
.ivo-diagram{display:flex;align-items:center;gap:6px;}
/* Source / load nodes */
.ivo-node{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;}
.ivo-node span{font-family:var(--font-mono);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.ivo-dc span{color:#FFB627;}
.ivo-ac span{color:#15B79E;}
/* Flow lanes */
.ivo-lane{flex:1;position:relative;height:20px;display:flex;align-items:center;}
.ivo-lane svg{position:absolute;inset:0;width:100%;height:100%;}
/* Animated dots */
.ivo-dot{position:absolute;width:6px;height:6px;border-radius:50%;top:50%;transform:translateY(-50%);}
.ivo-dot-dc{background:#FFB627;box-shadow:0 0 8px 2px rgba(255,182,39,.8);}
.ivo-dot-dc.d1{animation:dotFlowDC 1.3s linear infinite;}
.ivo-dot-dc.d2{animation:dotFlowDC 1.3s linear .43s infinite;}
.ivo-dot-dc.d3{animation:dotFlowDC 1.3s linear .87s infinite;}
@keyframes dotFlowDC{0%{left:0%;opacity:0;}8%{opacity:1;}88%{opacity:1;}100%{left:calc(100% - 6px);opacity:0;}}
.ivo-dot-ac{background:#15B79E;box-shadow:0 0 8px 2px rgba(21,183,158,.8);}
.ivo-dot-ac.a1{animation:dotFlowAC 1.3s linear .15s infinite;}
.ivo-dot-ac.a2{animation:dotFlowAC 1.3s linear .8s infinite;}
@keyframes dotFlowAC{0%{left:0%;opacity:0;}8%{opacity:1;}88%{opacity:1;}100%{left:calc(100% - 6px);opacity:0;}}
/* Inverter box */
.ivo-box{
  flex:none;width:82px;
  background:linear-gradient(160deg,rgba(27,58,107,.92),rgba(11,30,61,.96));
  border:1.5px solid rgba(255,182,39,.4);border-radius:10px;
  padding:8px 6px 6px;
  box-shadow:0 0 22px -6px rgba(255,182,39,.3),inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.ivo-waveform{width:100%;height:auto;display:block;}
.ivo-sine{animation:sinePulse 2.2s ease-in-out infinite;}
@keyframes sinePulse{0%,100%{filter:drop-shadow(0 0 2px rgba(21,183,158,.45));opacity:1;}50%{filter:drop-shadow(0 0 6px rgba(21,183,158,.9));opacity:.85;}}
.ivo-kw{font-family:var(--font-mono);font-size:17px;font-weight:700;color:#FFB627;line-height:1;animation:kwFlicker 3s ease-in-out infinite;}
.ivo-kw small{font-size:9px;color:rgba(255,182,39,.65);font-weight:500;margin-left:1px;}
@keyframes kwFlicker{0%,100%{opacity:1;text-shadow:0 0 8px rgba(255,182,39,.4);}50%{opacity:.88;text-shadow:0 0 14px rgba(255,182,39,.7);}}
/* Stats footer */
.ivo-stats{display:flex;align-items:center;justify-content:space-around;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);}
.ivo-stat{text-align:center;}
.ivo-stat b{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:#FFB627;}
.ivo-stat b.teal{color:#15B79E;}
.ivo-stat span{font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em;}
.ivo-sep{width:1px;height:26px;background:rgba(255,255,255,.1);}
/* Mobile */
@media(max-width:960px){.inverter-overlay{width:230px;left:-10px;bottom:-24px;}}
@media(max-width:720px){.inverter-overlay{display:none;}}

/* -------------------- About visual: animated live-output gauge (replaces static photo) -------------------- */
.about-visual{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; isolation:isolate;
  box-shadow:var(--shadow-soft);
  min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.about-visual:hover{transform:translateY(-4px); box-shadow:0 30px 70px -22px rgba(11,30,61,.5);}
.about-visual .img-main{width:100%; height:100%; position:absolute; inset:0;}
.about-visual .img-main img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.about-visual:hover .img-main img{transform:scale(1.06);}
.about-visual .visual-glow{
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, rgba(255,182,39,.22) 0%, transparent 65%);
  animation:pulse 4.5s ease-in-out infinite;
}
.about-visual .visual-particles{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.about-visual .visual-particles span{
  position:absolute; bottom:6%; width:4px; height:4px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 8px 2px rgba(255,182,39,.7); opacity:0; animation:particleRise 3.6s ease-in infinite;
}
.about-visual .visual-particles span:nth-child(1){left:14%; animation-delay:0s;}
.about-visual .visual-particles span:nth-child(2){left:38%; animation-delay:.9s;}
.about-visual .visual-particles span:nth-child(3){left:63%; animation-delay:1.8s;}
.about-visual .visual-particles span:nth-child(4){left:85%; animation-delay:2.6s;}
@keyframes particleRise{0%{bottom:6%; opacity:0; transform:scale(.6);} 15%{opacity:1;} 82%{opacity:.65;} 100%{bottom:90%; opacity:0; transform:scale(1.15);}}
.gauge-wrap{position:relative; width:172px; height:172px; z-index:1; flex:none;}
.gauge-ring{width:100%; height:100%; transform:rotate(-90deg); overflow:visible;}
.gauge-track{fill:none; stroke:rgba(255,255,255,.12); stroke-width:10;}
.gauge-fill{
  fill:none; stroke:url(#gaugeGrad); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:439.8; stroke-dashoffset:439.8;
  animation:gaugeFill 2.1s var(--ease) .3s forwards, gaugeGlow 2.6s ease-in-out 2.4s infinite;
}
@keyframes gaugeFill{to{stroke-dashoffset:17.6;}}
@keyframes gaugeGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,182,39,.5));} 50%{filter:drop-shadow(0 0 11px rgba(255,182,39,.95));}}
.gauge-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;}
.gauge-center b{font-family:var(--font-mono); font-size:33px; color:var(--white); line-height:1;}
.gauge-center span{font-size:11px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); max-width:108px;}
.visual-rows{position:relative; z-index:1; width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px;}
.visual-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 20px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition:background .3s, transform .3s var(--ease), border-color .3s;
}
.visual-row:hover{background:rgba(255,255,255,.11); transform:translateX(4px); border-color:rgba(255,182,39,.35);}
.visual-row span{font-size:13px; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:8px;}
.visual-row span .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px 2px rgba(21,183,158,.7); animation:blink 1.8s ease-in-out infinite; flex:none;}
.visual-row b{font-family:var(--font-mono); font-size:15px; color:var(--gold);}
@media (max-width:720px){.about-visual{min-height:auto; padding:38px 22px;} .gauge-wrap{width:150px; height:150px;}}

/* -------------------- Local energy-drop wire accents: confined to the icon itself, never spans content -------------------- */
.energy-drop{position:absolute; left:50%; transform:translateX(-50%); height:44px; width:3px; z-index:1;}
.energy-drop.drop-above{top:-44px; -webkit-mask-image:linear-gradient(to top,#000 60%,transparent); mask-image:linear-gradient(to top,#000 60%,transparent);}
.energy-drop.drop-below{bottom:-44px; -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent); mask-image:linear-gradient(to bottom,#000 60%,transparent);}
@media (max-width:720px){.energy-drop{height:28px;} .energy-drop.drop-above{top:-28px;} .energy-drop.drop-below{bottom:-28px;}}

.checklist{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; margin:26px 0;}
.checklist li{display:flex; gap:10px; font-weight:600; font-size:14.5px; align-items:flex-start; transition:transform .3s var(--ease);}
.checklist li:hover{transform:translateX(4px);}
.checklist li::before{content:"✓"; color:var(--teal); background:rgba(21,183,158,.12); width:22px; height:22px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:1px; transition:transform .3s var(--ease), background .3s;}
.checklist li:hover::before{transform:scale(1.2) rotate(-8deg); background:var(--teal); color:#fff;}

/* -------------------- Stats bar -------------------- */
.stats-bar{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;}
.stats-bar .stat-item{
  padding:28px 20px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.stats-bar .stat-item:hover{transform:translateY(-6px); box-shadow:0 24px 46px -18px rgba(11,30,61,.22);}
.stat-icon{
  width:48px; height:48px; border-radius:14px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#FFF3DC,#FFE3BE); color:var(--amber); font-size:19px;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
  animation:iconFloat 3.6s ease-in-out infinite;
}
.stats-bar .stat-item:nth-child(2) .stat-icon{animation-delay:.2s;}
.stats-bar .stat-item:nth-child(3) .stat-icon{animation-delay:.4s;}
.stats-bar .stat-item:hover .stat-icon{
  transform:rotate(-8deg) scale(1.14); background:linear-gradient(135deg,var(--gold),var(--amber)); color:var(--ink);
  animation-play-state:paused;
}
.stats-bar .stat-item b{
  font-family:var(--font-mono); font-size:clamp(30px,4.2vw,48px); display:block; margin-bottom:4px; line-height:1.1;
  background:linear-gradient(135deg,var(--gold),var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform .4s var(--ease); display:block;
}
.stats-bar .stat-item:hover b{transform:scale(1.08);}
.stats-bar .stat-item span{color:var(--slate); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-mono);}

/* progress rows */
.progress-row{margin-bottom:22px;}
.progress-row .label-row{display:flex; justify-content:space-between; font-size:14px; font-weight:600; margin-bottom:8px;}
.progress-row .label-row span.pct{font-family:var(--font-mono); color:var(--gold);}
.progress-track{height:8px; background:rgba(255,255,255,.12); border-radius:100px; overflow:hidden;}
.progress-fill{height:100%; border-radius:100px; background:linear-gradient(90deg,var(--gold),var(--amber)); width:0%; transition:width 1.4s var(--ease); position:relative; overflow:hidden;}
.progress-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-140%); animation:panelSweep 2.6s ease-in-out infinite 1.2s;
}

/* -------------------- Testimonials -------------------- */
.testi-wrap{position:relative; max-width:760px; margin:0 auto;}
.testi-slide{display:none; text-align:center; animation:testiIn .6s var(--ease);}
.testi-slide.active{display:block;}
@keyframes testiIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.testi-slide .quote{font-family:var(--font-display); font-size:clamp(19px,2.6vw,26px); color:var(--ink); margin-bottom:26px;}
.testi-person{display:flex; align-items:center; justify-content:center; gap:14px;}
.testi-person img{width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--gold); transition:transform .4s var(--ease);}
.testi-person img:hover{transform:scale(1.12) rotate(-4deg);}
.testi-person .name{font-weight:700; font-size:15px;}
.testi-person .role{font-size:13px; color:var(--slate-light);}
.testi-dots{display:flex; justify-content:center; gap:10px; margin-top:34px;}
.testi-dots button{width:10px; height:10px; border-radius:50%; border:none; background:var(--line); padding:0; transition:width .3s var(--ease), background .3s, transform .3s var(--ease);}
.testi-dots button:hover{transform:scale(1.3);}
.testi-dots button.active{background:var(--amber); width:26px; border-radius:100px;}

/* -------------------- FAQ -------------------- */
.faq-item{border-bottom:1px solid var(--line); padding:22px 0; transition:padding-left .3s var(--ease);}
.faq-item:hover{padding-left:6px;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family:var(--font-display); font-size:18px; font-weight:600; transition:color .3s;}
.faq-item:hover .faq-q{color:var(--amber);}
.faq-q .plus{width:28px; height:28px; border-radius:50%; background:var(--cream-2); display:flex; align-items:center; justify-content:center; flex:none; position:relative; transition:transform .35s var(--ease), background .3s;}
.faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--ink); border-radius:2px; transition:background .3s;}
.faq-q .plus::before{width:12px; height:2px;}
.faq-q .plus::after{width:2px; height:12px; transition:opacity .3s;}
.faq-item.open .faq-q .plus{transform:rotate(135deg); background:var(--amber);}
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{background:var(--white);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .4s var(--ease); opacity:0;}
.faq-item.open .faq-a{opacity:1;}
.faq-a p{padding-top:14px; margin-bottom:0;}

/* -------------------- Blog cards -------------------- */
.blog-card{background:var(--white); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.blog-card:hover{transform:translateY(-8px); box-shadow:0 24px 46px -18px rgba(11,30,61,.24);}
.blog-card .thumb{aspect-ratio:16/11; overflow:hidden; position:relative;}
.blog-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .6s var(--ease);}
.blog-card:hover .thumb img{transform:scale(1.09); filter:brightness(1.04);}
.blog-card .body{padding:24px 24px 26px;}
.blog-meta{font-family:var(--font-mono); font-size:12px; color:var(--slate-light); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.blog-card h3{font-size:18px; margin-bottom:12px; color:var(--ink);}
.on-dark .blog-card h3{color:var(--ink);}

/* -------------------- Gallery -------------------- */
.gallery-grid{columns:4 240px; column-gap:18px;}
.gallery-grid figure{
  margin:0 0 18px; break-inside:avoid; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; position:relative;
  opacity:0; transform:translateY(24px) scale(.97);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gallery-grid.in figure{animation:galleryIn .7s var(--ease) forwards;}
.gallery-grid.in figure:nth-child(1){animation-delay:.02s;}
.gallery-grid.in figure:nth-child(2){animation-delay:.08s;}
.gallery-grid.in figure:nth-child(3){animation-delay:.14s;}
.gallery-grid.in figure:nth-child(4){animation-delay:.2s;}
.gallery-grid.in figure:nth-child(5){animation-delay:.26s;}
.gallery-grid.in figure:nth-child(6){animation-delay:.32s;}
.gallery-grid.in figure:nth-child(7){animation-delay:.38s;}
.gallery-grid.in figure:nth-child(8){animation-delay:.44s;}
.gallery-grid.in figure:nth-child(9){animation-delay:.5s;}
.gallery-grid.in figure:nth-child(10){animation-delay:.56s;}
.gallery-grid.in figure:nth-child(11){animation-delay:.62s;}
.gallery-grid.in figure:nth-child(12){animation-delay:.68s;}
@keyframes galleryIn{to{opacity:1; transform:translateY(0) scale(1);}}
.gallery-grid figure:hover{box-shadow:0 24px 46px -18px rgba(11,30,61,.35);}
.gallery-grid img{width:100%; display:block; transition:transform .5s var(--ease), filter .5s var(--ease);}
.gallery-grid figure:hover img{transform:scale(1.08); filter:brightness(1.05);}
.gallery-grid figure::after{content:"⤢"; position:absolute; top:12px; right:12px; width:34px; height:34px; background:rgba(11,30,61,.55); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6) rotate(-20deg); transition:opacity .3s, transform .3s var(--ease);}
.gallery-grid figure:hover::after{opacity:1; transform:scale(1) rotate(0deg);}

.lightbox{position:fixed; inset:0; background:rgba(8,14,26,.92); z-index:2000; display:none; align-items:center; justify-content:center; padding:40px; opacity:0; transition:opacity .3s var(--ease);}
.lightbox.open{display:flex; animation:lightboxIn .35s var(--ease) forwards;}
@keyframes lightboxIn{from{opacity:0;} to{opacity:1;}}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.9); animation:lightboxImgIn .4s var(--ease) forwards;}
@keyframes lightboxImgIn{from{transform:scale(.88); opacity:0;} to{transform:scale(1); opacity:1;}}
.lightbox-close{position:absolute; top:26px; right:32px; color:#fff; font-size:26px; background:none; border:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .3s, transform .3s var(--ease);}
.lightbox-close:hover{background:rgba(255,255,255,.12); transform:rotate(90deg);}

/* -------------------- Forms -------------------- */
.form-card{background:var(--white); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-soft); border:1px solid var(--line); transition:box-shadow .4s var(--ease);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field{margin-bottom:20px;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:8px; transition:color .3s;}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line); background:var(--cream-2);
  font-family:inherit; font-size:14.5px; color:var(--ink);
  transition:border-color .3s var(--ease), background .3s, box-shadow .3s var(--ease), transform .3s var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover{border-color:rgba(255,182,39,.5);}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--amber); background:var(--white); outline:none;
  box-shadow:0 0 0 4px rgba(255,182,39,.16); transform:translateY(-2px);
}
.field:focus-within label{color:var(--amber);}
.field textarea{resize:vertical; min-height:120px;}
.form-note{font-size:13px; color:var(--slate-light); margin-top:14px;}
.form-success{display:none; text-align:center; padding:40px 20px;}
.form-success.show{display:block; animation:heroItemIn .6s var(--ease);}
.form-success .check{width:64px; height:64px; border-radius:50%; background:rgba(21,183,158,.12); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; animation:checkPop .5s var(--ease) .1s both;}
@keyframes checkPop{0%{transform:scale(0);} 70%{transform:scale(1.15);} 100%{transform:scale(1);}}

/* contact info cards */
.info-card{display:flex; gap:18px; align-items:flex-start; padding:24px; border-radius:var(--radius-md); background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.info-card:hover{transform:translateY(-6px); box-shadow:0 22px 42px -16px rgba(11,30,61,.24);}
.info-card .ic{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg,var(--gold),var(--amber)); flex:none; display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:18px; transition:transform .4s var(--ease);}
.info-card:hover .ic{transform:rotate(-10deg) scale(1.12);}
.info-card h4{margin-bottom:6px; font-size:16px;}
.info-card p{margin:0; font-size:14px;}

/* -------------------- CTA banner -------------------- */
.cta-banner{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:70px 50px;
  background:linear-gradient(120deg,var(--ink),var(--ink-3)); color:#fff; text-align:center;
}
.cta-banner::before{
  content:""; position:absolute; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,182,39,.35), transparent 70%);
  top:-140px; right:-100px; animation:orbDrift 10s ease-in-out infinite;
}
.cta-banner::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(21,183,158,.3), transparent 70%);
  bottom:-120px; left:-80px; animation:orbDrift 13s ease-in-out infinite 1.5s;
}
.cta-banner h2{font-size:clamp(26px,4vw,40px); max-width:640px; margin:0 auto 16px; position:relative; z-index:1;}
.cta-banner p{color:rgba(255,255,255,.72); max-width:520px; margin:0 auto 30px; position:relative; z-index:1;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}

/* -------------------- Team -------------------- */
.team-card{text-align:center;}
.team-card .photo{border-radius:var(--radius-md); overflow:hidden; margin-bottom:18px; aspect-ratio:3/4; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.team-card .photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .6s var(--ease);}
.team-card:hover .photo{transform:translateY(-6px); box-shadow:0 22px 42px -16px rgba(11,30,61,.35);}
.team-card:hover .photo img{transform:scale(1.09); filter:saturate(1.1);}
.team-card h4{margin-bottom:2px; font-size:17px;}
.team-card span{font-family:var(--font-mono); font-size:12px; color:var(--amber); text-transform:uppercase; letter-spacing:.06em;}

/* -------------------- Process steps -------------------- */
.process-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative;}
.process-step{text-align:left; position:relative; padding-top:10px; transition:transform .35s var(--ease);}
.process-step:hover{transform:translateY(-6px);}
.process-step .num{font-family:var(--font-mono); font-size:13px; color:var(--amber); margin-bottom:14px; display:inline-block; transition:transform .35s var(--ease);}
.process-step:hover .num{transform:scale(1.25);}
.process-step h4{font-size:18px; margin-bottom:8px;}
.process-step p{font-size:14px;}

/* -------------------- Clients strip -------------------- */
.clients-strip{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:30px;}
.clients-strip img{height:90px; width:auto; max-width:180px; object-fit:contain; filter:none; opacity:1;}

/* -------------------- Reveal animation -------------------- */
.sec-reveal{opacity:0; transition:opacity 2.2s cubic-bezier(.16,.84,.44,1), transform 2.2s cubic-bezier(.16,.84,.44,1); will-change:transform,opacity;}
.sec-from-left{transform:translateX(-160px);}
.sec-from-right{transform:translateX(160px);}
.sec-reveal.sec-in{opacity:1; transform:translateX(0);}
.hero.sec-reveal{transform:none; opacity:1;}
@media (prefers-reduced-motion: reduce){
  .sec-reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

.reveal{opacity:0; transform:translateY(28px); transition:opacity 2s cubic-bezier(.16,.84,.44,1), transform 2s cubic-bezier(.16,.84,.44,1); will-change:transform,opacity;}
.reveal.in{opacity:1; transform:translateY(0) translateX(0) scale(1) rotate(0deg) !important;}
.reveal-delay-1{transition-delay:.18s;}
.reveal-delay-2{transition-delay:.36s;}
.reveal-delay-3{transition-delay:.54s;}
.reveal-delay-4{transition-delay:.72s;}

/* -------------------- Directional reveal: sections slide in left / right -------------------- */
/* Explicit direction classes, usable anywhere */
.reveal-left{transform:translateX(-90px) !important;}
.reveal-right{transform:translateX(90px) !important;}
.reveal-up{transform:translateY(60px) !important;}
.reveal-zoom{transform:scale(.82) !important;}
.reveal-left.in, .reveal-right.in, .reveal-up.in, .reveal-zoom.in{transform:translateX(0) translateY(0) scale(1) !important;}

/* Auto-alternating left / right for two-column layouts */
.about-split > .reveal:nth-child(1), .hero-grid > .reveal:nth-child(1), .grid-2 > .reveal:nth-child(1){
  transform:translateX(-90px);
}
.about-split > .reveal:nth-child(2), .hero-grid > .reveal:nth-child(2), .grid-2 > .reveal:nth-child(2){
  transform:translateX(90px);
}

/* Auto-alternating left / center-up / right for three-column grids */
.grid-3 > .reveal:nth-child(3n+1){transform:translateX(-70px);}
.grid-3 > .reveal:nth-child(3n+2){transform:translateY(55px) scale(.95);}
.grid-3 > .reveal:nth-child(3n+3){transform:translateX(70px);}

/* Auto-alternating left / right pairs for four-column grids & process steps */
.grid-4 > .reveal:nth-child(4n+1), .process-steps > .reveal:nth-child(4n+1){transform:translateX(-70px);}
.grid-4 > .reveal:nth-child(4n+2), .process-steps > .reveal:nth-child(4n+2){transform:translateY(55px);}
.grid-4 > .reveal:nth-child(4n+3), .process-steps > .reveal:nth-child(4n+3){transform:translateY(-55px);}
.grid-4 > .reveal:nth-child(4n+4), .process-steps > .reveal:nth-child(4n+4){transform:translateX(70px);}

/* Stats bar: left / up / right */
.stats-bar > .reveal:nth-child(3n+1){transform:translateX(-60px);}
.stats-bar > .reveal:nth-child(3n+2){transform:translateY(50px);}
.stats-bar > .reveal:nth-child(3n+3){transform:translateX(60px);}

/* Footer columns drift up + fade even without explicit .reveal markup */
.footer-grid > *{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.footer-grid.in > *{opacity:1; transform:translateY(0);}
.footer-grid.in > *:nth-child(1){transition-delay:0s;}
.footer-grid.in > *:nth-child(2){transition-delay:.1s;}
.footer-grid.in > *:nth-child(3){transition-delay:.2s;}
.footer-grid.in > *:nth-child(4){transition-delay:.3s;}

/* -------------------- Scroll progress bar -------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:4px; width:0%; z-index:2000;
  background:linear-gradient(90deg,var(--gold),var(--amber),var(--teal));
  box-shadow:0 0 12px rgba(255,122,26,.6);
  transition:width .12s linear;
}

/* -------------------- Tilt-enabled cards -------------------- */
.card, .info-card, .team-card, .blog-card, .product-card{transform-style:preserve-3d; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}

/* -------------------- Clients marquee -------------------- */
.clients-section{background:transparent;}
.clients-section .section-head h2{font-size:clamp(24px,3.5vw,38px); margin-top:10px;}
.clients-strip-wrapper{background:var(--cream-2); border-radius:20px; padding:36px 0; margin:0 0; overflow:hidden; box-shadow:0 4px 32px rgba(0,0,0,.06);}
.clients-strip{width:100%; overflow:hidden; flex-wrap:nowrap; justify-content:flex-start; gap:0; mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);}
.clients-track{display:flex; align-items:center; gap:120px; flex-shrink:0; animation:marqueeScroll 28s linear infinite; padding-left:60px; padding-right:120px;}
.clients-track img{height:170px; width:auto; max-width:180px; object-fit:contain;}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* -------------------- Testimonial slide direction -------------------- */
.testi-slide{animation:testiIn .6s var(--ease);}
@keyframes testiIn{from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);}}

/* -------------------- Section decorative drifting orbs (site-wide ambience) -------------------- */
.section{position:relative;}
.section.bg-cream2::before, .section.bg-ink::before{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,182,39,.16), transparent 70%);
  top:-80px; left:-100px; animation:orbDrift 12s ease-in-out infinite;
}
.section.bg-cream2 > *, .section.bg-ink > *{position:relative; z-index:1;}

@media (max-width: 720px){
  .section.bg-cream2::before, .section.bg-ink::before{display:none;}
}

/* -------------------- Footer -------------------- */
.site-footer{background:#081226; color:rgba(255,255,255,.8); padding:80px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand img{height:100px; width:auto; margin-bottom:18px; transition:transform .35s var(--ease); filter:drop-shadow(0 0 8px rgba(255,165,0,0.4)) brightness(1.2);}
.footer-brand img:hover{transform:scale(1.05);}
.footer-brand p{color:rgba(255,255,255,.55); font-size:14px; max-width:280px;}
.socials{display:flex; gap:10px; margin-top:16px;}
.socials a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:15px; transition:background .3s, transform .35s var(--ease);}
.socials a:hover{background:var(--amber); color:var(--ink); transform:translateY(-4px) rotate(8deg) scale(1.08);}
.footer-col h4{color:#fff; font-size:15px; margin-bottom:18px; font-family:var(--font-display);}
.footer-col ul li{margin-bottom:12px; font-size:14px;}
.footer-col ul li a{color:rgba(255,255,255,.6); transition:color .3s, transform .3s var(--ease); display:inline-block;}
.footer-col ul li a:hover{color:var(--gold); transform:translateX(5px);}
.footer-col .contact-list li{color:rgba(255,255,255,.6); transition:color .3s;}
.footer-col .contact-list li:hover{color:rgba(255,255,255,.9);}
.footer-bottom{padding:24px; text-align:center; font-size:13px; color:rgba(255,255,255,.4);}

.whatsapp-float{
  position:fixed; bottom:26px; right:26px; z-index:900; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.6); animation:floatBounce 3s ease-in-out infinite;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.whatsapp-float:hover{transform:scale(1.14); box-shadow:0 18px 36px -6px rgba(37,211,102,.75); animation-play-state:paused;}
@keyframes floatBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* -------------------- Responsive -------------------- */
@media (max-width: 1080px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .about-split{grid-template-columns:1fr; gap:80px 0;}
  .about-media{margin-bottom:20px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:repeat(2,1fr); row-gap:40px;}
}
@media (max-width: 1180px){
  .main-nav ul{gap:18px;}
  .main-nav a{font-size:13.5px;}
  .header-actions{gap:10px;}
  .phone-pill{font-size:12px;}
}
@media (max-width: 1024px){
  .main-nav{
    position:fixed; top:var(--header-h, 78px); left:0; right:0; bottom:0; background:#060e1e; padding:30px 24px;
    transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto;
    z-index:999;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:6px;}
  .main-nav a{display:block; padding:14px 6px; font-size:17px; border-bottom:1px solid rgba(255,255,255,0.1); color:#ffffff;}
  .main-nav.open li{opacity:0; animation:navLinkIn .45s var(--ease) forwards;}
  .main-nav.open li:nth-child(1){animation-delay:.05s;}
  .main-nav.open li:nth-child(2){animation-delay:.1s;}
  .main-nav.open li:nth-child(3){animation-delay:.15s;}
  .main-nav.open li:nth-child(4){animation-delay:.2s;}
  .main-nav.open li:nth-child(5){animation-delay:.25s;}
  .main-nav.open li:nth-child(6){animation-delay:.3s;}
  .main-nav.open li:nth-child(7){animation-delay:.35s;}
  @keyframes navLinkIn{from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);}}
  .nav-toggle{display:flex;}
  .phone-pill{display:none;}
  .hero-grid{grid-template-columns:1fr;}
  .hero{padding:calc(var(--header-h, 84px) + 60px) 0 80px; text-align:center;}
  .hero-copy p.lede{margin-left:auto; margin-right:auto;}
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center;}
  .panel-rig{margin-top:30px;}
}
@media (max-width: 600px){
  .logo img{height:105px;}
}
@media (max-width: 480px){
  .header-inner{padding:8px 16px; gap:10px;}
  .logo img{height:92px;}
  .header-actions{gap:8px;}
  .header-actions .btn-sm{padding:9px 14px; font-size:12px;}
  .nav-toggle{width:34px; height:34px; font-size:18px;}
}
@media (max-width: 360px){
  .logo img{height:80px;}
  .header-actions .btn-sm{padding:8px 10px; font-size:11px;}
}
@media (max-width: 760px){
  .stats-bar{grid-template-columns:repeat(2,1fr); gap:16px;}
  .stats-bar .stat-item:nth-child(3){grid-column:1 / -1;}
  .stats-bar .stat-item{padding:24px 16px;}
}
@media (max-width: 520px){
  .stats-bar{grid-template-columns:1fr; gap:14px;}
  .stats-bar .stat-item:nth-child(3){grid-column:auto;}
}
@media (max-width: 720px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  .section{padding:70px 0;}
  .form-row{grid-template-columns:1fr;}
  .gallery-grid{columns:2 160px;}
  .process-steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; text-align:left;}
  .checklist{grid-template-columns:1fr;}
  .about-media .img-float{width:52%; right:-14px; bottom:-28px;}
  .cta-banner{padding:50px 26px;}
}

/* =============================================================
   ENHANCED SOLAR POWER ANIMATIONS — Fan & AC
   ============================================================= */

/* Fan: orbiting spark keyframe */
@keyframes fanSparkOrbit{
  0%  { transform: rotate(0deg)   translate(0px, -30px) rotate(0deg); }
  100%{ transform: rotate(360deg) translate(0px, -30px) rotate(-360deg); }
}
/* Fan: hub center glow */
.fan-hub-glow{
  animation:fanHubGlow 1.6s ease-in-out infinite;
}
@keyframes fanHubGlow{
  0%,100%{fill:#FFF3C4; filter:drop-shadow(0 0 3px rgba(255,182,39,.6));}
  50%{fill:#FFE066; filter:drop-shadow(0 0 8px rgba(255,182,39,1)) drop-shadow(0 0 14px rgba(255,182,39,.7));}
}
/* Fan: ambient energy halo pulse */
.fan-energy-halo{
  animation:fanEnergyHaloPulse 3.2s ease-in-out infinite;
  transform-origin:35px 35px;
}
@keyframes fanEnergyHaloPulse{
  0%,100%{opacity:.6; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}
/* Fan: dashed orbit ring spins opposite */
.fan-orbit-ring{
  animation:fanOrbitSpin 3s linear infinite reverse;
  transform-origin:35px 35px;
}
@keyframes fanOrbitSpin{ to{ transform:rotate(360deg); } }

/* AC: 3rd wind wave */
.ac-wind3{
  animation:acWindPower 1.0s ease-in-out infinite .6s;
  filter:drop-shadow(0 0 4px rgba(21,183,158,.5));
}
/* AC: cool cloud bubbles drift down */
.ac-cool-cloud{
  position:absolute;
  bottom:-22px; left:6px; right:6px;
  height:26px; overflow:visible; pointer-events:none;
}
.ac-cool-cloud span{
  position:absolute; bottom:0;
  width:8px; height:8px; border-radius:50%;
  background:rgba(126,200,227,0.55);
  filter:blur(3px);
  animation:acCloudDrop 1.4s ease-out infinite;
}
.ac-cool-cloud span:nth-child(1){left:8%;  animation-delay:0s;}
.ac-cool-cloud span:nth-child(2){left:28%; animation-delay:.3s;  width:6px; height:6px;}
.ac-cool-cloud span:nth-child(3){left:55%; animation-delay:.6s;}
.ac-cool-cloud span:nth-child(4){left:78%; animation-delay:.9s;  width:5px; height:5px;}

@keyframes acCloudDrop{
  0%{transform:translateY(0) scale(1); opacity:.8;}
  100%{transform:translateY(20px) scale(1.5); opacity:0;}
}

/* Wire glow enhancement: when .power-fan and .power-bolt are present,
   make the wire-line gold-colored to match solar theme */
.power-fan .wire-line,
.power-bolt .wire-line{
  color:#FFB627;
  filter:drop-shadow(0 0 6px #FFB627) drop-shadow(0 0 12px rgba(255,182,39,.5));
  animation:wireFlow .35s linear infinite, wireBrightPulse 2.4s ease-in-out infinite;
}
@keyframes wireBrightPulse{
  0%,100%{opacity:.8;}
  50%{opacity:1; filter:drop-shadow(0 0 10px #FFB627) drop-shadow(0 0 22px rgba(255,182,39,.8));}
}

/* Reduce motion: disable new animations too */
@media (prefers-reduced-motion: reduce){
  .fan-energy-halo, .fan-orbit-ring, .fan-hub-glow,
  .fan-spark-el, .ac-cool-cloud span, .ac-wind3{
    animation:none !important;
  }
}

/* ============================
   TRUSTED SECTION HEADING ROW
   ============================ */
/* ============================
   TURNING LIGHT INTO POWER - 2 COLUMN LAYOUT
   ============================ */
.litp-section {
  overflow: visible;
  padding: 30px 0;
}

.litp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}

/* LEFT: info column */
.litp-info-col {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.litp-info-col .eyebrow {
  margin-bottom: 0.75rem;
}
.litp-info-col h2 {
  margin-bottom: 1rem;
}
.litp-info-col > p {
  margin-bottom: 2rem;
  color: var(--text-muted, #555);
}

/* Cards stacked vertically in left column */
.litp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.litp-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.4s var(--ease, cubic-bezier(.22,.68,0,1.2)), box-shadow 0.4s var(--ease, cubic-bezier(.22,.68,0,1.2));
  transform-style: preserve-3d;
}
.litp-card:hover {
  box-shadow: 0 20px 40px -14px rgba(11,30,61,.22);
  transform: translateY(-7px);
}
.litp-card .icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF3DC, #FFE3BE);
  border-radius: 10px;
  padding: 5px;
  transition: transform 0.45s var(--ease, cubic-bezier(.22,.68,0,1.2)), background 0.45s, box-shadow 0.45s;
  animation: litpIconFloat 3.2s ease-in-out infinite;
}
.litp-card:nth-child(2) .icon-wrap { animation-delay: 0.25s; }
.litp-card:nth-child(3) .icon-wrap { animation-delay: 0.5s; }
@keyframes litpIconFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.litp-card:hover .icon-wrap {
  transform: rotate(-8deg) scale(1.15);
  background: linear-gradient(135deg, var(--gold, #FFB300), var(--amber, #FF8F00));
  box-shadow: 0 12px 22px -8px rgba(255,122,26,.5);
  animation-play-state: paused;
}
.litp-card:hover .icon-wrap img {
  transform: scale(1.1) rotate(6deg);
}
.litp-card .icon-wrap img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: transform 0.45s var(--ease, cubic-bezier(.22,.68,0,1.2));
}
.litp-card-text h3 {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
}
.litp-card-text p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #666);
  line-height: 1.5;
}

/* Small animated bulb icon above heading */
.litp-mini-bulb {
  width: 64px !important;
  height: 80px !important;
  margin: 0 0 1.2rem 0 !important;
  display: block;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
}
.litp-mini-bulb svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* RIGHT: bulb column */
.litp-bulb-col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
}
.litp-bulb-wrap {
  position: relative;
  width: 340px;
  height: 676px; /* 130% of 520px */
  margin: auto 0;
}
.litp-bulb-wrap .bulb3d-float {
  position: relative;
  width: 100%;
  height: 100%;
  animation: b3Float 3.2s ease-in-out infinite;
}
.litp-bulb-wrap .bulb3d-svg {
  width: 100%;
  height: 130%;
  filter: drop-shadow(0 0 48px #FFD740bb) drop-shadow(0 0 90px #FF8F0080) drop-shadow(0 0 20px #FFFDE7aa);
  animation: b3GlowPulse 2.2s ease-in-out infinite alternate, b3Sway 4s ease-in-out infinite;
}

/* Glow rings inside new wrapper */
.litp-bulb-wrap .bulb3d-rings {
  position: absolute;
  left: 50%; top: 35%;
  transform: translate(-50%, -50%);
}
/* Scale rings up to match bigger bulb */
.litp-bulb-wrap .b3r1 { width: 160px; height: 160px; }
.litp-bulb-wrap .b3r2 { width: 220px; height: 220px; }
.litp-bulb-wrap .b3r3 { width: 290px; height: 290px; }

/* ── Tablet (601px – 900px) ── */
@media (max-width: 900px) {
  .litp-two-col {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
  }
  .litp-info-col {
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .litp-bulb-col {
    order: -1;
    min-height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .litp-bulb-wrap {
    width: 260px;
    height: 338px;
    margin: 0 auto;
  }
  .litp-bulb-wrap .b3r1 { width: 130px; height: 130px; }
  .litp-bulb-wrap .b3r2 { width: 178px; height: 178px; }
  .litp-bulb-wrap .b3r3 { width: 234px; height: 234px; }
  .litp-mini-bulb {
    display: block;
    margin: 0 auto 1.2rem auto !important;
  }
  .litp-cards {
    width: 100%;
    text-align: left;
  }
  .litp-card {
    text-align: left;
    padding: 0.65rem 0.9rem;
    gap: 0.7rem;
  }
  .litp-card .icon-wrap {
    width: 38px;
    height: 38px;
  }
  .litp-card .icon-wrap img {
    width: 24px;
    height: 24px;
  }
  .litp-card-text h3 { font-size: 0.9rem; }
  .litp-card-text p  { font-size: 0.8rem; }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
  .litp-two-col {
    gap: 1.5rem;
    justify-items: center;
  }
  .litp-info-col {
    width: 100%;
    text-align: center;
    align-items: center;
  }
  .litp-bulb-col {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .litp-bulb-wrap {
    width: 200px;
    height: 260px;
    margin: 0 auto;
  }
  .litp-bulb-wrap .b3r1 { width: 100px; height: 100px; }
  .litp-bulb-wrap .b3r2 { width: 138px; height: 138px; }
  .litp-bulb-wrap .b3r3 { width: 182px; height: 182px; }
  .litp-mini-bulb {
    display: block;
    margin: 0 auto 1rem auto !important;
  }
  .litp-cards {
    width: 100%;
  }
  .litp-card {
    padding: 0.6rem 0.85rem;
    gap: 0.65rem;
    text-align: left;
  }
  .litp-card .icon-wrap {
    width: 36px;
    height: 36px;
  }
  .litp-card .icon-wrap img {
    width: 22px;
    height: 22px;
  }
  .litp-card-text h3 { font-size: 0.88rem; }
  .litp-card-text p  { font-size: 0.78rem; }
}
/* Legacy selectors kept for safety (now unused) */
.trusted-head-row { display: none; }
.trusted-text-col { display: none; }
.bulb3d-outer     { display: none; }

.bulb3d-float {
  position: relative;
  width: 100%;
  height: 100%;
  animation: b3Float 3.2s ease-in-out infinite;
}

.bulb3d-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 22px #FFD74099) drop-shadow(0 0 40px #FF8F0060);
  animation: b3GlowPulse 2.2s ease-in-out infinite alternate, b3Sway 4s ease-in-out infinite;
}

/* Glow rings */
.bulb3d-rings { position: absolute; left: 50%; top: 35%; transform: translate(-50%, -50%); }
.b3r {
  position: absolute;
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  border: 2px solid #FFD740;
}
.b3r1 { width: 90px;  height: 90px;  animation: b3Ring 2.8s ease-out infinite 0s; }
.b3r2 { width: 125px; height: 125px; animation: b3Ring 2.8s ease-out infinite .7s; border-color: #FFB300; }
.b3r3 { width: 165px; height: 165px; animation: b3Ring 2.8s ease-out infinite 1.4s; border-color: #FF8F00; }

/* Glass and inner elements */
.bg3-fil  { animation: b3FilFlicker 1.4s ease-in-out infinite alternate; }
.bg3-shine { animation: b3Shimmer 3.5s ease-in-out infinite alternate; }
.bg3-glass { animation: b3GlassAnim 2s ease-in-out infinite alternate; }
.bg3-sp   { animation: b3Spark 2.2s ease-in-out infinite; }
.sp1 { animation-delay: 0s; }
.sp2 { animation-delay: .44s; }
.sp3 { animation-delay: .88s; }
.sp4 { animation-delay: 1.32s; }
.sp5 { animation-delay: 1.76s; }

/* ============================
   KEYFRAMES
   ============================ */
@keyframes b3Float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes b3Sway {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}
@keyframes b3GlowPulse {
  0%   { filter: drop-shadow(0 0 14px #FFD74070) drop-shadow(0 0 28px #FF8F0045); }
  100% { filter: drop-shadow(0 0 32px #FFD740cc) drop-shadow(0 0 60px #FF8F0099) drop-shadow(0 0 10px #FFFDE7aa); }
}
@keyframes b3Ring {
  0%        { opacity: .75; transform: translate(-50%,-50%) scale(.3); }
  80%, 100% { opacity: 0;   transform: translate(-50%,-50%) scale(1); }
}
@keyframes b3FilFlicker {
  0%   { opacity: .65; }
  60%  { opacity: 1;   }
  100% { opacity: .9;  }
}
@keyframes b3Shimmer {
  0%   { opacity: .45; }
  100% { opacity: .92; }
}
@keyframes b3GlassAnim {
  0%   { stroke-opacity: .8; }
  100% { stroke-opacity: 1;  }
}
@keyframes b3Spark {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* (bulb3d-outer responsive rule moved to litp-two-col layout above) */


/* ============================
   FORCE TRANSPARENT HEADER
   ============================ */
.site-header {
  background: rgba(6, 14, 30, 0.55) !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.site-header.scrolled {
  background: rgba(6, 14, 30, 0.85) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.site-header::before,
.site-header.scrolled::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =================== 3-SLIDE TESTIMONIALS =================== */
.testi3-wrapper {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 56px;
}
.testi3-viewport {
  overflow: hidden;
  border-radius: 18px;
}
.testi3-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.55s cubic-bezier(.16,.84,.44,1);
}
.testi3-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px;
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.testi3-card {
  background: #fff;
  border: 1.5px solid rgba(11,30,61,0.08);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 6px 28px -10px rgba(11,30,61,0.14);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow .3s, transform .3s;
}
.testi3-card:hover {
  box-shadow: 0 16px 48px -14px rgba(11,30,61,0.22);
  transform: translateY(-4px);
}
.testi3-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
}
.testi3-card .quote {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.testi3-card .testi-person {
  justify-content: flex-start;
}
/* Prev / Next arrows */
.testi3-prev, .testi3-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(11,30,61,.1);
}
.testi3-prev { left: 0; }
.testi3-next { right: 0; }
.testi3-prev:hover, .testi3-next:hover {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
/* Dots */
.testi3-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.testi3-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(11,30,61,0.15);
  padding: 0;
  cursor: pointer;
  transition: width .3s var(--ease), background .3s;
}
.testi3-dot.active {
  background: var(--amber);
  width: 28px;
  border-radius: 100px;
}
@media (max-width: 880px) {
  .testi3-group { grid-template-columns: repeat(2, 1fr); }
  .testi3-wrapper { padding: 0 44px; }
}
@media (max-width: 580px) {
  .testi3-group { grid-template-columns: 1fr; }
  .testi3-wrapper { padding: 0 36px; }
  .testi3-card { padding: 24px 20px; }
}
/* =================== END 3-SLIDE TESTIMONIALS =================== */

/* ================= PROJECTS SLIDER (Our Projects, on dark section) ================= */
.projects-section{padding-bottom:70px; scroll-margin-top:100px;}
.projects-slider-wrapper{position:relative; max-width:var(--container); margin:44px auto 0; padding:0 24px;}
.projects-slider-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:12px; scrollbar-width:none; -ms-overflow-style:none;
}
.projects-slider-track::-webkit-scrollbar{display:none;}
.project-slide{
  flex:0 0 min(400px,85vw); scroll-snap-align:start;
  border-radius:var(--radius-md); overflow:hidden; position:relative;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.45);
  display:flex; flex-direction:column; text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.project-slide:hover, .project-slide:focus-visible{
  transform:translateY(-6px); border-color:rgba(255,182,39,.5);
  box-shadow:0 28px 54px -18px rgba(0,0,0,.55);
}
.project-slide img{width:100%; height:270px; object-fit:cover; display:block; flex-shrink:0; transition:transform .5s var(--ease);}
.project-slide:hover img{transform:scale(1.06);}
.project-slide-caption{
  padding:16px 18px; font-family:var(--font-display); font-size:1rem;
  color:#fff; background:#0F2547;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex:1; min-height:66px;
}
.project-slide-title{flex:1;}
.project-slide-caption .card-link{flex-shrink:0; font-size:13px; white-space:nowrap;}
.projects-slider-nav{display:flex; gap:12px; justify-content:center; margin-top:28px;}
.projects-slider-nav button{
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:all .3s var(--ease);
}
.projects-slider-nav button:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}
@media(max-width:640px){
  .project-slide{flex:0 0 88vw;}
  .project-slide img{height:220px;}
  .project-slide-caption{flex-wrap:wrap;}
}