:root{
  --radius:18px;
  --radius-sm:14px;
  --radius-pill:999px;
  --shadow-soft:0 20px 50px rgba(28,31,36,.25);
  --shadow-strong:0 26px 70px rgba(28,31,36,.35);
  --ease:cubic-bezier(.2,.7,.2,1);
  --scroll-progress:0;
  --progress-track:rgba(246,247,245,.18);
  --progress-glow:rgba(254,255,5,.45);
  --progress-shadow:rgba(28,31,36,.35);

  --brand-blue:#3a568f;
  --brand-yellow:#feff05;
  --brand-pale:#f6f7f5;
  --brand-ink:#1c1f24;
  --brand-sand:#f3f1e6;

  --font-body:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Space Grotesk", "Plus Jakarta Sans", sans-serif;

  --cursor-size:220px;
  --hero-image:url("./images/Solar panels on the roof. (Solar cell).jpg");
  --hero-image-next:var(--hero-image);
  --hero-fade:0;
  --hero-fade-dur:2000ms;
  --bg-shift-1:0px;
  --bg-shift-2:0px;
  --hero-parallax:0px;
  --ornament-shift:0px;
}

body[data-theme="dark"]{
  --bg:var(--brand-blue);
  --card:rgba(246,247,245,.08);
  --card-strong:rgba(246,247,245,.14);
  --text:var(--brand-pale);
  --muted:rgba(246,247,245,.72);
  --line:rgba(246,247,245,.18);
  --accent:var(--brand-yellow);
  --accent-2:var(--brand-pale);
  --btn-text:var(--brand-ink);
  --glow-1:rgba(254,255,5,.25);
  --glow-2:rgba(246,247,245,.18);
  --topbar-bg:rgba(58,86,143,.82);
  --hero-overlay-1:rgba(58,86,143,.2);
  --hero-overlay-2:rgba(28,31,36,.78);
  --input-bg:rgba(28,31,36,.35);
  --link:var(--brand-yellow);
  --cursor-glow:rgba(254,255,5,.45);
  --ornament-1:rgba(254,255,5,.18);
  --ornament-2:rgba(246,247,245,.12);
  --ornament-3:rgba(58,86,143,.35);
  --brand-name-fill:var(--brand-pale);
  --progress-track:rgba(246,247,245,.22);
  --progress-glow:rgba(254,255,5,.45);
  --progress-shadow:rgba(28,31,36,.35);
}

body[data-theme="light"]{
  --bg:var(--brand-sand);
  --card:rgba(58,86,143,.08);
  --card-strong:rgba(58,86,143,.16);
  --text:var(--brand-ink);
  --muted:rgba(28,31,36,.7);
  --line:rgba(28,31,36,.12);
  --accent:var(--brand-yellow);
  --accent-2:var(--brand-blue);
  --btn-text:var(--brand-ink);
  --glow-1:rgba(58,86,143,.12);
  --glow-2:rgba(254,255,5,.22);
  --topbar-bg:rgba(243,241,230,.9);
  --hero-overlay-1:rgba(243,241,230,.76);
  --hero-overlay-2:rgba(243,241,230,.97);
  --input-bg:rgba(58,86,143,.08);
  --link:var(--brand-blue);
  --cursor-glow:rgba(254,255,5,.35);
  --ornament-1:rgba(58,86,143,.18);
  --ornament-2:rgba(254,255,5,.12);
  --ornament-3:rgba(28,31,36,.08);
  --brand-name-fill:var(--brand-ink);
  --progress-track:rgba(58,86,143,.2);
  --progress-glow:rgba(58,86,143,.35);
  --progress-shadow:rgba(28,31,36,.2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  transition: background .6s var(--ease), color .4s var(--ease);
}

body::before{
  content:"";
  position:fixed;
  inset:-20% -10% auto;
  height:70%;
  background:
    radial-gradient(45% 55% at 20% 10%, var(--glow-1), transparent 70%),
    radial-gradient(45% 55% at 85% 0%, var(--glow-2), transparent 70%);
  pointer-events:none;
  z-index:0;
  transform: translateY(var(--bg-shift-1));
  will-change: transform;
}
body::after{
  content:"";
  position:fixed;
  inset:auto -20% -25%;
  height:60%;
  background:radial-gradient(40% 50% at 80% 40%, var(--glow-1), transparent 70%);
  opacity:.7;
  pointer-events:none;
  z-index:0;
  transform: translateY(var(--bg-shift-2));
  will-change: transform;
}

.scroll-ornament{
  position:fixed;
  inset:-25% -15%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(45% 35% at 18% 20%, var(--ornament-1), transparent 68%),
    radial-gradient(40% 35% at 82% 18%, var(--ornament-2), transparent 70%),
    radial-gradient(45% 40% at 75% 80%, var(--ornament-3), transparent 72%);
  background-size:100% 100%, 100% 100%, 100% 100%;
  transform: translate3d(0, var(--ornament-shift), 0);
  opacity:.65;
  mix-blend-mode:screen;
  filter: blur(0.2px);
  will-change: transform;
  transition: opacity .6s var(--ease);
}
body[data-theme="light"] .scroll-ornament{
  mix-blend-mode:multiply;
  opacity:.45;
}

a{color:inherit; text-decoration:none}
header, main, footer{position:relative; z-index:2}

.scroll-progress{
  position:fixed;
  top:4px;
  left:50%;
  width:min(3000px, 94vw);
  height:8px;
  z-index:60;
  border-radius:999px;
  background:var(--progress-track);
  box-shadow:0 8px 20px var(--progress-shadow);
  overflow:hidden;
  pointer-events:none;
  transform:translateX(-50%);
  padding:2px;
}
.scroll-progress__bar{
  width:100%;
  height:100%;
  display:block;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(var(--scroll-progress));
  transform-origin:left;
  box-shadow:0 0 18px var(--progress-glow);
  transition: transform .12s linear;
}

.cursor-glow{
  position:fixed;
  top:0;
  left:0;
  width:var(--cursor-size);
  height:var(--cursor-size);
  border-radius:50%;
  background:radial-gradient(circle, var(--cursor-glow), rgba(254,255,5,0) 65%);
  transform:translate3d(-50%, -50%, 0);
  pointer-events:none;
  z-index:1;
  mix-blend-mode:screen;
  opacity:0;
  filter:blur(12px);
  transition: opacity .3s var(--ease);
}
.cursor-glow.is-on{opacity:.65}
body[data-theme="light"] .cursor-glow{mix-blend-mode:multiply}
body[data-theme="light"] .cursor-glow.is-on{opacity:.45}

.container{width:min(1120px, 92vw); margin:0 auto}
.section{padding:86px 0}
.section--tight{padding-top:64px}
.section.alt{background:linear-gradient(120deg, var(--card-strong), transparent 60%)}
.section__head{max-width:680px; margin-bottom:24px}
.section__head--wide{max-width:100%}

h1,h2,h3{font-family:var(--font-display); font-weight:600}
h1{font-size:clamp(2.4rem, 4vw, 3.7rem); line-height:1.05; margin:12px 0}
h2{font-size:clamp(1.65rem, 2.2vw, 2.3rem); margin:0 0 10px}
h3{margin:0 0 8px}
p{line-height:1.6; text-align:justify; text-justify:inter-word}
li{text-align:left}
.muted{color:var(--muted)}
.hidden{display:none}

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: var(--topbar-bg);
  border-bottom:1px solid var(--line);
  transition: background .6s var(--ease), border-color .3s var(--ease);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:18px; flex-wrap:wrap}
.brand{display:flex; gap:3px; align-items:center; text-decoration:none; color:var(--text)}
.brand__logo{
  width:48px;
  height:48px;
  object-fit:contain;
  filter: drop-shadow(0 8px 18px rgba(254,255,5,.25));
}
.brand__logo--dark,
.brand__logo--light{display:none}
body[data-theme="dark"] .brand__logo--dark{display:block}
body[data-theme="light"] .brand__logo--light{display:block}
.brand__name{display:flex; align-items:center}
.brand__wordmark{
  display:block;
  height:20px;
  width:auto;
  color:var(--brand-name-fill);
}
.brand__wordmark path{fill:currentColor}

.nav{display:flex; gap:18px; align-items:center}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  display:inline-flex;
  align-items:center;
  border-radius:8px;
  border:1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.nav a:hover,
.nav a:focus-visible,
.nav a:active{
  color:var(--btn-text);
  border-color:transparent;
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.pill{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), var(--card);
}

.theme-switch{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px;
  border-radius:999px;
  background: var(--card);
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.theme-switch__label{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:6px;
}
.theme-switch__buttons{display:flex; gap:6px}
.theme-button{
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,0) 55%),
    var(--card-strong);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .4s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.theme-button:hover{transform: translateY(-1px); box-shadow: var(--shadow-soft)}
.theme-button.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--btn-text);
  border-color:transparent;
  box-shadow: var(--shadow-strong);
}

.burger{display:none; font-size:20px; background:transparent; color:var(--text); border:0}
.mobile{display:none; padding:10px 0 16px; border-top:1px solid var(--line)}
.mobile a{display:block; padding:10px 0; color:var(--muted); text-decoration:none; transition: color .2s var(--ease)}
.mobile a:hover,
.mobile a:focus-visible,
.mobile a:active{color:var(--accent)}

.hero{position:relative; padding:100px 0 60px; overflow:hidden}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, var(--hero-overlay-1), var(--hero-overlay-2)),
    var(--hero-image);
  background-size:cover;
  background-position:50% 50%;
  transform: translateY(var(--hero-parallax)) scale(1.04);
  transition: background .6s var(--ease);
  will-change: transform;
  animation: hero-drift 24s ease-in-out infinite;
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, var(--hero-overlay-1), var(--hero-overlay-2)),
    var(--hero-image-next);
  background-size:cover;
  background-position:50% 50%;
  opacity:var(--hero-fade);
  transition: opacity var(--hero-fade-dur) var(--ease);
  pointer-events:none;
  animation: hero-drift 24s ease-in-out infinite;
}

@keyframes hero-drift{
  0%{background-position:50% 50%}
  50%{background-position:53% 46%}
  100%{background-position:50% 50%}
}
.hero__inner{position:relative; max-width:820px}
.kicker{
  display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), var(--card);
  color:var(--muted); margin:0;
  box-shadow: var(--shadow-soft);
}
.lead{max-width:62ch; font-size:1.05rem}

.cta{display:flex; gap:12px; margin:18px 0 28px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--line); text-decoration:none; color:var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:var(--btn-text);
  border-color: transparent;
}
.btn.ghost:hover{background: rgba(255,255,255,.08)}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow-strong)}
.btn.whatsapp{
  border-color:rgba(254,255,5,.4);
  background:rgba(254,255,5,.12);
  color:var(--text);
}

.hero__stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
.stat{
  padding:14px; border:1px solid var(--line); border-radius:var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease);
}
.stat:hover{transform: translateY(-2px); box-shadow: var(--shadow-strong)}
.stat__num{font-size:1.7rem; font-weight:700}
.stat__unit{margin-left:3px; color:var(--muted)}
.stat__label{display:block; margin-top:4px; color:var(--muted); font-size:.95rem}

.grid2{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:start}
.grid2--mission{grid-template-columns: 1fr 1.1fr}
.stack{display:grid; gap:18px; align-items:start}
.panel{
  border:1px solid var(--line); border-radius:var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  padding:18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease);
}
.panel:hover{transform: translateY(-2px); box-shadow: var(--shadow-strong)}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
}
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  background: var(--card); padding:18px;
  box-shadow: var(--shadow-soft);
  transform: translateY(var(--hover-y, 0px));
  will-change: transform;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease);
}
.card:hover{--hover-y:-6px; box-shadow: var(--shadow-strong)}
.card__icon{font-size:1.35rem; margin-bottom:8px}
.link{color:var(--link); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}

.why{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:12px}
.why__item{
  border:1px solid var(--line); border-radius:var(--radius);
  background: var(--card); padding:18px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease);
}
.why__item:hover{transform: translateY(-2px); box-shadow: var(--shadow-strong)}

.card p,
.why__item p,
.panel p,
.panel li{
  line-height:1.7;
}


.team{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-top:16px}
.team__card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: var(--card);
  padding:0;
  overflow:hidden;
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
  transform: translateY(var(--hover-y, 0px));
  will-change: transform;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease);
}
.team__card:hover{--hover-y:-4px; box-shadow: var(--shadow-strong)}
.team__photo{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:0;
  border:0;
  display:block;
}
.team__meta{
  position:static;
  margin-top:0;
  padding:12px 12px 14px;
  text-align:center;
  color:var(--text);
  background:var(--card);
  border-top:1px solid var(--line);
}
.team__meta p{ text-align:center; }
.team__role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:8px auto 0;
  padding:6px 12px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  background: linear-gradient(135deg, var(--card-strong), var(--card));
  border:1px solid var(--line);
  box-shadow: 0 12px 24px rgba(28,31,36,.18);
}

.contact{display:grid; gap:10px; margin-top:16px}
.form label{display:grid; gap:6px; margin-bottom:10px; font-weight:600}
.form input,.form textarea{
  width:100%;
  padding:12px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background: var(--input-bg);
  color:var(--text);
  outline:none;
  transition: border-color .25s var(--ease), background .4s var(--ease);
}
.form input:focus,.form textarea:focus{border-color: var(--accent)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.form__hint{margin:10px 0 0}

.footer{border-top:1px solid var(--line); padding:22px 0; color:var(--muted)}
.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

.reveal{
  --reveal-y:14px;
  opacity:0;
  transform: translateY(var(--reveal-y));
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in{
  --reveal-y:0px;
  opacity:1;
}
.reveal.card,
.reveal.team__card{
  transform: translateY(calc(var(--reveal-y) + var(--hover-y, 0px)));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease), border-color .25s var(--ease), opacity .7s ease;
  transition-delay: 0ms, 0ms, 0ms, 0ms, var(--delay, 0ms);
}

@media (max-width: 880px){
  .nav{display:none}
  .burger{display:block}
  .hero__stats{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .theme-switch{width:100%; justify-content:space-between}
  .theme-switch__label{display:none}
  body[data-theme="light"] .why{grid-template-columns:1fr}
  .cursor-glow{display:none}
}

@media (max-width: 680px){
  .theme-switch__buttons{flex-wrap:wrap}
  .theme-button{flex:1 1 140px}
}

@media (max-width: 560px){
  .team{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .cursor-glow{display:none}
}