/* Styles for start.html */
html.start-scroll, body.start-page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-y:auto;
  height:auto;
  scroll-behavior:smooth;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  word-spacing:.1em;
  font-size:14px;
  padding-bottom:calc(4rem + env(safe-area-inset-bottom));
}

.hero{
  text-align:center;
  margin:2rem auto 3rem;
  padding:0 1rem;
  max-width:60rem;
}
.hero h1{
  font-size:clamp(2.5rem,6vw,3.5rem);
  color:var(--accent);
  text-shadow:0 0 10px #0ff5;
  margin-bottom:1rem;
}
.hero .subhead{
  color:#aaa;
  font-size:1.2rem;
  max-width:40rem;
  margin:0 auto;
}
.trustline{
  color:var(--accent);
  font-weight:bold;
  margin-top:0.5rem;
  text-align:center;
}
.cta{
  text-align:center;
  margin:2rem 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.cta .primary,
.cta .secondary{
  padding:0.75rem 1.5rem;
  text-decoration:none;
  font-weight:bold;
  border-radius:4px;
  font-family:var(--font);
}
.cta .primary{
  position:relative;
  overflow:hidden;
  transition: all 0.15s ease;
  background:var(--accent);
  color:#000;
}
.cta .primary.attention{
  animation:pulse 1.5s ease-in-out infinite;
}
.cta .primary::after{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
  transform:skewX(-20deg);
}
.cta .primary:hover::after{
  animation:shine .75s forwards;
}
.cta .primary:active{
  transform: scale(0.97);
  filter: brightness(1.1);
}
.cta .secondary{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--accent);
}
.cta .secondary:hover{background:rgba(0,255,255,0.2);}

.badge{
  display:inline-block;
  margin-left:0.5rem;
  background:limegreen;
  color:#000;
  padding:0.1rem 0.4rem;
  border-radius:4px;
  font-size:0.75rem;
}

.section-title{
  text-align:center;
  color:var(--accent);
}

.start-page h2{
  color:var(--accent);
}


.cta-note{
  text-align:center;
  max-width:40rem;
  margin:0 auto 2rem;
  color:#aaa;
}

.social-proof{
  text-align:center;
  max-width:40rem;
  margin:0 auto 1.5rem;
  color:var(--accent);
  font-size:1.2rem;
  font-weight:bold;
}
#quoteCount{
  color:#fff;
}
.microtrust{
  text-align:center;
  color:#aaa;
  margin-top:-1rem;
  margin-bottom:2rem;
  font-size:.9rem;
}

.quote-preview{
  margin:1rem auto;
  max-width:20rem;
  text-align:left;
  overflow:hidden;
  max-height:3rem;
  transition:max-height .7s ease;
}
.quote-preview summary{
  cursor:pointer;
  color:var(--accent);
  margin-bottom:0.5rem;
}
.quote-preview .audit-card{
  background:linear-gradient(to bottom, rgba(0,255,255,0.04), rgba(0,0,0,0.5));
  backdrop-filter:blur(4px);
  border:1px solid rgba(0,255,255,0.1);
  border-radius:8px;
  padding:1rem;
  box-shadow:0 0 10px rgba(0,255,255,0.05);
  opacity:0;
}

.quote-preview[open]{
  max-height:40rem;
}
.quote-preview[open] .audit-card{
  animation:fade-card .8s ease-in-out forwards;
  animation-delay:.2s;
}

.quote-preview.closing{
  max-height:3rem;
}

.quote-preview.closing .audit-card{
  animation:fade-card-out .4s ease-in-out forwards;
}

@keyframes fade-card-out{
  from{opacity:1;transform:none;}
  to{opacity:0;transform:translateY(-1rem);}
}

.tool-selector{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
  margin:2rem 0;
}
.tool-selector a{
  padding:1rem 1.5rem;
  border-radius:6px;
  text-decoration:none;
  transition:background .3s, transform .2s;
  border:1px solid;
}
.tool-selector a.contractor{
  background:rgba(0,255,255,0.1);
  border-color:rgba(0,255,255,0.2);
  color:var(--accent);
}
.tool-selector a.contractor:hover{background:rgba(0,255,255,0.25);transform:scale(1.05);}
.tool-selector a.auto{
  background:rgba(255,77,77,0.1);
  border-color:rgba(255,77,77,0.2);
  color:#ff4d4d;
}
.tool-selector a.auto:hover{background:rgba(255,77,77,0.25);transform:scale(1.05);}
.tool-selector a.solar{
  background:rgba(255,174,66,0.1);
  border-color:rgba(255,174,66,0.2);
  color:#ffae42;
}
.tool-selector a.solar:hover{background:rgba(255,174,66,0.25);transform:scale(1.05);}

.how-it-works{
  max-width:60rem;
  margin:2rem auto;
  padding:0 1rem;
  text-align:center;
  line-height:1.6;
}
.how-it-works ol{
  list-style:decimal inside;
  padding:0;
  margin:1rem auto 0;
  max-width:25rem;
  text-align:left;
}

.icon-row{
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  margin:2rem 0;
}
.icon-row div{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#aaa;
  font-size:.9rem;
}
.icon-row svg{
  width:32px;
  height:32px;
  margin-bottom:.5rem;
  fill:var(--accent);
}

.explainer{
  max-width:60rem;
  margin:2rem auto;
  padding:0 1rem;
  text-align:center;
  line-height:1.6;
}
.explainer ul{
  list-style:none;
  padding:0;
  margin:1rem auto 0;
  max-width:15rem;
  text-align:left;
}
.explainer li::before{
  content:"✔";
  color:var(--accent);
  margin-right:.5rem;
}

.pro-benefits{
  max-width:60rem;
  margin:2rem auto;
  padding:0 1rem;
  text-align:center;
  line-height:1.6;
}
.pro-benefits ul{
  list-style:none;
  padding:0;
  margin:1rem auto 0;
  max-width:20rem;
  text-align:left;
}
.pro-benefits li::before{
  content:"★";
  color:var(--accent);
  margin-right:.4rem;
}

.upgrade{
  text-align:center;
  margin:3rem 0;
}
.upgrade a{
  color:var(--accent);
  border:1px solid var(--accent);
  padding:.8rem 1.2rem;
  border-radius:4px;
  text-decoration:none;
  font-weight:bold;
  transition:background .3s;
}
.upgrade a:hover{background:rgba(0,255,255,0.2);}

.about-cta{
  text-align:center;
  margin:2rem 0;
}
.about-cta a{
  color:var(--accent);
  border:1px solid var(--accent);
  padding:.8rem 1.2rem;
  border-radius:4px;
  text-decoration:none;
  font-weight:bold;
  transition:background .3s;
}
.about-cta a:hover{background:rgba(0,255,255,0.2);}

.about-blurb{
  text-align:center;
  max-width:40rem;
  margin:1rem auto;
  font-style:italic;
  color:#ccc;
}

.sticky-cta{
  text-align:center;
  max-width:60rem;
  margin:3rem auto;
  padding:0 1rem;
  line-height:1.6;
}
.sticky-cta .primary{
  display:inline-block;
  margin-top:1rem;
  background:var(--accent);
  color:#000;
  padding:0.75rem 1.5rem;
  border-radius:4px;
  text-decoration:none;
  font-weight:bold;
  transition:background .3s;
}
.sticky-cta .primary:hover{
  background:var(--accent-hover);
}

footer.site-footer{
  width:100%;
  padding:1rem;
  background:#000;
  color:#888;
  font-size:.85rem;
  text-align:center;
  margin-top:auto;
}
footer.site-footer a{color:inherit;text-decoration:underline;}

@keyframes pulse{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(0,255,255,0.7)}
  50%{transform:scale(1.05);box-shadow:0 0 20px rgba(0,255,255,0.7)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(0,255,255,0.7)}
}
@keyframes shine{to{left:200%}}

@keyframes fade-card{
  from{opacity:0;transform:translateY(-1rem);}
  to{opacity:1;transform:none;}
}

/* ----- Mobile footer behavior ----- */
@media (max-width:600px){
  /* Mobile: footer should scroll with the page */
  footer.site-footer{
    position:static;
    margin-top:2rem;
  }

  /* Remove extra padding used for fixed footer */
  html.start-scroll,
  body.start-page{
    padding-bottom:0;
  }
}