/* ── RESET ── */
/* ══════════════════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════════════════ */
#progBar {
  position: absolute;
  top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #2db84b, #f5a623, #1e3a5f);
  z-index: 9999;
  transition: width .1s linear;
}

#theSun {
  position: absolute;
  left: 50%;
  top: -38vh;
  transform: translate(-50%, -50%);
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe566, #f5a623);
  box-shadow:
    0 0 80px rgba(255,200,0,.5),
    0 0 0 14px rgba(245,166,35,.1),
    0 0 0 28px rgba(245,166,35,.05);
  z-index: 100;
  pointer-events: none;
}
#theSun::after {
  content: '';
  position: absolute; inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,60,.18) 0%, transparent 70%);
  animation: sunGlowPulse 3.5s ease-in-out infinite;
}
@keyframes sunGlowPulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.3);opacity:1} }

/* ══════════════════════════════════════════
   SECTION 1 — INTRO HERO
══════════════════════════════════════════ */
.s-intro {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f0f7f2 0%, #e8f3eb 100%);
  position: relative;
  overflow: hidden;
  padding: 100px 24px 60px;
}

/* faint dot grid */
.s-intro::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(45,184,75,.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.intro-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: #2db84b;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  animation: fadeUp .7s ease both;
}
.intro-eyebrow::before, .intro-eyebrow::after {
  content: ''; display: block; width: 28px; height: 2px;
  background: linear-gradient(90deg, #2db84b, transparent);
  border-radius: 2px;
}
.intro-eyebrow::after {
  background: linear-gradient(90deg, transparent, #2db84b);
}

.intro-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 400;
  color: #1e3a5f;
  text-align: center;
  line-height: 1.08;
  margin-bottom: 14px;
  animation: fadeUp .7s ease .12s both;
}
.intro-title em { font-style: italic; color: #2db84b; }

.intro-sub {
  font-size: 16px; font-weight: 300;
  color: #4a6a5a; text-align: center;
  max-width: 520px; line-height: 1.8;
  margin-bottom: 80px;
  animation: fadeUp .7s ease .22s both;
}

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 140px;
  animation: fadeUp .7s ease .45s both;
}
.scroll-cue span {
  font-size: 11px; letter-spacing: .16em;
  color: #8aab90; text-transform: uppercase;
  font-weight: 500;
}
.chevron {
  width: 20px; height: 20px;
  border-right: 2px solid rgba(45,184,75,.5);
  border-bottom: 2px solid rgba(45,184,75,.5);
  transform: rotate(45deg);
  animation: bounceCh 2s ease-in-out infinite;
}
@keyframes bounceCh { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(6px)} }

/* ══════════════════════════════════════════
   SECTION 2 — SCROLL ANIMATION
══════════════════════════════════════════ */
.s-scroll {
  height: 450vh;
  position: relative;
}

.sticky-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; Removed to allow sun to visually overflow when in s-intro */
  background: linear-gradient(180deg, #e8f3eb, #f0f7f2);
}

/* ── ENERGY LINE ── */
.energy-line {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-2px);
  width: 4px;
  height: 0;
  background: linear-gradient(180deg, rgba(255,220,60,.9), rgba(45,184,75,.7));
  border-radius: 4px;
  z-index: 3;
}
.energy-line::after {
  content: '';
  position: absolute;
  bottom: 0; left: -4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(45,184,75,.6);
  box-shadow: 0 0 20px rgba(45,184,75,.8);
  animation: lineGlow 1.5s ease-in-out infinite;
}
@keyframes lineGlow { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

/* ── SOLAR PANEL ── */
.scroll-panel {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.15));
}
.scroll-panel img {
  width: 210px;
  height: auto;
  display: block;
}

/* ── HEADING ── */
.orbit-heading {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 20;
  opacity: 0;
}
.orbit-heading .eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: #2db84b; margin-bottom: 6px;
}
.orbit-heading h2 {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(22px, 3.5vw, 36px);
  font-weight: 400; color: #1e3a5f;
}
.orbit-heading h2 em { font-style: italic; color: #2db84b; }

/* ══════════════════════════════════════════
   NEW VALUE CARDS (TITLE + DESC)
══════════════════════════════════════════ */
.vcard {
  position: absolute;
  width: 270px;
  padding: 16px;
  text-align: left;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(45,184,75,.15);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(30,58,95,.08),
    0 2px 8px rgba(45,184,75,.06);
  opacity: 0;
  z-index: 12;
  cursor: default;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.vcard:hover {
  box-shadow: 0 14px 40px rgba(45,184,75,.22);
  border-color: #2db84b;
}

.vcard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.vcard-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f8ec, #d2f0da);
  border: 1.5px solid rgba(45,184,75,.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s;
}
.vcard:hover .vcard-icon {
  background: #2db84b;
}
.vcard:hover .vcard-icon svg { stroke: #fff !important; }

.vcard-title {
  font-size: 15px; font-weight: 700;
  color: #2db84b;
  line-height: 1.25;
}

.vcard-desc {
  font-size: 11.5px; font-weight: 400;
  color: #4a6a5a;
  line-height: 1.6;
}

/* Float animations — gentle bobbing */
@keyframes fA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fB { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-6px) translateX(3px)} }
@keyframes fC { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes fD { 0%,100%{transform:translateY(0) translateX(0)} 50%{transform:translateY(-5px) translateX(-4px)} }
@keyframes fE { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

.vcard.fl0 { animation: fA 4s ease-in-out infinite; }
.vcard.fl1 { animation: fB 4.5s ease-in-out 0.3s infinite; }
.vcard.fl2 { animation: fC 3.8s ease-in-out 0.6s infinite; }
.vcard.fl3 { animation: fD 4.2s ease-in-out 0.9s infinite; }
.vcard.fl4 { animation: fE 3.6s ease-in-out 1.2s infinite; }

/* ── SIDE positions around panel ── */
/* LEFT SIDE */
.vcard.p-lt { top: 56%; left: 50%; margin-top: -160px; margin-left: -415px; } /* Left Top */
.vcard.p-lb { top: 56%; left: 50%; margin-top:  50px; margin-left: -415px; } /* Left Bottom */

/* RIGHT SIDE */
.vcard.p-rt { top: 56%; left: 50%; margin-top: -240px; margin-left: 145px; } /* Right Top */
.vcard.p-rm { top: 56%; left: 50%; margin-top: -40px; margin-left: 145px; } /* Right Middle */
.vcard.p-rb { top: 56%; left: 50%; margin-top:  160px; margin-left: 145px; } /* Right Bottom */

/* ── Connector lines from panel to cards ── */
.connector-line {
  position: absolute;
  top: 56%; left: 50%;
  width: 1px;
  background: rgba(45,184,75,.2);
  transform-origin: top center;
  opacity: 0;
  z-index: 4;
}

/* ── ENERGY PARTICLES ── */
.eparticle {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: #2db84b;
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  box-shadow: 0 0 8px rgba(45,184,75,.6);
}

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .vcard { width: 220px; padding: 12px; }
  .vcard.p-lt { margin-left: -330px; }
  .vcard.p-lb { margin-left: -330px; }
  .vcard.p-rt { margin-left: 110px; }
  .vcard.p-rm { margin-left: 110px; }
  .vcard.p-rb { margin-left: 110px; }
}

@media (max-width: 768px) {
  .scroll-panel img { width: 160px; }
  .vcard { width: 220px; padding: 12px; }
  .vcard-title { font-size: 13px; }
  .vcard-desc { font-size: 10.5px; }
  .vcard-header { margin-bottom: 6px; gap: 8px; }
  .vcard-icon { width: 26px; height: 26px; }
  
  .vcard.p-lt { top: 56%; left: 50%; margin-top: -300px; margin-left: -240px; }
  .vcard.p-lb { top: 56%; left: 50%; margin-top:   140px; margin-left: -240px; }
  .vcard.p-rt { top: 56%; left: 50%; margin-top: -300px; margin-left:  20px; }
  .vcard.p-rm { top: 56%; left: 50%; margin-top:  -80px; margin-left: 110px; }
  .vcard.p-rb { top: 56%; left: 50%; margin-top:  140px; margin-left:  20px; }
}

@media (max-width: 540px) {
  .scroll-panel img { opacity: 0.1 !important; }
  .vcard { width: 140px; padding: 10px; }
  .vcard-title { font-size: 11px; }
  .vcard-desc { font-size: 9px; }
  .vcard.p-lt { margin-top: -240px; margin-left: -145px; }
  .vcard.p-lb { margin-top:   60px; margin-left: -145px; }
  .vcard.p-rt { margin-top: -240px; margin-left:   5px; }
  .vcard.p-rm { margin-top:  -90px; margin-left: -70px; }
  .vcard.p-rb { margin-top:   60px; margin-left:   5px; }
  .orbit-heading h2 { font-size: 20px; }
}