/* ============================================
   RESET & VARIABLES
============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --green-900:#04160e;
  --green-800:#052e16;
  --green-700:#047857;
  --green-600:#059669;
  --green-500:#10b981;
  --green-400:#34d399;
  --lime:#a3e635;
  --lime-bright:#bef264;
  --amber:#fbbf24;
  --amber-dark:#f59e0b;
  --orange:#fb923c;
  --ink:#08120d;
  --ink-2:#0f1c16;
  --slate:#64748b;
  --cream:#f5f9f4;
  --white:#ffffff;
  --border:rgba(15,23,42,0.08);
  --grad-primary:linear-gradient(135deg,#047857 0%,#10b981 50%,#a3e635 100%);
  --grad-sun:linear-gradient(135deg,#f59e0b 0%,#fbbf24 50%,#fde047 100%);
  --grad-dark:linear-gradient(135deg,#04160e 0%,#052e16 50%,#08120d 100%);
  --grad-aurora:linear-gradient(135deg,#10b981 0%,#a3e635 25%,#fbbf24 50%,#fb923c 75%,#10b981 100%);
  --shadow-soft:0 20px 60px -15px rgba(6,78,59,0.15);
  --shadow-hard:0 30px 80px -20px rgba(6,78,59,0.35);
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-smooth:cubic-bezier(0.65,0,0.35,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Sora',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;cursor:pointer}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

/* ============================================
   PRELOADER
============================================ */
.preloader{
  position:fixed;inset:0;
  background:var(--green-900);
  display:flex;align-items:center;justify-content:center;
  z-index:100000;
  transition:opacity .8s var(--ease),visibility .8s;
}
.preloader.done{opacity:0;visibility:hidden}
.loader{position:relative;width:120px;height:120px}
.loader-sun{
  position:absolute;inset:0;
  background:var(--grad-sun);border-radius:50%;
  animation:pulseSun 1.5s ease-in-out infinite;
  box-shadow:0 0 80px var(--amber),0 0 120px rgba(251,191,36,0.5);
}
.loader-ring{
  position:absolute;inset:-20px;
  border:3px solid transparent;
  border-top-color:var(--lime);
  border-right-color:var(--green-400);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
.loader-ring-2{
  position:absolute;inset:-35px;
  border:2px solid transparent;
  border-bottom-color:var(--amber);
  border-left-color:var(--orange);
  border-radius:50%;
  animation:spin 1.5s linear infinite reverse;
}
.loader-text{
  position:absolute;bottom:-70px;left:50%;transform:translateX(-50%);
  color:var(--lime);font-family:'Space Grotesk';font-weight:700;
  font-size:.9rem;letter-spacing:6px;white-space:nowrap;
  animation:blink 1.5s ease-in-out infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseSun{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.85);opacity:.7}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ============================================
   SCROLL PROGRESS
============================================ */
.scroll-progress{
  position:fixed;top:0;left:0;
  height:3px;width:0%;
  background:var(--grad-aurora);
  background-size:200% 100%;
  z-index:1001;
  animation:auroraShift 3s linear infinite;
  transition:width .1s linear;
}
@keyframes auroraShift{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

/* ============================================
   NAVBAR
============================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:20px 0;transition:all .5s var(--ease);
}
.nav.scrolled{
  padding:12px 0;
  background:rgba(245,249,244,0.85);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  box-shadow:0 8px 32px rgba(6,78,59,0.06);
}
.nav-wrap{
  max-width:1400px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:'Space Grotesk';font-weight:800;font-size:1.4rem;
  color:var(--white);transition:color .4s var(--ease);
}
.nav.scrolled .brand{color:var(--green-900)}
.brand-mark{
  width:46px;height:46px;border-radius:14px;
  background:var(--grad-sun);
  display:grid;place-items:center;
  color:var(--green-900);font-size:1.3rem;
  box-shadow:0 8px 24px rgba(251,191,36,0.4);
  position:relative;overflow:hidden;
  transition:transform .5s var(--ease);
}
.brand-mark::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:shine 3s infinite;
}
@keyframes shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(200%)}}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.05)}
.brand-text span{color:var(--amber)}

.nav-menu{display:flex;align-items:center;gap:8px}
.nav-menu a{
  padding:10px 18px;border-radius:50px;
  font-size:.92rem;font-weight:500;
  color:rgba(255,255,255,0.9);
  transition:all .3s var(--ease);
  position:relative;
}
.nav.scrolled .nav-menu a{color:var(--slate)}
.nav-menu a:hover{background:rgba(255,255,255,0.1);color:var(--white)}
.nav.scrolled .nav-menu a:hover{background:rgba(16,185,129,0.08);color:var(--green-700)}
.nav-menu a.nav-btn{
  background:var(--grad-sun);
  color:var(--green-900)!important;
  font-weight:700;padding:12px 26px;
  box-shadow:0 8px 24px rgba(251,191,36,0.35);
  margin-left:8px;
}
.nav-menu a.nav-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(251,191,36,0.5);
}
.burger{
  display:none;width:44px;height:44px;
  border-radius:12px;background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  position:relative;z-index:1002;
}
.nav.scrolled .burger{background:rgba(16,185,129,0.1)}
.burger span{
  display:block;width:22px;height:2px;
  background:var(--white);margin:5px auto;
  border-radius:2px;transition:all .4s var(--ease);
}
.nav.scrolled .burger span{background:var(--green-900)}
.burger.active span{background:var(--green-900)!important}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================
   HERO
============================================ */
.hero{
  position:relative;min-height:100vh;
  background:var(--grad-dark);
  overflow:hidden;
  display:flex;align-items:center;
  padding:140px 0 100px;
}
.hero-canvas{position:absolute;inset:0;z-index:1;opacity:.6}
.hero-orb{position:absolute;border-radius:50%;filter:blur(100px);z-index:2;pointer-events:none}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(251,191,36,0.5),transparent 70%);top:-250px;right:-150px;animation:orbFloat 12s ease-in-out infinite}
.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(16,185,129,0.4),transparent 70%);bottom:-200px;left:-150px;animation:orbFloat 15s ease-in-out infinite reverse}
.orb-3{width:300px;height:300px;background:radial-gradient(circle,rgba(163,230,53,0.35),transparent 70%);top:40%;left:35%;animation:orbFloat 10s ease-in-out infinite}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(40px,-40px) scale(1.1)}
  66%{transform:translate(-30px,30px) scale(.95)}
}

.hero-grid{
  position:absolute;inset:0;z-index:3;
  background-image:
    linear-gradient(rgba(163,230,53,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(163,230,53,0.06) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%);
}

.hero-inner{
  max-width:1400px;margin:0 auto;padding:0 32px;
  position:relative;z-index:10;
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;
  align-items:center;width:100%;
}

.hero-pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px 8px 8px;
  background:rgba(163,230,53,0.1);
  border:1px solid rgba(163,230,53,0.25);
  backdrop-filter:blur(10px);
  border-radius:50px;
  font-size:.82rem;font-weight:600;
  color:var(--lime);letter-spacing:.5px;
  margin-bottom:28px;
  animation:fadeUp .8s var(--ease) both;
}
.hero-pill .dot{
  width:24px;height:24px;border-radius:50%;
  background:var(--grad-sun);
  display:grid;place-items:center;
  font-size:.7rem;color:var(--green-900);
  animation:spin 4s linear infinite;
}

.hero h1{
  font-family:'Space Grotesk';
  font-size:clamp(2.4rem,5.5vw,4.4rem);
  font-weight:700;line-height:1.05;
  letter-spacing:-0.03em;
  color:var(--white);
  margin-bottom:24px;
  animation:fadeUp .8s var(--ease) .1s both;
}
.hero h1 .accent{
  background:var(--grad-sun);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;display:inline-block;
}
.hero h1 .accent::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;
  height:12px;background:rgba(251,191,36,0.15);
  z-index:-1;border-radius:4px;
}
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(163,230,53,0.6);
  font-style:italic;
}

.hero-lead{
  font-size:1.08rem;line-height:1.7;
  color:rgba(255,255,255,0.75);
  max-width:540px;margin-bottom:36px;
  animation:fadeUp .8s var(--ease) .2s both;
}
.hero-lead strong{color:var(--lime);font-weight:600}

.hero-actions{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:48px;
  animation:fadeUp .8s var(--ease) .3s both;
}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:50px;
  font-weight:700;font-size:.95rem;
  transition:all .4s var(--ease);
  position:relative;overflow:hidden;
}
.btn-primary{
  background:var(--grad-sun);color:var(--green-900);
  box-shadow:0 12px 32px rgba(251,191,36,0.35);
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,0.4) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform .6s;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(251,191,36,0.5);
}
.btn-ghost{
  background:rgba(255,255,255,0.05);
  color:var(--white);
  border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.12);
  border-color:var(--lime);
  transform:translateY(-3px);
}

.hero-stats{
  display:flex;gap:40px;
  animation:fadeUp .8s var(--ease) .4s both;
}
.stat .num{
  font-family:'Space Grotesk';
  font-size:2.2rem;font-weight:700;
  color:var(--white);line-height:1;
  display:flex;align-items:baseline;gap:2px;
}
.stat .num em{font-style:normal;font-size:1.1rem;color:var(--amber)}
.stat .lbl{
  font-size:.8rem;color:rgba(255,255,255,0.5);
  margin-top:8px;font-weight:500;
  text-transform:uppercase;letter-spacing:1px;
}
.stat-divider{width:1px;background:rgba(255,255,255,0.1);align-self:stretch}

/* Hero Visual 3D */
.hero-visual{
  position:relative;
  animation:fadeUp .8s var(--ease) .3s both;
  perspective:1200px;
}
.visual-card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:1/1.05;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(20px);
  padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 40px 100px -30px rgba(0,0,0,0.5);
  transform-style:preserve-3d;
  transition:transform .4s var(--ease-smooth);
}
.visual-card::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%,rgba(251,191,36,0.2),transparent 50%),
    radial-gradient(circle at 70% 80%,rgba(16,185,129,0.2),transparent 50%);
  z-index:0;
}
.sun-visual{
  position:absolute;top:40px;right:40px;
  width:120px;height:120px;border-radius:50%;
  background:var(--grad-sun);
  box-shadow:0 0 80px var(--amber),0 0 120px rgba(251,191,36,0.5);
  z-index:1;
  animation:pulseSun 3s ease-in-out infinite;
}
.sun-visual::before{
  content:'';position:absolute;inset:-20px;border-radius:50%;
  border:1px dashed rgba(251,191,36,0.4);
  animation:spin 20s linear infinite;
}
.sun-rays{
  position:absolute;inset:-60px;
  animation:spin 30s linear infinite;
}
.sun-rays span{
  position:absolute;top:50%;left:50%;
  width:100%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,0.5),transparent);
  transform-origin:left center;
}
.panel-grid{
  position:absolute;bottom:0;left:0;right:0;height:55%;
  z-index:1;
  background:
    repeating-linear-gradient(90deg,rgba(16,185,129,0.3) 0 40px,transparent 40px 44px),
    repeating-linear-gradient(0deg,rgba(16,185,129,0.3) 0 40px,transparent 40px 44px);
  transform:perspective(500px) rotateX(50deg);
  transform-origin:bottom;
  mask-image:linear-gradient(to top,black 40%,transparent);
  -webkit-mask-image:linear-gradient(to top,black 40%,transparent);
}
.visual-content{position:relative;z-index:2;margin-top:auto}
.visual-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;background:rgba(163,230,53,0.15);
  border:1px solid rgba(163,230,53,0.3);
  border-radius:50px;font-size:.75rem;font-weight:600;
  color:var(--lime);margin-bottom:16px;
}
.visual-title{
  font-family:'Space Grotesk';
  font-size:1.4rem;font-weight:700;
  color:var(--white);line-height:1.2;
  margin-bottom:8px;
}
.visual-sub{font-size:.85rem;color:rgba(255,255,255,0.6)}

.float-chip{
  position:absolute;
  padding:14px 20px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  border-radius:16px;
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.3);
  display:flex;align-items:center;gap:12px;
  z-index:20;
  animation:chipFloat 5s ease-in-out infinite;
}
.chip-1{top:15%;left:-30px;animation-delay:0s}
.chip-2{bottom:20%;right:-30px;animation-delay:2.5s}
.chip-3{top:45%;right:-50px;animation-delay:1.2s;transform:scale(.9)}
@keyframes chipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}
.chip-3{animation-name:chipFloat3}
@keyframes chipFloat3{
  0%,100%{transform:translateY(0) scale(.9)}
  50%{transform:translateY(-15px) scale(.9)}
}
.chip-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:1.1rem;
}
.chip-icon.green{background:rgba(16,185,129,0.15);color:var(--green-700)}
.chip-icon.amber{background:rgba(251,191,36,0.2);color:var(--amber-dark)}
.chip-icon.blue{background:rgba(59,130,246,0.15);color:#3b82f6}
.chip-title{font-size:.88rem;font-weight:700;color:var(--ink);font-family:'Space Grotesk'}
.chip-sub{font-size:.72rem;color:var(--slate);font-weight:500}

.scroll-hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,0.5);font-size:.72rem;
  letter-spacing:2px;text-transform:uppercase;
  animation:fadeUp 1s var(--ease) .8s both;
}
.scroll-mouse{
  width:26px;height:44px;border:2px solid rgba(255,255,255,0.3);
  border-radius:14px;position:relative;
}
.scroll-mouse::after{
  content:'';position:absolute;top:8px;left:50%;
  transform:translateX(-50%);
  width:4px;height:8px;border-radius:2px;
  background:var(--lime);
  animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%,100%{transform:translate(-50%,0);opacity:1}
  50%{transform:translate(-50%,14px);opacity:.3}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================
   MARQUEE
============================================ */
.marquee{
  background:var(--ink);
  padding:24px 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative;
}
.marquee-track{
  display:flex;gap:60px;
  animation:scrollX 40s linear infinite;
  white-space:nowrap;
}
.marquee-item{
  display:flex;align-items:center;gap:14px;
  font-family:'Space Grotesk';
  font-size:1rem;font-weight:600;
  color:rgba(255,255,255,0.6);
  letter-spacing:.5px;
  flex-shrink:0;
}
.marquee-item i{color:var(--lime);font-size:1.1rem}
.marquee-item.highlight{color:var(--amber)}
@keyframes scrollX{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================
   SECTION BASE
============================================ */
.sec{padding:120px 0;position:relative}
.sec-inner{max-width:1400px;margin:0 auto;padding:0 32px}
.sec-head{
  max-width:760px;margin:0 auto 72px;text-align:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk';
  font-size:.8rem;font-weight:700;
  color:var(--green-700);
  text-transform:uppercase;letter-spacing:2.5px;
  margin-bottom:20px;
}
.eyebrow::before,.eyebrow::after{
  content:'';width:24px;height:1.5px;background:var(--green-600);
}
.sec-title{
  font-family:'Space Grotesk';
  font-size:clamp(2rem,4.5vw,3.4rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:20px;
}
.sec-title .grad{
  background:var(--grad-primary);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sec-desc{
  font-size:1.05rem;line-height:1.75;
  color:var(--slate);
}

/* ============================================
   ABOUT
============================================ */
.about{background:var(--cream);overflow:hidden}
.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;
}
.about-visual{position:relative;aspect-ratio:1/1.1}
.about-frame{
  position:absolute;inset:0;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--grad-dark);
  box-shadow:var(--shadow-hard);
}
.about-frame::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%,rgba(251,191,36,0.35),transparent 50%),
    radial-gradient(circle at 70% 70%,rgba(16,185,129,0.35),transparent 50%);
}
.about-pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(163,230,53,0.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(163,230,53,0.15) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.5;
}
.about-sun{
  position:absolute;top:15%;left:50%;
  transform:translateX(-50%);
  width:180px;height:180px;border-radius:50%;
  background:var(--grad-sun);
  box-shadow:0 0 100px var(--amber),0 0 150px rgba(251,191,36,0.6);
  animation:pulseSun 4s ease-in-out infinite;
}
.about-panels{
  position:absolute;bottom:0;left:10%;right:10%;height:50%;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  transform:perspective(600px) rotateX(45deg);
  transform-origin:bottom;
}
.about-panels span{
  background:linear-gradient(180deg,rgba(16,185,129,0.4),rgba(4,120,87,0.6));
  border:1px solid rgba(163,230,53,0.3);
  border-radius:6px;
  animation:panelPulse 3s ease-in-out infinite;
}
.about-panels span:nth-child(2){animation-delay:.3s}
.about-panels span:nth-child(3){animation-delay:.6s}
.about-panels span:nth-child(4){animation-delay:.9s}
.about-panels span:nth-child(5){animation-delay:1.2s}
.about-panels span:nth-child(6){animation-delay:1.5s}
@keyframes panelPulse{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
.about-float{
  position:absolute;
  background:var(--white);
  border-radius:20px;
  padding:20px 24px;
  box-shadow:0 30px 60px -15px rgba(6,78,59,0.3);
  display:flex;align-items:center;gap:16px;
  z-index:10;
}
.about-float.f1{top:20px;right:-24px;animation:chipFloat 5s ease-in-out infinite}
.about-float.f2{bottom:40px;left:-24px;animation:chipFloat 6s ease-in-out infinite;animation-delay:2s}
.about-float .ico{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;font-size:1.3rem;
}
.about-float .ico.a{background:var(--grad-sun);color:var(--green-900)}
.about-float .ico.b{background:var(--grad-primary);color:var(--white)}
.about-float .t1{font-family:'Space Grotesk';font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1}
.about-float .t2{font-size:.78rem;color:var(--slate);font-weight:600;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

.about-content h2{
  font-family:'Space Grotesk';
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);margin-bottom:22px;
}
.about-content h2 .grad{
  background:var(--grad-primary);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.about-content p{
  color:var(--slate);line-height:1.85;
  margin-bottom:20px;font-size:1rem;
}
.about-points{
  display:grid;grid-template-columns:1fr 1fr;
  gap:16px;margin-top:36px;
}
.point{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px;
  background:var(--white);
  border-radius:16px;
  border:1px solid var(--border);
  transition:all .4s var(--ease);
}
.point:hover{
  transform:translateY(-4px);
  border-color:var(--green-400);
  box-shadow:var(--shadow-soft);
}
.point-ico{
  width:40px;height:40px;border-radius:12px;
  background:rgba(16,185,129,0.1);
  color:var(--green-700);
  display:grid;place-items:center;
  font-size:1rem;flex-shrink:0;
  transition:all .4s var(--ease);
}
.point:hover .point-ico{
  background:var(--grad-primary);color:var(--white);
}
.point h4{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:2px}
.point p{font-size:.82rem;color:var(--slate);margin:0;line-height:1.5}

/* ============================================
   SERVICES
============================================ */
.services{background:var(--white);position:relative;overflow:hidden}
.services::before{
  content:'';position:absolute;
  top:-200px;right:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(16,185,129,0.08),transparent 70%);
  border-radius:50%;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;position:relative;z-index:1;
}
.svc{
  background:var(--cream);
  border:1px solid transparent;
  border-radius:var(--r-lg);
  padding:36px 32px;
  position:relative;overflow:hidden;
  transition:all .6s var(--ease-smooth);
  will-change:transform;
}
.svc::before{
  content:'';position:absolute;
  top:0;left:0;width:100%;height:3px;
  background:var(--grad-primary);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{
  background:var(--white);
  border-color:var(--border);
  transform:translateY(-10px);
  box-shadow:var(--shadow-soft);
}
.svc-glow{
  position:absolute;
  width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,0.25),transparent 70%);
  pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  transform:translate(-50%,-50%);
  z-index:0;
}
.svc:hover .svc-glow{opacity:1}
.svc-num{
  position:absolute;top:24px;right:28px;
  font-family:'Space Grotesk';
  font-size:3.5rem;font-weight:700;
  color:rgba(16,185,129,0.08);
  line-height:1;
  transition:all .6s var(--ease);
  z-index:1;
}
.svc:hover .svc-num{color:rgba(251,191,36,0.15);transform:scale(1.1) rotate(-5deg)}
.svc-ico{
  width:68px;height:68px;border-radius:20px;
  background:var(--white);
  border:1px solid var(--border);
  display:grid;place-items:center;
  font-size:1.6rem;color:var(--green-700);
  margin-bottom:24px;
  transition:all .6s var(--ease);
  position:relative;z-index:1;
}
.svc:hover .svc-ico{
  background:var(--grad-primary);
  color:var(--white);
  transform:rotate(-8deg) scale(1.1);
  border-color:transparent;
  box-shadow:0 15px 30px -10px rgba(16,185,129,0.5);
}
.svc h3{
  font-family:'Space Grotesk';
  font-size:1.25rem;font-weight:700;
  color:var(--ink);margin-bottom:12px;
  line-height:1.3;position:relative;z-index:1;
}
.svc p{
  font-size:.92rem;color:var(--slate);
  line-height:1.7;margin-bottom:24px;
  position:relative;z-index:1;
}
.svc-more{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.88rem;font-weight:700;
  color:var(--green-700);
  transition:gap .3s var(--ease);
  position:relative;z-index:1;
}
.svc:hover .svc-more{gap:14px;color:var(--amber-dark)}
.svc-more i{transition:transform .3s var(--ease)}
.svc:hover .svc-more i{transform:translateX(4px)}

/* ============================================
   SUBSIDY
============================================ */
.subsidy{
  background:var(--grad-dark);
  position:relative;overflow:hidden;
  color:var(--white);
}
.subsidy::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(251,191,36,0.15),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(16,185,129,0.2),transparent 40%);
}
.subsidy-grid{
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:80px;align-items:center;
  position:relative;z-index:1;
}
.subsidy-content .eyebrow{color:var(--lime)}
.subsidy-content .eyebrow::before,
.subsidy-content .eyebrow::after{background:var(--lime)}
.subsidy-content h2{
  font-family:'Space Grotesk';
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--white);margin-bottom:22px;
}
.subsidy-content h2 .grad{
  background:var(--grad-sun);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.subsidy-content p{
  color:rgba(255,255,255,0.75);
  line-height:1.85;margin-bottom:32px;
  font-size:1.02rem;
}
.subsidy-list{display:grid;gap:14px;margin-bottom:36px}
.subsidy-list li{
  display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,0.9);
  font-size:.98rem;
}
.subsidy-list li i{
  width:26px;height:26px;border-radius:50%;
  background:rgba(163,230,53,0.15);
  color:var(--lime);
  display:grid;place-items:center;
  font-size:.7rem;flex-shrink:0;
}

.subsidy-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(24px);
  border-radius:var(--r-xl);
  padding:44px 40px;
  position:relative;overflow:hidden;
}
.subsidy-card::before{
  content:'';position:absolute;
  top:-50%;right:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg,transparent,rgba(251,191,36,0.1),transparent 30%);
  animation:spin 15s linear infinite;
}
.subsidy-card-inner{position:relative;z-index:1}
.subsidy-label{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(251,191,36,0.15);
  border:1px solid rgba(251,191,36,0.3);
  border-radius:50px;
  font-size:.72rem;font-weight:700;
  color:var(--amber);letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:20px;
}
.subsidy-amount{
  font-family:'Space Grotesk';
  font-size:4rem;font-weight:700;
  line-height:1;letter-spacing:-0.03em;
  background:var(--grad-sun);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.subsidy-sub{
  color:rgba(255,255,255,0.6);
  font-size:.9rem;margin-bottom:32px;
}
.subsidy-tiers{display:grid;gap:12px;margin-bottom:32px}
.tier{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,0.06);
  transition:all .3s var(--ease);
}
.tier:hover{
  background:rgba(163,230,53,0.06);
  border-color:rgba(163,230,53,0.2);
  transform:translateX(4px);
}
.tier span{color:rgba(255,255,255,0.7)}
.tier strong{color:var(--lime);font-weight:700}

/* ============================================
   PROCESS
============================================ */
.process{background:var(--cream);position:relative}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;position:relative;
}
.process-grid::before{
  content:'';position:absolute;
  top:60px;left:10%;right:10%;height:2px;
  background:repeating-linear-gradient(90deg,var(--green-400) 0 8px,transparent 8px 16px);
  z-index:0;
}
.step{
  position:relative;z-index:1;
  text-align:center;
  padding:0 8px;
}
.step-circle{
  width:120px;height:120px;
  margin:0 auto 24px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--green-400);
  display:grid;place-items:center;
  position:relative;
  transition:all .6s var(--ease);
  box-shadow:0 20px 40px -15px rgba(16,185,129,0.2);
}
.step-circle::before{
  content:'';position:absolute;inset:-10px;
  border-radius:50%;
  border:1px dashed rgba(16,185,129,0.3);
  transition:all .6s var(--ease);
}
.step:hover .step-circle{
  background:var(--grad-primary);
  border-color:transparent;
  transform:translateY(-10px) scale(1.08);
  box-shadow:0 30px 60px -15px rgba(16,185,129,0.5);
}
.step:hover .step-circle::before{transform:rotate(180deg);inset:-15px}
.step-num{
  font-family:'Space Grotesk';
  font-size:1.8rem;font-weight:700;
  color:var(--green-700);
  transition:color .6s var(--ease);
}
.step:hover .step-num{color:var(--white)}
.step h3{
  font-family:'Space Grotesk';
  font-size:1.1rem;font-weight:700;
  color:var(--ink);margin-bottom:10px;
}
.step p{font-size:.88rem;color:var(--slate);line-height:1.7}

/* ============================================
   WHY CHOOSE US
============================================ */
.why{background:var(--white);position:relative;overflow:hidden}
.why-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}
.why-card{
  background:var(--cream);
  border-radius:var(--r-lg);
  padding:36px 28px;
  text-align:center;
  transition:all .6s var(--ease-smooth);
  border:1px solid transparent;
  position:relative;overflow:hidden;
}
.why-card::after{
  content:'';position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:0;height:4px;
  background:var(--grad-sun);
  border-radius:4px;
  transition:width .6s var(--ease);
}
.why-card:hover::after{width:60%}
.why-card:hover{
  background:var(--white);
  border-color:var(--border);
  transform:translateY(-10px);
  box-shadow:var(--shadow-soft);
}
.why-ico{
  width:80px;height:80px;border-radius:24px;
  background:var(--grad-primary);
  color:var(--white);
  display:grid;place-items:center;
  font-size:1.8rem;
  margin:0 auto 24px;
  transition:all .6s var(--ease);
  box-shadow:0 15px 30px -10px rgba(16,185,129,0.4);
}
.why-card:hover .why-ico{
  background:var(--grad-sun);
  color:var(--green-900);
  transform:rotate(-8deg) scale(1.1);
  box-shadow:0 20px 40px -10px rgba(251,191,36,0.5);
}
.why-card h3{
  font-family:'Space Grotesk';
  font-size:1.15rem;font-weight:700;
  color:var(--ink);margin-bottom:12px;
}
.why-card p{
  font-size:.9rem;color:var(--slate);
  line-height:1.7;
}

/* ============================================
   TESTIMONIALS
============================================ */
.testi{background:var(--cream);position:relative;overflow:hidden}
.testi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}
.testi-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:36px 32px;
  position:relative;
  transition:all .6s var(--ease-smooth);
  border:1px solid var(--border);
}
.testi-card:hover{
  transform:translateY(-10px);
  box-shadow:var(--shadow-soft);
  border-color:var(--green-400);
}
.testi-quote{
  font-size:3rem;line-height:1;
  color:var(--green-400);
  font-family:Georgia,serif;
  margin-bottom:16px;
  opacity:.5;
}
.testi-card p{
  color:var(--slate);
  line-height:1.8;
  font-size:.95rem;
  margin-bottom:28px;
}
.testi-user{
  display:flex;align-items:center;gap:14px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.testi-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--grad-primary);
  display:grid;place-items:center;
  color:var(--white);font-weight:700;
  font-family:'Space Grotesk';font-size:1.1rem;
}
.testi-user h4{font-size:.95rem;font-weight:700;color:var(--ink)}
.testi-user span{font-size:.8rem;color:var(--slate)}
.testi-stars{
  color:var(--amber);font-size:.85rem;
  margin-bottom:8px;letter-spacing:2px;
}

/* ============================================
   FAQ
============================================ */
.faq{background:var(--white);position:relative}
.faq-wrap{max-width:860px;margin:0 auto}
.faq-item{
  background:var(--cream);
  border-radius:var(--r);
  margin-bottom:16px;
  overflow:hidden;
  transition:all .5s var(--ease);
  border:1px solid transparent;
}
.faq-item.open{
  background:var(--white);
  border-color:var(--green-400);
  box-shadow:var(--shadow-soft);
}
.faq-q{
  padding:24px 28px;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  font-family:'Space Grotesk';
  font-weight:700;font-size:1.05rem;
  color:var(--ink);
  width:100%;
  text-align:left;
  transition:color .3s;
}
.faq-item.open .faq-q{color:var(--green-700)}
.faq-icon{
  width:36px;height:36px;border-radius:50%;
  background:rgba(16,185,129,0.1);
  color:var(--green-700);
  display:grid;place-items:center;
  flex-shrink:0;
  transition:all .5s var(--ease);
  font-size:.9rem;
}
.faq-item.open .faq-icon{
  background:var(--grad-primary);
  color:var(--white);
  transform:rotate(180deg);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease), padding .4s;
  padding:0 28px;
}
.faq-item.open .faq-a{
  max-height:300px;
  padding:0 28px 28px;
}
.faq-a p{
  color:var(--slate);
  line-height:1.8;
  font-size:.95rem;
}

/* ============================================
   CTA
============================================ */
.cta{background:var(--cream);padding:100px 0}
.cta-box{
  background:var(--grad-dark);
  border-radius:var(--r-xl);
  padding:80px 60px;
  position:relative;overflow:hidden;
  text-align:center;
}
.cta-box::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(251,191,36,0.2),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(163,230,53,0.15),transparent 40%);
}
.cta-box::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(163,230,53,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(163,230,53,0.05) 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(circle,black 40%,transparent 80%);
  -webkit-mask-image:radial-gradient(circle,black 40%,transparent 80%);
}
.cta-content{position:relative;z-index:1}
.cta-box h2{
  font-family:'Space Grotesk';
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--white);margin-bottom:20px;
}
.cta-box h2 .grad{
  background:var(--grad-sun);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cta-box p{
  color:rgba(255,255,255,0.7);
  font-size:1.05rem;line-height:1.75;
  max-width:560px;margin:0 auto 40px;
}
.cta-actions{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}

/* ============================================
   FOOTER
============================================ */
.foot{
  background:var(--ink);
  color:rgba(255,255,255,0.6);
  padding:80px 0 0;
  position:relative;overflow:hidden;
}
.foot::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green-500),transparent);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:56px;padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.foot-brand .brand{color:var(--white);margin-bottom:20px}
.foot-brand p{
  font-size:.92rem;line-height:1.8;
  margin-bottom:24px;max-width:340px;
}
.foot-social{display:flex;gap:10px}
.foot-social a{
  width:42px;height:42px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  display:grid;place-items:center;
  color:var(--white);
  transition:all .4s var(--ease);
}
.foot-social a:hover{
  background:var(--grad-sun);
  color:var(--green-900);
  border-color:transparent;
  transform:translateY(-4px);
}
.foot-col h4{
  font-family:'Space Grotesk';
  color:var(--white);font-size:1rem;
  font-weight:700;margin-bottom:24px;
}
.foot-col ul{display:grid;gap:14px}
.foot-col a{
  font-size:.9rem;
  color:rgba(255,255,255,0.6);
  display:inline-flex;align-items:center;gap:8px;
  transition:all .3s var(--ease);
}
.foot-col a:hover{color:var(--lime);gap:12px}
.foot-col a i{font-size:.7rem;color:var(--green-500)}
.foot-contact li{
  display:flex;gap:14px;align-items:flex-start;
  margin-bottom:18px;font-size:.9rem;
}
.foot-contact i{
  color:var(--lime);margin-top:3px;
  font-size:1rem;flex-shrink:0;
}
.foot-contact span{line-height:1.6}
.foot-bottom{
  padding:28px 0;text-align:center;
  font-size:.85rem;
  color:rgba(255,255,255,0.4);
}
.foot-bottom .heart{color:var(--amber);animation:pulseSun 2s infinite}

/* ============================================
   FLOATING
============================================ */
.wa-float{
  position:fixed;bottom:28px;left:28px;
  width:60px;height:60px;border-radius:50%;
  background:#25d366;
  display:grid;place-items:center;
  color:var(--white);font-size:1.7rem;
  z-index:999;
  box-shadow:0 15px 40px rgba(37,211,102,0.4);
  transition:all .4s var(--ease);
  animation:waPulse 2.5s infinite;
}
.wa-float:hover{transform:scale(1.1) rotate(8deg)}
@keyframes waPulse{
  0%,100%{box-shadow:0 15px 40px rgba(37,211,102,0.4)}
  50%{box-shadow:0 15px 50px rgba(37,211,102,0.7)}
}
.to-top{
  position:fixed;bottom:28px;right:28px;
  width:52px;height:52px;border-radius:50%;
  background:var(--grad-sun);
  color:var(--green-900);
  display:grid;place-items:center;
  font-size:1.1rem;
  z-index:999;
  opacity:0;visibility:hidden;
  transition:all .5s var(--ease);
  box-shadow:0 15px 40px rgba(251,191,36,0.4);
}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{transform:translateY(-5px) scale(1.05)}

/* ============================================
   SMOOTH REVEAL ANIMATIONS
============================================ */
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-80px);transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(80px);transition:opacity 1.2s var(--ease), transform 1.2s var(--ease)}
.reveal-right.in{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.85) translateY(30px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.reveal-scale.in{opacity:1;transform:scale(1) translateY(0)}
.reveal-blur{opacity:0;filter:blur(20px);transform:translateY(40px);transition:opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease)}
.reveal-blur.in{opacity:1;filter:blur(0);transform:translateY(0)}

/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:1100px){
  .hero-inner,.about-grid,.subsidy-grid{grid-template-columns:1fr;gap:60px}
  .hero-visual{max-width:520px;margin:0 auto}
  .about-visual{max-width:520px;margin:0 auto;width:100%}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .nav-menu a{padding:8px 14px;font-size:.88rem}
}
@media(max-width:820px){
  .sec{padding:80px 0}
  .hero{padding:120px 0 80px}
  .nav-menu{
    position:fixed;top:0;right:-100%;
    width:82%;max-width:360px;height:100vh;
    background:var(--white);
    flex-direction:column;
    justify-content:center;align-items:stretch;
    gap:8px;padding:40px 32px;
    box-shadow:-20px 0 60px rgba(0,0,0,0.15);
    transition:right .5s var(--ease);
  }
  .nav-menu.open{right:0}
  .nav-menu a{
    color:var(--ink)!important;
    padding:16px 20px;
    border-radius:14px;
    font-size:1rem;
    text-align:left;
  }
  .nav-menu a:hover{background:rgba(16,185,129,0.08);color:var(--green-700)!important}
  .nav-menu a.nav-btn{
    margin-left:0;margin-top:12px;
    text-align:center;justify-content:center;
    display:flex;
  }
  .burger{display:grid;place-items:center}
  .about-points{grid-template-columns:1fr}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .stat-divider{display:none}
  .stat .num{font-size:1.7rem}
  .float-chip,.about-float{display:none}
  .cta-box{padding:60px 28px}
  .foot-grid{grid-template-columns:1fr}
  .foot-brand p{max-width:100%}
  .subsidy-card{padding:32px 24px}
  .subsidy-amount{font-size:3rem}
}
@media(max-width:520px){
  .hero h1{font-size:2rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .process-grid{grid-template-columns:1fr}
  .step-circle{width:100px;height:100px}
  .sec-inner{padding:0 20px}
  .nav-wrap{padding:0 20px}
  .cta-actions{flex-direction:column}
  .wa-float{width:52px;height:52px;font-size:1.4rem;bottom:20px;left:20px}
  .to-top{width:46px;height:46px;bottom:20px;right:20px}
  .why-ico{width:70px;height:70px;font-size:1.5rem}
}

/* Navbar: dark green + teal + yellow */
#nav,
#nav.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: linear-gradient(
        110deg,
        #073b2b 0%,
        #075844 55%,
        #123c4a 100%
    ) !important;

    border-bottom: 2px solid #facc15;
    box-shadow: 0 8px 28px rgba(4, 42, 32, 0.22);
}

/* Brand */
#nav .brand-text {
    color: #ffffff !important;
}

#nav .brand-text span {
    color: #ffda35 !important;
}

#nav .brand-mark {
    background: linear-gradient(135deg, #ffad08, #ffe34a);
    color: #073b2b;
}

/* Navigation links */
#nav .nav-menu > a:not(.nav-btn) {
    color: #ffffff !important;
    transition: color 0.2s ease;
}

#nav .nav-menu > a:not(.nav-btn):hover,
#nav .nav-menu > a:not(.nav-btn).active,
#nav .nav-menu > a[aria-current="page"]:not(.nav-btn) {
    color: #ffda35 !important;
}

/* Get Quote button */
#nav .nav-btn {
    background: linear-gradient(135deg, #ffb300, #ffe345) !important;
    color: #082e23 !important;
    border: 1px solid #ffe878;
    box-shadow: 0 4px 16px rgba(250, 204, 21, 0.25);
}

#nav .nav-btn:hover {
    background: #ffe45c !important;
    color: #082e23 !important;
}

/* Mobile menu */
#nav .burger span {
    background: #ffda35 !important;
}

#nav .nav-menu.open {
    background: #074534 !important;
    border-bottom: 1px solid rgba(250, 204, 21, 0.4);
}

/* Keyboard focus */
#nav a:focus-visible,
#nav button:focus-visible {
    outline: 2px solid #ffda35;
    outline-offset: 5px;
}


    
/* ==========================================
   INTERACTIVE SOLAR DEMO
========================================== */

#solar-demo {
    --sd-green: #087f5b;
    --sd-dark: #083e32;
    --sd-yellow: #ffd43b;
    --sd-muted: #647b73;
    --sd-border: #dce9e2;

    position: relative;
    padding: 100px 24px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 15%,
            rgba(255, 212, 59, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 95% 85%,
            rgba(16, 185, 129, 0.1),
            transparent 35%
        ),
        #f4f9f5;
    color: var(--sd-dark);
    isolation: isolate;
    scroll-margin-top: 110px;
}

#solar-demo *,
#solar-demo *::before,
#solar-demo *::after {
    box-sizing: border-box;
}

#solar-demo button,
#solar-demo select,
#solar-demo input {
    font: inherit;
}

#solar-demo button {
    cursor: pointer;
}

#solar-demo button:focus-visible,
#solar-demo select:focus-visible,
#solar-demo input:focus-visible {
    outline: 3px solid #087f5b;
    outline-offset: 4px;
}

#solar-demo button:disabled,
#solar-demo input:disabled,
#solar-demo select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#solar-demo [hidden] {
    display: none !important;
}

/* CONTAINER & HEADING */

#solar-demo .solar-demo__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

#solar-demo .solar-demo__heading {
    max-width: 740px;
    margin: 0 auto 44px;
    text-align: center;
}

#solar-demo .solar-demo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid #dce9be;
    border-radius: 100px;
    background: #f2f8de;
    color: #38642c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

#solar-demo .solar-demo__eyebrow i {
    color: #986800;
}

#solar-demo .solar-demo__heading h2 {
    margin: 20px 0 16px;
    color: var(--sd-dark);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.5px;
}

#solar-demo .solar-demo__heading h2 span {
    color: var(--sd-green);
}

#solar-demo .solar-demo__heading p {
    margin: 0;
    color: var(--sd-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* MAIN LAYOUT */

#solar-demo .solar-demo__layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#solar-demo .solar-demo__controls,
#solar-demo .solar-demo__visual {
    min-width: 0;
}

/* CONTROL PANEL */

#solar-demo .solar-demo__controls {
    padding: 24px;
    border: 1px solid var(--sd-border);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 12px 40px rgba(8, 62, 50, 0.05);
}

#solar-demo .solar-demo__control {
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid #edf2ee;
}

#solar-demo .solar-demo__control > label,
#solar-demo .solar-demo__control > span,
#solar-demo .solar-demo__label-row label {
    display: block;
    color: var(--sd-dark);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

#solar-demo .solar-demo__control > small {
    display: block;
    margin-top: 9px;
    color: var(--sd-muted);
    font-size: 11px;
    line-height: 1.6;
}

#solar-demo .solar-demo__control select {
    display: block;
    width: 100%;
    min-height: 46px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--sd-border);
    border-radius: 11px;
    background: #f7faf8;
    color: var(--sd-dark);
    font-size: 11px;
    cursor: pointer;
}

#solar-demo .solar-demo__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

#solar-demo .solar-demo__label-row output {
    padding: 4px 9px;
    border-radius: 7px;
    background: #e7f6ed;
    color: #08704d;
    font-size: 12px;
    font-weight: 800;
}

/* DAY / NIGHT BUTTONS */

#solar-demo .solar-demo__switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
    padding: 5px;
    border-radius: 13px;
    background: #f0f5f2;
}

#solar-demo .solar-demo__switch button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #5e746c;
    font-size: 12px;
    font-weight: 700;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

#solar-demo .solar-demo__switch button.is-active {
    background: var(--sd-yellow);
    color: #163e2c;
    box-shadow: 0 3px 10px rgba(197, 156, 16, 0.16);
}

#solar-demo [data-solar-time="night"].is-active {
    background: #203c61;
    color: #ffffff;
}

/* RANGE SLIDERS */

#solar-demo input[type="range"] {
    display: block;
    width: 100%;
    height: 8px;
    margin: 8px 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    appearance: none;
    -webkit-appearance: none;
    background: #e0ece4;
    accent-color: var(--sd-green);
    cursor: pointer;
}

#solar-demo input[type="range"]::-webkit-slider-thumb {
    width: 21px;
    height: 21px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--sd-green);
    box-shadow: 0 0 0 1px #b8d4c4, 0 3px 8px #0b493326;
}

#solar-demo input[type="range"]::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--sd-green);
    box-shadow: 0 0 0 1px #b8d4c4;
}

#solar-demo .solar-demo__range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    color: var(--sd-muted);
    font-size: 10px;
}

/* GRID TOGGLE */

#solar-demo .solar-demo__control .solar-demo__grid-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

#solar-demo .solar-demo__grid-toggle span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

#solar-demo .solar-demo__grid-toggle input {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin: 0;
    accent-color: var(--sd-green);
    cursor: pointer;
}

/* APPLIANCES */

#solar-demo .solar-demo__appliances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
}

#solar-demo .solar-demo__appliances button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-height: 100px;
    padding: 13px 8px;
    border: 1px solid var(--sd-border);
    border-radius: 13px;
    background: #ffffff;
    color: #60776d;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

#solar-demo .solar-demo__appliances button > i {
    font-size: 21px;
}

#solar-demo .solar-demo__appliances button > span {
    font-size: 12px;
    font-weight: 700;
}

#solar-demo .solar-demo__appliances button > small {
    font-size: 10px;
    opacity: 0.8;
}

#solar-demo .solar-demo__appliances button.is-active {
    border-color: #8ed5ae;
    background: #eaf8ef;
    color: #08724e;
}

#solar-demo .solar-demo__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 1px solid var(--sd-border);
    border-radius: 11px;
    background: #f7faf8;
    color: var(--sd-dark);
    font-size: 12px;
    font-weight: 700;
}

/* SOLAR SCENE */

#solar-demo .solar-demo__scene {
    position: relative;
    overflow: hidden;
    border: 1px solid #cee6dc;
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        #dcf4f7 0%,
        #f0fbf7 66%,
        #e4f2df 100%
    );
    box-shadow: 0 18px 45px rgba(8, 62, 50, 0.06);
    transition: background 0.6s ease, border-color 0.6s ease;
}

#solar-demo .solar-demo__scene-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 22px 24px 0;
}

#solar-demo .solar-demo__mode,
#solar-demo .solar-demo__weather {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid rgba(8, 62, 50, 0.1);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.85);
    color: #194d3d;
    font-size: 11px;
    font-weight: 700;
}

#solar-demo .solar-demo__weather i {
    color: #a57700;
}

#solar-demo .solar-demo__drawing {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
}

#solar-demo .solar-demo__svg-label {
    fill: #36584d;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* SUN, CLOUDS & WINDOWS */

#solar-demo .solar-demo__sun,
#solar-demo .solar-demo__moon,
#solar-demo .solar-demo__cloud {
    transition: opacity 0.6s ease;
}

#solar-demo .solar-demo__sun-rays {
    transform-box: fill-box;
    transform-origin: center;
    animation: solarDemoSunSpin 40s linear infinite;
}

#solar-demo .solar-demo__cloud {
    animation: solarDemoCloudDrift 9s ease-in-out infinite alternate;
}

#solar-demo .solar-demo__windows rect {
    transition: fill 0.4s ease, filter 0.4s ease;
}

#solar-demo .solar-demo__scene.is-powered .solar-demo__windows rect {
    fill: #ffdc69;
    filter: drop-shadow(0 0 8px rgba(255, 208, 65, 0.5));
}

#solar-demo .solar-demo__inverter-led {
    transition: fill 0.3s ease, filter 0.3s ease;
}

#solar-demo .solar-demo__scene.is-powered .solar-demo__inverter-led {
    fill: #34df94;
    filter: drop-shadow(0 0 5px rgba(52, 223, 148, 0.55));
}

#solar-demo #solarDemoBatteryFill {
    transition:
        y 0.4s ease,
        height 0.4s ease,
        fill 0.4s ease;
}

/* ENERGY FLOW — JS WILL ADD is-flowing / is-reversed */

#solar-demo .solar-demo__flow {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#solar-demo .solar-demo__flow.is-flowing {
    opacity: 1;
    animation: solarDemoEnergyFlow 1.1s linear infinite;
}

#solar-demo .solar-demo__flow.is-flowing.is-reversed {
    animation-direction: reverse;
}

/* NIGHT MODE */

#solar-demo .solar-demo__scene.is-night {
    border-color: #294764;
    background: linear-gradient(
        180deg,
        #101d35 0%,
        #193650 66%,
        #21483e 100%
    );
}

#solar-demo .solar-demo__scene.is-night .solar-demo__sun {
    opacity: 0;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__moon {
    opacity: 1;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__cloud {
    opacity: 0.15;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__svg-label {
    fill: #d0e4e0;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__mode,
#solar-demo .solar-demo__scene.is-night .solar-demo__weather {
    border-color: #496076;
    background: #243f56;
    color: #f1f7fc;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__weather i {
    color: #ffde70;
}

#solar-demo .solar-demo__scene.is-night .solar-demo__legend {
    color: #d0e4e0;
}

/* LEGEND */

#solar-demo .solar-demo__legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 16px 22px;
    color: #48675b;
    font-size: 11px;
    font-weight: 600;
}

#solar-demo .solar-demo__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

#solar-demo .solar-demo__legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

#solar-demo .solar-demo__dot--solar {
    background: #f5bd23;
}

#solar-demo .solar-demo__dot--battery {
    background: #14b87a;
}

#solar-demo .solar-demo__dot--grid {
    background: #399bf1;
}

/* LIVE METRICS */

#solar-demo .solar-demo__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

#solar-demo .solar-demo__metric {
    min-width: 0;
    padding: 18px 14px;
    border: 1px solid var(--sd-border);
    border-radius: 16px;
    background: #ffffff;
}

#solar-demo .solar-demo__metric > span {
    display: block;
    margin-bottom: 9px;
    color: var(--sd-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
}

#solar-demo .solar-demo__metric > strong {
    display: block;
    color: var(--sd-dark);
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

#solar-demo .solar-demo__metric:first-child {
    border-color: #efdf9b;
    background: #fffbea;
}

#solar-demo .solar-demo__metric:first-child > strong {
    color: #886500;
}

/* STATUS & NOTE */

#solar-demo .solar-demo__status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 17px 18px;
    border: 1px solid #c9e9d7;
    border-radius: 15px;
    background: #eaf7ef;
    color: #175b40;
}

#solar-demo .solar-demo__status > i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 17px;
}

#solar-demo .solar-demo__status p {
    margin: 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.8;
}

#solar-demo .solar-demo__status.is-warning {
    border-color: #f0d18f;
    background: #fff7e5;
    color: #805411;
}

#solar-demo .solar-demo__note {
    margin: 14px 4px 0;
    color: var(--sd-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* ANIMATIONS */

@keyframes solarDemoSunSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes solarDemoCloudDrift {
    from {
        transform: translateX(-12px);
    }
    to {
        transform: translateX(12px);
    }
}

@keyframes solarDemoEnergyFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -36;
    }
}

/* HOVER: DEVICES WITH A POINTER */

@media (hover: hover) {
    #solar-demo .solar-demo__appliances button:hover {
        transform: translateY(-2px);
        border-color: #71bc93;
    }

    #solar-demo .solar-demo__reset:hover {
        background: #eaf5ee;
        border-color: #a9cfb8;
    }
}

/* TABLET */

@media (max-width: 1050px) {
    #solar-demo {
        padding: 75px 20px;
    }

    #solar-demo .solar-demo__layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 18px;
    }

    #solar-demo .solar-demo__controls {
        padding: 18px;
    }

    #solar-demo .solar-demo__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* MOBILE */

@media (max-width: 760px) {
    #solar-demo {
        padding: 60px 16px;
    }

    #solar-demo .solar-demo__heading {
        margin-bottom: 28px;
    }

    #solar-demo .solar-demo__heading h2 {
        letter-spacing: -0.8px;
    }

    #solar-demo .solar-demo__heading p {
        font-size: 13px;
    }

    #solar-demo .solar-demo__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #solar-demo .solar-demo__controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        border-radius: 20px;
    }

    #solar-demo .solar-demo__control {
        min-width: 0;
        margin: 0;
        padding-bottom: 16px;
    }

    #solar-demo .solar-demo__control:first-child,
    #solar-demo .solar-demo__control:last-of-type,
    #solar-demo .solar-demo__reset {
        grid-column: 1 / -1;
    }

    #solar-demo .solar-demo__appliances {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    #solar-demo .solar-demo__appliances button {
        min-height: 88px;
        padding: 11px 4px;
    }

    #solar-demo .solar-demo__scene {
        border-radius: 20px;
    }

    #solar-demo .solar-demo__scene-top {
        padding: 16px 14px 0;
    }

    #solar-demo .solar-demo__mode,
    #solar-demo .solar-demo__weather {
        padding: 7px 10px;
        font-size: 10px;
    }

    #solar-demo .solar-demo__svg-label {
        font-size: 16px;
        letter-spacing: 0;
    }

    #solar-demo .solar-demo__legend {
        gap: 16px;
        padding-bottom: 16px;
        font-size: 10px;
    }

    #solar-demo .solar-demo__metric {
        padding: 15px;
    }
}

@media (max-width: 380px) {
    #solar-demo .solar-demo__controls {
        grid-template-columns: minmax(0, 1fr);
    }

    #solar-demo .solar-demo__appliances {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
    #solar-demo *,
    #solar-demo *::before,
    #solar-demo *::after {
        animation: none !important;
        transition: none !important;
    }
}



/* ==========================================
  =====================================================================>gallery section 
========================================== */

/* ==========================================
   SOLAR PROJECTS
========================================== */

#solar-projects {
    --sp-green: #087f5b;
    --sp-dark: #083e32;
    --sp-muted: #647b73;
    --sp-yellow: #ffd43b;
    --sp-border: #dce9e2;

    position: relative;
    padding: 90px 24px;
    overflow: hidden;
    isolation: isolate;
    scroll-margin-top: 110px;

    background:
        radial-gradient(
            circle at 100% 10%,
            rgba(255, 212, 59, .1),
            transparent 30%
        ),
        #f7faf7;

    color: var(--sp-dark);
}

#solar-projects *,
#solar-projects *::before,
#solar-projects *::after {
    box-sizing: border-box;
}

#solar-projects [hidden] {
    display: none !important;
}

#solar-projects button,
#solar-projects input {
    font: inherit;
}

#solar-projects button,
#solar-projects a,
#solar-projects input {
    -webkit-tap-highlight-color: transparent;
}

#solar-projects button {
    cursor: pointer;
}

#solar-projects a {
    text-decoration: none;
}

#solar-projects a:focus-visible,
#solar-projects button:focus-visible {
    outline: 3px solid var(--sp-green);
    outline-offset: 5px;
}

#solar-projects .solar-projects__container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* ==========================================
   HEADING
========================================== */

#solar-projects .solar-projects__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 38px;
}

#solar-projects .solar-projects__heading > div {
    max-width: 730px;
}

#solar-projects .solar-projects__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 14px;

    border: 1px solid #d4e8d8;
    border-radius: 100px;

    background: #eaf6ed;
    color: var(--sp-green);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 1.8px;
}

#solar-projects .solar-projects__heading h2 {
    margin: 18px 0 15px;
    color: var(--sp-dark);

    font-size: clamp(28px, 3.4vw, 45px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1.3px;
}

#solar-projects .solar-projects__heading h2 span {
    color: var(--sp-green);
}

#solar-projects .solar-projects__heading p {
    max-width: 640px;
    margin: 0;

    color: var(--sp-muted);
    font-size: 14px;
    line-height: 1.9;
}

#solar-projects .solar-projects__heading-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;

    min-height: 46px;
    padding: 12px 17px;

    border: 1px solid #bfd9ca;
    border-radius: 11px;

    background: #ffffff;
    color: var(--sp-dark);

    font-size: 12px;
    font-weight: 700;

    transition:
        background .2s ease,
        border-color .2s ease;
}

/* ==========================================
   FEATURED BEFORE / AFTER
========================================== */

#solar-projects .solar-projects__featured {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 34px;
    align-items: center;

    margin-bottom: 34px;
    padding: 30px;

    border: 1px solid #195743;
    border-radius: 26px;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(255, 215, 65, .12),
            transparent 50%
        ),
        linear-gradient(120deg, #07392c, #0c4d3e 65%, #143f48);

    box-shadow: 0 16px 40px rgba(7, 57, 44, .1);
}

#solar-projects .solar-projects__featured-info,
#solar-projects .solar-projects__comparison-wrap {
    min-width: 0;
}

#solar-projects .solar-projects__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 18px;
    color: #ffe16a;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 1.5px;
}

#solar-projects .solar-projects__featured-info h3 {
    margin: 0 0 17px;
    color: #ffffff;

    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.7px;
}

#solar-projects .solar-projects__featured-info p {
    margin: 0;
    color: #c3dcd0;

    font-size: 13px;
    line-height: 1.9;
}

#solar-projects .solar-projects__featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
}

#solar-projects .solar-projects__featured-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;

    background: rgba(255, 255, 255, .06);
    color: #edf7f1;

    font-size: 11px;
    font-weight: 600;
}

#solar-projects .solar-projects__featured-meta i {
    color: #ffdc4b;
}

/* COMPARISON IMAGE AREA */

#solar-projects .solar-projects__comparison {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px;

    background: #204d43;
    isolation: isolate;
}

/*
 * Both images keep the same dimensions.
 * Only the BEFORE layer is clipped, so images stay aligned.
 */

#solar-projects .solar-projects__comparison-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;

    object-fit: cover;
    object-position: center;

    user-select: none;
    -webkit-user-drag: none;
}

#solar-projects .solar-projects__comparison >
.solar-projects__comparison-image {
    position: absolute;
    inset: 0;
}

#solar-projects .solar-projects__before-layer {
    position: absolute;
    inset: 0;
    z-index: 1;

    clip-path: inset(
        0
        calc(100% - var(--comparison-position, 50%))
        0
        0
    );

    pointer-events: none;
}

/* BEFORE / AFTER LABELS */

#solar-projects .solar-projects__image-label {
    position: absolute;
    top: 15px;
    z-index: 2;

    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;

    pointer-events: none;
}

#solar-projects .solar-projects__image-label--before {
    left: 15px;
    background: rgba(13, 31, 27, .85);
    color: #ffffff;
}

#solar-projects .solar-projects__image-label--after {
    right: 15px;
    border-color: #ffdf58;
    background: #ffda3d;
    color: #193d2b;
}

/* MOVING DIVIDER */

#solar-projects .solar-projects__comparison-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--comparison-position, 50%);
    z-index: 3;

    width: 3px;

    background: #ffffff;
    box-shadow: 0 0 18px rgba(0, 0, 0, .2);

    transform: translateX(-50%);
    pointer-events: none;
}

#solar-projects .solar-projects__comparison-divider > span {
    position: absolute;
    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 46px;
    height: 46px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffda3d;
    color: #123e2d;

    font-size: 12px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
    transform: translate(-50%, -50%);
}

/* ACCESSIBLE RANGE CONTROL OVER THE IMAGE */

#solar-projects .solar-projects__comparison-range {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
}

#solar-projects .solar-projects__comparison:focus-within {
    outline: 3px solid #ffdc4b;
    outline-offset: 5px;
}

#solar-projects .solar-projects__comparison-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 12px 0 0;

    color: #c5ddd1;
    font-size: 10px;
    line-height: 1.7;
    text-align: center;
}

#solar-projects .solar-projects__comparison-help i {
    color: #ffdc4b;
}

/* ==========================================
   FILTER TOOLBAR
========================================== */

#solar-projects .solar-projects__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 24px;
}

#solar-projects .solar-projects__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

#solar-projects .solar-projects__filters button {
    min-height: 42px;
    padding: 10px 17px;

    border: 1px solid var(--sp-border);
    border-radius: 100px;

    background: #ffffff;
    color: #587365;

    font-size: 11px;
    font-weight: 700;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

#solar-projects .solar-projects__filters button.is-active {
    border-color: #087f5b;
    background: #087f5b;
    color: #ffffff;

    box-shadow: 0 5px 14px rgba(8, 127, 91, .14);
}

#solar-projects .solar-projects__count {
    flex-shrink: 0;
    color: var(--sp-muted);

    font-size: 11px;
    font-weight: 600;
}

/* ==========================================
   PROJECT GRID
========================================== */

#solar-projects .solar-projects__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

#solar-projects .solar-projects__card {
    min-width: 0;
    overflow: hidden;

    border: 1px solid var(--sp-border);
    border-radius: 21px;

    background: #ffffff;
    box-shadow: 0 7px 24px rgba(8, 62, 50, .04);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

#solar-projects .solar-projects__card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    background: #e7efe9;
}

#solar-projects .solar-projects__card-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, .08),
        transparent 40%,
        rgba(3, 37, 26, .3)
    );

    pointer-events: none;
}

#solar-projects .solar-projects__card-image > img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .6s ease;
}

#solar-projects .solar-projects__category {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1;

    padding: 7px 11px;

    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 8px;

    background: rgba(255, 255, 255, .95);
    color: var(--sp-dark);

    font-size: 10px;
    font-weight: 700;
}

#solar-projects .solar-projects__capacity {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 8px 12px;
    border-radius: 9px;

    background: #ffda3d;
    color: #173e2b;

    font-size: 12px;
    font-weight: 800;

    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* CARD CONTENT */

#solar-projects .solar-projects__card-content {
    padding: 22px;
}

#solar-projects .solar-projects__location {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;
    color: var(--sp-muted);

    font-size: 11px;
    line-height: 1.6;
}

#solar-projects .solar-projects__location i {
    color: var(--sp-green);
}

#solar-projects .solar-projects__card-content h3 {
    margin: 0 0 19px;
    color: var(--sp-dark);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.3px;

    overflow-wrap: anywhere;
}

#solar-projects .solar-projects__card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;

    padding-top: 16px;
    border-top: 1px solid #edf2ee;
}

#solar-projects .solar-projects__system {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: #537564;
    font-size: 10px;
    font-weight: 600;
}

#solar-projects .solar-projects__system i {
    color: var(--sp-green);
}

#solar-projects .solar-projects__card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 32px;
    color: var(--sp-green);

    font-size: 11px;
    font-weight: 800;
}

#solar-projects .solar-projects__card-link i {
    font-size: 10px;
    transition: transform .2s ease;
}

/* Optional class for filter animation */

#solar-projects .solar-projects__card.is-entering {
    animation: solarProjectAppear .35s ease both;
}

@keyframes solarProjectAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   EMPTY / NO RESULTS
========================================== */

#solar-projects .solar-projects__empty {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 28px;

    border: 1px solid var(--sp-border);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 212, 59, .12),
            transparent 60%
        ),
        #ffffff;

    text-align: center;
}

#solar-projects .solar-projects__empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;
    margin: 0 auto 22px;

    border-radius: 20px;
    background: #e8f6ed;
    color: var(--sp-green);

    font-size: 29px;
}

#solar-projects .solar-projects__empty h3 {
    margin: 0 0 14px;
    color: var(--sp-dark);

    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 800;
    line-height: 1.4;
}

#solar-projects .solar-projects__empty p {
    max-width: 520px;
    margin: 0 auto 24px;

    color: var(--sp-muted);
    font-size: 13px;
    line-height: 1.9;
}

#solar-projects .solar-projects__no-results {
    margin: 20px 0 0;
    padding: 24px;

    border: 1px dashed #bbd6c5;
    border-radius: 15px;

    background: #eef7f0;
    color: var(--sp-muted);

    font-size: 13px;
    line-height: 1.8;
    text-align: center;
}

/* ==========================================
   BOTTOM CTA
========================================== */

#solar-projects .solar-projects__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-top: 32px;
    padding: 28px 30px;

    border: 1px solid #d7e4cb;
    border-radius: 20px;

    background: linear-gradient(
        110deg,
        #eaf5e9,
        #fff8dc
    );
}

#solar-projects .solar-projects__cta h3 {
    margin: 0 0 9px;
    color: var(--sp-dark);

    font-size: 23px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.5px;
}

#solar-projects .solar-projects__cta p {
    margin: 0;
    color: var(--sp-muted);

    font-size: 12px;
    line-height: 1.9;
}

#solar-projects .solar-projects__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex-shrink: 0;

    min-height: 48px;
    padding: 14px 21px;

    border: 1px solid #f0c936;
    border-radius: 12px;

    background: linear-gradient(135deg, #ffbd13, #ffe45b);
    color: #163d2d;

    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;

    box-shadow: 0 6px 18px rgba(213, 166, 12, .12);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

/* ==========================================
   HOVER EFFECTS
========================================== */

@media (hover: hover) {
    #solar-projects .solar-projects__heading-link:hover {
        border-color: #93bea4;
        background: #edf7ef;
    }

    #solar-projects .solar-projects__filters
    button:not(.is-active):hover {
        border-color: #a8cbb7;
        background: #eaf5ee;
        color: var(--sp-green);
    }

    #solar-projects .solar-projects__card:hover {
        transform: translateY(-6px);
        border-color: #aacfb9;
        box-shadow: 0 16px 35px rgba(8, 62, 50, .1);
    }

    #solar-projects .solar-projects__card:hover
    .solar-projects__card-image > img {
        transform: scale(1.055);
    }

    #solar-projects .solar-projects__card-link:hover i {
        transform: translate(2px, -2px);
    }

    #solar-projects .solar-projects__button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(213, 166, 12, .22);
    }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1050px) {
    #solar-projects {
        padding: 75px 20px;
    }

    #solar-projects .solar-projects__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    #solar-projects .solar-projects__featured {
        grid-template-columns: .8fr 1.2fr;
        gap: 24px;
        padding: 24px;
    }

    #solar-projects .solar-projects__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 760px) {
    #solar-projects {
        padding: 60px 16px;
    }

    #solar-projects .solar-projects__heading {
        margin-bottom: 28px;
    }

    #solar-projects .solar-projects__heading h2 {
        letter-spacing: -.7px;
    }

    #solar-projects .solar-projects__heading p {
        font-size: 12px;
    }

    #solar-projects .solar-projects__featured {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;

        padding: 22px;
        border-radius: 21px;
    }

    #solar-projects .solar-projects__featured-info h3 {
        max-width: 500px;
        font-size: 27px;
    }

    #solar-projects .solar-projects__featured-info p {
        font-size: 12px;
    }

    #solar-projects .solar-projects__featured-meta {
        margin-top: 17px;
    }

    #solar-projects .solar-projects__comparison {
        border-radius: 14px;
    }

    #solar-projects .solar-projects__toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    #solar-projects .solar-projects__filters {
        gap: 7px;
    }

    #solar-projects .solar-projects__filters button {
        min-height: 40px;
        padding: 9px 13px;
        font-size: 10px;
    }

    #solar-projects .solar-projects__card-content {
        padding: 18px;
    }

    #solar-projects .solar-projects__card-content h3 {
        font-size: 16px;
    }

    #solar-projects .solar-projects__cta {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;

        padding: 24px;
    }

    #solar-projects .solar-projects__cta h3 {
        font-size: 22px;
    }

    #solar-projects .solar-projects__cta .solar-projects__button {
        width: 100%;
    }
}

@media (max-width: 540px) {
    #solar-projects .solar-projects__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    #solar-projects .solar-projects__featured {
        padding: 18px;
    }

    #solar-projects .solar-projects__tag {
        font-size: 8px;
        letter-spacing: 1px;
    }

    #solar-projects .solar-projects__image-label {
        top: 10px;
        padding: 6px 9px;
        font-size: 9px;
    }

    #solar-projects .solar-projects__image-label--before {
        left: 10px;
    }

    #solar-projects .solar-projects__image-label--after {
        right: 10px;
    }

    #solar-projects .solar-projects__comparison-divider > span {
        width: 40px;
        height: 40px;
        gap: 8px;
        font-size: 10px;
    }

    #solar-projects .solar-projects__comparison-help {
        align-items: flex-start;
        font-size: 9px;
    }

    #solar-projects .solar-projects__comparison-help i {
        margin-top: 3px;
    }

    #solar-projects .solar-projects__empty {
        padding: 34px 20px;
    }

    #solar-projects .solar-projects__empty .solar-projects__button {
        width: 100%;
    }
}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {
    #solar-projects *,
    #solar-projects *::before,
    #solar-projects *::after {
        animation: none !important;
        transition: none !important;
    }
}