/* =====================================================================
   KAPSOLAR — site design 2026
   Brand colours: KAPSOLAR blue + sky + the logo's sun (yellow -> orange)
   ===================================================================== */

:root {
  --blue: #0039BE;
  --blue-600: #1E5BFF;
  --blue-800: #002A8F;
  --navy: #0E0F3A;
  --navy-2: #0B1240;
  --ink: #1B2340;
  --text: #3C4663;
  --muted: #66708C;
  --line: #E3E9F3;
  --sky: #4DB0E9;
  --cyan: #6FE6FC;
  --ice: #EEF8FE;
  --ice-2: #F6FBFF;
  --sun: #FEC701;
  --sun-mid: #FF9B02;
  --sun-deep: #FE6306;
  --sun-text: #C2410C;
  --grad-sun: linear-gradient(135deg, #FEC701 0%, #FF9B02 55%, #FE6306 100%);
  --grad-blue: linear-gradient(135deg, #1E5BFF 0%, #0039BE 55%, #002A8F 100%);
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --sh-1: 0 1px 2px rgba(14, 15, 58, 0.05), 0 8px 24px rgba(14, 15, 58, 0.06);
  --sh-2: 0 2px 6px rgba(14, 15, 58, 0.06), 0 24px 54px rgba(14, 15, 58, 0.12);
  --sh-sun: 0 10px 26px rgba(254, 120, 6, 0.32);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: "Sora", "Inter", system-ui, sans-serif;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  width: min(1320px, 92%);
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--blue);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 0;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.78rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

.btn-xl {
  padding: 1.2rem 2.4rem;
  font-size: 1.15rem;
}

.btn-arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-sun {
  background: var(--grad-sun);
  color: var(--navy);
  box-shadow: var(--sh-sun);
}

.btn-sun:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(254, 120, 6, 0.42);
}

.btn-white {
  background: #ffffff;
  color: var(--blue);
  box-shadow: var(--sh-1);
  border: 1.5px solid var(--line);
}

.btn-white:hover {
  border-color: rgba(0, 57, 190, 0.35);
  box-shadow: var(--sh-2);
}

.btn-blue {
  background: var(--grad-blue);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 57, 190, 0.3);
}

.btn-navy {
  background: var(--navy);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(14, 15, 58, 0.28);
}

/* ---------- Header: blue bar, white logo, sun pills ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(120deg, var(--blue-800), var(--blue));
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 12px 30px rgba(0, 31, 110, 0.35);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.logo {
  display: inline-flex;
  flex: none;
}

.site-header .logo-img {
  height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock) {
  position: relative;
  padding: 0.25rem 0;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.2s ease;
}

.nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
  transition: right 0.25s ease;
}

.nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock):hover {
  color: var(--sun);
}

.nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock):hover::after {
  right: 0;
}

.nav-highlight,
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--grad-sun);
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.nav-highlight:hover,
.nav-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

/* KAPSOLAR WindLock in the header: white pill, padlock snapping shut, light sweep */
.nav-links a.nav-windlock {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 0.55rem 0 0.3rem;
  overflow: hidden;
  border: 2px solid #FEC701;
  border-radius: 999px;
  background: #ffffff;
  font-family: "Sora", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--blue);
  box-shadow: 0 0 0 0 rgba(254, 199, 1, 0.6);
  animation: nwlGlow 2.8s ease-out infinite;
  transition: transform 0.2s ease;
}

.nav-links a.nav-windlock:hover {
  transform: translateY(-1px);
}

.nav-windlock::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, rgba(254, 199, 1, 0.45), transparent);
  transform: skewX(-20deg);
  animation: pillShine 3.6s ease-in-out infinite;
  pointer-events: none;
}

.nwl-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-sun);
  color: var(--navy);
  animation: lockClick 2.8s ease-in-out infinite;
}

.nwl-ico svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.nwl-tag {
  display: none;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--navy);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #FEC701;
}

@keyframes nwlGlow {
  0% { box-shadow: 0 0 0 0 rgba(254, 199, 1, 0.6); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(254, 199, 1, 0); }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 3.6rem 0 7.5rem;
  background:
    radial-gradient(900px 520px at 85% -5%, rgba(255, 233, 160, 0.55), transparent 60%),
    linear-gradient(180deg, #F3FBFF 0%, #E2F5FD 55%, #CFEFFC 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 57, 190, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 57, 190, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
  pointer-events: none;
}

.hero-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-sun {
  position: absolute;
  right: -160px;
  top: -200px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, #FFF3C2 0%, #FEC701 26%, rgba(255, 155, 2, 0.5) 44%, rgba(255, 155, 2, 0) 70%);
  opacity: 0.55;
  animation: sunBreath 9s ease-in-out infinite;
}

.hero-ring {
  position: absolute;
  right: calc(-160px + 320px);
  top: calc(-200px + 320px);
  border-radius: 50%;
  border: 1.5px dashed rgba(0, 57, 190, 0.12);
  transform: translate(50%, -50%);
}

.hero-ring-1 { width: 820px; height: 820px; animation: spinSlow 90s linear infinite; }
.hero-ring-2 { width: 1060px; height: 1060px; border-color: rgba(254, 160, 2, 0.18); animation: spinSlow 120s linear infinite reverse; }
.hero-ring-3 { width: 1320px; height: 1320px; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 3.5rem;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1.7rem 0.55rem 0.6rem;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#ffffff, #FFFBEF) padding-box,
    linear-gradient(90deg, #FEC701, #FE6306, #1E5BFF, #FEC701) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 10px 26px rgba(254, 120, 6, 0.18), var(--sh-1);
  font-family: "Poppins", "Sora", sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  animation: pillBorder 6s linear infinite;
}

/* soft light sweeping across the welcome badge */
.pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-20deg);
  animation: pillShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

.pill-hi {
  padding: 0.2rem 0.85rem;
  border-radius: 999px;
  background: var(--grad-sun);
  box-shadow: 0 4px 10px rgba(254, 120, 6, 0.3);
  font-family: "Poppins", "Hind", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}

.pill-text b {
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pill-wave {
  display: inline-block;
  font-size: 1.35rem;
  transform-origin: 70% 75%;
  animation: pillWave 2.6s ease-in-out infinite;
}

@keyframes pillBorder {
  to { background-position: 0 0, 300% 0; }
}

@keyframes pillShine {
  0%, 55% { left: -40%; }
  100% { left: 130%; }
}

@keyframes pillWave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-10deg); }
}

.pill-sun {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad-sun);
  box-shadow: 0 0 0 0 rgba(254, 199, 1, 0.55);
  animation: pulseRing 2.4s ease-out infinite;
}

.hero h1 {
  margin: 1.2rem 0 1.3rem;
  font-family: "Poppins", "Sora", system-ui, sans-serif;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.13;
  text-wrap: balance;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.hl {
  color: var(--blue);
}

.hero-sub {
  max-width: 560px;
  margin-bottom: 2rem;
  font-size: 1.12rem;
  color: var(--text);
}

.hero-sub strong {
  color: var(--blue);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 600px;
  padding: 1.1rem 1.2rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.stat {
  padding: 0 0.9rem;
}

.stat + .stat {
  border-left: 1px solid var(--line);
}

.stat dt {
  font-family: "Sora", sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--blue);
}

.stat dd {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* story in a framed card with floating badges */
.hero-visual {
  position: relative;
  padding: 1.5rem 0;
}

.story-frame {
  position: relative;
  padding: 10px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 40px 80px rgba(0, 42, 143, 0.22), 0 4px 14px rgba(0, 42, 143, 0.1);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.6s ease;
}

.story-frame:hover {
  transform: none;
}

.story-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 10px;
}

.story-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5F57;
}

.story-bar i:nth-child(2) { background: #FEBC2E; }
.story-bar i:nth-child(3) { background: #28C840; }

.story-bar span {
  margin-left: 0.5rem;
  font-family: "Hind", "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.float-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.95rem 0.6rem 0.6rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: var(--sh-2);
  animation: floatY 6s ease-in-out infinite;
}

.float-badge strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.2;
}

.float-badge small {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}

.badge-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad-sun);
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-weight: 800;
  flex: none;
}

.badge-ico-sun {
  background: #FFF2D0;
  color: var(--sun-deep);
  font-size: 1.15rem;
}

.badge-1 { left: -9%; bottom: 20%; }
.badge-3 { right: 10%; bottom: -4%; animation-delay: 3s; }

.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 80px;
  z-index: 2;
}

/* ---------- Brands ---------- */
.brands {
  padding: 1.5rem 0 1.5rem;
}

.brands-title {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  list-style: none;
}

.brand-grid li {
  display: grid;
  place-items: center;
  height: 96px;
  padding: 0.9rem 1.2rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.brand-grid li:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}

.brand-logo {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---------- KAPSOLAR WindLock: warranty certificate ---------- */
.windlock {
  padding: 2.5rem 0 1.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #F4F9FE 100%);
}

.wl-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 1.6rem;
}

/* two separate cards side by side, with a clear gap between them */
.wl-copy {
  position: relative;
  padding: 3rem 3rem 3rem 3.2rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

/* sun accent bar on the top edge of the text card */
.wl-copy::before {
  content: "";
  position: absolute;
  left: 3.2rem;
  top: -1px;
  width: 96px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background: var(--grad-sun);
}

.wl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.15rem 0.4rem 0.4rem;
  background: #EEF4FF;
  border: 1px solid rgba(0, 57, 190, 0.15);
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.wl-chip-ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-sun);
  color: var(--navy);
}

.wl-chip-ico svg {
  width: 18px;
  height: 18px;
}

/* the same badge sitting on the storm picture */
.wl-chip-float {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
  font-size: 1.05rem;
}

.wl-chip-float .wl-chip-ico {
  animation: lockClick 2.8s ease-in-out infinite;
}

.wl-copy h2 {
  margin: 1rem 0 0.2rem;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em;
}

.wl-grad {
  display: block;
  background: linear-gradient(90deg, #0039BE, #1E5BFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wl-hindi {
  margin: 1.2rem 0 1.1rem;
  padding: 0.65rem 1rem 0.65rem 1.1rem;
  border-left: 5px solid;
  border-image: linear-gradient(180deg, #FEC701, #FE6306) 1;
  background: linear-gradient(90deg, #FFF5DF 0%, rgba(255, 245, 223, 0) 100%);
  font-family: "Poppins", "Hind", "Noto Sans Devanagari", sans-serif;
  font-size: clamp(1.12rem, 1.7vw, 1.38rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
}

.wl-hindi strong {
  font-weight: 700;
  color: var(--sun-text);
}

.wl-text {
  max-width: 560px;
  font-size: 1rem;
  color: var(--text);
}

.wl-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin: 1.5rem 0 1.8rem;
  list-style: none;
}

.wl-specs li {
  display: grid;
  gap: 0.1rem;
  padding: 1rem;
  background: var(--ice-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wl-specs li:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-1);
}

.wl-spec-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  background: var(--grad-blue);
  color: #ffffff;
}

.wl-specs li:first-child .wl-spec-ico {
  background: var(--grad-sun);
  color: var(--navy);
}

.wl-spec-ico svg {
  width: 20px;
  height: 20px;
}

.wl-specs strong {
  font-family: "Sora", sans-serif;
  font-size: 0.98rem;
  color: var(--navy);
}

.wl-specs small {
  font-size: 0.8rem;
  color: var(--muted);
}

.wl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* right card: storm scene + seal */
.wl-visual {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  background:
    radial-gradient(420px 260px at 30% 10%, rgba(140, 160, 210, 0.25), transparent 70%),
    linear-gradient(180deg, #0D1530 0%, #1E2C55 45%, #34477A 100%);
}

.wl-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.wl-rain {
  animation: wlRain 0.6s linear infinite;
}

/* lightning lights up the whole sky, not just the drawing */
.wl-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #DDE6FF;
  opacity: 0;
  pointer-events: none;
  animation: wlFlash 5s linear infinite;
}

.wl-bolt {
  opacity: 0;
  animation: wlBolt 5s linear infinite;
}

.wl-dust {
  animation: wlDust 2.4s linear infinite;
}

.stm-leaf-3 {
  animation-duration: 2.7s;
  animation-delay: 0.6s;
}

.wl-seal {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 150px;
  height: 150px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}

.wl-seal-ring {
  width: 100%;
  height: 100%;
  animation: spinSlow 20s linear infinite;
}

.wl-seal-core {
  position: absolute;
  inset: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-sun);
  box-shadow: 0 0 0 4px #0E0F3A, 0 0 0 7px rgba(254, 199, 1, 0.45);
  color: var(--navy);
  font-family: "Sora", sans-serif;
}

.wl-seal-num {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}

.wl-seal-yr {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

@keyframes wlRain {
  from { transform: translate(8px, -34px); }
  to { transform: translate(-8px, 34px); }
}

@keyframes wlFlash {
  0%, 70%, 76%, 80%, 100% { opacity: 0; }
  72%, 78% { opacity: 0.55; }
}

@keyframes wlBolt {
  0%, 69%, 82%, 100% { opacity: 0; }
  71%, 79% { opacity: 1; }
}

@keyframes wlDust {
  from { transform: translate(-40px, 0); opacity: 0; }
  20% { opacity: 0.6; }
  to { transform: translate(560px, -60px); opacity: 0; }
}

.stm-wind path {
  stroke-dasharray: 60 30;
  animation: stmWind 1.6s linear infinite;
}

.stm-wind path:nth-child(2) { animation-duration: 2.2s; }
.stm-wind path:nth-child(3) { animation-duration: 1.9s; }

.stm-clouds {
  animation: stmDrift 6s ease-in-out infinite;
}

.stm-bolt {
  animation: stmBolt 4s ease-in-out infinite;
}

.stm-leaf {
  animation: stmLeaf 3.2s linear infinite;
}

.stm-leaf-2 {
  animation-duration: 4.1s;
  animation-delay: 1.3s;
}

.stm-glint {
  animation: stmGlint 3.5s ease-in-out infinite;
}

@keyframes stmWind {
  to { stroke-dashoffset: -90; }
}

@keyframes stmDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

@keyframes stmBolt {
  0%, 82%, 100% { opacity: 0; }
  85%, 92% { opacity: 1; }
}

@keyframes stmLeaf {
  0% { transform: translate(-30px, 140px) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(560px, 90px) rotate(720deg); opacity: 0; }
}

@keyframes stmGlint {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.3; }
}

/* 5X list: promise 02 is the highlighted one */
.promise-item.promise-star {
  grid-template-columns: auto 1fr 170px;
  align-items: center;
  background: #ffffff;
  border: 2px solid var(--sun);
  box-shadow: 0 0 0 6px rgba(254, 199, 1, 0.22), 0 24px 50px rgba(0, 20, 80, 0.35);
  transform: scale(1.03);
}

.promise-item.promise-star:hover {
  transform: scale(1.03) translateX(-6px);
}

.promise-item.promise-star h3 { color: var(--navy); }
.promise-item.promise-star strong { color: var(--sun-text); font-size: 1rem; }
.promise-item.promise-star p { color: var(--text); }

.promise-item.promise-star .p-extra {
  margin-top: 0.45rem;
  padding: 0.4rem 0.75rem;
  white-space: nowrap;
  font-size: 0.86rem;
  border-radius: 10px;
  background: #FFF4DE;
  font-weight: 700;
  color: var(--navy);
}

.promise-star .p-num {
  align-self: start;
  margin-top: 0.2rem;
}

.p-photo {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0, 20, 80, 0.2);
}

.p-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  padding: 0.22rem 0.7rem 0.22rem 0.35rem;
  border-radius: 999px;
  background: var(--grad-sun);
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* card 02 picture: storm blows a panel off the roof */
svg.p-photo {
  display: block;
  overflow: hidden;
}

.ps-fly {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: psFly 3.6s ease-in-out infinite;
}

@keyframes psFly {
  0% { transform: translate(248px, 192px) rotate(0deg); opacity: 1; }
  65% { transform: translate(296px, 128px) rotate(30deg); opacity: 1; }
  100% { transform: translate(350px, 92px) rotate(56deg); opacity: 0; }
}

.ps-trail {
  animation: stmWind 1.2s linear infinite;
}

.ps-wind path {
  stroke-dasharray: 50 26;
  animation: stmWind 1.4s linear infinite;
}

.ps-rain {
  animation: psRain 0.7s linear infinite;
}

@keyframes psRain {
  from { transform: translateY(-12px); }
  to { transform: translateY(12px); }
}

.ps-shield {
  transform-box: fill-box;
  transform-origin: center;
  animation: stmGlintPulse 2.4s ease-in-out infinite;
}

@keyframes stmGlintPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* WindLock tag: a padlock that snaps shut on a loop */
.p-lock {
  animation: lockClick 2.8s ease-in-out infinite;
}

.lock-ico {
  width: 22px;
  height: 22px;
  padding: 2px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  overflow: visible;
}

.lock-shackle {
  transform-box: view-box;
  transform-origin: 16.5px 11px;
  animation: lockShackle 2.8s ease-in-out infinite;
}

@keyframes lockShackle {
  0%, 18% { transform: translateY(-3.5px) rotate(28deg); }
  34%, 100% { transform: none; }
}

@keyframes lockClick {
  0%, 30% { transform: none; }
  36% { transform: scale(1.08) rotate(-3deg); }
  42% { transform: scale(1.04) rotate(2deg); }
  50%, 100% { transform: none; }
}

/* ---------- Sections ---------- */
.section {
  padding: 4.5rem 0;
}

.section-ice {
  background: linear-gradient(180deg, #F5FBFF 0%, #EAF6FD 100%);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}

/* glowing sun dot at the start of every section label */
.kicker::before {
  content: "";
  flex: none;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF3C2, #FEC701 45%, #FE6306);
  box-shadow: 0 0 0 0 rgba(254, 199, 1, 0.55);
  animation: pulseRing 2.4s ease-out infinite;
}

.kicker-light {
  color: #FFD66B;
}

/* section labels: same size and colour in every section
   (doubled class so paragraph rules like .section-head p do not override them) */
.kicker.kicker {
  gap: 0.65rem;
  padding: 0.55rem 1.35rem 0.55rem 0.8rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #ffffff, #EEF4FF) padding-box,
    linear-gradient(90deg, #FEC701, #FE6306 45%, #1E5BFF) border-box;
  box-shadow: 0 10px 24px rgba(0, 57, 190, 0.12), 0 2px 6px rgba(254, 120, 6, 0.12);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.2;
  color: var(--blue);
}

/* on the dark blue sections: deep navy pill with yellow text */
.kicker.kicker-light {
  background:
    linear-gradient(180deg, #13245E, #0B1647) padding-box,
    linear-gradient(90deg, #FEC701, #FE6306) border-box;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  color: #FFD66B;
}

.section-head {
  max-width: 900px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.section-head h2,
.about-text h2,
.comp-text h2,
.faq-intro h2,
.fb-intro h2 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.8rem;
}

.section-head p {
  font-size: 1.06rem;
  color: var(--muted);
}

/* ---------- 5X Power Promise ---------- */
.promise-section {
  padding: 3.8rem 0;
  background:
    radial-gradient(800px 420px at 10% 0%, rgba(111, 230, 252, 0.3), transparent 60%),
    radial-gradient(700px 520px at 100% 100%, rgba(254, 160, 2, 0.28), transparent 60%),
    var(--grad-blue);
  color: #ffffff;
}

.promise-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 4rem;
}

.promise-intro {
  position: sticky;
  top: 110px;
  align-self: center;
}

.promise-intro h2 {
  color: #ffffff;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.035em;
}

.big-5x {
  display: inline-block;
  font-size: 1.55em;
  line-height: 1;
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promise-intro p {
  margin: 1rem 0 2rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 420px;
}

.promise-list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
}

.promise-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
  padding: 0.9rem 1.3rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.promise-item:hover {
  background: #ffffff;
  transform: translateX(-6px);
  box-shadow: 0 20px 44px rgba(0, 20, 80, 0.3);
}

.p-num {
  font-family: "Sora", sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.promise-item h3 {
  color: #ffffff;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.promise-item strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.92rem;
  color: #FFD66B;
  transition: color 0.3s ease;
}

.promise-item p {
  margin-top: 0.15rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

.promise-item:hover h3 { color: var(--navy); }
.promise-item:hover strong { color: var(--sun-text); }
.promise-item:hover p { color: var(--text); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 4rem;
}

.lead {
  font-size: 1.12rem;
  color: var(--ink);
}

.about-text p + p {
  margin-top: 1rem;
}

.about-visual {
  display: grid;
  gap: 1.2rem;
}

.about-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  aspect-ratio: 21 / 9;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.about-photo:hover img {
  transform: scale(1.04);
}

.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 46, 0) 40%, rgba(6, 16, 46, 0.85) 100%);
  pointer-events: none;
}

.about-photo figcaption {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.3rem;
  z-index: 1;
  color: #ffffff;
}

.ap-tag {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--grad-sun);
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-photo figcaption strong {
  display: block;
  margin-top: 0.55rem;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
}



.services {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.8rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}



.services-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--sun), var(--sun-deep), transparent) 1;
}

.services-count {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--ice);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
}



.services-head h3 {
  font-size: 1.35rem;
}

.service-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6rem;
  list-style: none;
}

.service-grid li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.service-grid li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.service-grid li:hover {
  transform: translateX(4px);
  color: var(--blue);
}

.s-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--grad-blue);
  color: #ffffff;
}

.service-grid li:nth-child(4n + 2) .s-ico,
.service-grid li:nth-child(4n + 3) .s-ico {
  background: var(--grad-sun);
  color: var(--navy);
}

.s-ico svg {
  width: 18px;
  height: 18px;
}

/* ---------- Benefits bento ---------- */
.bento {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 1rem;
}

.bento-card {
  position: relative;
  overflow: hidden;
  padding: 1.3rem 1.5rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.bento-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--sh-2);
}

.b-ico {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--grad-blue);
  color: #ffffff;
}

.b-ico svg {
  width: 24px;
  height: 24px;
}

.bento-card h3 {
  margin: 0.75rem 0 0.3rem;
  font-size: 1.15rem;
}

.bento-card p {
  font-size: 0.95rem;
  color: var(--muted);
}

.bento-hero {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(0, 42, 143, 0) 0%, rgba(0, 42, 143, 0.15) 28%, rgba(0, 57, 190, 0.88) 58%, #002A8F 100%),
    url("images/solar-roof-sky.webp") center top / cover no-repeat;
  border: 0;
}

.bento-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.25);
}

.bento-hero .b-ico {
  background: var(--grad-sun);
  color: var(--navy);
}

.bento-hero h3 {
  color: #ffffff;
}

.bento-hero p {
  color: rgba(255, 255, 255, 0.85);
}

.bento-card .bento-big {
  margin: auto 0 0.4rem;
  padding-top: 1.4rem;
  font-family: "Sora", sans-serif;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bento-sun {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1.2rem;
  background: var(--grad-sun);
  border: 0;
}

.bento-sun .b-ico {
  background: rgba(255, 255, 255, 0.6);
  color: var(--navy);
}

.bento-sun h3 {
  margin: 0;
  font-size: 1.35rem;
}

.bento-sun p {
  color: rgba(14, 15, 58, 0.82);
  font-size: 1.02rem;
  font-weight: 600;
}

.ticks {
  display: grid;
  gap: 0.6rem;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.95rem;
  color: var(--text);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--grad-sun);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.2em + 4px);
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}

.ticks-lg li {
  font-size: 1rem;
  color: var(--ink);
}

/* ---------- Capacity calculator ---------- */
.calc {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  overflow: hidden;
  background: #ffffff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

.calc-input {
  position: relative;
  overflow: hidden;
  padding: 2rem 2.2rem;
  background:
    radial-gradient(360px 240px at 100% 0%, rgba(254, 199, 1, 0.3), transparent 70%),
    var(--grad-blue);
  color: #ffffff;
}

.calc-input label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.calc-input output {
  display: block;
  margin: 0.2rem 0 1rem;
  font-family: "Sora", sans-serif;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #ffffff;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--sun-deep));
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--sun-deep);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--sun-deep);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.calc-scale {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0 1.2rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
}

.calc-result {
  margin-bottom: 1.2rem;
  padding: 0.9rem 1.2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
}

.calc-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.calc-result strong {
  display: block;
  margin-top: 0.2rem;
  font-family: "Sora", sans-serif;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--sun);
}

.calc-table {
  padding: 1.6rem 2.2rem;
  align-self: center;
}

.capacity-table {
  width: 100%;
  border-collapse: collapse;
}

.capacity-table th {
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--line);
  text-align: left;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.capacity-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--ink);
}

.capacity-table td:last-child {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--blue);
}

.capacity-table tbody tr {
  transition: background 0.2s ease;
}

.capacity-table tbody tr:hover {
  background: var(--ice-2);
}

.capacity-table .row-highlight td {
  background: #FFF4DE;
  border-bottom: 0;
}

.capacity-table .row-highlight td:last-child {
  color: var(--sun-text);
}

/* ---------- Components orbit ---------- */
.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
}

.orbit {
  --R: 196px;
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  margin: 0 auto;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px dashed rgba(0, 57, 190, 0.18);
  animation: spinSlow 80s linear infinite;
}

.orbit::after {
  inset: 26%;
  border-color: rgba(254, 160, 2, 0.35);
  animation-direction: reverse;
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(30, 91, 255, 0.45), rgba(0, 42, 143, 0.75)),
    url("images/solar-cells.webp") center / cover no-repeat;
  color: #ffffff;
  box-shadow: 0 24px 50px rgba(0, 42, 143, 0.35), inset 0 0 0 8px rgba(255, 255, 255, 0.12);
  text-align: center;
}

.orbit-sun {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--grad-sun);
  box-shadow: 0 0 0 8px rgba(254, 199, 1, 0.22);
  margin-bottom: 0.3rem;
}

.orbit-core strong {
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.orbit-core small {
  font-size: 0.78rem;
  opacity: 0.8;
}

.orbit-items {
  list-style: none;
}

.orbit-items li {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 128px;
  padding: 0.45rem 0.8rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: var(--navy);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 40deg)) translateY(calc(var(--R) * -1)) rotate(calc(var(--i) * -40deg));
}

.orbit-items li:nth-child(odd) {
  border-color: rgba(254, 160, 2, 0.55);
}

/* ---------- Process journey ---------- */
.journey-photo {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  aspect-ratio: 21 / 7;
}

.journey-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 42, 143, 0.75) 0%, rgba(0, 42, 143, 0.15) 55%, transparent 100%);
}

.journey-photo figcaption {
  position: absolute;
  left: 2rem;
  bottom: 1.8rem;
  z-index: 1;
  max-width: 340px;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}

.journey {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  list-style: none;
}

.journey li {
  position: relative;
  padding: 1.5rem 1.5rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.journey li:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
}

.journey li:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 2.6rem;
  right: -1.4rem;
  width: 1.4rem;
  border-top: 2px dashed rgba(0, 57, 190, 0.35);
}

.j-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--grad-sun);
  color: var(--navy);
  font-family: "Sora", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: var(--sh-sun);
}

.journey h3 {
  margin-bottom: 0.3rem;
  font-size: 1.06rem;
}

.journey p {
  font-size: 0.93rem;
  color: var(--muted);
}

.journey li:last-child {
  background: var(--grad-blue);
  border: 0;
}

.journey li:last-child h3 {
  color: #ffffff;
}

.journey li:last-child p {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Maintenance ---------- */
.care {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 2.8rem 3.2rem;
  border-radius: var(--r-xl);
  background:
    radial-gradient(420px 300px at 0% 100%, rgba(111, 230, 252, 0.3), transparent 70%),
    var(--grad-blue);
  color: #ffffff;
}

.care::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -110px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 199, 1, 0.55), rgba(254, 199, 1, 0) 70%);
}

.care-text {
  position: relative;
}

.care-text h2 {
  color: #ffffff;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  margin-bottom: 0.7rem;
}

.care-text p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.06rem;
}

.care-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  margin-top: 1.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 18px 40px rgba(0, 20, 80, 0.35);
}

.care-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.care-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.2rem;
  background: #ffffff;
  border-radius: 16px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 20, 80, 0.18);
  transition: transform 0.25s ease;
}

.care-list li:hover {
  transform: translateX(6px);
}

.care-list span {
  min-width: 2rem;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  color: var(--sun-deep);
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
  gap: 4rem;
}

.faq-intro {
  position: sticky;
  top: 120px;
}

.faq-help {
  margin-top: 1.8rem;
  padding: 1.5rem;
  display: grid;
  gap: 0.7rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}

.faq-help p {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  color: var(--navy);
}

.faq-call,
.faq-wa {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.faq-call {
  background: var(--grad-sun);
  color: var(--navy);
}

.faq-wa {
  background: #E8F9EE;
  color: #128C4A;
}

.faq-call:hover,
.faq-wa:hover {
  transform: translateY(-2px);
}

.faq-list {
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item[open] {
  border-color: rgba(254, 140, 2, 0.5);
  box-shadow: var(--sh-2);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  list-style: none;
  cursor: pointer;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  background: var(--grad-sun);
  color: var(--navy);
}

.faq-item p {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
}

/* ---------- Feedback ---------- */
.fb-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: 3.5rem;
}

.fb-intro > p {
  font-size: 1.06rem;
  color: var(--muted);
}

.fb-contacts {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
  list-style: none;
}

.fb-contacts a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--ice-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.fb-contacts a:hover {
  border-color: rgba(0, 57, 190, 0.35);
  transform: translateX(4px);
}

.fb-card {
  padding: 2rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

.feedback-form {
  display: grid;
  gap: 1rem;
}

.fb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--navy);
}

.form-group .req {
  color: var(--sun-deep);
}

.form-group .opt {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #FBFDFF;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2366708C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #9AA5BA;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 57, 190, 0.12);
}

.form-group textarea {
  resize: vertical;
}

.feedback-form .btn,
.survey-form .btn {
  width: 100%;
  margin-top: 0.3rem;
}

.form-status {
  min-height: 1.2em;
  font-size: 0.9rem;
}

.form-status.success { color: #15803D; }
.form-status.error { color: #DC2626; }

/* ---------- CTA ---------- */
.cta-wrap {
  padding: 1rem 0 6.5rem;
}

.cta {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: center;
  gap: 2.5rem;
  padding: 3.4rem 3.2rem;
  border-radius: var(--r-xl);
  background: var(--grad-sun);
  box-shadow: 0 30px 60px rgba(254, 120, 6, 0.28);
  color: var(--navy);
}

.cta-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-rings i {
  position: absolute;
  right: -140px;
  top: -140px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.cta-rings i:nth-child(1) { width: 300px; height: 300px; right: -90px; top: -90px; }
.cta-rings i:nth-child(2) { width: 460px; height: 460px; right: -170px; top: -170px; }
.cta-rings i:nth-child(3) { width: 620px; height: 620px; right: -250px; top: -250px; }

.cta-copy {
  position: relative;
}

.cta-tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}

.cta h2 {
  margin: 0.6rem 0 0.9rem;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em;
}

.cta-copy p {
  color: rgba(14, 15, 58, 0.8);
  font-size: 1.05rem;
}

.cta .cta-strong {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--navy);
}

.cta-actions {
  position: relative;
  display: grid;
  gap: 0.8rem;
}

.cta-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cta-link:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.cta-link .contact-icon {
  width: 20px;
  height: 20px;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding-top: 4rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    var(--navy-2);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  color: #A9B3D1;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-sun);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-brand .logo-img {
  height: 40px;
  width: auto;
}

.footer-brand p {
  max-width: 300px;
  margin: 1rem 0 1.4rem;
  font-size: 0.95rem;
}

.footer-col h4 {
  margin-bottom: 1.1rem;
  font-size: 1rem;
  color: #ffffff;
}

.footer-links,
.footer-contact {
  display: grid;
  gap: 0.65rem;
  list-style: none;
}

.footer-links a,
.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #A9B3D1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--sun);
}

.footer-contact .contact-icon {
  width: 18px;
  height: 18px;
  color: var(--sun);
  flex: none;
}

.footer-legal summary {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: #DDE3F5;
}

.footer-legal summary::-webkit-details-marker {
  display: none;
}

.footer-legal summary::after {
  content: "+";
  color: var(--sun);
  transition: transform 0.2s ease;
}

.footer-legal[open] summary::after {
  transform: rotate(45deg);
}

.footer-legal p {
  margin: 0.2rem 0 0.8rem;
  font-size: 0.84rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.2rem 0;
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 12, 40, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: min(480px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal {
  transform: none;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(254, 199, 1, 0.35), transparent 70%),
    var(--grad-blue);
  color: #ffffff;
}

.modal-head h3 {
  color: #ffffff;
  font-size: 1.25rem;
}

.modal-sub {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.modal-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  background: #ffffff;
  color: var(--navy);
}

.form-body {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1.6rem 1.7rem;
}

.modal-promo {
  width: min(460px, 100%);
}

.promo-head {
  position: relative;
  padding: 1.8rem 2.4rem 1.4rem;
  text-align: center;
  background:
    radial-gradient(300px 170px at 85% 0%, rgba(254, 160, 2, 0.4), transparent 70%),
    linear-gradient(160deg, #0B1240, #0A2A8F);
}

.promo-logo {
  width: 200px;
  height: auto;
  margin: 0 auto;
}

.promo-tagline {
  margin-top: 0.7rem;
  font-family: "Sora", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD66B;
}

.promo-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.promo-body {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 1.8rem 1.8rem 2rem;
  text-align: center;
}

.promo-body h3 {
  font-size: 1.45rem;
}

.promo-sub {
  font-size: 0.95rem;
  color: var(--muted);
}

.promo-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.3rem;
  background: var(--ice);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  text-align: left;
}

.promo-phone-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--grad-sun);
  color: var(--navy);
}

.promo-phone-icon svg {
  width: 22px;
  height: 22px;
}

.promo-phone-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.promo-phone-num {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
}

.promo-survey-btn {
  width: 100%;
}

/* ---------- WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 900;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
  text-decoration: none;
}

.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pulseRingGreen 2.4s ease-out infinite;
}

.wa-float svg {
  width: 30px;
  height: 30px;
}

.wa-float-tip {
  position: absolute;
  right: 70px;
  padding: 0.4rem 0.8rem;
  background: var(--navy);
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.wa-float:hover .wa-float-tip {
  opacity: 1;
  transform: none;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Keyframes ---------- */
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

.hero-ring-1,
.hero-ring-2 {
  animation-name: ringSpin;
}

@keyframes ringSpin {
  from { transform: translate(50%, -50%) rotate(0deg); }
  to { transform: translate(50%, -50%) rotate(360deg); }
}

@keyframes sunBreath {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.05); opacity: 0.68; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(254, 199, 1, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(254, 199, 1, 0); }
}

@keyframes pulseRingGreen {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* ---------- Responsive ---------- */
/* ---------- Stay updated at every step ---------- */
.updates-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.updates-copy h2 {
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.text-grad-sun {
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.updates-copy > p {
  font-size: 1.06rem;
  color: var(--text);
  margin-bottom: 0.9rem;
}

.updates-copy strong {
  color: var(--ink);
}

.upd-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.3rem 0 1.6rem;
}

.upd-chan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffffff;
  box-shadow: var(--sh-1);
}

.upd-chan svg {
  width: 20px;
  height: 20px;
}

.upd-wa { background: #25D366; }
.upd-mail { background: var(--grad-blue); }

/* six stages on one connected line */
.upd-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.upd-track::before,
.upd-track::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 17px;
  height: 4px;
  border-radius: 4px;
  background: #D6E4F5;
}

.upd-track::after {
  right: auto;
  width: 0;
  background: var(--grad-sun);
  animation: updFill 9s ease-in-out infinite;
}

.upd-track li {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}

.upd-dot {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: var(--grad-blue);
  font-family: "Sora", sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 57, 190, 0.25);
}

.upd-track li:last-child .upd-dot {
  background: var(--grad-sun);
  color: var(--navy);
  box-shadow: var(--sh-sun);
}

.upd-promise {
  display: inline-block;
  padding: 0.9rem 1.3rem;
  border-left: 5px solid var(--sun-deep);
  border-radius: 0 var(--r) var(--r) 0;
  background: #ffffff;
  font-family: "Poppins", "Sora", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--blue-800);
  box-shadow: var(--sh-1);
}

/* phone with WhatsApp-style updates arriving one by one */
.upd-phone-wrap {
  position: relative;
  width: min(340px, 100%);
  margin: 0 auto;
}

.upd-phone {
  overflow: hidden;
  border: 10px solid var(--navy);
  border-radius: 40px;
  background: #ECE5DD;
  box-shadow: var(--sh-2), 0 30px 60px rgba(0, 42, 143, 0.2);
}

.upd-phone-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1rem 0.8rem;
  background: #075E54;
  color: #ffffff;
}

.upd-phone-top b {
  display: block;
  font-size: 0.95rem;
}

.upd-phone-top small {
  font-size: 0.72rem;
  opacity: 0.8;
}

.upd-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
}

.upd-avatar img {
  width: 34px;
  height: auto;
}

.upd-chat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 430px;
  padding: 0.9rem 0.8rem 1.1rem;
}

.upd-msg {
  position: relative;
  max-width: 88%;
  margin: 0;
  padding: 0.5rem 0.7rem 1.1rem;
  border-radius: 4px 12px 12px 12px;
  background: #ffffff;
  font-size: 0.8rem;
  line-height: 1.35;
  color: #303030;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  animation: 9s ease-out infinite both;
}

.upd-msg:nth-child(1) { animation-name: updMsg1; }
.upd-msg:nth-child(2) { animation-name: updMsg2; }
.upd-msg:nth-child(3) { animation-name: updMsg3; }
.upd-msg:nth-child(4) { animation-name: updMsg4; }
.upd-msg:nth-child(5) { animation-name: updMsg5; }
.upd-msg:nth-child(6) { animation-name: updMsg6;
}

.upd-msg b {
  display: block;
  color: #075E54;
}

.upd-msg i {
  position: absolute;
  right: 0.55rem;
  bottom: 0.25rem;
  font-size: 0.62rem;
  font-style: normal;
  color: #34B7F1;
}

.upd-msg-done {
  background: #DCF8C6;
}

.upd-badge {
  position: absolute;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  box-shadow: var(--sh-2);
  animation: floatY 6s ease-in-out infinite;
}

.upd-badge-wa {
  left: -10%;
  top: -14px;
  background: #25D366;
}

.upd-badge-mail {
  right: -12%;
  bottom: 18%;
  background: var(--grad-blue);
  animation-delay: 3s;
}

@keyframes updMsg1 {
  0%, 2.0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  6.0%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updMsg2 {
  0%, 14.2% { opacity: 0; transform: translateY(12px) scale(0.96); }
  18.2%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updMsg3 {
  0%, 26.4% { opacity: 0; transform: translateY(12px) scale(0.96); }
  30.4%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updMsg4 {
  0%, 38.6% { opacity: 0; transform: translateY(12px) scale(0.96); }
  42.6%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updMsg5 {
  0%, 50.8% { opacity: 0; transform: translateY(12px) scale(0.96); }
  54.8%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updMsg6 {
  0%, 63.0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  67.0%, 92% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: none; }
}

@keyframes updFill {
  0%, 2% { width: 0; opacity: 1; }
  67%, 92% { width: 84%; opacity: 1; }
  97%, 100% { width: 84%; opacity: 0; }
}

@media (max-width: 980px) {
  .updates-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 640px) {
  .upd-track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.1rem;
  }

  .upd-track::before,
  .upd-track::after {
    display: none;
  }

  .upd-promise {
    font-size: 1rem;
  }

  .upd-badge-wa { left: 0; }

  .pill {
    gap: 0.45rem;
    padding: 0.42rem 0.9rem 0.42rem 0.45rem;
    font-size: 0.86rem;
  }

  .pill-hi {
    padding: 0.12rem 0.55rem;
    font-size: 0.86rem;
  }

  .pill-sun {
    width: 22px;
    height: 22px;
  }

  .pill-wave {
    font-size: 1.05rem;
  }

  .pill-more {
    display: none;
  }

  .kicker.kicker {
    padding: 0.45rem 1rem 0.45rem 0.65rem;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
  }
  .upd-badge-mail { right: -2%; }
}

@media (prefers-reduced-motion: reduce) {
  .upd-chat .upd-msg:nth-child(n) {
    animation: none;
    opacity: 1;
  }

  .upd-track::after {
    animation: none;
    width: 84%;
  }
}

/* header with the WindLock button: tighten step by step before the phone menu takes over */
@media (max-width: 1520px) {
  .nav-links {
    gap: 1.1rem;
  }
}

@media (max-width: 1220px) {
  .nwl-brand {
    display: none;
  }
}

@media (max-width: 1400px) {
  .nav-links {
    gap: 0.85rem;
  }

  .nav-highlight,
  .nav-btn {
    padding: 0 1rem;
  }
}

@media (max-width: 1140px) {
  .pill {
    gap: 0.6rem;
    padding-right: 1.2rem;
    font-size: 0.95rem;
  }

  .pill-hi {
    font-size: 0.92rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .nav-highlight,
  .nav-btn {
    padding: 0 0.95rem;
    font-size: 0.85rem;
  }
}

/* phone-style menu (☰) from 1120px down, so the header never runs off the screen */
@media (max-width: 1120px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: -4.5%;
    right: -4.5%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 4.5% 1rem;
    background: var(--blue-800);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 30px rgba(0, 20, 80, 0.35);
  }

  .site-header.nav-open .nav-links {
    display: flex;
  }

  .nav-links li:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock) {
    display: block;
    padding: 0.85rem 0.2rem;
  }

  .nav-links a:not(.btn):not(.nav-highlight):not(.nav-windlock)::after {
    display: none;
  }

  .nav-highlight {
    display: block;
    height: auto;
    padding: 0.85rem 0.2rem;
    background: none;
    box-shadow: none;
    color: var(--sun);
  }

  .nav-btn {
    display: flex;
    width: 100%;
    height: 46px;
    margin-top: 0.7rem;
  }

  .nav-links a.nav-windlock {
    display: flex;
    height: 48px;
    margin: 0.6rem 0;
    padding: 0 0.9rem 0 0.4rem;
    font-size: 0.95rem;
  }

  .nav-windlock .nwl-text {
    flex: 1;
  }

  .nav-windlock .nwl-brand,
  .nav-windlock .nwl-tag {
    display: inline;
  }

  /* in the phone menu: no divider above the Contact Us button */
  .nav-links li:has(.nav-btn) {
    border-bottom: 0;
  }
}

@media (max-width: 980px) {
  .hero {
    padding-bottom: 6rem;
  }

  .hero-grid,
  .wl-card,
  .promise-grid,
  .about-grid,
  .comp-grid,
  .faq-grid,
  .fb-grid,
  .care,
  .cta,
  .calc {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  .story-frame {
    transform: none;
  }

  .badge-1 { left: -2%; }

  .promise-intro,
  .faq-intro {
    position: static;
  }

  .bento {
    grid-template-columns: 1fr 1fr;
  }

  .bento-hero {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .journey {
    grid-template-columns: 1fr 1fr;
  }

  .journey li::after {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .care {
    padding: 2.4rem;
  }

  .wl-visual {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .site-header .logo-img {
    height: 32px;
  }

  .section {
    padding: 4.5rem 0;
  }

  .hero h1 {
    font-size: clamp(2rem, 8.6vw, 2.5rem);
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;
  }

  .stat:nth-child(3) {
    border-left: 0;
  }

  .float-badge {
    padding: 0.45rem 0.7rem 0.45rem 0.45rem;
  }

  .float-badge small {
    display: none;
  }

  .badge-ico {
    width: 30px;
    height: 30px;
  }

  .badge-3 {
    display: none;
  }

  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
  }

  .brand-grid li {
    height: 76px;
    padding: 0.6rem;
  }

  .bento,
  .journey,
  .fb-row,
  .service-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .bento-sun {
    grid-template-columns: auto 1fr;
  }

  .bento-sun p {
    grid-column: 1 / -1;
  }

  .journey li:not(:last-child)::after {
    display: block;
    top: auto;
    right: auto;
    left: 2.4rem;
    bottom: -1.4rem;
    width: 0;
    height: 1.4rem;
    border-top: 0;
    border-left: 2px dashed rgba(0, 57, 190, 0.35);
  }

  .orbit {
    aspect-ratio: auto;
    display: grid;
    gap: 1.2rem;
  }

  .orbit::before,
  .orbit::after {
    display: none;
  }

  .orbit-core {
    position: relative;
    left: auto;
    top: auto;
    width: 190px;
    margin: 0 auto;
    transform: none;
  }

  .orbit-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .orbit-items li {
    position: static;
    max-width: none;
    transform: none;
  }

  .calc-input,
  .calc-table {
    padding: 1.8rem 1.4rem;
  }

  .care {
    padding: 2rem 1.4rem;
  }

  .wl-copy {
    padding: 2rem 1.3rem;
  }

  .wl-copy::before {
    left: 1.3rem;
  }

  .wl-specs {
    grid-template-columns: 1fr;
  }

  .wl-seal {
    width: 112px;
    height: 112px;
    top: 16px;
    right: 16px;
  }

  .wl-seal-num {
    font-size: 1.7rem;
  }

  .promise-item.promise-star {
    grid-template-columns: auto 1fr;
  }

  .promise-item.promise-star .p-extra {
    white-space: normal;
  }

  .p-photo {
    grid-column: 1 / -1;
    min-height: 0;
    aspect-ratio: 13 / 10;
  }

  .service-grid li:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }

  .wl-chip-float {
    top: auto;
    bottom: 16px;
    left: 16px;
    font-size: 0.82rem;
  }

  .journey-photo {
    aspect-ratio: 16 / 9;
  }

  .journey-photo figcaption {
    left: 1.2rem;
    bottom: 1.1rem;
    max-width: 220px;
  }

  .cta {
    padding: 2.4rem 1.5rem;
  }

  .fb-card {
    padding: 1.4rem;
  }

  .wa-float-tip {
    display: none;
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Hero: animated solar story (one looping timeline) ---------- */

.solar-story {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 50px rgba(0, 35, 110, 0.25), 0 2px 8px rgba(0, 35, 110, 0.12);
  background: #EAF8FE;
  overflow: hidden;
}

.solar-story * {
  transform-box: view-box;
}

.solar-story [class^="st-"] {
  animation-duration: 24.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.solar-story .st-worldA { animation-name: st-worldA; }
@keyframes st-worldA { 0.000%{opacity:1} 41.935%{opacity:1} 42.984%{opacity:0} 57.661%{opacity:0} 58.710%{opacity:1} 73.387%{opacity:1} 74.435%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-house-a { animation-name: st-house-a; }
@keyframes st-house-a { 0.000%{opacity:0} 64.999%{opacity:0} 69.194%{opacity:1} 73.387%{opacity:1} 77.581%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-beam { animation-name: st-beam; }
@keyframes st-beam { 0.000%{opacity:0} 18.870%{opacity:0} 20.968%{opacity:1} 31.452%{opacity:1} 33.548%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-glow { animation-name: st-glow; }
@keyframes st-glow { 0.000%{opacity:0} 31.451%{opacity:0} 33.024%{opacity:1} 41.935%{opacity:1} 43.508%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-worried { animation-name: st-worried; }
@keyframes st-worried { 0.000%{opacity:1} 16.774%{opacity:1} 17.560%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-sweat { animation-name: st-sweat; }
@keyframes st-sweat { 0.000%{opacity:1} 15.726%{opacity:1} 16.512%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-up { animation-name: st-up; }
@keyframes st-up { 0.000%{opacity:0} 16.774%{opacity:0} 17.560%{opacity:1} 31.452%{opacity:1} 32.238%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-happy { animation-name: st-happy; }
@keyframes st-happy { 0.000%{opacity:0} 31.451%{opacity:0} 32.238%{opacity:1} 41.935%{opacity:1} 42.722%{opacity:0} 57.661%{opacity:0} 58.448%{opacity:1} 100.000%{opacity:1} }

.solar-story .st-smile { animation-name: st-smile; }
@keyframes st-smile { 0.000%{opacity:0} 31.451%{opacity:0} 32.081%{opacity:1} 35.121%{opacity:1} 35.750%{opacity:0} 57.661%{opacity:0} 58.290%{opacity:1} 67.621%{opacity:1} 68.250%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-laugh { animation-name: st-laugh; }
@keyframes st-laugh { 0.000%{opacity:0} 35.120%{opacity:0} 35.750%{opacity:1} 41.935%{opacity:1} 42.565%{opacity:0} 67.620%{opacity:0} 68.250%{opacity:1} 100.000%{opacity:1} }

.solar-story .st-hold { animation-name: st-hold; }
@keyframes st-hold { 0.000%{opacity:1} 31.452%{opacity:1} 32.238%{opacity:0} 57.661%{opacity:0} 58.448%{opacity:1} 73.387%{opacity:1} 74.173%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-bill-high { animation-name: st-bill-high; }
@keyframes st-bill-high { 0.000%{opacity:1} 31.452%{opacity:1} 32.238%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-bill-zero { animation-name: st-bill-zero; }
@keyframes st-bill-zero { 0.000%{opacity:0} 57.661%{opacity:0} 58.448%{opacity:1} 73.387%{opacity:1} 74.173%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-thumbs { animation-name: st-thumbs; }
@keyframes st-thumbs { 0.000%{opacity:0} 31.451%{opacity:0} 32.238%{opacity:1} 41.935%{opacity:1} 42.722%{opacity:0} 73.387%{opacity:0} 74.173%{opacity:1} 100.000%{opacity:1} }

.solar-story .st-sunface { animation-name: st-sunface; }
@keyframes st-sunface { 0.000%{opacity:0} 18.870%{opacity:0} 20.968%{opacity:1} 31.452%{opacity:1} 33.548%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-sparks { animation-name: st-sparks; }
@keyframes st-sparks { 0.000%{opacity:0} 31.451%{opacity:0} 32.500%{opacity:1} 41.935%{opacity:1} 42.984%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-think { animation-name: st-think; }
@keyframes st-think { 0.000%{opacity:0} 33.024%{opacity:0} 34.335%{opacity:1} 41.935%{opacity:1} 43.246%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-worldB { animation-name: st-worldB; }
@keyframes st-worldB { 0.000%{opacity:0} 41.935%{opacity:0} 42.984%{opacity:1} 57.661%{opacity:1} 58.710%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-rays-b { animation-name: st-rays-b; }
@keyframes st-rays-b { 0.000%{opacity:0} 45.604%{opacity:0} 47.177%{opacity:1} 57.661%{opacity:1} 59.234%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-panels-b { animation-name: st-panels-b; }
@keyframes st-panels-b { 0.000%{opacity:0} 44.818%{opacity:0} 45.081%{opacity:1} 57.661%{opacity:1} 57.923%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-lit-b { animation-name: st-lit-b; }
@keyframes st-lit-b { 0.000%{opacity:0} 49.274%{opacity:0} 50.847%{opacity:1} 57.661%{opacity:1} 59.234%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-energy-b { animation-name: st-energy-b; }
@keyframes st-energy-b { 0.000%{opacity:0} 47.177%{opacity:0} 48.750%{opacity:1} 57.661%{opacity:1} 59.234%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-power-b { animation-name: st-power-b; }
@keyframes st-power-b { 0.000%{opacity:0} 49.274%{opacity:0} 50.847%{opacity:1} 57.661%{opacity:1} 59.234%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-worldC { animation-name: st-worldC; }
@keyframes st-worldC { 0.000%{opacity:0} 73.387%{opacity:0} 74.698%{opacity:1} 83.871%{opacity:1} 87.903%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-tm-smile { animation-name: st-tm-smile; }
@keyframes st-tm-smile { 0.000%{opacity:0} 73.387%{opacity:0} 74.016%{opacity:1} 78.105%{opacity:1} 78.734%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-tm-laugh { animation-name: st-tm-laugh; }
@keyframes st-tm-laugh { 0.000%{opacity:0} 78.104%{opacity:0} 78.734%{opacity:1} 100.000%{opacity:1} }

.solar-story .st-logo-c { animation-name: st-logo-c; }
@keyframes st-logo-c { 0.000%{opacity:0} 74.435%{opacity:0} 76.008%{opacity:1} 83.871%{opacity:1} 88.710%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-thanks1 { animation-name: st-thanks1; }
@keyframes st-thanks1 { 0.000%{opacity:0} 76.008%{opacity:0} 77.581%{opacity:1} 83.871%{opacity:1} 88.710%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-thanks2 { animation-name: st-thanks2; }
@keyframes st-thanks2 { 0.000%{opacity:0} 78.629%{opacity:0} 80.202%{opacity:1} 83.871%{opacity:1} 88.710%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-endD { animation-name: st-endD; }
@keyframes st-endD { 0.000%{opacity:0} 83.870%{opacity:0} 86.290%{opacity:1} 100.000%{opacity:1} }

.solar-story .st-camA {
  transform-origin: 0 0;
  animation: st-camA 24.8s ease-in-out infinite;
}
@keyframes st-camA { 0.000%{transform:translate(240px,160px) scale(1) translate(-240px,-452px)} 2.621%{transform:translate(240px,160px) scale(1) translate(-240px,-452px)} 6.815%{transform:translate(240px,160px) scale(1.75) translate(-240px,-562px)} 9.960%{transform:translate(240px,160px) scale(1.75) translate(-240px,-562px)} 14.153%{transform:translate(240px,160px) scale(1.6) translate(-240px,-392px)} 15.726%{transform:translate(240px,160px) scale(1.3) translate(-240px,-400px)} 17.823%{transform:translate(240px,160px) scale(1.3) translate(-240px,-400px)} 29.879%{transform:translate(240px,160px) scale(1) translate(-300px,-150px)} 31.452%{transform:translate(240px,160px) scale(1) translate(-300px,-150px)} 31.556%{transform:translate(240px,160px) scale(1.0) translate(-240px,-428px)} 41.935%{transform:translate(240px,160px) scale(1.0) translate(-240px,-428px)} 57.661%{transform:translate(240px,160px) scale(1.0) translate(-240px,-428px)} 57.766%{transform:translate(240px,160px) scale(1.8) translate(-240px,-562px)} 64.476%{transform:translate(240px,160px) scale(1.8) translate(-240px,-562px)} 72.339%{transform:translate(240px,160px) scale(0.72) translate(-300px,-470px)} 100.000%{transform:translate(240px,160px) scale(0.72) translate(-300px,-470px)} }

.solar-story .st-camB {
  transform-origin: 0 0;
  animation: st-camB 24.8s linear infinite;
}
@keyframes st-camB { 0.000%{transform:translate(240px,160px) scale(1) translate(-240px,-170px)} 41.935%{transform:translate(240px,160px) scale(1) translate(-240px,-170px)} 57.661%{transform:translate(240px,160px) scale(1.05) translate(-240px,-172px)} 100.000%{transform:translate(240px,160px) scale(1.05) translate(-240px,-172px)} }

.solar-story .st-flash {
  animation: st-flash 24.8s linear infinite;
  pointer-events: none;
}
@keyframes st-flash { 0.000%{opacity:0} 31.190%{opacity:0} 31.714%{opacity:0.95} 34.073%{opacity:0} 44.294%{opacity:0} 44.819%{opacity:0.95} 46.653%{opacity:0} 100.000%{opacity:0} }

.solar-story .st-progress {
  transform-origin: 0 0;
  animation: st-progress 24.8s linear infinite;
}
@keyframes st-progress { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }

.solar-story .st-rays {
  animation: spinSlow 30s linear infinite;
}

.solar-story .st-flow {
  animation: st-flow 0.9s linear infinite;
}
@keyframes st-flow { to { stroke-dashoffset: -28; } }

.solar-story .st-glint {
  animation: st-glint 2.2s ease-in-out infinite;
}
@keyframes st-glint { 0%,100%{opacity:0} 50%{opacity:0.45} }

.solar-story .st-on {
  opacity: 1;
}

.solar-story .st-haha {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: st-haha 0.55s ease-in-out infinite;
}
@keyframes st-haha { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.78)} }

.hero-art {
  perspective: none;
}

@media (max-width: 1000px) {
  .solar-story {
    margin: 0 auto;
  }
}

/* story sits inside the hero frame */
.story-frame .solar-story {
  max-width: none;
  border-radius: 18px;
  box-shadow: none;
}

/* ---------- Scroll progress line under the header ---------- */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--grad-sun);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* ---------- Soft wave edges on the light-blue sections ---------- */
.section-ice {
  position: relative;
}

.section-ice::before,
.section-ice::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 46px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.section-ice::before {
  top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V22C1200 54 960 54 720 30S240 4 0 34Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.section-ice::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60H1440V30C1200 4 960 8 720 30S240 58 0 26Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* ---------- Buttons: light sweep on hover ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  left: 130%;
}

/* ---------- Footer: map + directions ---------- */
.footer-map {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-bottom: 3rem;
}

.fm-map {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}

.fm-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.fm-kicker {
  margin-bottom: 0.4rem;
  font-family: "Sora", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFD66B;
}

.fm-info h4 {
  margin-bottom: 0.7rem;
  font-size: 1.4rem;
  color: #ffffff;
}

.fm-address {
  margin-bottom: 0.8rem;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ffffff;
}

.fm-info p {
  max-width: 420px;
  margin-bottom: 1.3rem;
  font-size: 0.95rem;
}

.fm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.fm-call {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.fm-call:hover {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 980px) {
  .footer-map {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

@media (max-width: 640px) {
  .section-ice::before,
  .section-ice::after {
    height: 24px;
  }

  .fm-map iframe {
    height: 250px;
  }
}

/* ---------- Reels mode (computers): every section fills the screen under the header, so the next one never peeks in ---------- */
.reels main > section:not(.hero):not(#brands) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--hdr, 64px));
}

/* the hero and the brand strip together make the first screen */
.reels .hero {
  min-height: calc(100vh - var(--hdr, 64px) - var(--brands-h, 0px));
}

/* green is kept only for savings; warm Hindi colour for the seasonal strip */
:root {
  --save: #16A34A;
  --hindi: #C2410C;
}

/* 4. Seasonal strip above the welcome badge (text and colours picked by month in the page script) */
/* the strip sits centred over the welcome badge */
.hero-badges {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.season-strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0.8rem;
  padding: 0.45rem 1.1rem 0.45rem 0.55rem;
  border-radius: 14px;
  font-family: "Poppins", "Hind", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hindi);
  background: #FFF4E6;
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.18), 0 8px 20px rgba(194, 65, 12, 0.1);
}

.season-strip[hidden] {
  display: none;
}

.season-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffffff;
  font-size: 1.1rem;
}

/* Diwali: a warm glow and a flickering diya */
.season-diwali {
  background: linear-gradient(90deg, #FFF1D6, #FFE2B8);
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.22), 0 0 0 0 rgba(255, 170, 40, 0.5);
  animation: diwaliGlow 2.6s ease-in-out infinite;
}

.season-diwali .season-ico {
  animation: diyaFlicker 1.6s ease-in-out infinite;
}

@keyframes diwaliGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.22), 0 6px 18px rgba(255, 170, 40, 0.25); }
  50% { box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.3), 0 8px 30px rgba(255, 170, 40, 0.55); }
}

@keyframes diyaFlicker {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 170, 40, 0.6)); }
  45% { transform: scale(1.08) rotate(-3deg); filter: drop-shadow(0 0 7px rgba(255, 170, 40, 0.95)); }
  70% { transform: scale(0.97) rotate(2deg); }
}

/* Summer: warm heat */
.season-summer {
  background: linear-gradient(90deg, #FFF0E0, #FFE0C2);
}

/* Monsoon and winter: cool blues */
.season-monsoon,
.season-winter {
  color: var(--blue-800);
  background: linear-gradient(90deg, #EAF4FF, #DCEBFF);
  box-shadow: inset 0 0 0 1px rgba(0, 57, 190, 0.16), 0 8px 20px rgba(0, 57, 190, 0.08);
}

/* Holi: a colourful border */
.season-holi {
  border: 2px solid transparent;
  background:
    linear-gradient(#FFF7F0, #FFF7F0) padding-box,
    linear-gradient(90deg, #EC4899, #F59E0B, #22C55E, #3B82F6, #A855F7) border-box;
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.12);
}

@media (max-width: 640px) {
  .season-strip {
    font-size: 0.86rem;
  }
}

/* ---------- On-Grid / Off-Grid / Hybrid (site colours: blue, navy, sun orange; green only for "yes") ---------- */
.sx-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.sx-on { --c: #1E5BFF; --c2: #0039BE; --tint: #EEF4FF; }
.sx-off { --c: #2E3A8C; --c2: #0B1240; --tint: #EEF0FA; }
.sx-hy { --c: #FF9B02; --c2: #FE6306; --tint: #FFF4E6; }

.sx-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sx-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}

.sx-head {
  position: relative;
  padding: 1.05rem 1.3rem 1rem;
  background: linear-gradient(135deg, var(--c), var(--c2));
  color: #ffffff;
}

.sx-head h3 {
  font-size: 1.2rem;
  color: #ffffff;
}

.sx-head p {
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}

.sx-tag {
  position: absolute;
  right: 1rem;
  top: 1rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: "Sora", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sx-scene {
  display: block;
  width: 100%;
  height: auto;
  padding: 0.5rem 0.6rem 0;
}

.sx-lbl rect {
  fill: var(--c2);
}

.sx-lbl text {
  font-family: "Inter", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  fill: #ffffff;
}

/* energy flowing along the wires */
.sx-flow {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  animation: sxFlow 0.9s linear infinite;
}

.sx-flow-sun { stroke: #F59E0B; }
.sx-flow-grid { stroke: #1E5BFF; }
.sx-flow-batt { stroke: #FE6306; animation-direction: reverse; }

.sx-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: spinSlow 18s linear infinite;
}

.sx-glint {
  animation: stmGlint 3.5s ease-in-out infinite;
}

@keyframes sxFlow {
  to { stroke-dashoffset: -22; }
}

.sx-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 0.4rem 0.8rem 0.9rem;
  padding: 0.6rem 0.4rem;
  list-style: none;
  background: #ffffff;
  border-radius: var(--r);
}

.sx-chips li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink);
}

.sx-chips .sx-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 57, 190, 0.08);
}

/* comparison table */
.sx-compare {
  margin-top: 1.6rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  background: #ffffff;
}

.sx-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.sx-table thead th {
  padding: 0.75rem 1rem;
  font-family: "Sora", sans-serif;
  font-size: 0.95rem;
  text-align: center;
  color: #ffffff;
  background: var(--navy-2);
}

.sx-table thead th:first-child {
  text-align: left;
}

.sx-table thead th.sx-on,
.sx-table thead th.sx-off,
.sx-table thead th.sx-hy {
  background: linear-gradient(135deg, var(--c), var(--c2));
}

.sx-table tbody th,
.sx-table td {
  padding: 0.62rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.sx-table tbody th {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}

.sx-table tbody th .sx-ico {
  display: inline-grid;
  margin-right: 0.55rem;
  vertical-align: -4px;
  color: var(--blue);
}

.sx-table td {
  text-align: center;
  color: var(--text);
}

.sx-table td:nth-child(2) { background: #F6F9FF; }
.sx-table td:nth-child(3) { background: #F6F7FC; }
.sx-table td:nth-child(4) { background: #FFF8EF; }

.sx-yes,
.sx-no {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: -5px;
  color: #ffffff;
}

.sx-yes { background: var(--blue); }
.sx-no { background: #94A3B8; }

.sx-note {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--r);
  background: #EAF2FF;
  font-size: 0.95rem;
  color: var(--ink);
}

.sx-note b {
  color: var(--blue);
}

.sx-note-ico {
  font-size: 1.4rem;
}

@media (max-width: 980px) {
  .sx-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .sx-chips {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.8rem;
  }
}

/* ---------- Green only where it means savings ---------- */
.hero-sub strong,
.stat:first-child dt,
.badge-1 strong {
  color: var(--save);
}

.badge-1 .badge-ico,
.bento-hero .b-ico {
  background: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
  color: #ffffff;
}

.bento-card .bento-big {
  background: linear-gradient(135deg, #BBF7D0 0%, #4ADE80 60%, #22C55E 100%);
  -webkit-background-clip: text;
  background-clip: text;
}