:root{
  --bg:#0b0f14;
  --surface:#0f1620;
  --card:#121c27;
  --text:#eef5fb;
  --muted:#c7d6e4;

  --brand:#00d17a;
  --brand-2:#26a0ff;
  --accent:#ffd166;
  --ring:rgba(0,209,122,.35);
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

*{ box-sizing:border-box; }

html,body{height:100%}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(38,160,255,.15), transparent 60%) no-repeat,
    radial-gradient(900px 600px at 90% 10%, rgba(0,209,122,.12), transparent 55%) no-repeat,
    var(--bg);
  background-size: cover; /* optional: scales them to fill instead of repeating */
  color: var(--text);
  line-height: 1.6;
}

/* --- STOP background images from tiling across sections --- */
.hero, .section, .section-surface, .section-contact, .footer, .navbar, .cta {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* Explicit reset so other sections don't inherit a photo layer */
.section, .section-surface, .section-contact { background-image: none; }
/* Provide a surface look for sections that opt in */
.section-surface, .section-contact { background: var(--surface); }

/* Navbar */
.navbar{
  background: linear-gradient(180deg, rgba(15,22,32,.92), rgba(15,22,32,.88));
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.navbar-nav .nav-link{
  color: var(--text) !important;
  font-weight: 500;
  transition: all .3s ease;
}
.navbar-nav .nav-link:hover{
  color: var(--brand) !important;
  transform: translateY(-1px);
}
.navbar-brand img{ height:65px; }

/* Hero */
.hero{
  padding: 120px 0 80px;
  background:
    radial-gradient(800px 500px at 70% 10%, rgba(0,209,122,.18), transparent 60%),
    radial-gradient(700px 500px at 20% 10%, rgba(38,160,255,.18), transparent 60%);
  position:relative;
  overflow:hidden;
}
.badge-gradient{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#ffffff;
  font-weight:700;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.display-4, .hero h1{ letter-spacing:-.02em; }

/* Buttons */
.btn-brand{
  --bs-btn-bg:var(--brand);
  --bs-btn-color:#ffffff;
  --bs-btn-border-color:transparent;
  --bs-btn-hover-bg:#18e08e;
  --bs-btn-hover-color:#ffffff;
  --bs-btn-focus-shadow-rgb:0,209,122;
  box-shadow:0 0 0 .15rem var(--ring);
  font-weight:600;
}
.btn-outline-light{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: rgba(255,255,255,.3);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: rgba(255,255,255,.1);
  --bs-btn-hover-border-color: rgba(255,255,255,.5);
  --bs-btn-focus-shadow-rgb: 255,255,255;
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: rgba(255,255,255,.15);
  --bs-btn-active-border-color: rgba(255,255,255,.6);
  font-weight:600;
}

/* Sections */
.section{ padding:40px 0; }
.section-title .eyebrow{
  color:var(--brand);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  font-size:.9rem;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  transition: all .3s ease;
}
.card:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  transform: translateY(-2px);
}

/* === Selection highlight for chosen cards === */
.selectable { cursor: pointer; }
.card.selectable.is-selected{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .25rem var(--ring), 0 12px 32px rgba(0,0,0,.35);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card.selectable.is-selected:hover{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 .25rem var(--ring), 0 12px 32px rgba(0,0,0,.35);
}
.card.selectable.is-selected button[aria-pressed="true"]{
  border-color: var(--brand);
  background: rgba(0,209,122,.12);
}

/* Icons */
.icon-circle{
  width:56px; height:56px; display:grid; place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(0,209,122,.25), rgba(38,160,255,.25));
  border:1px solid rgba(255,255,255,.18);
  color: var(--text);
}

/* Feature lists */
.feature-list li{
  display:flex; gap:.75rem; align-items:flex-start; margin:.5rem 0;
}

/* Tables */
.table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--text);
  --bs-table-border-color:rgba(255,255,255,.12);
}

/* CTA block — keep the image only here */
.cta{
  background-image:
    linear-gradient(180deg, rgba(18,28,39,.8), rgba(18,28,39,.95)),
    url('../img/hero-solar.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border:1px solid rgba(255,255,255,.12);
}
.cta h2{ color: var(--text); }
.cta p{ color: var(--muted); }

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:#0a0f14;
}

/* Forms */
.form-control, .form-select{
  background:#1a2332;
  color:var(--text);
  border-color:rgba(255,255,255,.24);
  border-width:2px;
}
.form-control:focus, .form-select:focus{
  box-shadow:0 0 0 .2rem var(--ring);
  border-color:var(--brand);
  background:#213245;
}
.form-control::placeholder{ color: var(--muted); opacity:.8; }

/* Badges (default look) */
.badge-soft{
  background: rgba(38,160,255,.12);
  color:#d9edff;
  border:1px solid rgba(38,160,255,.25);
}

/* Pricing */
.pricing-card .price{ font-size:2rem; font-weight:800; }

/* Links */
a{ color:#66d9ff; text-decoration:none; }
a:hover{ color:#b3e7ff; text-decoration:underline; }
a:focus{ color:#b3e7ff; outline:2px solid var(--ring); outline-offset:2px; }

/* Responsive tweaks */
@media (max-width: 767.98px){
  .hero{ padding:96px 0 60px; }
  .navbar-brand img{ height:32px; }
}

/* Improved text contrast helpers */
.text-muted{ color: var(--muted) !important; opacity:.95; }

/* Better focus states for accessibility */
button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* Small text */
.small, small{ color: var(--muted); opacity:.9; }

/* === Readability on dark: global, safe overrides === */

/* Headings & common titles (covers "DIY Guides", card titles, etc.) */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-title, .card-subtitle{
  color: var(--text) !important;
}

/* Lists */
ul, ol{ color: var(--text); }
ul li, ol li{ color: var(--text); line-height:1.6; }
ul li::marker, ol li::marker{ color: var(--muted); opacity:.95; }

/* Kill overly-dim labels inside dark sections */
.card .text-muted, section .text-muted{ color: var(--muted) !important; opacity:1; }

/* Softer—but still readable—helper for blurbs */
.text-soft{ color:#dbe7f1 !important; }

/* Mobile hamburger on dark navbars */
.navbar.navbar-dark .navbar-toggler{ border-color: rgba(255,255,255,.35); }
.navbar.navbar-dark .navbar-toggler-icon{ filter:none; }

/* Packages-specific badge look (avoid clobbering global .badge-soft) */
#packages .badge-soft{
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.12);
}

/* Media helpers */
.card-img-top{ object-fit:cover; height:180px; }

/* ===========================
   Includes Rotator (inline)
   =========================== */
.includes-block{
  border:1px solid rgba(255,255,255,.15);
  border-radius:.75rem;
  padding:1rem;
  background:rgba(255,255,255,.03);
}
.includes-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap;
}
.includes-title{
  display:flex; align-items:center; gap:.75rem;
  flex: 1 1 640px;                       /* Grow to fill the row */
  min-width: min(100%, 420px);
}
.includes-title .badge{ flex:0 0 auto; white-space:nowrap; }
.inline-rotator{
  position:relative; min-height:1.8rem; flex:1 1 0%; min-width:0; width:100%;
}
.rotator-item{
  position:absolute; top:0; left:0; right:0;
  opacity:0; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none;
}
.rotator-item.is-active{ opacity:1; transform: translateY(0); pointer-events:auto; }
.rotator-text{ font-weight:600; }
.rotator-controls{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.rotator-dots{ display:flex; gap:.35rem; }
.rotator-dot{
  width:.5rem; height:.5rem; border-radius:50%;
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.3);
}
.rotator-dot.is-active{
  background: var(--brand-green, #2ecc71);
  border-color: var(--brand-green, #2ecc71);
}
.rotator-btn{
  border:1px solid rgba(255,255,255,.35);
  background: transparent; color: inherit; border-radius:.5rem;
  padding:.125rem .45rem; font-size:.85rem; line-height:1; cursor:pointer;
}
.rotator-btn[aria-pressed="true"]{ background: rgba(255,255,255,.1); }

/* ===========================
   Horizontal Scrollers
   =========================== */
.scroll-wrap{ position:relative; }
.scroll-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:.25rem .25rem .75rem;
  -webkit-overflow-scrolling:touch;
}
.scroll-track::-webkit-scrollbar{ height:10px; }
.scroll-track::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2);
  border-radius: 6px;
}
.snap-item{
  flex:0 0 86%;
  max-width:86%;
  scroll-snap-align:start;
}
/*
@media (min-width:576px){ .snap-item{ flex-basis:60%; max-width:60%; } }
@media (min-width:768px){ .snap-item{ flex-basis:48%; max-width:48%; } } 
@media (min-width:1200px){ .snap-item{ flex-basis:32%; max-width:32%; } } 
@media (min-width:1600px){ .snap-item{ flex-basis:24%; max-width:24%; } } 
*/

@media (min-width:576px){ .snap-item{ flex-basis:90%; max-width:90%; } }
@media (min-width:768px){ .snap-item{ flex-basis:80%; max-width:80%; } } 
@media (min-width:1200px){ .snap-item{ flex-basis:32%; max-width:32%; } } 
@media (min-width:1600px){ .snap-item{ flex-basis:32%; max-width:32%; } } 

.scroll-btn{
  position:absolute; top:40%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  display:grid; place-items:center; z-index:5; cursor:pointer;
  backdrop-filter: blur(4px);
}
.scroll-btn:disabled{ opacity:.4; cursor:not-allowed; }
.scroll-btn.prev{ left:-6px; }
.scroll-btn.next{ right:-6px; }
@media (max-width:576px){
  .scroll-btn.prev{ left:4px; }
  .scroll-btn.next{ right:4px; }
}

/* ===========================
   Price stack / totals blocks
   =========================== */
.price-stack .equip{ font-weight:700; }
.price-stack .install{ font-size:.9rem; opacity:.9; }

#package-summary-row{ margin-top:1.5rem; }
#package-total{
  border:1px solid rgba(255,255,255,.15);
  border-radius:1rem;
  padding:1rem;
  background:var(--surface);
}
#package-total .line{
  display:flex; justify-content:space-between; align-items:center;
}

.bi {color:white}

.form-control:focus {
  color:white;
}

/* ========= Scroll cue pill (no overlays, no gradients) ========= */
@keyframes nudge-right {
  0%   { transform: translateX(0);     opacity: .85; }
  60%  { transform: translateX(6px);   opacity: 1;   }
  100% { transform: translateX(0);     opacity: .85; }
}
.scroll-cue{
  position:absolute;
  right:0; bottom:-10px; /* sits just under track, not over content */
  transform: translateY(100%); /* below the scroller */
  background: rgba(255,255,255,.08);
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  pointer-events: none;    /* never intercept clicks/touches */
  animation: nudge-right 1.8s ease-in-out infinite;
}
.scroll-wrap.cue-hidden .scroll-cue{ display:none; } /* JS will add .cue-hidden after first interaction */