﻿/* =========================================================
   NEXUS â€” SolarSense Pro Page
   Dark mode, futuristic AI-tech, glowing neon aesthetic
   ========================================================= */

body {
  background: #060E18;
  color: var(--pure-white);
  overflow-x: hidden;
}

/* â”€â”€ Animated star/grid background â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(0,229,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 40%, rgba(0,229,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 20%, rgba(57,255,20,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, rgba(0,229,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 30%, rgba(57,255,20,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 80%, rgba(0,229,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(57,255,20,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 75%, rgba(0,229,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 55%, rgba(57,255,20,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 62% 42%, rgba(0,229,255,0.2) 0%, transparent 100%),
    repeating-linear-gradient(0deg,   rgba(0,229,255,0.02) 0, rgba(0,229,255,0.02) 1px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg,  rgba(0,229,255,0.02) 0, rgba(0,229,255,0.02) 1px, transparent 1px, transparent 80px);
  pointer-events: none;
  z-index: 0;
}

.solar-page-content { position: relative; z-index: 1; }

/* â”€â”€ Solar Nav adjustments â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.solar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--neon-cyan);
  margin-bottom: var(--space-md);
}
.solar-label::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--neon-cyan);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--neon-cyan);
}

/* â”€â”€ Hero â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.solar-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.solar-hero-radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 70% at 50% 40%, rgba(57,255,20,0.06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 60%, rgba(0,229,255,0.08), transparent 60%),
    radial-gradient(ellipse 40% 60% at 20% 20%, rgba(10,132,255,0.08), transparent 60%);
  z-index: 0;
}

.solar-hero-content {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + var(--space-4xl)) 0 var(--space-3xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  width: 100%;
}

.solar-hero-text { max-width: 560px; }
.solar-hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
}
.solar-hero-text h1 .glow-text {
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0,229,255,0.4));
}
.solar-hero-text p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--medium-grey);
  margin-bottom: var(--space-2xl);
  max-width: 480px;
}

.solar-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}
.solar-tag {
  padding: 0.3rem 0.9rem;
  background: rgba(0,229,255,0.06);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--neon-cyan);
  letter-spacing: 0.05em;
}

.solar-hero-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Product Image Panel */
.solar-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.solar-product-wrap {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.solar-product-image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(0,229,255,0.15);
  box-shadow:
    0 0 0 1px rgba(0,229,255,0.08),
    0 20px 80px rgba(0,229,255,0.1),
    0 40px 120px rgba(0,0,0,0.6);
  animation: float-product 6s ease-in-out infinite;
}

.solar-product-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

@keyframes float-product {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* Orbital rings */
.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  pointer-events: none;
  animation: orbital-spin linear infinite;
}
.orbital-ring-1 {
  width: 130%; height: 130%;
  top: -15%; left: -15%;
  border-color: rgba(0,229,255,0.08);
  animation-duration: 30s;
}
.orbital-ring-2 {
  width: 150%; height: 150%;
  top: -25%; left: -25%;
  border-color: rgba(57,255,20,0.05);
  animation-duration: 40s;
  animation-direction: reverse;
}
@keyframes orbital-spin { to { transform: rotate(360deg); } }

/* Floating data badges */
.solar-badge {
  position: absolute;
  background: rgba(5,13,26,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: badge-float 4s ease-in-out infinite;
}
.solar-badge-1 { top: 10%; left: -30%; animation-delay: 0s; }
.solar-badge-2 { bottom: 15%; right: -25%; animation-delay: -2s; }
.solar-badge-icon { font-size: 1.1rem; }
.solar-badge-text strong { display: block; color: var(--pure-white); }
.solar-badge-text span { color: var(--neon-cyan); font-size: 0.7rem; }

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* â”€â”€ Features Section â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.solar-features {
  padding: var(--space-5xl) 0;
  position: relative;
}

.solar-features::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(0,229,255,0.3), transparent);
}

.solar-features-header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}

.solar-features-header .section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.solar-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.solar-feature-card {
  background: rgba(10,22,40,0.6);
  border: 1px solid rgba(0,229,255,0.08);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-bounce),
              border-color 0.3s,
              box-shadow 0.3s;
  backdrop-filter: blur(10px);
}

.solar-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.solar-feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0,229,255,0.25);
  box-shadow: 0 20px 60px rgba(0,229,255,0.08), inset 0 0 60px rgba(0,229,255,0.02);
}
.solar-feature-card:hover::before { opacity: 1; }

.solar-feature-icon-wrap {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-bottom: var(--space-lg);
  position: relative;
}

.solar-feature-icon-wrap.cyan {
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.2);
}
.solar-feature-icon-wrap.green {
  background: rgba(57,255,20,0.06);
  border: 1px solid rgba(57,255,20,0.15);
}

.solar-feature-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0,229,255,0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.solar-feature-card:hover .solar-feature-icon-wrap::after { opacity: 1; }

.solar-feature-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: var(--space-sm);
}

.solar-feature-desc {
  font-size: 0.9rem;
  color: var(--medium-grey);
  line-height: 1.7;
}

.solar-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-md);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.solar-feature-badge.cyan {
  background: rgba(0,229,255,0.1);
  color: var(--neon-cyan);
  border: 1px solid rgba(0,229,255,0.2);
}
.solar-feature-badge.green {
  background: rgba(57,255,20,0.08);
  color: var(--neon-green);
  border: 1px solid rgba(57,255,20,0.15);
}

/* â”€â”€ Specs Strip â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.solar-specs {
  padding: var(--space-4xl) 0;
  background: rgba(5,13,26,0.8);
  border-top: 1px solid rgba(0,229,255,0.06);
  border-bottom: 1px solid rgba(0,229,255,0.06);
  backdrop-filter: blur(10px);
}

.solar-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.solar-spec-item {
  padding: var(--space-xl);
  text-align: center;
  border-right: 1px solid rgba(0,229,255,0.06);
}
.solar-spec-item:last-child { border-right: none; }

.solar-spec-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.solar-spec-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* â”€â”€ App Download Hub â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.solar-app-section {
  padding: var(--space-5xl) 0;
  position: relative;
  overflow: hidden;
}

.solar-app-glow {
  position: absolute;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57,255,20,0.06) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
}

.solar-app-header { text-align: center; margin-bottom: var(--space-4xl); }
.solar-app-header .section-title { font-size: clamp(1.8rem, 4vw, 3rem); }
.solar-app-header .section-title .glow-text {
  background: linear-gradient(135deg, var(--neon-green), var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.solar-app-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-4xl);
  align-items: center;
}

.solar-app-screenshots {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: flex-start;
}

.solar-screenshot {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0,229,255,0.15);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(0,229,255,0.05);
  flex: 1;
  max-width: 200px;
}
.solar-screenshot:nth-child(2) { margin-top: var(--space-2xl); }
.solar-screenshot img {
  width: 100%;
  display: block;
}

.solar-app-info { position: relative; }

.solar-app-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.solar-app-feature {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md) var(--space-lg);
  background: rgba(10,22,40,0.5);
  border: 1px solid rgba(0,229,255,0.07);
  border-radius: var(--radius-md);
  transition: border-color 0.3s, background 0.3s;
}
.solar-app-feature:hover {
  border-color: rgba(0,229,255,0.2);
  background: rgba(10,22,40,0.8);
}
.solar-app-feature-icon { font-size: 1.5rem; flex-shrink: 0; }
.solar-app-feature-text strong {
  display: block;
  color: var(--pure-white);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.solar-app-feature-text span { color: var(--medium-grey); font-size: 0.82rem; }

/* APK Download Button */
.apk-download-section {
  background: linear-gradient(135deg, rgba(57,255,20,0.08), rgba(0,229,255,0.05));
  border: 1px solid rgba(57,255,20,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.apk-download-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(57,255,20,0.04), transparent);
}

.apk-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 800;
  margin-bottom: var(--space-sm);
  color: var(--pure-white);
  position: relative;
}

.apk-subtitle {
  font-size: 0.9rem;
  color: var(--medium-grey);
  margin-bottom: var(--space-xl);
  position: relative;
}

.apk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 1.1rem 2.5rem;
  background: linear-gradient(135deg, var(--neon-green), #22CC0A);
  color: #030A03;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s;
  box-shadow:
    0 0 0 0 rgba(57,255,20,0.4),
    0 8px 30px rgba(57,255,20,0.3);
  animation: apk-pulse 3s ease-in-out infinite;
}
.apk-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 0 8px rgba(57,255,20,0.1), 0 16px 50px rgba(57,255,20,0.4);
  animation-play-state: paused;
}
@keyframes apk-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,255,20,0.4), 0 8px 30px rgba(57,255,20,0.3); }
  50% { box-shadow: 0 0 0 12px rgba(57,255,20,0.08), 0 8px 30px rgba(57,255,20,0.35); }
}
.apk-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
}
.apk-btn-icon { font-size: 1.4rem; position: relative; }
.apk-btn-text { position: relative; }

.apk-warning {
  margin-top: var(--space-lg);
  font-size: 0.78rem;
  color: var(--medium-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  position: relative;
}
.apk-warning .warn-icon { font-size: 0.9rem; color: #FFA500; }

/* â”€â”€ Responsive â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 1024px) {
  .solar-hero-content { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .solar-hero-visual { display: none; }
  .solar-features-grid { grid-template-columns: 1fr; }
  .solar-specs-grid { grid-template-columns: repeat(2, 1fr); }
  .solar-app-grid { grid-template-columns: 1fr; }
  .solar-app-screenshots { justify-content: center; }
  .solar-badge-1, .solar-badge-2 { display: none; }
}

@media (max-width: 768px) {
  .solar-specs-grid { grid-template-columns: repeat(2, 1fr); }
  .solar-spec-item:nth-child(2n) { border-right: none; }
  .solar-spec-item:nth-child(n+3) { border-top: 1px solid rgba(0,229,255,0.06); }
}

@media (max-width: 480px) {
  .solar-features-grid { grid-template-columns: 1fr; }
  .solar-app-screenshots { flex-direction: column; align-items: center; }
  .solar-screenshot:nth-child(2) { margin-top: 0; }
  .solar-screenshot { max-width: 240px; }
}

/* LIGHT THEME OVERRIDES */
body { background: #F8FAFC; color: #0F172A; }
.solar-hero-radial { background: radial-gradient(circle at center, rgba(0,229,255,0.08) 0%, transparent 60%); }
.solar-hero { background: transparent; }
.solar-tag { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #0F172A; }
.solar-spec-item { border-right: 1px solid rgba(0,0,0,0.1); }
.solar-spec-item:last-child { border-right: none; }
.solar-feature-card { background: #FFFFFF; border-color: rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.solar-feature-desc { color: var(--medium-grey); }
.solar-app-glow { background: radial-gradient(circle at center, rgba(0,229,255,0.05) 0%, transparent 70%); }


/* =========================================================
   SOLAR ABOUT / EXPLANATION SECTION
   ========================================================= */
.solar-about {
  padding: var(--space-5xl) 0;
  background: #F4F8FF;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.solar-about-header {
  text-align: center;
  margin-bottom: var(--space-4xl);
}
.solar-about-intro {
  color: #4A5568;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 680px;
  margin: var(--space-lg) auto 0;
}

/* Problem / Solution grid */
.solar-ps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
@media (max-width: 768px) {
  .solar-ps-grid { grid-template-columns: 1fr; }
}

.solar-problem-card,
.solar-solution-card {
  border-radius: 20px;
  padding: var(--space-2xl);
}
.solar-problem-card {
  background: rgba(255,107,53,0.05);
  border: 1px solid rgba(255,107,53,0.15);
}
.solar-solution-card {
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.15);
}

.solar-ps-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(255,107,53,0.1);
  border: 1px solid rgba(255,107,53,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: var(--space-lg);
}

.solar-problem-card h3,
.solar-solution-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: var(--space-lg);
  color: #FF8A60;
}

.solar-ps-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.solar-ps-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--light-grey);
  line-height: 1.5;
  padding-left: 1.2rem;
  position: relative;
}
.solar-ps-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--neon-cyan);
  font-weight: 900;
}
.solar-solution-card .solar-ps-list li::before { color: var(--neon-cyan); }
.solar-problem-card .solar-ps-list li::before  { color: #FF8A60; }

/* How It Works steps */
.solar-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-5xl);
}
@media (max-width: 900px) {
  .solar-steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .solar-steps-grid { grid-template-columns: 1fr; }
}

.solar-step-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,188,212,0.15);
  border-radius: 18px;
  padding: var(--space-xl);
  position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.solar-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,229,255,0.3);
  box-shadow: 0 16px 48px rgba(0,229,255,0.06);
}

.solar-step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: rgba(0,229,255,0.25);
  line-height: 1;
  margin-bottom: 0.25rem;
}
.solar-step-icon {
  font-size: 2rem;
  margin-bottom: var(--space-md);
  display: block;
}
.solar-step-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0097A7;
  margin-bottom: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.solar-step-card p {
  font-size: 0.87rem;
  color: #3D4A5C;
  line-height: 1.65;
}

/* Connector line between steps */
.solar-step-card::after {
  content: '?';
  position: absolute;
  top: 50%; right: -16px;
  transform: translateY(-50%);
  color: rgba(0,229,255,0.2);
  font-size: 1.2rem;
  pointer-events: none;
}
.solar-step-card:last-child::after { display: none; }

/* Who is it for */
.solar-for-section {
  padding-top: var(--space-4xl);
  border-top: 1px solid rgba(0,229,255,0.06);
}

.solar-for-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 900px) {
  .solar-for-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .solar-for-grid { grid-template-columns: 1fr; }
}

.solar-for-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: var(--space-xl);
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}
.solar-for-card:hover {
  border-color: rgba(0,229,255,0.2);
  transform: translateY(-4px);
}
.solar-for-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: var(--space-md);
}
.solar-for-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pure-white);
  margin-bottom: var(--space-sm);
}
.solar-for-card p {
  font-size: 0.85rem;
  color: var(--medium-grey);
  line-height: 1.6;
}

/* =========================================================
   SOLAR ORDER VIA WHATSAPP SECTION
   ========================================================= */
.solar-order-section {
  position: relative;
  padding: var(--space-5xl) 0;
  background: linear-gradient(160deg, #0F2A1A 0%, #051A0A 50%, #0A1F12 100%);
  border-top: 1px solid rgba(37,211,102,0.15);
  overflow: hidden;
}

.solar-order-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 30% 50%, rgba(37,211,102,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 50%, rgba(0,229,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Two-column layout */
.solar-order-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-4xl);
  align-items: center;
}
@media (max-width: 1024px) {
  .solar-order-inner { grid-template-columns: 1fr; }
}

/* Left: text */
.solar-order-desc {
  color: #B0D4B8;
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 500px;
  margin: var(--space-lg) 0 var(--space-2xl);
}

/* Order steps */
.solar-order-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.solar-order-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}
.solar-order-step-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.solar-order-step div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.solar-order-step strong {
  font-size: 0.95rem;
  color: #E8F5EB;
  font-weight: 700;
}
.solar-order-step span {
  font-size: 0.85rem;
  color: #A0C8A8;
}

/* Right: Order card */
.solar-order-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(37,211,102,0.2);
  border-radius: 24px;
  padding: var(--space-2xl);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(37,211,102,0.06);
}
.solar-order-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #25D366, #128C7E, #25D366);
}

.solar-order-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0.9rem;
  background: rgba(255,107,53,0.15);
  border: 1px solid rgba(255,107,53,0.3);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  color: #FF8A60;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
}

.solar-order-product {
  text-align: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.solar-order-product-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.solar-order-product-sub {
  font-size: 0.82rem;
  color: #A8D8B0;
}

/* Includes list */
.solar-order-includes {
  margin-bottom: var(--space-xl);
}
.solar-order-includes ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solar-order-includes li {
  font-size: 0.88rem;
  color: #C8E8CC;
  display: flex;
  align-items: center;
  gap: 8px;
}
.solar-order-includes li::first-letter { color: #25D366; }

/* WhatsApp order button */
.solar-wa-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease-smooth);
  box-shadow: 0 8px 30px rgba(37,211,102,0.35);
  margin-bottom: var(--space-lg);
  position: relative;
  overflow: hidden;
}
.solar-wa-order-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.solar-wa-order-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 50px rgba(37,211,102,0.45);
}
.solar-wa-order-btn:hover::after { opacity: 1; }

/* Contact notes */
.solar-order-note {
  text-align: center;
  font-size: 0.82rem;
  color: #98C8A0;
  margin-bottom: 6px;
}
.solar-order-note a { transition: color 0.2s; }
.solar-order-note a:hover { color: #25D366 !important; }

/* Order section explicit bright text */
.solar-order-section .section-title,
.solar-order-section h2 { color: #F0FFF4; }
.solar-order-section .solar-label { color: #4ADE80 !important; }

/* Order glow - more visible */
.solar-order-glow {
  background:
    radial-gradient(ellipse 70% 70% at 20% 60%, rgba(37,211,102,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 40%, rgba(0,229,255,0.06) 0%, transparent 70%);
}

/* Includes p label */
.solar-order-includes > p { color: #6EC87A !important; }

/* =========================================================
   FORCED CONTRAST OVERRIDES — About / Steps / Specs
   ========================================================= */

/* Specs strip label — readable on dark background */
.solar-specs .solar-spec-label { color: rgba(255,255,255,0.6) !important; }

/* Steps section — always light background, dark readable text */
.solar-about { background: #F2F6FF !important; }
.solar-about .section-title { color: #0F172A !important; }
.solar-about p, .solar-about-intro { color: #374151 !important; }

.solar-step-card { background: #FFFFFF !important; box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important; }
.solar-step-card p { color: #374151 !important; }
.solar-step-card h4 { color: #0097A7 !important; }
.solar-step-num { color: rgba(0,150,180,0.2) !important; }

/* Problem/Solution cards readable */
.solar-problem-card h3 { color: #C0440A !important; }
.solar-problem-card .solar-ps-list li { color: #374151 !important; }
.solar-solution-card h3 { color: #0097A7 !important; }
.solar-solution-card .solar-ps-list li { color: #374151 !important; }

/* For section */
.solar-for-section .section-title { color: #0F172A !important; }
.solar-for-card strong { color: #0F172A !important; }
.solar-for-card p { color: #374151 !important; }

/* Order card — bright text on dark green */
.solar-order-section .section-title,
.solar-order-section h2 { color: #FFFFFF !important; }
.solar-order-desc { color: #C8E8CC !important; }
.solar-order-step strong { color: #E8F5EB !important; }
.solar-order-step span { color: #A0C8A8 !important; }
.solar-order-product-name { color: #FFFFFF !important; }
.solar-order-product-sub { color: #A8D8B0 !important; }
.solar-order-includes li { color: #C8E8CC !important; }
.solar-order-note { color: #90C898 !important; }

