/* ═══════════════════════════════════════════════════════════
   SOLUTION TEMPLATES — A & B
   solution-templates.css  ·  Fully light theme, no dark bands
════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   TEMPLATE A
───────────────────────────────────────── */

/* Hero */
.sola-hero {
  background: var(--color-white);
  padding: 130px 0 72px;
  overflow: hidden;
  position: relative;
}

.sola-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.sola-hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14,42,94,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.sola-hero__glow {
  position: absolute; inset: 0;
  pointer-events: none;
}

.sola-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Breadcrumb */
.sola-bc {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: .72rem; color: var(--color-slate);
  margin-bottom: 18px;
}
.sola-bc a { color: var(--color-slate); text-decoration: none; }
.sola-bc a:hover { color: var(--color-navy); }
.sola-bc i { font-size: .55rem; color: var(--color-slate-lt); }
.sola-bc span { color: var(--color-navy); font-weight: 600; }

/* Tags */
.sola-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.sola-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  border: 1px solid;
}

.sola-tag--navy {
  background: rgba(14,42,94,.06); border-color: rgba(14,42,94,.14);
  color: var(--color-navy);
}

/* H1 */
.sola-h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 900; color: var(--color-navy);
  line-height: 1.08; letter-spacing: -.025em;
  margin-bottom: 16px;
}

/* Desc */
.sola-desc {
  font-size: .95rem; line-height: 1.75;
  color: var(--color-slate); max-width: 500px; margin-bottom: 22px;
}

/* Stats */
.sola-stats {
  display: flex; align-items: center; gap: 0;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 26px;
}
.sola-stat {
  flex: 1; text-align: center; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.sola-stat strong {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 900; line-height: 1;
}
.sola-stat span {
  font-family: var(--font-heading); font-size: .65rem; color: var(--color-slate);
}
.sola-stats__sep { width: 1px; height: 28px; background: var(--color-border); flex-shrink: 0; }

.sola-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Dashboard mockup */
.sola-hero__visual { position: relative; }

.sola-dash {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
}

.sola-dash__top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-border);
}

.sola-dash__dots { display: flex; gap: 5px; }
.sola-dash__dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-border);
}

.sola-dash__title {
  font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
  color: var(--color-charcoal); flex: 1;
  display: flex; align-items: center; gap: 7px;
}

.sola-dash__live {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700; color: #10b981;
}
.sola-dash__live span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; animation: livePulse 1.4s ease-in-out infinite;
}

.sola-dash__kpis {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--color-border);
}

.sola-kpi {
  background: white; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.sola-kpi__val {
  font-family: var(--font-heading); font-size: .95rem; font-weight: 900; line-height: 1;
}
.sola-kpi__lbl {
  font-family: var(--font-heading); font-size: .62rem; color: var(--color-slate);
}

.sola-dash__chart { padding: 10px 16px 8px; }
.sola-dash__chart svg { width: 100%; height: 80px; display: block; }

.sola-dash__status {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
}
.sola-ds {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-size: .7rem; color: var(--color-slate);
}

.sola-hero__badge {
  position: absolute; bottom: -14px; left: -14px;
  display: flex; align-items: center; gap: 10px;
  background: white; border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
  animation: floatBob 3s ease-in-out infinite;
}
.sola-hero__badge div { display: flex; flex-direction: column; gap: 1px; }
.sola-hero__badge strong { font-family: var(--font-heading); font-size: .95rem; font-weight: 900; color: var(--color-navy); line-height: 1; }
.sola-hero__badge span { font-size: .68rem; color: var(--color-slate); }

/* Features grid — 2 col */
.sola-feat-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;
}

.sola-feat {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition);
}

.sola-feat:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
}

.sola-feat__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}

.sola-feat__body { display: flex; flex-direction: column; gap: 6px; }

.sola-feat__body h4 {
  font-size: .9rem; font-weight: 700; color: var(--color-navy);
}

.sola-feat__body p {
  font-size: .8rem; line-height: 1.65; color: var(--color-slate);
}

.sola-feat__tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.sola-feat__tags span {
  font-family: var(--font-heading); font-size: .65rem; font-weight: 600;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--color-off-white); color: var(--color-charcoal);
  border: 1px solid var(--color-border);
}

/* Sectors grid — 3 col */
.sola-sectors-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}

.sola-sec-card {
  background: white; border: 1px solid var(--color-border);
  border-top: 3px solid var(--sc);
  border-radius: var(--radius-xl); padding: 22px;
  transition: all var(--transition);
}

.sola-sec-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
}

.sola-sec-card__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}

.sola-sec-card__icon {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}

.sola-sec-card__head h4 {
  font-size: .88rem; font-weight: 700; color: var(--color-navy);
}

.sola-sec-stat {
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  display: block;
}

.sola-sec-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}

.sola-sec-card li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: .78rem; color: var(--color-charcoal);
}

.sola-sec-card li i { font-size: .65rem; flex-shrink: 0; }

/* Metrics strip */
.sola-metrics { padding-block: 48px; }

.sola-metrics__inner {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 20px;
}

.sola-metric {
  flex: 1; min-width: 110px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.sola-metric > i { font-size: 1.2rem; color: rgba(255,255,255,.75); margin-bottom: 2px; }
.sola-metric strong { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900; color: white; line-height: 1; }
.sola-metric span { font-family: var(--font-heading); font-size: .7rem; color: rgba(255,255,255,.75); font-weight: 500; }

/* Products grid */
.sola-prods-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}

.sola-prod {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: all var(--transition);
}

.sola-prod:hover {
  border-color: var(--color-teal);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.sola-prod__icon {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}

.sola-prod__body {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.sola-prod__body em {
  font-style: normal; font-family: var(--font-heading); font-size: .62rem;
  font-weight: 700; letter-spacing: .06em; color: var(--color-slate);
  text-transform: uppercase;
}
.sola-prod__body strong { font-size: .88rem; font-weight: 700; color: var(--color-navy); }
.sola-prod__body span   { font-size: .76rem; color: var(--color-slate); }

.sola-prod__arr { font-size: .8rem; flex-shrink: 0; opacity: 0; transition: all var(--transition); }
.sola-prod:hover .sola-prod__arr { opacity: 1; transform: translateX(3px); }

/* CTA */
.sola-cta__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 48px;
  box-shadow: var(--shadow-sm);
}

.sola-cta__left { display: flex; flex-direction: column; gap: 12px; }

.sola-cta__ico {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}

.sola-cta__left h2 {
  font-size: 1.7rem; font-weight: 800; color: var(--color-navy);
  line-height: 1.2;
}

.sola-cta__left p { font-size: .88rem; line-height: 1.75; color: var(--color-slate); }

.sola-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }

.sola-cta__check {
  background: var(--color-off-white); border-radius: var(--radius-xl);
  padding: 26px; border: 1px solid rgba(0,194,168,.15);
}
.sola-cta__check h4 { font-size: .85rem; font-weight: 700; color: var(--color-navy); margin-bottom: 14px; }
.sola-cta__check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sola-cta__check li { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-size: .8rem; color: var(--color-charcoal); }


/* ─────────────────────────────────────────
   TEMPLATE B
───────────────────────────────────────── */

/* Hero — centred */
.solb-hero {
  background: var(--color-white);
  padding: 120px 0 64px;
  overflow: hidden; position: relative;
  min-height: auto;
}

.solb-hero__bg { position: absolute; inset: 0; pointer-events: none; }

.solb-hero__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(14,42,94,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.solb-hero__glow {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,168,.06) 0%, transparent 70%);
  top: -80px; right: -60px;
  pointer-events: none;
}

.solb-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: center;
  text-align: left;
  max-width: none; margin: 0;
}

.solb-hero__copy {
  display: flex; flex-direction: column; gap: 0;
}

.solb-hero__visual {
  position: relative;
}

/* Dashboard card — constrained, compact */
.solb-hero__visual .solb-visual-card {
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: white;
  max-width: 520px;
  margin-left: auto;
}

.solb-hero__badge {
  position: absolute; bottom: -14px; left: 20px;
  display: flex; align-items: center; gap: 10px;
  background: white; border-radius: var(--radius-lg);
  padding: 9px 14px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--color-border);
  animation: floatBob 3s ease-in-out infinite;
}
.solb-hero__badge div { display: flex; flex-direction: column; gap: 1px; }
.solb-hero__badge strong { font-family: var(--font-heading); font-size: .88rem; font-weight: 900; color: var(--color-navy); line-height: 1; }
.solb-hero__badge span   { font-size: .65rem; color: var(--color-slate); }

.solb-hero__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.solb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  border: 1px solid;
}
.solb-tag--navy { background: rgba(14,42,94,.06); border-color: rgba(14,42,94,.14); color: var(--color-navy); }

.solb-bc {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: .72rem; color: var(--color-slate);
  margin-bottom: 14px;
}
.solb-bc a { color: var(--color-slate); text-decoration: none; }
.solb-bc a:hover { color: var(--color-navy); }
.solb-bc i { font-size: .55rem; }
.solb-bc span { color: var(--color-navy); font-weight: 600; }

@keyframes orbitSpin { to { transform: rotate(360deg); } }

.solb-orbit-tag {
  position: absolute;
  top: -12px;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: .65rem; font-weight: 700;
  border: 1px solid; white-space: nowrap;
  animation: orbitSpin 12s linear infinite reverse; /* counter-rotate to stay upright */
}

.solb-orbit--2 .solb-orbit-tag { animation-duration: 18s; }
.solb-orbit--3 .solb-orbit-tag { animation-duration: 24s; }

.solb-eyebrow {
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 8px; display: block; text-align: left;
}

.solb-h1 {
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  font-weight: 900; color: var(--color-navy);
  line-height: 1.08; letter-spacing: -.025em;
  margin-bottom: 14px;
}

.solb-sub {
  font-size: .95rem; line-height: 1.75; color: var(--color-slate);
  margin-bottom: 22px;
}

.solb-stats {
  display: flex; align-items: center; gap: 0;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: 26px;
}
.solb-stat { flex: 1; text-align: center; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.solb-stat strong { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 900; line-height: 1; }
.solb-stat span   { font-family: var(--font-heading); font-size: .65rem; color: var(--color-slate); }
.solb-stats__sep  { width: 1px; height: 28px; background: var(--color-border); flex-shrink: 0; }

.solb-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Feature rows — alternating */
.solb-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  padding-block: 56px;
  border-bottom: 1px solid var(--color-border);
}
.solb-row:last-child { border-bottom: none; }
.solb-row--flip .solb-row__text  { order: 2; }
.solb-row--flip .solb-row__visual { order: 1; }

.solb-row__icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; margin-bottom: 14px;
}

.solb-row__text h3 {
  font-size: 1.4rem; font-weight: 800; color: var(--color-navy);
  margin-bottom: 10px; line-height: 1.2;
}

.solb-row__text p {
  font-size: .88rem; line-height: 1.75; color: var(--color-slate); margin-bottom: 16px;
}

.solb-row__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.solb-row__points li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-size: .8rem; color: var(--color-charcoal);
}
.solb-row__points i { font-size: .72rem; flex-shrink: 0; }

/* Visual cards inside rows */
.solb-visual-card {
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.07);
}

.solb-vc-header {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px;
  background: var(--color-off-white); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: .78rem; font-weight: 600;
  color: var(--color-charcoal);
}

.solb-vc-live {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; color: #10b981;
}
.solb-vc-live span {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; animation: livePulse 1.4s ease-in-out infinite;
}

.solb-vc-kpis {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--color-border);
}
.solb-vc-kpi { background: white; padding: 10px 12px; text-align: center; }
.solb-vc-kpi strong { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: 900; line-height: 1; }
.solb-vc-kpi span   { font-family: var(--font-heading); font-size: .62rem; color: var(--color-slate); }

.solb-vc-chart { width: 100%; display: block; height: 70px; padding: 8px 16px 4px; }

.solb-vc-row {
  display: flex; gap: 14px; padding: 8px 16px;
  background: var(--color-off-white); border-top: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: .7rem; color: var(--color-slate);
}
.solb-vc-row span { display: flex; align-items: center; gap: 5px; }

/* AI alert card */
.solb-ai-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: rgba(245,158,11,.05);
  border-bottom: 1px solid rgba(245,158,11,.15);
}
.solb-ai-alert__icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245,158,11,.1); color: #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; flex-shrink: 0;
}
.solb-ai-alert div { display: flex; flex-direction: column; gap: 2px; }
.solb-ai-alert strong { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; color: var(--color-navy); }
.solb-ai-alert span  { font-size: .74rem; color: var(--color-slate); }
.solb-ai-eta { color: #f59e0b !important; font-family: var(--font-heading); font-size: .72rem !important; font-weight: 600; }
.solb-ai-eta b { color: #d97706; }

.solb-ai-baselines { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.solb-aib { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: .72rem; color: var(--color-slate); }
.solb-aib span:first-child { min-width: 72px; }
.solb-aib__bar { flex: 1; }

/* Report card */
.solb-report-rows { padding: 4px 0; }
.solb-rr {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-family: var(--font-heading);
  font-size: .76rem; border-bottom: 1px solid var(--color-border);
  color: var(--color-charcoal);
}
.solb-rr:last-child { border-bottom: none; }
.solb-rr--done i { color: #22c55e; font-size: .72rem; }
.solb-rr span:last-child { margin-left: auto; font-size: .65rem; color: var(--color-slate); }

.solb-report-status {
  margin-left: auto; padding: 2px 10px;
  background: #22c55e; color: white;
  border-radius: var(--radius-pill);
  font-size: .65rem; font-weight: 700;
}

.solb-report-formats {
  display: flex; gap: 14px; padding: 8px 16px;
  background: var(--color-off-white); border-top: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600; color: var(--color-charcoal);
}
.solb-report-formats span { display: flex; align-items: center; gap: 5px; }

/* Sectors strip — 4 col */
.solb-sectors-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
}

.solb-sec {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  padding: 20px 14px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: all var(--transition);
}
.solb-sec:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.solb-sec__icon {
  width: 46px; height: 46px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.solb-sec strong { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; color: var(--color-navy); }
.solb-sec span   { font-family: var(--font-heading); font-size: .68rem; font-weight: 600; }

/* Metrics */
.solb-metrics { padding-block: 48px; }
.solb-metrics__inner {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 20px;
}
.solb-metric { flex: 1; min-width: 110px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.solb-metric > i { font-size: 1.2rem; color: rgba(255,255,255,.75); margin-bottom: 2px; }
.solb-metric strong { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 900; color: white; line-height: 1; }
.solb-metric span   { font-family: var(--font-heading); font-size: .7rem; color: rgba(255,255,255,.75); font-weight: 500; }

/* Products */
.solb-prods-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}
.solb-prod {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); text-decoration: none;
  transition: all var(--transition);
}
.solb-prod:hover { border-color: var(--color-teal); box-shadow: var(--shadow-md); transform: translateX(4px); }
.solb-prod__icon { width: 46px; height: 46px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.solb-prod__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.solb-prod__body em     { font-style: normal; font-family: var(--font-heading); font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--color-slate); text-transform: uppercase; }
.solb-prod__body strong { font-size: .88rem; font-weight: 700; color: var(--color-navy); }
.solb-prod__body span   { font-size: .76rem; color: var(--color-slate); }
.solb-prod__arr { font-size: .8rem; flex-shrink: 0; opacity: 0; transition: all var(--transition); }
.solb-prod:hover .solb-prod__arr { opacity: 1; transform: translateX(3px); }

/* CTA — centred */
.solb-cta__inner {
  background: var(--color-off-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 56px; text-align: center;
}
.solb-cta__ico {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 16px;
}
.solb-cta__inner h2 { font-size: 1.8rem; font-weight: 800; color: var(--color-navy); margin-bottom: 10px; line-height: 1.2; }
.solb-cta__inner p  { font-size: .9rem; color: var(--color-slate); max-width: 520px; margin: 0 auto 24px; line-height: 1.7; }
.solb-cta__btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sola-hero__inner  { grid-template-columns: 1fr; }
  .sola-hero__visual { display: none; }
  .sola-feat-grid    { grid-template-columns: 1fr; }
  .sola-sectors-grid { grid-template-columns: repeat(2,1fr); }
  .sola-prods-grid   { grid-template-columns: 1fr; }
  .sola-cta__inner   { grid-template-columns: 1fr; }
  /* Template B — split hero collapses to single col */
  .solb-hero__inner  { grid-template-columns: 1fr; }
  .solb-hero__visual { display: none; }
  .solb-h1           { text-align: center; }
  .solb-sub          { text-align: center; margin-left: auto; margin-right: auto; }
  .solb-bc           { justify-content: center; }
  .solb-hero__tags   { justify-content: center; }
  .solb-ctas         { justify-content: center; }
  .solb-stats        { align-self: stretch; }
  .solb-row          { grid-template-columns: 1fr; }
  .solb-row--flip .solb-row__text,
  .solb-row--flip .solb-row__visual { order: unset; }
  .solb-sectors-grid { grid-template-columns: repeat(2,1fr); }
  .solb-prods-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sola-sectors-grid { grid-template-columns: 1fr; }
  .solb-sectors-grid { grid-template-columns: repeat(2,1fr); }
  .sola-cta__inner   { padding: 28px 20px; }
  .solb-cta__inner   { padding: 32px 20px; }
  .solb-hero__icon-wrap { display: none; }
}

/* ─────────────────────────────────────────
   ENERGY & UTILITIES PAGE — extra components
───────────────────────────────────────── */

/* What we monitor grid */
.seu-monitor-grid {
  display: grid; grid-template-columns: repeat(6,1fr); gap: 16px;
}

.seu-mon-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px;
  background: white; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); text-align: center;
  transition: all var(--transition);
}

.seu-mon-card:hover {
  box-shadow: var(--shadow-md); transform: translateY(-3px);
}

.seu-mon-card__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}

.seu-mon-card__icon svg { width: 40px; height: 40px; }

.seu-mon-card strong {
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  color: var(--color-navy);
}

.seu-mon-card span {
  font-family: var(--font-heading); font-size: .66rem; color: var(--color-slate);
  line-height: 1.4;
}

/* Meter breakdown bars */
.seu-meter-breakdown {
  padding: 8px 16px 4px;
  display: flex; flex-direction: column; gap: 6px;
}

.seu-mb-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-size: .68rem; color: var(--color-slate);
}

.seu-mb-row span:first-child { min-width: 72px; }
.seu-mb-row span:last-child  { min-width: 52px; text-align: right; font-weight: 600; color: var(--color-navy); }

.seu-mb-bar {
  flex: 1; height: 7px; background: #f1f5f9; border-radius: 4px; overflow: hidden;
}

.seu-mb-bar div {
  height: 100%; border-radius: 4px;
  animation: barGrow 1.5s ease forwards;
}

/* Anomaly alert inside AI card */
.seu-anomaly-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(245,158,11,.05);
  border-top: 1px solid rgba(245,158,11,.15);
  border-bottom: 1px solid rgba(245,158,11,.15);
}

.seu-aa-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(245,158,11,.1); color: #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}

.seu-anomaly-alert > div {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}

.seu-anomaly-alert strong {
  font-family: var(--font-heading); font-size: .76rem; font-weight: 700; color: var(--color-navy);
}

.seu-anomaly-alert span { font-family: var(--font-heading); font-size: .68rem; color: var(--color-slate); }

.seu-aa-auto {
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(0,194,168,.1); color: var(--color-teal);
  font-family: var(--font-heading); font-size: .65rem; font-weight: 800;
  border: 1px solid rgba(0,194,168,.2);
  flex-shrink: 0;
}

/* Report savings summary */
.seu-report-summary {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--color-border);
  border-top: 1px solid var(--color-border);
}

.seu-rs-item {
  background: white; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}

.seu-rs-item strong {
  font-family: var(--font-heading); font-size: .95rem; font-weight: 900; line-height: 1;
}

.seu-rs-item span { font-family: var(--font-heading); font-size: .64rem; color: var(--color-slate); }

/* Responsive */
@media (max-width: 1024px) {
  .seu-monitor-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
  .seu-monitor-grid { grid-template-columns: repeat(2,1fr); }
}

/* ─────────────────────────────────────────
   ENERGY & UTILITIES — ISOLATED HERO
   All eu-* classes are self-contained.
   No inheritance from solb-* or sola-*.
───────────────────────────────────────── */
.eu-hero {
  background: #fff;
  padding: 120px 0 64px;
  position: relative;
  overflow: hidden;
}

.eu-hero__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(14,42,94,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.eu-hero__glow {
  position: absolute; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,194,168,.08) 0%, transparent 70%);
  top: -80px; right: -60px;
}

/* Two-column grid — left copy, right card */
.eu-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

/* ── Left column ── */
.eu-hero__left {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 0;
}

/* Breadcrumb */
.eu-bc {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-size: .72rem;
  color: var(--color-slate); margin-bottom: 14px;
}
.eu-bc a { color: var(--color-slate); text-decoration: none; transition: color var(--transition); }
.eu-bc a:hover { color: var(--color-navy); }
.eu-bc i { font-size: .52rem; color: #cbd5e1; }
.eu-bc span { color: var(--color-navy); font-weight: 600; }

/* Tags */
.eu-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }

.eu-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 100px; border: 1px solid;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 700;
}
.eu-tag--teal { background: rgba(0,194,168,.08); border-color: rgba(0,194,168,.28); color: #00C2A8; }
.eu-tag--navy { background: rgba(14,42,94,.05); border-color: rgba(14,42,94,.14); color: var(--color-navy); }

/* H1 */
.eu-h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--color-navy);
  margin: 0 0 14px;
}
.eu-h1 em { font-style: normal; color: #00C2A8; }

/* Description */
.eu-desc {
  font-size: .88rem; line-height: 1.75;
  color: var(--color-slate);
  max-width: 440px; margin: 0 0 20px;
}

/* Stats strip */
.eu-stats {
  display: flex; align-items: center;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 24px; width: 100%;
}
.eu-stat { flex: 1; text-align: center; padding: 11px 6px; display: flex; flex-direction: column; gap: 2px; }
.eu-stat strong { font-family: var(--font-heading); font-size: 1rem; font-weight: 900; color: #00C2A8; line-height: 1; }
.eu-stat span   { font-family: var(--font-heading); font-size: .6rem; color: var(--color-slate); }
.eu-stat__sep   { width: 1px; height: 24px; background: var(--color-border); flex-shrink: 0; }

/* CTAs */
.eu-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Right column ── */
.eu-hero__right { position: relative; }

/* Dashboard card — fixed, no stretching */
.eu-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.04);
}

/* Topbar */
.eu-card__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: .74rem;
  font-weight: 600; color: var(--color-charcoal);
}
.eu-card__dots { display: flex; gap: 4px; }
.eu-card__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.eu-card__live {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: .66rem; font-weight: 700; color: #10b981;
}
.eu-card__live span {
  width: 6px; height: 6px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 5px #10b981; animation: livePulse 1.4s ease-in-out infinite;
}

/* KPI row — 4 chips */
.eu-card__kpis {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: var(--color-border);
}
.eu-kpi { background: #fff; padding: 10px 8px; text-align: center; }
.eu-kpi strong {
  display: block; font-family: var(--font-heading);
  font-size: .95rem; font-weight: 900; line-height: 1;
}
.eu-kpi strong small { font-size: .55rem; font-weight: 600; opacity: .7; }
.eu-kpi span { font-family: var(--font-heading); font-size: .6rem; color: var(--color-slate); }
.eu-kpi__sep { width: 1px; background: var(--color-border); }

/* Chart — strictly 52px tall */
.eu-card__chart {
  padding: 8px 14px 4px;
  height: 68px; /* fixed, no stretch */
  overflow: hidden;
}
.eu-card__chart svg {
  width: 100%; height: 52px;
  display: block; overflow: visible;
}

/* Consumption bars */
.eu-card__bars {
  padding: 4px 14px 6px;
  display: flex; flex-direction: column; gap: 5px;
}
.eu-bar-row {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-heading); font-size: .68rem;
}
.eu-bar-label { min-width: 68px; color: var(--color-slate); }
.eu-bar-track {
  flex: 1; height: 6px; background: #f1f5f9;
  border-radius: 3px; overflow: hidden;
}
.eu-bar-fill { height: 100%; border-radius: 3px; }
.eu-bar-val { min-width: 54px; text-align: right; font-weight: 600; color: var(--color-navy); }

/* AI alert */
.eu-card__alert {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(0,194,168,.04);
  border-top: 1px solid rgba(0,194,168,.12);
  font-family: var(--font-heading); font-size: .72rem; color: var(--color-slate);
}
.eu-card__alert strong { color: var(--color-navy); }
.eu-auto {
  margin-left: auto; flex-shrink: 0;
  padding: 2px 9px; border-radius: 100px;
  background: rgba(0,194,168,.1); color: #00C2A8;
  font-size: .62rem; font-weight: 800;
  border: 1px solid rgba(0,194,168,.25);
}

/* Footer */
.eu-card__footer {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 14px;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading); font-size: .68rem; color: var(--color-slate);
}
.eu-card__footer span { display: flex; align-items: center; gap: 4px; }

/* Float badge */
.eu-badge {
  position: absolute; bottom: -14px; left: 16px;
  display: flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 10px;
  padding: 8px 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  border: 1px solid var(--color-border);
  animation: floatBob 3s ease-in-out infinite;
}
.eu-badge div { display: flex; flex-direction: column; gap: 1px; }
.eu-badge strong { font-family: var(--font-heading); font-size: .9rem; font-weight: 900; color: var(--color-navy); line-height: 1; }
.eu-badge span   { font-family: var(--font-heading); font-size: .62rem; color: var(--color-slate); }

/* Responsive */
@media (max-width: 1024px) {
  .eu-hero__grid { grid-template-columns: 1fr; }
  .eu-hero__right { display: none; }
}