/* Color & font */
:root {
  --green:#28b463;
  --charcoal:#1c1c1c;
  --grey:#f9fafb;
  --accent:#e85d04;
}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--charcoal);
  background:var(--grey);
}
.section{
  padding:60px 20px;
  max-width:960px;
  margin:auto;
  text-align:center;
}
h1{
  font-size:2.4rem;
  margin:0 0 12px;
  line-height:1.2;
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:var(--accent);
}
h2{
  font-size:1.8rem;
  margin:0 0 32px;
  font-family:'Playfair Display',serif;
  font-weight:700;
  color:var(--accent);
}
h3{
  margin:8px 0;
  font-size:1.1rem;
  font-family:'Playfair Display',serif;
}
.sub{max-width:640px;margin:0 auto 28px;color:#444;}
.hero{
  background:url('../img/logo.svg') center/cover no-repeat;
  color:var(--accent);
  padding:80px 20px;
}
.hero h1{color:var(--accent);text-shadow:0 0 8px rgba(255,255,255,0.85);}
.hero h2{color:var(--accent);}
.hero .sub{color:var(--accent);}
.btn{
  display:inline-block;padding:12px 26px;border-radius:8px;
  background:#eee;color:var(--charcoal);text-decoration:none;font-weight:600;
}
.btn.primary{background:var(--green);color:#fff;}
.btn:hover{
  background:#ccc;       /* or a darker variant for .primary buttons */
  transition:background 0.2s ease;
}
.three{display:flex;flex-wrap:wrap;gap:20px;}
.three .card{
  flex:1 1 260px;background:#fff;padding:26px;border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);border:1px solid #eee;
}
.three h3{font-size:1.3rem;}
.three p{font-size:1.05rem;}
.pricing .tiers{display:flex;flex-wrap:wrap;gap:20px;}
.tier{
  flex:1 1 280px;background:#fff;border-radius:12px;padding:26px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);border:1px solid #eee;
}
.price{font-size:2rem;margin:4px 0 12px;color:var(--green);}
.quote{font-size:1.2rem;margin:4px 0 12px;color:var(--green);}
.small{font-size:.8rem;font-weight:400;}
.testimonials blockquote{
  background:#fff;padding:20px;border-left:4px solid var(--green);
  margin:0 0 20px;border-radius:8px;
}
.testimonials span{display:block;margin-top:8px;color:#555;font-size:.85rem;}
.faq details{margin-bottom:12px;text-align:left;}
.faq summary{cursor:pointer;font-weight:600;}
.footer{font-size:.8rem;color:#555;}
.footer a{color:inherit}
@media(max-width:600px){
  .three,.pricing .tiers{flex-direction:column;}
}
@media (prefers-color-scheme: dark){body{background:#121212;color:#eee;} .hero{color:var(--accent);background:url('../img/logo.svg') center/cover no-repeat;} .three .card,.tier,.testimonials blockquote{background:#1e1e1e;border-color:#333;color:#eee;} }