/* ==========================================================================
   VOLT'S LEGACY SOLAR - Components CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dropdowns & Mega Menus
   -------------------------------------------------------------------------- */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition-base);
  z-index: 1050;
  pointer-events: none;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mega Dropdown for Offerings (2 Columns) */
.dropdown-mega {
  min-width: 680px;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 1.25rem 1.75rem;
  padding: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
}

.nav-item:hover .dropdown-mega,
.nav-item:focus-within .dropdown-mega {
  transform: translateX(-50%) translateY(0);
}

.dropdown-col-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-600);
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dropdown-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dropdown-link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  color: var(--text-main);
  text-decoration: none;
}

.dropdown-link:hover {
  background: var(--blue-50);
  transform: translateX(4px);
}

.dropdown-icon-box {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.dropdown-link:hover .dropdown-icon-box {
  background: var(--blue-600);
  color: var(--white);
}

.dropdown-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dropdown-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-900);
}

.dropdown-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Solutions Dropdown Menu */
.dropdown-solutions {
  min-width: 320px;
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   2. Hero Section & 2-Slide Carousel (Clean Image Showcase)
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  width: 100%;
  height: clamp(480px, 56vw, 760px);
  overflow: hidden;
  background-color: var(--primary-900);
}

.hero-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.01);
  z-index: 1;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.hero-slide-1 {
  background-image: url('../assets/hero-slide-1.png');
  background-position: center center;
}

.hero-slide-2 {
  background-image: url('../assets/hero-slide-2.png');
  background-position: center center;
  background-size: contain;
  background-color: #dbeafe;
}

/* Subtle overlay tuned for high legibility while highlighting supplied images */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 21, 48, 0.88) 0%,
    rgba(7, 21, 48, 0.72) 45%,
    rgba(7, 21, 48, 0.25) 80%,
    rgba(7, 21, 48, 0.1) 100%
  );
  z-index: 2;
}

.hero-slide-2 .hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(7, 21, 48, 0.92) 0%,
    rgba(7, 21, 48, 0.78) 50%,
    rgba(7, 21, 48, 0.4) 100%
  );
}

.hero-content-wrapper {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 680px;
  color: var(--white);
  padding: 2rem 0;
}

.hero-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-full);
  color: var(--solar-gold-400);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-title .highlight-gold {
  color: var(--solar-gold-400);
}

.hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: #e2e8f0;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Carousel Controls */
.hero-controls {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.carousel-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all var(--transition-fast);
}

.carousel-btn:hover {
  background: var(--white);
  color: var(--primary-900);
  transform: scale(1.08);
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all var(--transition-base);
}

.dot.active {
  width: 32px;
  background: var(--solar-gold-400);
  border-color: var(--solar-gold-400);
}

/* --------------------------------------------------------------------------
   3. Quick Trust Strip (Below Hero)
   -------------------------------------------------------------------------- */
.trust-strip {
  background: #08183a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.25rem 0;
  color: var(--white);
}

.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trust-pill-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.15);
  color: var(--solar-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-pill-text {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* --------------------------------------------------------------------------
   4. Our Offerings Section Cards
   -------------------------------------------------------------------------- */
.govt-guideline-strip {
  background: linear-gradient(135deg, #071530 0%, #0c2656 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  box-shadow: var(--shadow-md);
}

.govt-guideline-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.govt-emblem-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.govt-guideline-text h4 {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.govt-guideline-text p {
  color: #cbd5e1;
  font-size: 0.85rem;
  margin: 0;
}

.govt-tags-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.govt-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.govt-tag-pill.gold {
  background: rgba(245, 158, 11, 0.2);
  color: var(--solar-gold-300);
  border-color: rgba(245, 158, 11, 0.4);
}

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.offerings-grid-5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Enhanced Expertise Card with Photo Header & Customer Metrics */
.offering-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

[data-href] {
  cursor: pointer;
}

.offering-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--blue-600), var(--solar-gold-500));
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 5;
}

.offering-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(37, 99, 235, 0.3);
}

.offering-card:hover::before {
  opacity: 1;
}

/* Card Photo Showcase Container */
.offering-photo-box {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: var(--primary-900);
}

.offering-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.offering-card:hover .offering-photo-img {
  transform: scale(1.06);
}

.offering-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 21, 48, 0.8) 0%, rgba(7, 21, 48, 0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}

.offering-photo-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.offering-scheme-badge {
  background: rgba(7, 21, 48, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--solar-gold-300);
  font-size: 0.725rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.offering-card-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.offering-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.offering-num {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--solar-gold-600);
  background: var(--solar-gold-50);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}

.offering-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.offering-card:hover .offering-icon {
  background: var(--blue-600);
  color: var(--white);
  transform: rotate(4deg);
}

.offering-title {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  color: var(--primary-900);
}

.offering-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

/* Customer Decision Metrics Chips */
.offering-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-bottom: 1.25rem;
}

.metric-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.metric-chip-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-500);
}

.metric-chip-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-900);
}

.metric-chip-value.highlight-green {
  color: #15803d;
}

.metric-chip-value.highlight-gold {
  color: var(--solar-gold-600);
}

.offering-subtypes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--gray-100);
}

.offering-subtypes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-700);
}

.offering-subcards-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.offering-subitem-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.offering-subitem-card:hover {
  background: var(--blue-50);
  border-color: var(--blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.offering-subitem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.offering-subitem-title {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-900);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.offering-subitem-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.offering-subitem-action {
  font-size: 0.775rem;
  font-weight: 700;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.offering-check {
  width: 16px;
  height: 16px;
  color: var(--blue-600);
  flex-shrink: 0;
}

.offering-footer {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   4b. Real On-Site Installation & Elevated Pergola Showcase Box
   -------------------------------------------------------------------------- */
.pergola-showcase-section {
  margin-top: 1.75rem;
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  border-radius: var(--radius-xl);
  padding: 2rem;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-xl);
}

.pergola-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
}

.pergola-photos-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  position: relative;
}

.pergola-photo-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-lg);
  background: #0b1e3f;
  position: relative;
}

.pergola-photo-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pergola-photo-card:hover img {
  transform: scale(1.05);
}

.pergola-photo-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
}

.pergola-feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.5rem 0;
}

.pergola-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
}

.pergola-feature-icon {
  color: var(--solar-gold-400);
  font-size: 1.15rem;
  margin-top: 0.1rem;
}

.pergola-feature-text h5 {
  color: var(--white);
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.pergola-feature-text p {
  color: #cbd5e1;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4c. Government Subsidy Slabs Quick Table
   -------------------------------------------------------------------------- */
.subsidy-matrix-container {
  margin-top: 3.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
}

.subsidy-table-responsive {
  overflow-x: auto;
  margin-top: 1.25rem;
}

.subsidy-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.subsidy-table th {
  background: #f1f5f9;
  color: var(--primary-900);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 1rem;
  border-bottom: 2px solid var(--gray-300);
}

.subsidy-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-700);
}

.subsidy-table tr:hover td {
  background: var(--blue-50);
}

.subsidy-table .badge-subsidy {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Simple 4-Step Customer Process */
.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.process-step-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: relative;
  transition: all var(--transition-base);
}

.process-step-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-400);
  box-shadow: var(--shadow-md);
}

.process-step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.process-step-card h4 {
  font-size: 1.05rem;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
}

.process-step-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   5. Solar Solutions Section Cards
   -------------------------------------------------------------------------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.solution-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--gray-200);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-smooth);
}

.solution-card.featured {
  border-color: var(--solar-gold-400);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
}

.solution-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: linear-gradient(135deg, var(--solar-gold-500), var(--solar-gold-600));
  color: var(--primary-900);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}

.solution-card:hover {
  transform: translateY(-8px);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-xl);
}

.solution-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--blue-50) 0%, #e0e7ff 100%);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.solution-title {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.solution-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.solution-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}

.solution-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--gray-700);
}

.solution-bullet {
  width: 16px;
  height: 16px;
  color: var(--solar-gold-500);
  flex-shrink: 0;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   6. Projects Section & Showcase
   -------------------------------------------------------------------------- */
.projects-filter-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--primary-900);
  color: var(--white);
  border-color: var(--primary-900);
  box-shadow: var(--shadow-sm);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.project-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-400);
}

.project-img-box {
  height: 220px;
  position: relative;
  background: var(--primary-900);
  overflow: hidden;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-card:hover .project-img {
  transform: scale(1.05);
}

.project-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(7, 21, 48, 0.85);
  color: var(--solar-gold-400);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.project-capacity {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--white);
  color: var(--primary-900);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.project-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-name {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.project-location {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-light);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.project-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   7. Design & Consulting Split Layout Section
   -------------------------------------------------------------------------- */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.consulting-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
}

.consulting-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary-900);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
}

.consulting-feature-item:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.consulting-feature-icon {
  width: 22px;
  height: 22px;
  color: var(--blue-600);
  flex-shrink: 0;
}

.consulting-card-preview {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
  border-radius: var(--radius-xl);
  padding: 3rem 2.5rem;
  color: var(--white);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.consulting-card-preview::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.consulting-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.consulting-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.2);
  color: var(--solar-gold-400);
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-heading);
  flex-shrink: 0;
}

.step-content h4 {
  color: var(--white);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.step-content p {
  color: var(--gray-300);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   8. Why VOLT'S LEGACY Trust Cards
   -------------------------------------------------------------------------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   Why Choose VOLT'S LEGACY 5-Card Feature Grid (One Wider Line)
   -------------------------------------------------------------------------- */
.why-volt-section {
  background: #ffffff;
  padding: 5rem 0;
  position: relative;
}

.why-volt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1200px) {
  .why-volt-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .why-volt-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 520px) {
  .why-volt-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.why-volt-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.why-volt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -4px rgba(7, 21, 48, 0.08), 0 4px 10px -2px rgba(7, 21, 48, 0.03);
  border-color: #cbd5e1;
}

.why-volt-img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f8fafc;
  position: relative;
}

.why-volt-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.why-volt-card:hover .why-volt-img {
  transform: scale(1.03);
}

.why-volt-body {
  padding: 1.25rem 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.why-volt-num {
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #d97706; /* warm solar amber */
  margin-bottom: 0.4rem;
  display: inline-block;
  font-family: var(--font-heading, inherit);
}

.why-volt-title {
  font-size: 1.025rem;
  font-weight: 800;
  color: #071530;
  line-height: 1.35;
  margin-bottom: 0.55rem;
  letter-spacing: 0.02em;
  font-family: var(--font-heading, inherit);
}

.why-volt-desc {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}

/* 4-Column Photo Trust Grid (SolarSquare reference style) */
.trust-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

@media (max-width: 1100px) {
  .trust-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .trust-grid-4 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.trust-photo-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform var(--transition-base, 0.3s ease);
}

.trust-photo-card:hover {
  transform: translateY(-6px);
}

.trust-photo-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(7, 21, 48, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
  background: #f1f5f9;
  position: relative;
}

.trust-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-photo-card:hover .trust-photo-img {
  transform: scale(1.05);
}

.trust-card-body {
  padding-top: 1.25rem;
  text-align: center;
}

.trust-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  text-align: center;
}

.trust-card-desc {
  font-size: 0.925rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
  text-align: center;
}

.trust-card {
  background: var(--white);
  padding: 2.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
}

.trust-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--solar-gold-400);
}

.trust-icon-box {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: all var(--transition-base);
}

.trust-card:hover .trust-icon-box {
  background: var(--solar-gold-500);
  color: var(--primary-900);
}

.trust-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}

.trust-desc {
  color: var(--text-muted);
  font-size: 0.925rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   9. Call to Action Banner
   -------------------------------------------------------------------------- */
.cta-banner {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 60%, #162f68 100%);
  border-radius: var(--radius-xl);
  padding: 4.5rem 3.5rem;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(37, 99, 235, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.cta-banner h2 {
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  color: var(--white);
  margin-bottom: 1.25rem;
}

.cta-banner p {
  font-size: 1.15rem;
  color: var(--gray-200);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.cta-banner-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   10. Quotation Form & Solar Bill Calculator
   -------------------------------------------------------------------------- */
.quote-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: flex-start;
}

.calculator-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
}

.calc-header {
  margin-bottom: 2rem;
}

.calc-slider-group {
  margin-bottom: 1.5rem;
}

.calc-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.calc-slider-label {
  font-weight: 700;
  color: var(--gray-700);
}

.calc-slider-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--blue-600);
}

.custom-range {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gray-200);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--solar-gold-500);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border: 2px solid var(--white);
  transition: transform var(--transition-fast);
}

.custom-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.calc-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.calc-result-box {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.15rem 0.85rem;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.calc-result-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calc-result-box.highlight {
  background: var(--blue-50);
  border-color: var(--blue-200);
}

.calc-result-box.highlight-req {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.calc-result-box.highlight-req .calc-result-val {
  color: #1d4ed8;
}

.calc-result-box.highlight-rec {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.12);
}

.calc-result-box.highlight-rec .calc-result-val {
  color: #b45309;
}

.calc-result-box.highlight-savings {
  background: #f0fdf4;
  border-color: #86efac;
}

.calc-result-box.highlight-savings .calc-result-val {
  color: #15803d;
}

.calc-result-box.highlight-subsidy {
  background: #fff7ed;
  border-color: #fdba74;
}

.calc-result-box.highlight-subsidy .calc-result-val {
  color: #c2410c;
}

.calc-result-badge-req {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.35rem;
}

.calc-result-badge-rec {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.35rem;
}

.calc-result-val {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.25rem;
  line-height: 1.25;
}

.calc-result-box.highlight .calc-result-val {
  color: var(--blue-600);
}

.calc-result-lbl {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.3;
}

/* Quote Form Card */
.quote-form-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.form-group-full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 0.45rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-main);
  background: var(--gray-50);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.form-control:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.form-control.error {
  border-color: #ef4444;
  background: #fef2f2;
}

.error-text {
  font-size: 0.775rem;
  color: #dc2626;
  margin-top: 0.35rem;
  display: none;
}

.form-control.error + .error-text {
  display: block;
}

/* --------------------------------------------------------------------------
   11. Blogs Section ("Latest from Solar")
   -------------------------------------------------------------------------- */
.blogs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-400);
}

.blog-card:hover .blog-banner img {
  transform: scale(1.08);
}

.blog-banner {
  height: 200px;
  background: linear-gradient(135deg, var(--primary-900), var(--blue-600));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.5rem;
  color: var(--white);
}

.blog-category-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(245, 158, 11, 0.9);
  color: var(--primary-900);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.blog-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.blog-title {
  font-size: 1.2rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: var(--primary-900);
}

.blog-summary {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.blog-link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap var(--transition-fast);
}

.blog-link:hover {
  gap: 0.65rem;
  color: var(--primary-900);
}

/* --------------------------------------------------------------------------
   12. Interactive Modal & Toast System
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 48, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
}

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

.modal-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  max-width: 620px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
  box-shadow: var(--shadow-2xl);
  transform: translateY(20px);
  transition: transform var(--transition-base);
}

.modal-overlay.active .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-600);
  font-size: 1.25rem;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--primary-900);
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  background: var(--primary-900);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
  border-left: 4px solid var(--solar-gold-400);
  transform: translateX(100px);
  opacity: 0;
  transition: all var(--transition-base);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   14. Contact Page & Social Redirection Components
   -------------------------------------------------------------------------- */
.contact-hero-title {
  letter-spacing: 0.25em;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0.35rem;
  margin-bottom: 0;
  display: block;
  text-align: center;
  width: 100%;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.contact-info-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--transition-base);
}

.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-300);
}

.contact-info-card.featured {
  border-color: #22c55e;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.contact-card-pill {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #16a34a;
  color: #fff;
  font-size: 0.675rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-card-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.contact-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-900);
  margin-bottom: 0.25rem;
}

.contact-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.contact-card-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-900);
  margin-bottom: 1.5rem;
}

.contact-card-btn {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* Social App Redirection Strip */
.social-redirect-strip {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-xl);
}

.social-redirect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.social-app-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.social-app-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  transition: all var(--transition-base);
}

.social-app-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.social-app-btn.instagram-app:hover {
  background: linear-gradient(45deg, rgba(240, 148, 51, 0.25), rgba(220, 39, 67, 0.25), rgba(188, 24, 136, 0.25));
  border-color: #dc2743;
}

.social-app-btn.facebook-app:hover {
  background: rgba(24, 119, 242, 0.25);
  border-color: #1877f2;
}

.social-app-btn.whatsapp-app:hover {
  background: rgba(37, 211, 102, 0.25);
  border-color: #25d366;
}

.social-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.social-app-btn.instagram-app .social-app-icon {
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  color: #fff;
}

.social-app-btn.facebook-app .social-app-icon {
  background: #1877f2;
  color: #fff;
}

.social-app-btn.whatsapp-app .social-app-icon {
  background: #25d366;
  color: #fff;
}

.social-app-text {
  display: flex;
  flex-direction: column;
}

.social-app-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}

.social-app-handle {
  font-size: 0.8rem;
  color: #94a3b8;
}

.social-app-arrow {
  margin-left: auto;
  font-size: 1.25rem;
  color: var(--solar-gold-400);
  transition: transform var(--transition-fast);
}

.social-app-btn:hover .social-app-arrow {
  transform: translate(3px, -3px);
}

/* --------------------------------------------------------------------------
   15. Interactive Animated Icons & Floating Action Widget
   -------------------------------------------------------------------------- */

/* Pulsing live dot for active office beacon */
.live-pulse-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #22c55e;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: pulseLiveDot 1.8s infinite;
  vertical-align: middle;
}

@keyframes pulseLiveDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Phone ringing vibrating shake animation */
@keyframes ringShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-18deg) scale(1.12); }
  30% { transform: rotate(18deg) scale(1.12); }
  45% { transform: rotate(-14deg) scale(1.12); }
  60% { transform: rotate(14deg) scale(1.12); }
  75% { transform: rotate(-6deg) scale(1.05); }
  90% { transform: rotate(6deg) scale(1.05); }
}

.contact-info-card:hover .icon-phone-anim svg,
.icon-phone-anim:hover svg {
  animation: ringShake 0.65s ease-in-out infinite;
}

/* WhatsApp continuous radar pulse */
@keyframes waRadar {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(37, 211, 102, 0)); }
  50% { transform: scale(1.14); filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.6)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(37, 211, 102, 0)); }
}

.contact-info-card.featured .icon-wa-anim svg,
.icon-wa-anim svg {
  animation: waRadar 2s ease-in-out infinite;
}

/* Mail flying glide animation */
@keyframes mailFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.1); }
}

.contact-info-card:hover .icon-mail-anim svg,
.icon-mail-anim:hover svg {
  animation: mailFloat 0.8s ease-in-out infinite;
}

/* Map pin dropping bounce */
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-7px); }
  60% { transform: translateY(-2px); }
}

.contact-info-card:hover .icon-pin-anim svg,
.icon-pin-anim:hover svg {
  animation: pinBounce 0.7s ease-in-out infinite;
}

/* Social icons micro animations */
.social-app-btn:hover .social-app-icon {
  transform: scale(1.15) rotate(6deg);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.social-app-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   Floating Animated WhatsApp Quick Action Button
   -------------------------------------------------------------------------- */
.floating-wa-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  background: linear-gradient(135deg, #2fe675 0%, #25D366 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-wa-btn:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.65), 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

.floating-wa-ping {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPingWave 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes waPingWave {
  0% { transform: scale(1); opacity: 0.9; }
  75%, 100% { transform: scale(1.45); opacity: 0; }
}

.floating-wa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: waRadar 2.2s ease-in-out infinite;
}

.floating-wa-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  animation: badgePop 1.5s ease-in-out infinite;
}

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

.floating-wa-tooltip {
  position: absolute;
  right: 74px;
  background: #071530;
  color: #ffffff;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.floating-wa-btn:hover .floating-wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .floating-wa-btn {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 54px;
    height: 54px;
  }
  .floating-wa-tooltip {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   16. Signature "Our Working Process" Solar Journey Timeline
   -------------------------------------------------------------------------- */

/* Wide Premium Headline Badge for Our Hassle Free Process */
.hassle-free-headline-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 2.85rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #071530;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 50%, #fef3c7 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.35), 0 0 0 4px rgba(245, 158, 11, 0.12);
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.hassle-free-headline-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -2px rgba(245, 158, 11, 0.5), 0 0 0 5px rgba(245, 158, 11, 0.2);
}

/* Light Sweep Beam */
.hassle-free-headline-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), rgba(245, 158, 11, 0.35), transparent);
  animation: badgeBeamSweep 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes badgeBeamSweep {
  0% { left: -120%; }
  45%, 100% { left: 150%; }
}

/* Animated High-Voltage Energy Symbol Highlight */
.energy-zap-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #f59e0b;
  animation: energyZapAnimation 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 16px #eab308);
}

@keyframes energyZapAnimation {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 6px #f59e0b) drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
  }
  20% {
    transform: scale(1.35) rotate(-10deg);
    filter: drop-shadow(0 0 14px #eab308) drop-shadow(0 0 24px #f59e0b);
  }
  40% {
    transform: scale(1.1) rotate(6deg);
    filter: drop-shadow(0 0 8px #f59e0b);
  }
  60% {
    transform: scale(1.3) rotate(-5deg);
    filter: drop-shadow(0 0 16px #eab308) drop-shadow(0 0 22px #f59e0b);
  }
  80% {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 0 7px #f59e0b);
  }
}

.solar-journey-section {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #edf4fc 50%, #ffffff 100%);
  padding-top: 2rem;
  padding-bottom: 2rem;
  overflow: hidden;
  border-top: 1px solid var(--gray-200);
}

/* Timeline Container & Grid (Single continuous 6-step row) */
.solar-journey-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.15rem;
  margin-bottom: 1.5rem;
  z-index: 2;
}

/* Continuous Energy Track Line */
.solar-journey-track {
  position: absolute;
  top: 36px;
  left: 35px;
  right: 35px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6 0%, #f59e0b 50%, #10b981 100%);
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

.solar-journey-track::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 30px;
  height: 7px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 12px 3px #f59e0b;
  animation: energyPulseTravel 4s linear infinite;
}

@keyframes energyPulseTravel {
  0% { left: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Individual Journey Step Card */
.journey-step-card {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 1.6rem 1.15rem;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 20px -2px rgba(7, 21, 48, 0.05);
  display: flex;
  flex-direction: column;
  z-index: 2;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.journey-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 30px -10px rgba(7, 21, 48, 0.12);
  border-color: #3b82f6;
}

/* Top Header with Node Number & Time Badge */
.journey-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.journey-node-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #071530;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 3px #3b82f6, 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.journey-step-card:hover .journey-node-num {
  background: #2563eb;
  transform: scale(1.1);
  box-shadow: 0 0 0 4px #f59e0b, 0 6px 15px rgba(37, 99, 235, 0.35);
}

.journey-time-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-full);
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

/* Step Icon Wrap */
.journey-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.journey-icon-wrap svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.journey-step-card:hover .journey-icon-wrap {
  background: #dbeafe;
  color: #1d4ed8;
}

.journey-step-card:hover .journey-icon-wrap svg {
  transform: scale(1.15);
}

.journey-step-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.journey-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-900);
  line-height: 1.3;
  margin-bottom: 0.65rem;
}

.journey-step-desc {
  font-size: 0.825rem;
  color: #475569;
  line-height: 1.55;
  margin-bottom: 1.15rem;
  flex-grow: 1;
}

.journey-step-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
  transition: color 0.2s ease;
}

.journey-step-cta:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* STEP 03 Featured Design Card */
.journey-step-card.featured-step {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.journey-step-card.featured-step .journey-node-num {
  box-shadow: 0 0 0 3px #f59e0b, 0 4px 10px rgba(245, 158, 11, 0.25);
}

.journey-step-card.featured-step .journey-time-badge {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.journey-step-card.featured-step .journey-icon-wrap {
  background: #fef3c7;
  color: #d97706;
}

.featured-step-pill {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

/* STEP 06 Final Milestone Card */
.journey-step-card.final-milestone {
  border-color: #10b981;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.journey-step-card.final-milestone .journey-node-num {
  background: #059669;
  box-shadow: 0 0 0 3px #10b981, 0 4px 10px rgba(16, 185, 129, 0.25);
}

.journey-step-card.final-milestone .journey-time-badge {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

.journey-step-card.final-milestone .journey-icon-wrap {
  background: #dcfce7;
  color: #16a34a;
}

/* Trust Strip below Timeline */
.journey-trust-strip {
  background: linear-gradient(135deg, #071530 0%, #0f2757 100%);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-xl);
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}

.journey-trust-left {
  max-width: 540px;
}

.journey-trust-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.journey-trust-desc {
  color: #cbd5e1;
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

.journey-trust-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trust-chk-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.trust-chk-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--solar-gold-500);
  color: #071530;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* Bottom CTA Box */
.journey-cta-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 750px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   17. Signature "How On-Grid Solar Works" Technical Diagram (Fixed Position)
   -------------------------------------------------------------------------- */
.on-grid-simulator-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fe 50%, #edf4fc 100%);
  padding-top: 2rem;
  padding-bottom: 2rem;
  overflow: hidden;
  border-top: 1px solid var(--gray-200);
}

/* Control Switcher Bar */
.og-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto 1.5rem auto;
  flex-wrap: wrap;
}

.og-mode-toggle-group {
  display: inline-flex;
  background: #ffffff;
  padding: 0.35rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.og-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.og-mode-btn:hover {
  color: var(--primary-900);
}

.og-mode-btn.active {
  background: linear-gradient(135deg, #071530 0%, #1e3a8a 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(7, 21, 48, 0.25);
}

.og-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.35rem;
  border-radius: var(--radius-full);
  font-size: 0.825rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.og-status-pill.status-export {
  color: #15803d;
  background: #f0fdf4;
  border-color: #86efac;
}

.og-status-pill.status-import {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}

.og-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  animation: pulseLiveDot 1.5s infinite;
}

.og-live-dot.green { background: #16a34a; box-shadow: 0 0 8px #22c55e; }
.og-live-dot.blue { background: #2563eb; box-shadow: 0 0 8px #3b82f6; }

/* Stage Visual Canvas Box (100% Fixed components, zero tilt) */
.og-stage-wrapper {
  max-width: 1080px;
  margin: 0 auto 3rem auto;
}

.og-simulation-stage {
  position: relative;
  background: linear-gradient(145deg, #030a1c 0%, #071530 50%, #0b224d 100%);
  border-radius: var(--radius-2xl);
  padding: 2rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: hidden;
  transition: background 0.6s ease;
}

.og-simulation-stage.stage-night {
  background: linear-gradient(145deg, #020617 0%, #040d21 50%, #061533 100%);
}

.og-svg-canvas {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
}

/* SVG Text Typography matching reference image */
.og-ref-label {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  fill: #ffffff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.og-node-label {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  fill: #ffffff;
}

.og-node-sub {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 600;
  fill: #94a3b8;
}

/* Interactive SVG Nodes (Locked in place - only border/opacity highlights on click/hover) */
.og-diagram-node {
  cursor: pointer;
  outline: none;
}

.og-node-halo {
  transition: opacity 0.3s ease, fill 0.3s ease, filter 0.3s ease;
  opacity: 0.6;
}

.og-diagram-node:hover .og-node-halo,
.og-diagram-node.highlighted .og-node-halo {
  opacity: 1;
  fill: rgba(245, 158, 11, 0.3);
  filter: url(#ogGlowGold);
}

/* Sunlight Conical Beam Pulse */
.og-sunlight-cone {
  animation: sunConePulse 3.5s ease-in-out infinite;
}

@keyframes sunConePulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 0.95; }
}

/* Animated Internal Indicators (Components stay still) */
.og-sun-rays {
  animation: sunRayPulse 3s ease-in-out infinite;
  transform-origin: 70px 70px;
}

@keyframes sunRayPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; stroke: #fbbf24; }
}

.og-panel-glimmer {
  animation: panelGlimmer 2.5s ease-in-out infinite;
}

@keyframes panelGlimmer {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

.og-panel-active-dot {
  animation: pulseLiveDot 1.6s infinite;
}

.og-window-glow {
  animation: windowGlowPulse 3s ease-in-out infinite;
}

@keyframes windowGlowPulse {
  0%, 100% { fill: #facc15; opacity: 0.8; }
  50% { fill: #fef08a; opacity: 1; filter: drop-shadow(0 0 4px #facc15); }
}

/* Particle Conduit Animation (Energy Moves through Cables) */
.og-conduit {
  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

.og-conduit.conduit-active {
  stroke-width: 6.5 !important;
  filter: drop-shadow(0 0 10px #f59e0b);
}

.og-particle-track,
.og-flow-particle {
  fill: none !important;
  stroke: #fffbeb;
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-dasharray: 8 24;
  filter: drop-shadow(0 0 8px #f59e0b);
  animation: particleStream 1.2s linear infinite !important;
  display: block !important;
  opacity: 1 !important;
}

.og-track-panel-inv,
.stream-dc {
  stroke: #fbbf24 !important;
  stroke-width: 5.5px !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.95)) !important;
}

.og-track-inv-junc,
.stream-ac {
  stroke: #f59e0b !important;
  stroke-width: 5.5px !important;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.95)) !important;
}

.og-track-junc-house,
.stream-home {
  stroke: #10b981 !important;
  stroke-width: 5.5px !important;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.95)) !important;
}

.og-track-junc-meter,
.stream-meter {
  stroke: #06b6d4 !important;
  stroke-width: 5.5px !important;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.95)) !important;
}

.og-track-meter-grid,
.stream-export {
  stroke: #22c55e !important;
  stroke-width: 6px !important;
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 1)) !important;
}

.og-track-grid-l1,
.og-track-grid-l2,
.og-track-grid-l3 {
  stroke: #38bdf8 !important;
  stroke-width: 4px !important;
  stroke-dasharray: 6 20 !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.95)) !important;
  animation: particleStream 1.3s linear infinite !important;
}

@keyframes particleStream {
  from { stroke-dashoffset: 32; }
  to { stroke-dashoffset: 0; }
}

@keyframes particleStreamReverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 32; }
}

.og-sun-flares {
  animation: sunRayPulse 3s ease-in-out infinite;
}

@keyframes sunRayPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; stroke: #fde047; }
}

.og-celestial-core {
  animation: sunCorePulse 2.5s ease-in-out infinite alternate;
}

@keyframes sunCorePulse {
  0% { filter: drop-shadow(0 0 8px #f59e0b); }
  100% { filter: drop-shadow(0 0 24px #fbbf24); }
}

.og-sunlight-cone {
  animation: sunConePulse 3s ease-in-out infinite alternate;
}

@keyframes sunConePulse {
  0% { opacity: 0.55; }
  100% { opacity: 0.95; }
}

.og-window-glow {
  animation: windowGlowPulse 2.5s ease-in-out infinite alternate;
}

@keyframes windowGlowPulse {
  0%, 100% { fill: #facc15; opacity: 0.75; }
  50% { fill: #fef08a; opacity: 1; filter: drop-shadow(0 0 8px #facc15); }
}

/* Day vs Night particle variations */
.stage-night .og-sun-beam-group,
.stage-night .og-track-panel-inv,
.stage-night .og-track-inv-junc,
.stage-night .og-arrow-up-group,
.stage-night .og-cable-dc {
  opacity: 0.2;
}

.stage-night .og-track-panel-inv,
.stage-night .og-track-inv-junc {
  display: none;
}

.stage-night .og-sun-element {
  display: none;
}

.stage-night .og-moon-element {
  display: block !important;
}

.stage-night .og-track-meter-grid,
.stage-night .og-track-junc-meter {
  stroke: #38bdf8;
  filter: drop-shadow(0 0 6px #38bdf8);
  animation: particleStreamReverse 1.4s linear infinite;
}

.stage-night .og-track-junc-house {
  stroke: #38bdf8;
  filter: drop-shadow(0 0 6px #38bdf8);
}


/* Telemetry Dashboard */
.og-telemetry-dashboard {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 2.25rem;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-lg);
  max-width: 1080px;
  margin: 0 auto 3.5rem auto;
}

.og-telemetry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 1rem;
}

.og-telemetry-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.og-telemetry-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: #071530;
  color: #ffffff;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
}

.og-telemetry-status {
  font-size: 0.85rem;
  font-weight: 800;
  color: #16a34a;
}

.og-meter-quick-stats {
  font-size: 0.88rem;
  color: #334155;
  background: #f8fafc;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid #e2e8f0;
}

.og-meter-quick-stats .divider {
  margin: 0 0.5rem;
  color: #cbd5e1;
}

.og-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.og-metric-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.25rem 1.35rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.og-metric-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1;
}

.og-metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.og-metric-info {
  display: flex;
  flex-direction: column;
}

.og-metric-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.og-metric-value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.og-metric-value .og-unit {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
}

.og-metric-value.text-gold { color: #d97706; }
.og-metric-value.text-blue { color: #2563eb; }
.og-metric-value.text-export { color: #16a34a; }
.og-metric-value.text-import { color: #0284c7; }

.og-metric-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.og-disclaimer {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  text-align: center;
}

/* 7 Interactive Phase Cards */
.og-phases-wrapper {
  max-width: 1080px;
  margin: 0 auto 3.5rem auto;
}

.og-phases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.og-phase-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.35rem;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  display: flex;
  flex-direction: column;
}

.og-phase-card:hover,
.og-phase-card.active {
  border-color: #f59e0b;
  box-shadow: 0 10px 24px -6px rgba(7, 21, 48, 0.12);
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.og-phase-num {
  font-size: 0.85rem;
  font-weight: 800;
  color: #d97706;
  margin-bottom: 0.5rem;
}

.og-phase-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.6rem;
}

.og-phase-desc {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* Results & Smarter Energy Banner */
.og-results-strip {
  background: linear-gradient(135deg, #071530 0%, #0f2757 100%);
  border-radius: var(--radius-2xl);
  padding: 3rem 2.5rem;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-xl);
  max-width: 1080px;
  margin: 0 auto;
}

.og-results-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2rem;
}

.og-benefits-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.og-benefit-item {
  display: flex;
  gap: 1rem;
}

.og-benefit-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.og-benefit-item strong {
  display: block;
  font-size: 1.1rem;
  color: var(--solar-gold-400);
  margin-bottom: 0.35rem;
}

.og-benefit-item p {
  color: #cbd5e1;
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

.og-results-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .og-particle-track,
  .og-sun-rays,
  .og-panel-active-dot,
  .og-window-glow,
  .og-wave-anim,
  .og-live-dot {
    animation: none !important;
  }
}

/* ==========================================================================
   SOLAR FOR HOMES (/solar-for-homes) - DEDICATED COMPONENT STYLES
   ========================================================================== */

/* 1. Hero Section */
.sfh-hero-section {
  position: relative;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
  padding: 1.75rem 0 1.25rem;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}

.sfh-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.sfh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: #dbeafe;
  color: #1e40af;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.sfh-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.sfh-hero-text {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.sfh-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.sfh-hero-image-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
}

.sfh-hero-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sfh-hero-image-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  background: rgba(7, 21, 48, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.sfh-trust-bar {
  margin-top: 1.15rem;
  padding: 1.15rem 1.5rem;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.sfh-trust-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-900);
}

.sfh-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* 11. Redesigned Solar vs Traditional Power Comparison */
.sfh-comparison-table-wrapper {
  background: #ffffff;
  border-radius: var(--radius-2xl, 1.25rem);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
  margin-top: 1.25rem;
}

.sfh-comp-header-banner {
  text-align: center;
  margin-bottom: 2rem;
}

.sfh-comp-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--primary-900);
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.sfh-comp-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

.sfh-comp-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 1.75rem;
  align-items: stretch;
}

.sfh-comp-card {
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sfh-comp-card.traditional-bill {
  background: #fdf8f8;
  border: 1.5px solid #fecaca;
}

.sfh-comp-card.solar-plan {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 2px solid #16a34a;
  box-shadow: 0 12px 32px -6px rgba(22, 163, 74, 0.18);
}

.sfh-comp-winner-tag {
  position: absolute;
  top: -13px;
  right: 1.5rem;
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

.sfh-comp-card-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.6rem;
  align-self: flex-start;
}

.sfh-comp-card-badge.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfh-comp-card-badge.green {
  background: #dcfce7;
  color: #166534;
}

.sfh-comp-card-headline {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 1rem;
  font-family: var(--font-heading);
}

.sfh-comp-price-box {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.sfh-comp-price-box.red-bg {
  background: #ffffff;
  border: 1px solid #fee2e2;
}

.sfh-comp-price-box.green-bg {
  background: #ffffff;
  border: 1.5px solid #86efac;
}

.sfh-comp-price-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 0.25rem;
}

.sfh-comp-price-val {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-heading);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.sfh-comp-price-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
}

.sfh-comp-price-val.red-text {
  color: #dc2626;
}

.sfh-comp-price-val.green-text {
  color: #16a34a;
}

.sfh-comp-price-sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sfh-comp-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.sfh-comp-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.sfh-comp-feature-item strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: var(--primary-900);
  margin-bottom: 0.15rem;
}

.sfh-comp-feature-item p {
  margin: 0;
  color: var(--text-main);
  font-size: 0.86rem;
}

.sfh-comp-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}

.sfh-comp-icon.red {
  background: #fee2e2;
  color: #dc2626;
}

.sfh-comp-icon.green {
  background: #dcfce7;
  color: #15803d;
}

.red-text { color: #dc2626 !important; }
.green-text { color: #15803d !important; }

.sfh-comp-card-footer {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.sfh-comp-card-footer.red-foot {
  background: #fee2e2;
  color: #991b1b;
}

.sfh-comp-card-footer.green-foot {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}

/* ==========================================================================
   CASH VS NORMAL GRID VS EMI SOLAR 3-WAY COMPARATIVE CALCULATOR
   ========================================================================== */
.sfh-3way-calc-wrapper {
  background: #ffffff;
  border-radius: var(--radius-2xl, 1.25rem);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 40px -10px rgba(15, 23, 42, 0.08);
  margin-top: 1.5rem;
}

.sfh-3way-subsidy-badge-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-lg, 0.75rem);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: #166534;
  line-height: 1.45;
}

.sfh-3way-subsidy-badge-banner .sfh-sub-tag {
  display: inline-flex;
  align-items: center;
  background: #16a34a;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.sfh-3way-control-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-bottom: 2rem;
}

.sfh-3way-control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.sfh-3way-label {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-900);
  display: block;
}

.sfh-3way-sublabel {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.sfh-3way-input-box-wrap {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #2563eb;
  border-radius: var(--radius-lg);
  padding: 0.4rem 0.85rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.sfh-3way-input-box-wrap:focus-within {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.sfh-3way-curr-symbol {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #2563eb;
  margin-right: 0.35rem;
}

.sfh-3way-number-input {
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary-900);
  width: 120px;
  background: transparent;
}

.sfh-3way-unit-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

.sfh-3way-slider-container {
  margin-bottom: 1.25rem;
}

.sfh-3way-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  margin-top: 0.4rem;
}

.sfh-3way-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.sfh-3way-preset-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.25rem;
}

.sfh-preset-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sfh-preset-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: var(--primary-900);
}

.sfh-preset-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.sfh-3way-specs-bar {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 1.05fr 1.05fr 1.1fr 1.1fr;
  gap: 0.85rem;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-xl, 1rem);
  padding: 1.15rem;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.sfh-spec-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all var(--transition-fast);
}

.sfh-spec-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.sfh-spec-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sfh-spec-lbl.blue {
  color: #0369a1;
}

.sfh-spec-lbl.gold {
  color: #92400e;
}

.sfh-spec-lbl.green {
  color: #15803d;
}

.sfh-spec-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sfh-spec-pill.blue {
  background: #dbeafe;
  color: #1e40af;
}

.sfh-spec-pill.gold {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.sfh-spec-pill.green {
  background: #dcfce7;
  color: #15803d;
}

.sfh-spec-pill.dark {
  background: #e2e8f0;
  color: #0f172a;
}

.sfh-spec-highlight-req {
  background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.14);
}

.sfh-spec-highlight-rec {
  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.22);
  transform: scale(1.02);
  position: relative;
  z-index: 2;
}

.sfh-spec-highlight-sub {
  background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #86efac;
}

.sfh-spec-highlight-net {
  background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
}

.sfh-spec-val {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.25;
}

.sfh-spec-val.highlight-blue {
  color: #0284c7;
  font-size: 1.16rem;
}

.sfh-spec-val.highlight-gold {
  color: #b45309;
  font-size: 1.22rem;
}

.sfh-spec-val.highlight-dark {
  color: #071530;
  font-size: 1.12rem;
}

.sfh-spec-val.green {
  color: #16a34a;
}

.sfh-spec-sub-note {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 0.2rem;
}

/* 3-Way Comparative Cards */
.sfh-3way-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 2rem;
}

.sfh-3way-card {
  border-radius: var(--radius-xl);
  padding: 1.85rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sfh-3way-card:hover {
  transform: translateY(-4px);
}

.sfh-3way-card.cash-card {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 2px solid #16a34a;
  box-shadow: 0 10px 30px -5px rgba(22, 163, 74, 0.12);
}

.sfh-3way-card.normal-card {
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
  border: 1.5px solid #fecaca;
  box-shadow: 0 8px 24px -5px rgba(220, 38, 38, 0.08);
}

.sfh-3way-card.emi-card {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  border: 2px solid #2563eb;
  box-shadow: 0 12px 36px -6px rgba(37, 99, 235, 0.16);
}

.sfh-3way-smart-tag {
  position: absolute;
  top: -12px;
  right: 1.25rem;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.sfh-3way-card-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.sfh-3way-card-badge.green {
  background: #dcfce7;
  color: #15803d;
}

.sfh-3way-card-badge.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfh-3way-card-badge.blue {
  background: #dbeafe;
  color: #1e40af;
}

.sfh-3way-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.25rem;
}

.sfh-3way-card-tagline {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 1.25rem;
}

.sfh-3way-metric-box {
  padding: 1.15rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.sfh-3way-metric-box.green-bg {
  background: #ffffff;
  border: 1.5px solid #86efac;
}

.sfh-3way-metric-box.red-bg {
  background: #ffffff;
  border: 1.5px solid #fca5a5;
}

.sfh-3way-metric-box.blue-bg {
  background: #ffffff;
  border: 1.5px solid #93c5fd;
}

.sfh-3way-metric-lbl {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-bottom: 0.25rem;
}

.sfh-3way-metric-val {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.sfh-3way-metric-val.green-text {
  color: #16a34a;
}

.sfh-3way-metric-val.red-text {
  color: #dc2626;
}

.sfh-3way-metric-val.blue-text {
  color: #2563eb;
}

.sfh-val-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
}

.sfh-3way-metric-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sfh-3way-highlight-pill {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}

.sfh-3way-highlight-pill.green {
  background: #dcfce7;
  border: 1px solid #86efac;
}

.sfh-3way-highlight-pill.gold {
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.sfh-3way-highlight-pill.red {
  background: #fee2e2;
  border: 1px solid #fca5a5;
}

.sfh-3way-highlight-pill.blue {
  background: #dbeafe;
  border: 1px solid #bfdbfe;
}

.sfh-hl-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  margin-bottom: 0.15rem;
}

.sfh-hl-val {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.sfh-hl-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.sfh-3way-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.sfh-3way-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed #e2e8f0;
}

.sfh-3way-breakdown-row span {
  color: var(--text-main);
}

.sfh-3way-breakdown-row strong {
  font-family: var(--font-heading);
}

.sfh-3way-card-footer {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

.sfh-3way-card-footer.green-foot {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}

.sfh-3way-card-footer.red-foot {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.sfh-3way-card-footer.blue-foot {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
}

/* 30-Year Milestones Table - Clean Light Mode */
.sfh-3way-milestones-card {
  background: #ffffff;
  color: var(--text-dark, #0f172a);
  border-radius: var(--radius-2xl, 1.25rem);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 40px -10px rgba(15, 23, 42, 0.08);
}

.sfh-3way-milestones-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.sfh-3way-milestones-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--primary-900, #071530);
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.sfh-3way-milestones-sub {
  font-size: 0.92rem;
  color: #64748b;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
}

.sfh-3way-table-responsive {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  background: #ffffff;
}

.sfh-3way-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}

.sfh-3way-table th {
  background: #f8fafc;
  color: #0f172a;
  font-family: var(--font-heading);
  font-weight: 800;
  padding: 1rem 1.15rem;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  font-size: 0.88rem;
}

.sfh-3way-table td {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 0.92rem;
}

.sfh-3way-table tr:nth-child(even) td {
  background: #f8fafc;
}

.sfh-3way-table tr:hover td {
  background: #f1f5f9;
}

.sfh-3way-table td strong {
  color: #0f172a;
  font-family: var(--font-heading);
  font-weight: 700;
}

.sfh-3way-summary-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 1.35rem 1.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
}

.sfh-3way-summary-text {
  font-size: 0.95rem;
  color: #334155;
  max-width: 580px;
  line-height: 1.6;
}

.sfh-3way-summary-text strong {
  color: #0f172a;
}

.sfh-3way-summary-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   SOLAR FOR HOMES SIMPLE ROOFTOP SURVEY FORM
   ========================================================================== */
.sfh-simple-survey-wrapper {
  max-width: 820px;
  margin: 1.5rem auto 0;
}

.sfh-simple-survey-card {
  background: #ffffff;
  border-radius: var(--radius-2xl, 1.25rem);
  padding: 2.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 14px 40px -10px rgba(15, 23, 42, 0.08);
}

.sfh-survey-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.75rem;
}

.sfh-ribbon-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--primary-900, #071530);
  font-family: var(--font-heading);
}

.sfh-simple-form {
  background: #ffffff;
}

.sfh-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.input-phone-group {
  display: flex;
  align-items: center;
}

.phone-prefix {
  background: #f1f5f9;
  border: 1.5px solid var(--gray-300);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 0.75rem 0.85rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #475569;
}

.input-phone-group .form-control {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.field-error-msg {
  font-size: 0.78rem;
  color: #dc2626;
  font-weight: 600;
  margin-top: 0.35rem;
  display: none;
}

.form-control.error ~ .field-error-msg,
.form-group.has-error .field-error-msg {
  display: block;
}

.sfh-form-submit-row {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.sfh-form-security-note {
  text-align: center;
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 0.75rem;
}

/* 2. Section - The Simple Idea */
.sfh-idea-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-md);
  margin-top: 1rem;
}

.sfh-idea-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.sfh-idea-card {
  background: #f8fafc;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sfh-idea-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sfh-idea-card.active-solar {
  background: linear-gradient(145deg, #f0fdf4 0%, #eff6ff 100%);
  border-color: #86efac;
}

.sfh-idea-tag {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin-bottom: 0.75rem;
}

.sfh-idea-card.active-solar .sfh-idea-tag {
  color: #16a34a;
}

.sfh-idea-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
}

.sfh-idea-annual {
  font-size: 1.15rem;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 1rem;
}

.sfh-idea-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1rem;
  text-align: left;
}

.sfh-idea-steps li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--text-main);
  font-weight: 600;
}

.sfh-idea-arrow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
}

.sfh-arrow-badge {
  padding: 0.65rem 1.15rem;
  background: var(--primary-900);
  color: var(--solar-gold-400);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.sfh-disclaimer-note {
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.5;
}

/* 3. Government Subsidy Section */
.sfh-subsidy-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.sfh-subsidy-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sfh-subsidy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.sfh-subsidy-card.highlight-max {
  border: 2px solid #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.2);
}

.sfh-max-pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.sfh-subsidy-kw {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.sfh-subsidy-val {
  font-size: 2.4rem;
  font-weight: 800;
  color: #16a34a;
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
}

.sfh-subsidy-card.highlight-max .sfh-subsidy-val {
  color: #d97706;
}

.sfh-subsidy-lbl {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sfh-info-box {
  background: #eff6ff;
  border-left: 4px solid #2563eb;
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: #1e3a8a;
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 1.5rem;
}

.sfh-info-box strong {
  font-weight: 800;
}

/* 4. Subsidy Process (4 Steps) */
.sfh-step-flow-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  margin-top: 2rem;
}

.sfh-flow-step-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  transition: transform var(--transition-fast);
}

.sfh-flow-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sfh-step-badge-num {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563eb;
  background: #eff6ff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border: 1px solid #bfdbfe;
}

.sfh-step-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.35;
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.sfh-step-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* 5. Why Solar for Your Home (6 Cards) */
.sfh-why-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
}

.sfh-why-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.sfh-why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: #cbd5e1;
}

.sfh-why-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sfh-why-num {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #2563eb;
}

.sfh-why-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: #f1f5f9;
  color: var(--primary-800);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sfh-why-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.6rem;
  font-family: var(--font-heading);
}

.sfh-why-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* 6. Sizing Guide (4 Cards) */
.sfh-sizing-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.sfh-sizing-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.sfh-sizing-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: var(--shadow-md);
}

.sfh-sizing-cap {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
}

.sfh-sizing-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 600;
}

/* 7. Dedicated Rooftop Solar Process (Single Frame 6 Horizontal Cards) */
.sfh-process-container {
  position: relative;
  margin-top: 1.5rem;
}

.sfh-process-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.85rem;
  position: relative;
  align-items: stretch;
}

.sfh-process-card {
  background: #ffffff;
  border-radius: var(--radius-lg, 0.75rem);
  padding: 1.4rem 0.85rem 1.1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sfh-process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px -3px rgba(15, 23, 42, 0.1);
  border-color: #93c5fd;
}

.sfh-process-card.orange-core {
  border: 1.5px solid #f59e0b;
  background: #fffdfa;
}

.sfh-process-card.orange-core:hover {
  box-shadow: 0 10px 24px -3px rgba(245, 158, 11, 0.2);
}

.sfh-process-card.green-milestone {
  border: 1.5px solid #10b981;
  background: #f0fdf4;
}

.sfh-process-card.green-milestone:hover {
  box-shadow: 0 10px 24px -3px rgba(16, 185, 129, 0.2);
}

/* Floating Milestone Badges (No vertical offset disruption) */
.sfh-process-card.orange-core::before {
  content: 'ENGINEERING CORE';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.sfh-process-card.green-milestone::before {
  content: 'LONG-TERM MILESTONE';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #10b981;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

.sfh-process-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.sfh-process-step-num {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--primary-900);
  white-space: nowrap;
}

.sfh-process-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.sfh-process-card.orange-core .sfh-process-step-num {
  color: #d97706;
}
.sfh-process-card.orange-core .sfh-process-time {
  background: #fef3c7;
  color: #b45309;
}

.sfh-process-card.green-milestone .sfh-process-step-num {
  color: #10b981;
}
.sfh-process-card.green-milestone .sfh-process-time {
  background: #d1fae5;
  color: #065f46;
}

.sfh-process-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.45rem;
  line-height: 1.25;
  font-family: var(--font-heading);
  min-height: 2.35rem;
  display: flex;
  align-items: flex-start;
  letter-spacing: -0.01em;
}

.sfh-process-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 0.75rem;
  min-height: 4.8rem;
}

.sfh-process-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid #f1f5f9;
  margin-top: auto;
}

.sfh-process-checks li {
  font-size: 0.74rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  line-height: 1.3;
}

.sfh-process-checks li .chk,
.sfh-process-checks li span:first-child {
  color: #16a34a;
  font-weight: 900;
  font-size: 0.8rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 8. Solar ROI & Payback Section */
.sfh-roi-formula-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.sfh-formula-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.sfh-formula-pill {
  background: #f8fafc;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary-900);
}

.sfh-formula-op {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2563eb;
}

.sfh-formula-pill.result-pill {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
}

/* Interactive Mini Calculator in ROI */
.sfh-roi-interactive-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  background: #f8fafc;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid #e2e8f0;
  align-items: center;
}

.sfh-mini-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sfh-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sfh-input-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-900);
}

.sfh-input-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-900);
}

.sfh-input-box input {
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  width: 100%;
  color: inherit;
}

.sfh-roi-results-box {
  background: linear-gradient(135deg, #071530 0%, #132f6b 100%);
  color: #ffffff;
  padding: 2rem;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.sfh-roi-out-val {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--solar-gold-400);
  font-family: var(--font-heading);
  margin-bottom: 0.25rem;
}

/* 9. ROI Line / Bar Chart */
.sfh-chart-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
}

.sfh-chart-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: flex-end;
  height: 240px;
  padding: 1.5rem 1rem 0;
  border-bottom: 2px solid #cbd5e1;
  position: relative;
}

.sfh-chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.sfh-chart-bar {
  width: 70%;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.sfh-chart-bar.breakeven {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.sfh-chart-bar-val {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary-900);
  white-space: nowrap;
}

.sfh-chart-year-lbl {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.sfh-payback-line-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  border-top: 2px dashed #f59e0b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
  pointer-events: none;
}

.sfh-payback-tag {
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}

/* 10. Financing Comparison Section */
.sfh-financing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

.sfh-fin-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.sfh-fin-card.featured-fin {
  border: 2px solid #2563eb;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.15);
}

.sfh-fin-header {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sfh-fin-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.sfh-fin-flow li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

/* 11. EMI vs Electricity Bill Box */
.sfh-emi-comparison-box {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
}

.sfh-emi-calc-row {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr;
  gap: 2rem;
  align-items: center;
}

.sfh-bill-block {
  background: #fef2f2;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid #fecaca;
  text-align: center;
}

.sfh-plan-block {
  background: #f0fdf4;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid #bbf7d0;
  text-align: center;
}

.sfh-vs-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-900);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* 12. Loan Journey (5 Steps) */
.sfh-loan-journey-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.sfh-loan-step-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition-fast);
}

.sfh-loan-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sfh-loan-step-num {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 0.5rem;
}

.sfh-loan-step-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.35;
  font-family: var(--font-heading);
}

/* 13. After the Loan Ends */
.sfh-after-loan-banner {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-md);
  margin-top: 2rem;
}

.sfh-during-after-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.sfh-during-box {
  background: #f8fafc;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
}

.sfh-after-box {
  background: linear-gradient(145deg, #ecfdf5 0%, #f0fdf4 100%);
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 2px solid #86efac;
}

.sfh-large-statement {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--primary-900);
  color: var(--solar-gold-400);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  text-align: center;
  border-radius: var(--radius-lg);
  letter-spacing: -0.01em;
}

/* 14. Long Term Solar Journey (Timeline) */
.sfh-timeline-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.sfh-timeline-node {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
}

.sfh-year-tag {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 0.4rem;
}

.sfh-year-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.4;
}

/* 15. Rooftop Space Section */
.sfh-space-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 2rem;
}

.sfh-space-img-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid #e2e8f0;
}

.sfh-space-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sfh-space-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.sfh-space-list li {
  background: #f8fafc;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid #e2e8f0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 16. FAQ Section */
.sfh-faq-container {
  max-width: 880px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sfh-faq-item {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.sfh-faq-item.active {
  border-color: #3b82f6;
  box-shadow: var(--shadow-sm);
}

.sfh-faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-900);
  text-align: left;
  cursor: pointer;
}

.sfh-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.sfh-faq-item.active .sfh-faq-icon {
  transform: rotate(45deg);
  background: #fee2e2;
  color: #dc2626;
}

.sfh-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
  padding: 0 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.sfh-faq-item.active .sfh-faq-answer {
  max-height: 300px;
  padding: 0 1.5rem 1.25rem;
}

/* 17. Final Main Calculator Section */
.sfh-calculator-card {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 3rem 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: var(--shadow-xl);
  max-width: 1120px;
  margin: 2.5rem auto 0;
}

.sfh-calc-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
}

.sfh-calc-control-group {
  margin-bottom: 1.75rem;
}

.sfh-calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.sfh-calc-label {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-900);
}

.sfh-calc-value-display {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #2563eb;
}

.sfh-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sfh-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
  border: 2px solid #ffffff;
}

.sfh-calc-outputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sfh-calc-output-chip {
  background: #f8fafc;
  padding: 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
}

.sfh-output-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.sfh-output-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfh-output-val.gold {
  color: #d97706;
}

.sfh-output-val.green {
  color: #16a34a;
}

.sfh-financing-addon-box {
  background: linear-gradient(145deg, #071530 0%, #132f6b 100%);
  color: #ffffff;
  padding: 1.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.sfh-fin-addon-header {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--solar-gold-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.sfh-fin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.sfh-fin-metric-cell {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sfh-fin-metric-lbl {
  font-size: 0.72rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.sfh-fin-metric-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

/* 18. Final Dark Navy CTA Section */
.sfh-cta-section {
  background: linear-gradient(135deg, #071530 0%, #0c204c 100%);
  padding: 5rem 0;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sfh-cta-box {
  max-width: 780px;
  margin: 0 auto;
}

.sfh-cta-title {
  font-size: 2.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.sfh-cta-text {
  font-size: 1.08rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.sfh-cta-buttons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 19. Disclaimers */
.sfh-legal-disclaimer {
  background: #f1f5f9;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
}

.sfh-legal-text {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.6;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}

/* ==========================================================================
   SOLAR FOR HOUSING SOCIETIES (/solar-for-housing-societies) - COMPONENT STYLES
   ========================================================================== */

/* Core Sections */
.sfhs-section {
  padding: 1.75rem 0 1.25rem;
  position: relative;
}

.sfhs-bg-light {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.sfhs-section-header {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 1.85rem;
}

.sfhs-section-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  font-weight: 800;
  color: #071530;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 0.5rem;
  margin-bottom: 0.65rem;
}

.sfhs-section-subtitle {
  font-size: 1.08rem;
  color: #475569;
  line-height: 1.65;
  max-width: 840px;
  margin: 0.5rem auto 0 auto;
}

/* SECTION 01: Hero Section */
.sfhs-hero-section {
  position: relative;
  background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 100%);
  padding: 2rem 0 1.5rem;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}

.sfhs-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}

.sfhs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: #dcfce7;
  color: #166534;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.sfhs-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.18;
  margin-bottom: 1.25rem;
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.sfhs-hero-text {
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.sfhs-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.sfhs-trust-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.5rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.5rem;
}

.sfhs-trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary-900);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

.sfhs-trust-check {
  color: #16a34a;
  font-weight: 900;
  font-size: 0.95rem;
}

.sfhs-pm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e3a8a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.sfhs-image-card {
  position: relative;
  border-radius: var(--radius-2xl, 1.25rem);
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15);
  border: 1px solid #e2e8f0;
}

.sfhs-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.sfhs-image-overlay-pill {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  background: rgba(7, 21, 48, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.15);
}

.sfhs-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  flex-shrink: 0;
}

/* SECTION 02: The Simple Idea */
.sfhs-idea-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.sfhs-idea-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  text-align: center;
}

.sfhs-idea-card.today {
  border-color: #fecaca;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}

.sfhs-idea-card.solar {
  border-color: #bbf7d0;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.sfhs-card-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}

.sfhs-card-pill.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfhs-card-pill.green {
  background: #dcfce7;
  color: #166534;
}

.sfhs-idea-cost {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #dc2626;
  margin-bottom: 0.5rem;
}

.sfhs-idea-cost.green {
  color: #16a34a;
}

.sfhs-idea-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-900);
  font-family: var(--font-heading);
  margin-bottom: 1rem;
}

.sfhs-idea-arrow-down {
  font-size: 1.5rem;
  font-weight: 800;
  color: #dc2626;
  margin: 0.75rem 0;
}

.sfhs-idea-arrow-down.green {
  color: #16a34a;
}

.sfhs-idea-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.75rem 0;
}

.sfhs-tag-item {
  background: #f1f5f9;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
}

.sfhs-tag-item.green {
  background: #dcfce7;
  color: #166534;
}

.sfhs-idea-footer-tag {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  margin-top: 0.75rem;
}

.sfhs-idea-footer-tag.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfhs-idea-footer-tag.green {
  background: #dcfce7;
  color: #166534;
}

.sfhs-idea-center-flow {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sfhs-flow-bubble {
  background: #071530;
  color: #ffffff;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px rgba(7, 21, 48, 0.25);
}

.sfhs-flow-text.highlight {
  color: #f59e0b;
}

.sfhs-flow-text.green {
  color: #4ade80;
}

.sfhs-flow-arrow {
  color: #60a5fa;
  font-size: 1.2rem;
}

/* SECTION 03: Uses 6-Grid */
.sfhs-uses-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sfhs-use-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sfhs-use-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.1);
  border-color: #93c5fd;
}

.sfhs-use-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.sfhs-use-num {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563eb;
  opacity: 0.8;
}

.sfhs-use-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 1px solid #dbeafe;
}

.sfhs-use-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.sfhs-use-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* SECTION 04: Government Support */
.sfhs-gov-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}

.sfhs-cfa-main-card {
  background: linear-gradient(135deg, #071530 0%, #0f2c6e 100%);
  color: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.75rem 2.25rem;
  text-align: center;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 15px 35px -5px rgba(7, 21, 48, 0.25);
}

.sfhs-cfa-capacity-card {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.75rem 2.25rem;
  text-align: center;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.sfhs-cfa-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.sfhs-cfa-badge.blue {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.sfhs-cfa-upto {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.8;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.sfhs-cfa-val {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: #f59e0b;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.sfhs-cfa-val.blue {
  color: #2563eb;
}

.sfhs-cfa-label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.sfhs-cfa-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.9;
  max-width: 380px;
  margin: 0 auto;
}

.sfhs-cfa-disclaimer-box {
  max-width: 800px;
  margin: 2rem auto 0;
  background: #ffffff;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: #475569;
  font-weight: 600;
  text-align: center;
  justify-content: center;
}

/* SECTION 05: How does CFA Work */
.sfhs-cfa-steps-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.sfhs-cfa-step {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  text-align: center;
}

.sfhs-cfa-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eff6ff;
  color: #2563eb;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  border: 2px solid #bfdbfe;
}

.sfhs-cfa-step-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.sfhs-cfa-step-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sfhs-cfa-tagline {
  text-align: center;
  font-size: 1rem;
  color: #1e3a8a;
  font-family: var(--font-heading);
  margin-top: 2.25rem;
  font-weight: 600;
}

/* SECTION 07: Why Societies Choose Solar */
.sfhs-reasons-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sfhs-reason-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease;
}

.sfhs-reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.1);
}

.sfhs-reason-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.sfhs-reason-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.sfhs-reason-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* SECTION 08: Solar ROI Formula */
.sfhs-roi-formula-box {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  max-width: 960px;
  margin: 0 auto;
}

.sfhs-formula-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.sfhs-formula-pill {
  background: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  text-align: center;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sfhs-formula-pill.gold {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.sfhs-formula-pill.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.sfhs-formula-pill.green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.sfhs-formula-pill.result {
  background: linear-gradient(135deg, #071530 0%, #132f6b 100%);
  color: #f59e0b;
  border-color: #f59e0b;
}

.sfhs-pill-sub {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.sfhs-pill-main {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
}

.sfhs-formula-op {
  font-size: 1.75rem;
  font-weight: 800;
  color: #64748b;
}

.sfhs-formula-divider {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  color: #2563eb;
  background: #eff6ff;
  display: table;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-full);
  margin: 0.5rem auto;
  border: 1px solid #dbeafe;
}

/* SECTION 09: Society ROI Example Card */
.sfhs-example-card {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.sfhs-example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sfhs-example-badge {
  background: #071530;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.sfhs-example-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfhs-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.sfhs-example-item {
  background: #f8fafc;
  padding: 1.25rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sfhs-example-item.gold {
  background: #fffbeb;
  border-color: #fde68a;
}

.sfhs-example-item.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.sfhs-example-item.green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sfhs-example-item.highlight {
  background: #071530;
  color: #ffffff;
  border-color: #f59e0b;
}

.sfhs-ex-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
}

.sfhs-example-item.highlight .sfhs-ex-lbl {
  color: #cbd5e1;
}

.sfhs-ex-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfhs-ex-val.gold {
  color: #d97706;
}

.sfhs-ex-val.blue {
  color: #2563eb;
}

.sfhs-ex-val.green {
  color: #16a34a;
}

.sfhs-ex-val.highlight {
  color: #f59e0b;
}

.sfhs-example-notice {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  background: #fff8f8;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: #991b1b;
  text-align: center;
}

/* SECTION 10: Animated ROI Chart */
.sfhs-chart-box {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem 2rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  position: relative;
}

.sfhs-chart-header {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #475569;
}

.sfhs-chart-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.green {
  background: #16a34a;
}

.legend-dot.gold {
  background: #f59e0b;
}

.sfhs-chart-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: flex-end;
  height: 260px;
  padding: 1.5rem 0.5rem 0;
  border-bottom: 2px solid #cbd5e1;
  position: relative;
}

.sfhs-chart-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.sfhs-chart-bar-track {
  width: 60%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sfhs-chart-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.sfhs-chart-bar-fill.breakeven {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
}

.sfhs-bar-val {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--primary-900);
  font-family: var(--font-heading);
  white-space: nowrap;
}

.sfhs-bar-lbl {
  margin-top: 0.65rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.sfhs-payback-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 32%;
  border-top: 2px dashed #f59e0b;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  padding-right: 1rem;
}

.sfhs-payback-tag {
  background: #f59e0b;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  transform: translateY(-50%);
}

/* SECTION 11: CAPEX / OPEX / PPA */
.sfhs-models-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sfhs-model-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sfhs-model-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: #166534;
  margin-bottom: 1rem;
  align-self: flex-start;
}

.sfhs-model-badge.blue {
  background: #eff6ff;
  color: #1e40af;
}

.sfhs-model-badge.gold {
  background: #fef3c7;
  color: #92400e;
}

.sfhs-model-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.75rem;
}

.sfhs-model-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.sfhs-model-highlight {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sfhs-model-highlight.blue {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.sfhs-model-highlight.gold {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.sfhs-mod-arrow {
  font-weight: 900;
  font-size: 1.1rem;
}

/* SECTION 12: Compare Matrix */
.sfhs-compare-box {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.sfhs-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.sfhs-comp-col {
  padding: 2rem;
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sfhs-comp-col.without {
  background: #fff8f8;
  border: 1px solid #fecaca;
}

.sfhs-comp-col.with {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.sfhs-comp-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
  align-self: center;
}

.sfhs-comp-tag.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfhs-comp-tag.green {
  background: #dcfce7;
  color: #166534;
}

.sfhs-comp-headline {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
}

.sfhs-comp-step {
  font-size: 0.95rem;
  font-weight: 700;
  color: #475569;
  padding: 0.5rem;
  background: rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
}

.sfhs-comp-step.green {
  color: #166534;
  background: rgba(255,255,255,0.85);
}

.sfhs-comp-arrow {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ef4444;
  margin: 0.25rem 0;
}

.sfhs-comp-arrow.green {
  color: #16a34a;
}

.sfhs-comp-result {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  padding: 0.85rem;
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
}

.sfhs-comp-result.red {
  background: #fee2e2;
  color: #991b1b;
}

.sfhs-comp-result.green {
  background: #dcfce7;
  color: #166534;
}

.sfhs-trans-pill {
  background: #071530;
  color: #ffffff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-xl);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* SECTION 13: Committee Decision Flow 5 */
.sfhs-decision-flow-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sfhs-decision-step {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  text-align: center;
  flex: 1;
  min-width: 160px;
  max-width: 210px;
}

.sfhs-decision-step.final {
  border-color: #22c55e;
  background: #f0fdf4;
}

.sfhs-decision-num {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 0.5rem;
}

.sfhs-decision-step.final .sfhs-decision-num {
  color: #16a34a;
}

.sfhs-decision-text {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--primary-900);
  line-height: 1.35;
}

.sfhs-decision-arrow {
  font-size: 1.35rem;
  font-weight: 800;
  color: #94a3b8;
}

/* SECTION 14: Roof Grid 4 */
.sfhs-roof-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.sfhs-roof-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  text-align: center;
}

.sfhs-roof-icon {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.sfhs-roof-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
}

.sfhs-roof-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sfhs-roof-cta-wrap {
  text-align: center;
}

/* SECTION 15: After Installation Journey Flow */
.sfhs-after-journey-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 2.5rem 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.sfhs-journey-step {
  background: #f8fafc;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-md);
  border: 1px solid #e2e8f0;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--primary-900);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sfhs-journey-step.highlight {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.sfhs-journey-step.green {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.sfhs-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
}

.sfhs-journey-step.highlight .sfhs-step-dot {
  background: #f59e0b;
}

.sfhs-journey-step.green .sfhs-step-dot {
  background: #16a34a;
}

.sfhs-journey-arrow {
  color: #64748b;
  font-weight: 800;
  font-size: 1.1rem;
}

/* SECTION 16: Long-Term Grid 6 */
.sfhs-longterm-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.sfhs-longterm-node {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.15rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  text-align: center;
}

.sfhs-year-tag {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #2563eb;
  margin-bottom: 0.5rem;
}

.sfhs-year-tag.gold {
  color: #d97706;
}

.sfhs-year-tag.green {
  color: #16a34a;
}

.sfhs-year-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary-900);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.sfhs-year-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.sfhs-journey-disclaimer {
  text-align: center;
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
  margin-top: 1.75rem;
}

/* SECTION 17: Society Solar Calculator */
.sfhs-calc-container {
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 2rem 1.75rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1);
  max-width: 1140px;
  margin: 0 auto;
}

.sfhs-calc-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
}

.sfhs-calc-input-group {
  margin-bottom: 1.75rem;
}

.sfhs-calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.sfhs-calc-label {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfhs-calc-value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #2563eb;
}

.sfhs-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sfhs-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
  border: 2px solid #ffffff;
}

.sfhs-slider-bounds {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.35rem;
  font-weight: 600;
}

.sfhs-cfa-tag-notice {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  font-size: 0.86rem;
  color: #1e3a8a;
  line-height: 1.5;
  margin-top: 1.5rem;
}

.sfhs-outputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sfhs-output-chip {
  background: #f8fafc;
  padding: 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sfhs-output-chip.highlight {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.sfhs-output-chip.highlight-green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.sfhs-out-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sfhs-out-val {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfhs-out-val.blue {
  color: #2563eb;
}

.sfhs-out-val.gold {
  color: #d97706;
}

.sfhs-out-val.green {
  color: #16a34a;
}

.sfhs-payback-summary {
  background: #f8fafc;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sfhs-payback-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--primary-900);
}

.sfhs-payback-num {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #16a34a;
}

.sfhs-calc-subnote {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
  margin-top: 0.85rem;
}

/* SECTION 18: FAQ Accordion */
.sfhs-faq-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sfhs-faq-item {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sfhs-faq-item.active {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.sfhs-faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-900);
  text-align: left;
  cursor: pointer;
  border: none;
}

.sfhs-faq-chevron {
  width: 20px;
  height: 20px;
  stroke: #2563eb;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.sfhs-faq-item.active .sfhs-faq-chevron {
  transform: rotate(180deg);
}

.sfhs-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
  padding: 0 1.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sfhs-faq-item.active .sfhs-faq-answer {
  max-height: 250px;
  padding: 0 1.5rem 1.25rem;
}

/* SECTION 19: Final CTA */
.sfhs-cta-section {
  background: linear-gradient(135deg, #071530 0%, #0c204c 100%);
  padding: 2.25rem 0 2rem;
  color: #ffffff;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sfhs-cta-box {
  max-width: 800px;
  margin: 0 auto;
}

.sfhs-cta-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.25;
  font-family: var(--font-heading);
}

.sfhs-cta-text {
  font-size: 1.08rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.sfhs-cta-buttons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* SECTION 20: Disclaimer */
.sfhs-legal-disclaimer {
  background: #f1f5f9;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
}

.sfhs-legal-text {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.6;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
}

/* ==========================================================================
   SFHS SUBTLE BORDER-BEAM & CARD GLOW ANIMATIONS (STRIPE/LINEAR STYLE)
   ========================================================================== */

/* 1. Interactive Card Glow & Smooth Lift */
.sfhs-tilt-card {
  position: relative;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease;
  overflow: hidden;
  will-change: transform, box-shadow;
}

/* Dynamic Cursor-Tracking Ambient Glow */
.sfhs-tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(37, 99, 235, 0.06), transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Subtle Dynamic Border Beam Reflection */
.sfhs-tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(37, 99, 235, 0.25), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1.5px;
}

.sfhs-tilt-card:hover::before,
.sfhs-tilt-card:hover::after {
  opacity: 1;
}

.sfhs-tilt-card:hover {
  transform: translateY(-4px);
  border-color: #93c5fd;
  box-shadow: 0 18px 36px -10px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.15);
}

/* 2. Hero Visual Elevation */
.sfhs-hero-media {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  will-change: transform;
}

.sfhs-hero-media:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -12px rgba(15, 23, 42, 0.15);
}

.sfhs-image-overlay-pill,
.sfhs-pm-badge {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sfhs-hero-media:hover .sfhs-image-overlay-pill {
  transform: translateY(-2px);
}

.sfhs-hero-media:hover .sfhs-pm-badge {
  transform: translateY(-2px);
}

/* 3. Subtle Button Micro-Hover */
.sfhs-magnetic-btn {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sfhs-magnetic-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(217, 119, 6, 0.3);
}

/* 4. Interactive Chart Bar Elevation */
.sfhs-chart-bar-item {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sfhs-chart-bar-item:hover {
  transform: translateY(-6px);
}

.sfhs-chart-bar-item:hover .sfhs-chart-bar-fill {
  filter: brightness(1.15);
  box-shadow: 0 0 14px rgba(37, 99, 235, 0.4);
}

.sfhs-chart-bar-item:hover .sfhs-bar-val {
  color: #2563eb;
  font-weight: 800;
}

/* ==========================================================================
   TORRENT POWER ON-GRID CAPACITY & 25-YEAR ROI FINDER COMPONENT STYLES
   ========================================================================== */

.tr-finder-wrapper {
  background: #ffffff;
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(15, 23, 42, 0.05);
  border: 1px solid #e2e8f0;
  padding: 2.25rem;
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

.tr-finder-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1.75rem;
}

.tr-header-content {
  flex: 1;
}

.tr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid #bfdbfe;
  margin-bottom: 0.65rem;
  letter-spacing: 0.02em;
}

.tr-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.tr-subtitle {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 820px;
  margin-bottom: 0;
}

.tr-tariff-pill {
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #ffffff;
  padding: 0.85rem 1.35rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
  white-space: nowrap;
}

.tr-tp-logo {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 0.15rem;
}

.tr-tp-rate strong {
  font-size: 1.5rem;
  font-weight: 800;
}

.tr-tp-rate small {
  font-size: 0.8rem;
  color: #bfdbfe;
}

/* Tabs Navigation */
.tr-tabs-nav {
  display: flex;
  gap: 0.65rem;
  background: #f1f5f9;
  padding: 0.4rem;
  border-radius: 0.85rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}

.tr-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: 0.65rem;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tr-tab-btn:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.6);
}

.tr-tab-btn.active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.tr-tab-icon {
  font-size: 1.1rem;
}

/* Tab Panes */
.tr-tab-pane {
  display: none;
}

.tr-tab-pane.active {
  display: block;
}

/* Capacity Grid */
.tr-capacity-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.75rem;
}

.tr-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.75rem;
}

.tr-card-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

.tr-step-circle {
  width: 26px;
  height: 26px;
  background: #2563eb;
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
}

.tr-card-sub {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 1.5rem;
}

/* Bill Input Group */
.tr-bill-input-group {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.85rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.tr-input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.tr-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
}

.tr-input-box {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 1.5px solid #94a3b8;
  border-radius: 0.5rem;
  padding: 0.35rem 0.65rem;
  transition: border-color 0.2s;
}

.tr-input-box:focus-within {
  border-color: #2563eb;
  background: #ffffff;
}

.tr-currency {
  font-weight: 700;
  color: #2563eb;
  margin-right: 0.25rem;
  font-size: 1.1rem;
}

.tr-num-input {
  width: 85px;
  border: none;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  outline: none;
}

.tr-month-unit {
  font-size: 0.78rem;
  color: #64748b;
  margin-left: 0.35rem;
}

.tr-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  accent-color: #2563eb;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.tr-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 1rem;
}

.tr-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.75rem;
  border-top: 1px dashed #e2e8f0;
}

.tr-preset-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  margin-right: 0.25rem;
}

.tr-preset-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.tr-preset-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.tr-preset-btn.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Panel Options Radio */
.tr-panel-select-wrap {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.85rem;
  padding: 1.15rem;
  margin-bottom: 1.5rem;
}

.tr-panel-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.tr-panel-opt {
  position: relative;
  cursor: pointer;
  display: block;
}

.tr-panel-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tr-opt-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.65rem;
  transition: all 0.2s;
}

.tr-opt-box strong {
  font-size: 1.05rem;
  color: #0f172a;
}

.tr-opt-box small {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.tr-panel-opt:hover .tr-opt-box {
  border-color: #94a3b8;
}

.tr-panel-opt.selected .tr-opt-box {
  background: #eff6ff;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb;
}

.tr-panel-opt.selected .tr-opt-box strong {
  color: #1d4ed8;
}

/* Future AC Section */
.tr-ac-section {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.85rem;
  padding: 1.15rem;
}

.tr-ac-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.tr-ac-subtitle {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 1rem;
}

.tr-ac-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

.tr-ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tr-ac-table th {
  background: #f1f5f9;
  padding: 0.6rem 0.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  color: #475569;
  border-bottom: 1.5px solid #cbd5e1;
}

.tr-ac-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

.tr-ac-row.ac-selected {
  background: #f0fdf4;
}

.tr-ac-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #16a34a;
  cursor: pointer;
}

.tr-eff-tag {
  background: #e2e8f0;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.tr-ac-note {
  font-size: 0.75rem;
  color: #64748b;
  background: #f8fafc;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  border-left: 3px solid #3b82f6;
}

/* Right Summary Card */
.tr-summary-card {
  background: #ffffff;
  border: 2px solid #bfdbfe;
  display: flex;
  flex-direction: column;
}

.tr-spec-hero {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
  border-radius: 0.85rem;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.3);
}

.tr-spec-hero-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #93c5fd;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.tr-spec-hero-val {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fbbf24;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.tr-spec-hero-sub {
  font-size: 0.85rem;
  color: #e2e8f0;
  font-weight: 500;
}

.tr-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.tr-metric-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tr-m-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.tr-m-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}

.tr-m-val.green {
  color: #16a34a;
}

.tr-m-val.text-blue {
  color: #2563eb;
}

.tr-cost-stack {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.15rem;
  margin-bottom: 1.25rem;
}

.tr-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #475569;
  padding: 0.35rem 0;
}

.tr-cost-row.subsidy-row {
  color: #16a34a;
  font-weight: 600;
  border-bottom: 1px dashed #cbd5e1;
  padding-bottom: 0.65rem;
  margin-bottom: 0.45rem;
}

.tr-cost-row.total-row {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  padding-top: 0.35rem;
}

.green-hero {
  color: #16a34a;
  font-size: 1.35rem;
}

.tr-payback-pill {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.tr-pb-icon {
  font-size: 1.6rem;
}

.tr-pb-text {
  display: flex;
  flex-direction: column;
}

.tr-pb-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  color: #15803d;
  text-transform: uppercase;
}

.tr-pb-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: #166534;
}

.tr-pb-text small {
  font-size: 0.72rem;
  color: #15803d;
}

/* ROI Tab Styles */
.tr-roi-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.tr-roi-header-info h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.tr-roi-header-info p {
  color: #64748b;
  font-size: 0.88rem;
  margin-bottom: 0;
}

.tr-roi-compare-badge {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
}

.tr-roi-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.tr-roi-card {
  border-radius: 1rem;
  padding: 1.75rem;
  border: 2px solid #e2e8f0;
  background: #ffffff;
}

.tr-roi-card.featured {
  border-color: #2563eb;
  box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.15);
  position: relative;
}

.tr-roi-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.65rem;
}

.tr-roi-tag.gold {
  background: #fef3c7;
  color: #b45309;
}

.tr-roi-tag.gray {
  background: #f1f5f9;
  color: #64748b;
}

.tr-roi-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.tr-roi-card-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 1.25rem;
}

.tr-roi-stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tr-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  background: #f8fafc;
  font-size: 0.88rem;
}

.tr-stat-item.highlight-item {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
}

.tr-stat-item.gold-bg {
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
}

.tr-stat-lbl {
  color: #475569;
  font-weight: 600;
}

.tr-stat-val {
  font-weight: 800;
  color: #0f172a;
}

.text-green { color: #16a34a !important; }
.text-red { color: #dc2626 !important; }
.text-muted { color: #64748b !important; }
.font-bold { font-weight: 800 !important; }

/* Cashflow Table */
.tr-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}

.tr-table-header {
  margin-bottom: 1rem;
}

.tr-table-header h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.2rem;
}

.tr-table-note {
  font-size: 0.78rem;
  color: #64748b;
}

.tr-cashflow-table-wrap {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
}

.tr-cashflow-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tr-cashflow-table th {
  position: sticky;
  top: 0;
  background: #1e293b;
  color: #ffffff;
  padding: 0.65rem 0.6rem;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 2;
}

.tr-cashflow-table th:first-child {
  text-align: left;
}

.tr-cashflow-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #f1f5f9;
  text-align: right;
  color: #334155;
}

.tr-cashflow-table td:first-child {
  text-align: left;
}

.tr-cashflow-table tr:hover {
  background: #f8fafc;
}

.tr-payback-highlight {
  background: #f0fdf4 !important;
  font-weight: 700;
  border-left: 4px solid #16a34a;
}

/* Hardware Matrix (Sheet 6) */
.tr-matrix-header-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.tr-matrix-header-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}

.tr-matrix-header-card p {
  color: #64748b;
  font-size: 0.88rem;
  margin-bottom: 0;
}

.tr-matrix-table-wrap {
  overflow-x: auto;
}

.tr-matrix-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  overflow: hidden;
}

.tr-matrix-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 800;
  border-bottom: 2px solid #e2e8f0;
}

.th-volt {
  background: #eff6ff;
  color: #1d4ed8;
  border-left: 1px solid #bfdbfe;
  border-right: 1px solid #bfdbfe;
}

.th-market {
  background: #fff1f2;
  color: #be123c;
}

.tr-matrix-table td {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: top;
  font-size: 0.88rem;
}

.td-volt {
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

.td-volt p, .td-market p {
  margin: 0.4rem 0 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #475569;
}

.tr-badge-green {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.tr-badge-red {
  display: inline-block;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 992px) {
  .tr-capacity-grid,
  .tr-roi-cards-grid {
    grid-template-columns: 1fr;
  }

  .tr-finder-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tr-tariff-pill {
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .tr-finder-wrapper {
    padding: 1.25rem;
  }

  .tr-panel-options {
    grid-template-columns: 1fr;
  }

  .tr-tabs-nav {
    flex-direction: column;
  }
}

/* ==========================================================================
   SOLAR FOR HOUSING SOCIETIES (/solar-for-housing-societies)
   MASTER DEDICATED COMPONENT STYLES
   ========================================================================== */

/* 1. Hero Section */
.sfhs-hero-section {
  position: relative;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
  padding: 3rem 0 2.5rem;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
}

.sfhs-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.sfhs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: #dbeafe;
  color: #1e40af;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.sfhs-hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 900;
  color: #071530;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

.sfhs-hero-text {
  font-size: 1.12rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.sfhs-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sfhs-hero-media {
  position: relative;
}

.sfhs-image-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(7, 21, 48, 0.22);
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
}

.sfhs-hero-img {
  width: 100%;
  height: auto;
  min-height: 380px;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

.sfhs-hero-floating-badge {
  position: absolute;
  background: rgba(7, 21, 48, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.sfhs-hero-floating-badge.badge-top-left {
  top: 1rem;
  left: 1rem;
}

.sfhs-hero-floating-badge.badge-mid-right {
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

.sfhs-hero-floating-badge.badge-bottom {
  bottom: 1rem;
  left: 1rem;
}

.sfhs-hero-floating-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.sfhs-hero-floating-badge .dot.gold { background: #f59e0b; }
.sfhs-hero-floating-badge .dot.blue { background: #3b82f6; }
.sfhs-hero-floating-badge .dot.green { background: #22c55e; }

.sfhs-hero-flow-bar {
  margin-top: 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.sfhs-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.sfhs-flow-step .icon {
  font-size: 1.25rem;
}

.sfhs-flow-step .text {
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.3px;
}

.sfhs-flow-step.highlight .text {
  color: #2563eb;
}

.sfhs-flow-step.green .text {
  color: #16a34a;
}

.sfhs-flow-sep {
  color: #94a3b8;
  font-weight: 800;
  font-size: 1rem;
}

.sfhs-trust-bar {
  background: #ffffff;
  border-radius: 1rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.sfhs-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.sfhs-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 2. Common Section Header Styles */
.sfhs-section {
  padding: 1.75rem 0 1.25rem;
  position: relative;
}

.sfhs-bg-light {
  background: #f8fafc;
}

.sfhs-section-header {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 1.25rem;
}

.sfhs-section-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  font-weight: 800;
  color: #071530;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 0.5rem;
  margin-bottom: 0.65rem;
}

.sfhs-section-subtitle {
  font-size: 1.08rem;
  color: #475569;
  line-height: 1.65;
  max-width: 840px;
  margin: 0.5rem auto 0 auto;
}

/* 3. Section 02: Problem Load Cards */
.sfhs-loads-problem-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.sfhs-load-prob-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2rem 1.65rem;
  border: 1.5px solid #fee2e2;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.sfhs-load-prob-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(239, 68, 68, 0.12);
  border-color: #fca5a5;
}

.sfhs-load-prob-card .prob-icon {
  font-size: 2.3rem;
  margin-bottom: 1rem;
}

.sfhs-load-prob-card .prob-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.55rem;
}

.sfhs-load-prob-card .prob-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.sfhs-load-prob-card .sfhs-use-tag,
.sfhs-load-prob-card .prob-badge.red {
  display: inline-block;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  align-self: flex-start;
}

.sfhs-engineering-callout {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  border-radius: 18px;
  padding: 1.85rem 2.25rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 36px rgba(7, 21, 48, 0.22);
}

.sfhs-engineering-callout .callout-icon {
  font-size: 2.6rem;
  flex-shrink: 0;
}

.sfhs-engineering-callout .callout-text strong {
  font-size: 1.1rem;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.sfhs-engineering-callout .callout-text span {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.6;
}

/* 4. Section 03: What Society Solar Can Power (6 Uses) */
.sfhs-uses-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.sfhs-use-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.25rem 2rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.sfhs-use-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  border-color: #93c5fd;
}

.sfhs-use-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.15rem;
}

.sfhs-use-num {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  color: #cbd5e1;
}

.sfhs-use-icon {
  font-size: 2.3rem;
}

.sfhs-use-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.6rem;
}

.sfhs-use-desc {
  font-size: 0.98rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: 1.35rem;
  flex-grow: 1;
}

.sfhs-use-tag {
  display: inline-block;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: 8px;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sfhs-cfa-disclaimer-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.65;
}

/* 5. Section 04: PM Surya Ghar GHS/RWA CFA */
.sfhs-cfa-rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 1.5rem;
}

.sfhs-cfa-rule-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.25rem 2rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: transform 0.25s ease;
}

.sfhs-cfa-rule-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.sfhs-cfa-rule-card.highlight-gold {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
}

.sfhs-cfa-rule-card.highlight-blue {
  border-color: #3b82f6;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.sfhs-cfa-rule-card.highlight-dark {
  border-color: #071530;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.sfhs-cfa-rule-card .rule-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.sfhs-cfa-rule-card.highlight-gold .rule-badge { background: #fef3c7; color: #92400e; }
.sfhs-cfa-rule-card.highlight-blue .rule-badge { background: #dbeafe; color: #1e40af; }
.sfhs-cfa-rule-card.highlight-dark .rule-badge { background: #e2e8f0; color: #0f172a; }

.sfhs-cfa-rule-card .rule-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.5rem;
  font-weight: 900;
  color: #071530;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.sfhs-cfa-rule-card .rule-val .unit {
  font-size: 1.15rem;
  font-weight: 700;
  color: #64748b;
}

.sfhs-cfa-rule-card .rule-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

.sfhs-cfa-rule-card .rule-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.62;
  margin-bottom: 0;
}

.sfhs-cfa-calc-preview-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sfhs-cfa-calc-preview-card .preview-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}

.sfhs-cfa-calc-preview-card .preview-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.5rem;
}

.formula-math-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 14px;
  padding: 1.35rem 2rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.formula-box {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0.85rem 1.35rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.formula-box .f-lbl {
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.formula-box .f-math {
  font-size: 1.1rem;
  font-weight: 800;
  color: #071530;
}

.formula-box.highlight {
  border-color: #22c55e;
  background: #f0fdf4;
}

.formula-box.highlight .f-math {
  color: #15803d;
}

.f-op {
  font-size: 1.6rem;
  font-weight: 900;
  color: #94a3b8;
}

.preview-examples-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  margin-bottom: 1.35rem;
}

.preview-examples-row .ex-item {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 1.15rem 1.35rem;
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  border-left: 4px solid #2563eb;
}

.preview-notice {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.6;
  border-top: 1px solid #e2e8f0;
  padding-top: 1.15rem;
}

/* 6. Section 05: Master Calculator & Live Outputs */
.sfhs-full-calc-container {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  box-shadow: 0 15px 45px -10px rgba(7, 21, 48, 0.12);
  overflow: hidden;
  padding: 2rem 1.75rem;
}

.sfhs-calc-subsidy-ribbon {
  background: linear-gradient(90deg, #eff6ff 0%, #fef3c7 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  color: #1e3a8a;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  line-height: 1.55;
}

.sfhs-calc-subsidy-ribbon .ribbon-tag {
  background: #1e40af;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.sfhs-calc-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: start;
}

.sfhs-calc-inputs-col,
.sfhs-calc-results-col {
  display: flex;
  flex-direction: column;
}

.col-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e2e8f0;
}

.soc-input-group {
  margin-bottom: 1.25rem;
}

.soc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.soc-label-row label {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1e293b;
}

.soc-val-badge {
  background: #dbeafe;
  color: #1e40af;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
}

.soc-val-badge.green {
  background: #dcfce7;
  color: #15803d;
}

.sfhs-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sfhs-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f59e0b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: 2px solid #ffffff;
  transition: transform 0.15s ease;
}

.sfhs-range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 600;
  margin-top: 0.45rem;
}

.soc-input-row-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.25rem;
}

.soc-input-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.soc-subgroup label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 0.4rem;
}

.btn-mode {
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 800;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-mode.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* 8 Live Metric Chips */
.sfhs-8-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}

.soc-metric-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.15rem;
  text-align: center;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.soc-metric-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.soc-metric-box.highlight-rec {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.14);
}

.soc-metric-box.highlight-cfa {
  background: #f0fdf4;
  border-color: #86efac;
}

.soc-metric-box.highlight-net {
  background: #eff6ff;
  border-color: #93c5fd;
}

.soc-metric-box.highlight-save {
  background: #f0fdf4;
  border-color: #4ade80;
}

.soc-metric-box .soc-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
}

.soc-metric-box .soc-badge.gold { background: #fef3c7; color: #92400e; }
.soc-metric-box .soc-badge.green { background: #dcfce7; color: #166534; }

.soc-metric-box .metric-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 900;
  color: #071530;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.soc-metric-box .metric-val.gold { color: #d97706; }
.soc-metric-box .metric-val.green { color: #16a34a; }
.soc-metric-box .metric-val.blue { color: #2563eb; }

.soc-metric-box .metric-lbl {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.soc-payback-banner {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* 7. 3-Way Comparative Cards & 30-Year Milestones */
.sfhs-3way-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.sfh-3way-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.25rem 2rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.sfh-3way-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

.sfh-3way-card.normal-card {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 100%);
}

.sfh-3way-card.cash-card {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.sfh-3way-card.emi-card {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.sfh-3way-smart-tag {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.sfh-3way-card-badge {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.sfh-3way-card-badge.red { background: #fee2e2; color: #b91c1c; }
.sfh-3way-card-badge.green { background: #dcfce7; color: #15803d; }
.sfh-3way-card-badge.blue { background: #dbeafe; color: #1e40af; }

.sfh-3way-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.5rem;
  font-weight: 900;
  color: #071530;
  margin-bottom: 0.45rem;
}

.sfh-3way-card-tagline {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

.sfh-3way-metric-box {
  border-radius: 12px;
  padding: 1.25rem 1.15rem;
  margin-bottom: 1.35rem;
  text-align: center;
}

.sfh-3way-metric-box.red-bg { background: #fee2e2; border: 1.5px solid #fca5a5; }
.sfh-3way-metric-box.green-bg { background: #dcfce7; border: 1.5px solid #86efac; }
.sfh-3way-metric-box.blue-bg { background: #dbeafe; border: 1.5px solid #93c5fd; }

.sfh-3way-metric-lbl {
  font-size: 0.8rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  display: block;
  letter-spacing: 0.04em;
}

.sfh-3way-metric-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  margin: 0.35rem 0;
}

.sfh-3way-metric-val.red-text { color: #b91c1c; }
.sfh-3way-metric-val.green-text { color: #15803d; }
.sfh-3way-metric-val.blue-text { color: #1d4ed8; }

.sfh-val-unit {
  font-size: 1rem;
  font-weight: 700;
}

.sfh-3way-metric-sub {
  font-size: 0.82rem;
  color: #64748b;
  display: block;
}

.sfh-3way-highlight-pill {
  background: #ffffff;
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  margin-bottom: 0.85rem;
  border: 1px solid #e2e8f0;
}

.sfh-3way-highlight-pill.red { background: #fef2f2; border-color: #fecaca; }
.sfh-3way-highlight-pill.green { background: #f0fdf4; border-color: #bbf7d0; }
.sfh-3way-highlight-pill.blue { background: #eff6ff; border-color: #bfdbfe; }
.sfh-3way-highlight-pill.gold { background: #fefce8; border-color: #fef08a; }

.sfh-3way-highlight-pill .sfh-hl-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sfh-3way-highlight-pill .sfh-hl-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0.2rem 0;
}

.sfh-3way-highlight-pill .sfh-hl-note {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.sfh-3way-card-footer {
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px dashed #cbd5e1;
  font-size: 0.85rem;
  font-weight: 700;
}

.sfh-3way-card-footer.red-foot { color: #b91c1c; }
.sfh-3way-card-footer.green-foot { color: #15803d; }
.sfh-3way-card-footer.blue-foot { color: #1d4ed8; }

.sfhs-3way-milestones-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 2.5rem;
}

.sfhs-3way-milestones-header {
  margin-bottom: 1.75rem;
}

.sfhs-3way-milestones-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.35rem;
}

.sfhs-3way-milestones-sub {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
}

/* 13. Quality, Safety & Environmental Counters */
.sfhs-quality-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.sfhs-q-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.25rem 2rem;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.sfhs-q-box .q-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.sfhs-q-box .q-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.6rem;
}

.sfhs-q-box .q-desc {
  font-size: 0.98rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: 0;
}

.sfhs-env-counters-card {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  border-radius: 20px;
  padding: 2.25rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 12px 36px rgba(7, 21, 48, 0.25);
}

.env-counter-item .cnt-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.45rem;
}

.env-counter-item .cnt-val {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fbbf24;
  display: block;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.env-counter-item .cnt-lbl {
  font-size: 0.9rem;
  color: #cbd5e1;
  font-weight: 700;
}

/* 14. 6-Question FAQ Accordion */
.sfhs-faq-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}

.sfhs-faq-item {
  background: #ffffff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.sfhs-faq-item.active {
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
}

.sfhs-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.65rem;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: #071530;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.sfhs-faq-question .faq-icon {
  font-size: 1.5rem;
  color: #2563eb;
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 1rem;
}

.sfhs-faq-answer {
  display: none;
  padding: 0 1.65rem 1.45rem;
  font-size: 1rem;
  color: #475569;
  line-height: 1.72;
  border-top: 1px dashed #f1f5f9;
  padding-top: 1rem;
}

.sfhs-faq-item.active .sfhs-faq-answer {
  display: block;
}

/* 15. Lead Generation Form */
.sfhs-form-wrapper {
  max-width: 1040px;
  margin: 0 auto;
}

.sfhs-form-card {
  background: #ffffff;
  border-radius: 22px;
  border: 1.5px solid #cbd5e1;
  padding: 2.25rem 2rem;
  box-shadow: 0 20px 50px -10px rgba(7, 21, 48, 0.12);
}

.field-error-msg {
  font-size: 0.78rem;
  color: #dc2626;
  font-weight: 600;
  display: none;
  margin-top: 0.35rem;
}

.form-group.error .field-error-msg {
  display: block;
}

.form-group.error .form-control {
  border-color: #ef4444;
  background: #fef2f2;
}

/* 16. CTA & Disclaimer */
.sfhs-cta-section {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  padding: 2.25rem 0 2rem;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sfhs-cta-box {
  max-width: 1040px;
  margin: 0 auto;
}

.sfhs-cta-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.sfhs-cta-text {
  font-size: 1.18rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.sfhs-cta-buttons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.sfhs-legal-disclaimer {
  background: #f1f5f9;
  padding: 2.5rem 0;
  border-top: 1px solid #e2e8f0;
}

.sfhs-legal-text {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.75;
  margin: 0;
  text-align: justify;
}

.sfh-3way-table-responsive {
  overflow-x: auto;
}

.sfh-3way-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.sfh-3way-table th {
  background: #f8fafc;
  padding: 0.85rem 1rem;
  font-weight: 800;
  color: #334155;
  border-bottom: 2px solid #cbd5e1;
}

.sfh-3way-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.sfh-3way-table tr:hover td {
  background: #f8fafc;
}

/* 8. Gujarat Regulatory & 8-Step Surya Gujarat Workflow */
.sfhs-reg-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.sfhs-reg-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  text-align: center;
}

.sfhs-reg-card .reg-icon {
  font-size: 2.2rem;
  margin-bottom: 0.65rem;
}

.sfhs-reg-card .reg-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.35rem;
}

.sfhs-reg-card .reg-desc {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

.sfhs-sg-process-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  padding: 2.25rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.sg-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.5rem;
  text-align: center;
}

.sg-steps-grid-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sg-step-node {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.15rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
}

.sg-step-node:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
}

.sg-step-node.highlight {
  background: #eff6ff;
  border-color: #3b82f6;
}

.sg-step-node.green {
  background: #f0fdf4;
  border-color: #22c55e;
}

.sg-step-node .num {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: #2563eb;
  margin-bottom: 0.25rem;
}

.sg-step-node .title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.25rem;
}

.sg-step-node .desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}

.sg-disclaimer {
  font-size: 0.78rem;
  color: #94a3b8;
  text-align: center;
}

/* 9. Society vs Individual Home Table */
.sfhs-vs-table-wrap {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.sfhs-vs-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.sfhs-vs-table th {
  background: #071530;
  color: #ffffff;
  padding: 1.15rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.sfhs-vs-table td {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.9rem;
  color: #334155;
}

.sfhs-vs-table tr:nth-child(even) td {
  background: #f8fafc;
}

/* 10. Load Profile & SLD Diagram */
.sfhs-diagram-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.sfhs-diag-box {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.diag-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px solid #e2e8f0;
}

.load-curve-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 200px;
  background: #f8fafc;
  border-radius: 0.85rem;
  border: 1px solid #e2e8f0;
  padding: 1rem 1.25rem 0.5rem;
  margin-bottom: 1.25rem;
}

.time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  width: 14%;
}

.time-item .t-bar {
  width: 18px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.time-item .t-bar.pump { background: #38bdf8; }
.time-item .t-bar.lifts { background: #818cf8; }
.time-item .t-bar.solar { background: #f59e0b; }
.time-item .t-bar.light { background: #fbbf24; }
.time-item .t-bar.grid { background: #94a3b8; }

.time-item .t-hour {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.time-item .t-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
  margin-top: 0.35rem;
}

.diag-subtext {
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.5;
  margin-top: auto;
}

.sld-flow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.sld-node {
  width: 100%;
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: #071530;
}

.sld-node.highlight {
  background: #eff6ff;
  border-color: #3b82f6;
}

.sld-arrow {
  font-size: 0.75rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.sld-branches-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.sld-branches-grid .branch {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}

/* 11. EV Charging + Solar */
.sfhs-ev-solar-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  padding: 2.5rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.ev-solar-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: center;
}

.ev-calc-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}

/* 12. 3 Models & 18-Point Checklist */
.sfhs-models-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sfhs-model-card {
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  border: 2px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.sfhs-model-card.highlight-blue {
  border-color: #3b82f6;
}

.sfhs-model-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  align-self: flex-start;
  margin-bottom: 0.85rem;
}

.sfhs-model-badge.blue { background: #dbeafe; color: #1e40af; }
.sfhs-model-badge.gold { background: #fef3c7; color: #92400e; }

.sfhs-model-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  color: #071530;
  margin-bottom: 0.5rem;
}

.sfhs-model-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.model-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  font-size: 0.85rem;
  color: #334155;
}

.model-perks li {
  margin-bottom: 0.5rem;
}

.sfhs-model-highlight {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 800;
  color: #16a34a;
}

.sfhs-model-highlight.blue { color: #2563eb; }
.sfhs-model-highlight.gold { color: #d97706; }

.sfhs-checklist-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  padding: 2.25rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.checklist-heading {
  font-size: 1.3rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.5rem;
}

.checklist-grid-18 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem 1.5rem;
}

.chk-item {
  font-size: 0.85rem;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chk-item span {
  color: #16a34a;
  font-weight: 900;
}

/* 13. Quality, Safety & Environmental Counters */
.sfhs-quality-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sfhs-q-box {
  background: #ffffff;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.sfhs-q-box .q-icon {
  font-size: 2.4rem;
  margin-bottom: 0.85rem;
}

.sfhs-q-box .q-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.5rem;
}

.sfhs-q-box .q-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 0;
}

.sfhs-env-counters-card {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  border-radius: 1.25rem;
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(7, 21, 48, 0.25);
}

.env-counter-item .cnt-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.35rem;
}

.env-counter-item .cnt-val {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: #fbbf24;
  display: block;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.env-counter-item .cnt-lbl {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 700;
}

/* 14. 12-Question FAQ Accordion */
.sfhs-faq-container {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sfhs-faq-item {
  background: #ffffff;
  border-radius: 0.85rem;
  border: 1.5px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.sfhs-faq-item.active {
  border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}

.sfhs-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.15rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #071530;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.sfhs-faq-question .faq-icon {
  font-size: 1.5rem;
  color: #2563eb;
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 1rem;
}

.sfhs-faq-answer {
  display: none;
  padding: 0 1.5rem 1.25rem;
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.6;
  border-top: 1px dashed #f1f5f9;
  padding-top: 0.85rem;
}

.sfhs-faq-item.active .sfhs-faq-answer {
  display: block;
}

/* 15. Lead Generation Form */
.sfhs-form-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.sfhs-form-card {
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1.5px solid #cbd5e1;
  padding: 2.25rem 2rem;
  box-shadow: 0 15px 45px -10px rgba(7, 21, 48, 0.1);
}

.field-error-msg {
  font-size: 0.75rem;
  color: #dc2626;
  font-weight: 600;
  display: none;
  margin-top: 0.35rem;
}

.form-group.error .field-error-msg {
  display: block;
}

.form-group.error .form-control {
  border-color: #ef4444;
  background: #fef2f2;
}

/* 16. CTA & Disclaimer */
.sfhs-cta-section {
  background: linear-gradient(135deg, #071530 0%, #0e2a5e 100%);
  padding: 2.25rem 0 2rem;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sfhs-cta-box {
  max-width: 1080px;
  margin: 0 auto;
}

.sfhs-cta-title {
  font-size: clamp(1.85rem, 2.8vw, 2.45rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.sfhs-cta-text {
  font-size: 1.1rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.sfhs-cta-buttons {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

.sfhs-legal-disclaimer {
  background: #f1f5f9;
  padding: 2rem 0;
  border-top: 1px solid #e2e8f0;
}

.sfhs-legal-text {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  text-align: justify;
}

/* ==========================================================================
   19. DESIGN & CONSULTING VISUAL ARCHITECTURE & INTERACTIVE MODULES
   ========================================================================== */

/* Hero Section */
.dc-hero-wrapper {
  position: relative;
  background: #071530;
  color: #ffffff;
  overflow: hidden;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.dc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.dc-hero-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #ffffff;
}

.dc-hero-title span {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dc-hero-subtitle {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.dc-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.dc-hero-overlay-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(15, 23, 42, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.08em;
}

.dc-hero-overlay-tag span.sep {
  color: #f59e0b;
}

.dc-hero-visual-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dc-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dc-hero-visual-frame:hover .dc-hero-img {
  transform: scale(1.02);
}

.dc-hero-visual-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: rgba(7, 21, 48, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* Problem Statement Strip */
.dc-problem-strip {
  background: #f8fafc;
  padding: 3rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.dc-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.dc-problem-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.dc-problem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.12);
}

.dc-problem-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #0f172a;
}

.dc-problem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.dc-problem-card:hover .dc-problem-img {
  transform: scale(1.04);
}

.dc-problem-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(220, 38, 38, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

.dc-problem-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dc-problem-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fee2e2;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Services 01-06 Engineering Visual Cards */
.dc-service-section {
  padding: 4rem 0;
}

.dc-service-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 5rem;
}

.dc-service-item.reverse {
  direction: rtl;
}

.dc-service-item.reverse > * {
  direction: ltr;
}

.dc-service-visual {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
  background: #091224;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dc-service-visual:hover .dc-service-img {
  transform: scale(1.02);
}

.dc-service-visual.fit-contain {
  background: #070e1e;
}

.dc-service-visual.fit-contain .dc-service-img,
.dc-service-img.fit-contain {
  object-fit: contain !important;
  width: 100%;
  height: 100%;
}

.dc-service-visual.fit-contain:hover .dc-service-img {
  transform: scale(1.01);
}

.dc-service-label {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(15, 23, 42, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dc-service-num {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.9rem;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  display: block;
}

.dc-service-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.dc-service-desc {
  font-size: 1rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.dc-feature-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.dc-feature-pill {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* 4 Project Type Photos */
.dc-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.dc-project-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.dc-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.12);
}

.dc-project-card-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.dc-project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.dc-project-card:hover .dc-project-card-img {
  transform: scale(1.02);
}

.dc-project-card-body {
  padding: 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dc-project-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.dc-project-card-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* Before / After Split Screen Interactive Slider */
.dc-ba-section {
  background: #0a192f;
  color: #ffffff;
  padding: 4.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-ba-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

.dc-ba-stages {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.dc-ba-stage-pill {
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.dc-ba-stage-pill.active {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

.dc-ba-container {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-user-select: none;
  user-select: none;
}

.dc-ba-before-img,
.dc-ba-after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dc-ba-after-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  border-right: 2px solid #f59e0b;
}

.dc-ba-after-wrap .dc-ba-after-img {
  width: 960px;
  max-width: none;
}

.dc-ba-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f59e0b;
  color: #071530;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 10;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  border: 2px solid #ffffff;
}

.dc-ba-label {
  position: absolute;
  bottom: 1.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 5;
}

.dc-ba-label.before {
  right: 1.5rem;
  background: rgba(15, 23, 42, 0.85);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dc-ba-label.after {
  left: 1.5rem;
  background: rgba(245, 158, 11, 0.9);
  color: #071530;
  border: 1px solid #ffffff;
}

/* Engineering + Execution Hotspots Section */
.dc-exec-section {
  padding: 4.5rem 0;
  background: #ffffff;
}

.dc-hotspot-container {
  position: relative;
  max-width: 1060px;
  margin: 2.5rem auto 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid #e2e8f0;
  background: #071530;
}

.dc-hotspot-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

.dc-hotspot-pin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f59e0b;
  color: #071530;
  font-weight: 900;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
  animation: dcPulse 2s infinite;
}

@keyframes dcPulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  70% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.dc-hotspot-pin:hover,
.dc-hotspot-pin.active {
  background: #ffffff;
  color: #0284c7;
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.5);
  animation: none;
}

/* Hotspot Detail Card Overlay */
.dc-hotspot-detail-box {
  background: #0f172a;
  color: #ffffff;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.dc-hotspot-detail-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 0.25rem;
}

.dc-hotspot-detail-text {
  font-size: 0.92rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.5;
}

/* Deliverables Visual Stack of Design Sheets */
.dc-deliverables-section {
  padding: 4.5rem 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.dc-sheet-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.dc-sheet-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dc-sheet-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #0284c7;
  transition: width 0.2s ease;
}

.dc-sheet-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border-color: #0284c7;
}

.dc-sheet-card:hover:before {
  width: 6px;
  background: #f59e0b;
}

.dc-sheet-num {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 0.35rem;
  display: block;
}

.dc-sheet-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.dc-sheet-desc {
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* Why Volt's Legacy Engineering Advisory */
.dc-why-section {
  padding: 4.5rem 0;
  background: #071530;
  color: #ffffff;
}

.dc-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.dc-why-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  transition: transform 0.2s ease;
}

.dc-why-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.4);
}

.dc-why-metric {
  font-family: var(--font-heading, sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  color: #fbbf24;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.dc-why-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.dc-why-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 900px) {
  .dc-hero-grid,
  .dc-service-item,
  .dc-service-item.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 2rem;
  }
  .dc-service-img {
    height: 100%;
  }
  .dc-ba-container {
    height: 320px;
  }
  .dc-ba-after-wrap .dc-ba-after-img {
    width: 100vw;
  }
  .dc-hotspot-img {
    height: 340px;
  }
}

/* 9-Part Engineering Deliverables Matrix */
.dc-pillars-section {
  padding: 5rem 0;
  background: #ffffff;
}

.dc-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.dc-pillar-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 1.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.dc-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: #0284c7;
}

.dc-pillar-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}

.dc-pillar-num-badge {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #071530;
  color: #fbbf24;
  font-family: var(--font-heading, sans-serif);
  font-weight: 900;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dc-pillar-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}

.dc-pillar-desc {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.dc-pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.dc-pillar-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
}

.dc-pillar-list-item svg {
  width: 16px;
  height: 16px;
  color: #0284c7;
  flex-shrink: 0;
  margin-top: 2px;
}

.dc-nested-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.dc-nested-box-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.dc-nested-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #475569;
}

.dc-solstice-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
}




/* Structural Design Project Switcher Tabs */
.dc-service-visual-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.dc-struct-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.dc-struct-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dc-struct-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.dc-struct-tab.active {
  background: #0f172a;
  color: #fbbf24;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

/* ==========================================================================
   20. PROJECT PETA PAGE (SUB-PAGE) & 3D BLUEPRINT GALLERY ARCHITECTURE
   ========================================================================== */
.peta-page-wrapper {
  background: #f8fafc;
  min-height: 100vh;
  padding-bottom: 4rem;
}

.peta-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 1.25rem;
}

.peta-breadcrumb a {
  color: var(--solar-gold-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

.peta-breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.peta-breadcrumb span {
  color: #64748b;
}

.peta-breadcrumb strong {
  color: #e2e8f0;
  font-weight: 600;
}

.peta-hero {
  background: linear-gradient(135deg, #071530 0%, #0d224a 60%, #081a3d 100%);
  color: #ffffff;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
  position: relative;
  overflow: hidden;
}

.peta-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 450px;
  height: 100%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.peta-hero-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.peta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.peta-pill-gold {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.peta-pill-blue {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.peta-pill-green {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.peta-hero-title {
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  font-family: var(--font-heading);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.peta-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  color: #cbd5e1;
  font-size: 0.92rem;
}

.peta-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.peta-meta-item a {
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.peta-meta-item a:hover {
  color: #fbbf24;
}

/* Main Layout Grid */
.peta-main-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}

@media (max-width: 992px) {
  .peta-main-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Blueprint Viewer Card */
.peta-gallery-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  overflow: hidden;
}

.peta-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.peta-gallery-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #071530;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.peta-gallery-counter {
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.peta-main-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #050e20;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1e293b;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}

.peta-main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.peta-viewport-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(7, 21, 48, 0.92) 0%, rgba(7, 21, 48, 0.65) 60%, transparent 100%);
  padding: 1.25rem 1.25rem 0.85rem;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}

.peta-overlay-text h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.2rem;
}

.peta-overlay-text p {
  font-size: 0.82rem;
  color: #cbd5e1;
  margin: 0;
}

.peta-zoom-btn {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.peta-zoom-btn:hover {
  background: var(--solar-gold-500);
  color: #071530;
  border-color: var(--solar-gold-500);
}

/* Filmstrip Thumbnails */
.peta-thumbnails-wrapper {
  margin-top: 1rem;
}

.peta-thumbnails-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.peta-thumbnails-scroll {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.65rem;
  scroll-behavior: smooth;
}

.peta-thumbnails-scroll::-webkit-scrollbar {
  height: 6px;
}

.peta-thumbnails-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.peta-thumbnails-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.peta-thumb-btn {
  flex: 0 0 95px;
  height: 68px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e2e8f0;
  background: #0f172a;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
}

.peta-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.peta-thumb-btn:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.peta-thumb-btn:hover img {
  transform: scale(1.08);
}

.peta-thumb-btn.active {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4), 0 4px 10px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.peta-thumb-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: rgba(7, 21, 48, 0.85);
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  padding: 1px 0;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specifications Card */
.peta-specs-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.peta-card-title {
  font-size: 1.2rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: #071530;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f1f5f9;
}

.peta-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.peta-spec-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #e2e8f0;
  gap: 1rem;
}

.peta-spec-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.peta-spec-label {
  color: #64748b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 42%;
}

.peta-spec-value {
  color: #0f172a;
  font-weight: 700;
  text-align: right;
  flex: 1;
}

.peta-spec-value.highlight-gold {
  color: #d97706;
}

.peta-spec-value.highlight-blue {
  color: #0284c7;
}

/* Generation Performance Widget */
.peta-gen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.peta-gen-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 0.75rem;
  text-align: center;
}

.peta-gen-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #071530;
  margin-bottom: 0.2rem;
}

.peta-gen-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Engineering Highlights Card */
.peta-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.peta-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.5;
}

.peta-highlights-list li .check-icon {
  color: #16a34a;
  font-weight: 800;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Sibling Project Navigation */
.peta-sibling-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 640px) {
  .peta-sibling-nav {
    grid-template-columns: 1fr;
  }
}

.peta-sibling-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.peta-sibling-card:hover {
  border-color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.15);
}

.peta-sibling-img {
  width: 70px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  background: #0f172a;
  flex-shrink: 0;
}

.peta-sibling-body {
  overflow: hidden;
}

.peta-sibling-direction {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.peta-sibling-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #071530;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peta-sibling-capacity {
  font-size: 0.8rem;
  color: #f59e0b;
  font-weight: 700;
}

/* Modal Blueprint Viewer Enhancements */
.project-modal-viewer {
  max-height: 85vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.project-modal-main-img-box {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #071530;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid #1e293b;
}

.project-modal-main-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-modal-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.project-modal-thumb {
  flex: 0 0 75px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #cbd5e1;
  background: #071530;
  cursor: pointer;
}

.project-modal-thumb.active {
  border-color: #f59e0b;
}

.project-modal-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}