:root{
  --bg:#ffffff;
  --muted:#667085;
  --accent:#0b84ff;
  --container:1200px;
  --radius:10px;
  /* subtle section background palette */
  --bg-header: #ffffff;
  --bg-hero: #f3f8ff;     /* very light blue */
  --bg-services: #fbfcff; /* near-white cool */
  --bg-about: #f7fafb;    /* soft gray-blue */
  --bg-refund: #fffaf6;   /* very light warm */
  --bg-contact: #f6fff8;  /* pale green tint */
  --bg-footer: #f8fafc;   /* soft footer background */
  /* alternating palette */
  --alt-a: #f3f8ff; /* light blue */
  --alt-b: #ffffff; /* white */
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:#0b1a2b;background:var(--bg);line-height:1.5}
.container{max-width:var(--container);margin:0 auto;padding:1.25rem}
.site-header{border-bottom:1px solid #eef2f6;background:var(--bg-header)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.125rem}
.nav a{margin-left:1rem;color:var(--muted);text-decoration:none}
.nav a.cta{background:var(--accent);color:#fff;padding:0.45rem 0.75rem;border-radius:6px}
.hero{padding:3.5rem 0;background:linear-gradient(180deg,var(--bg-hero),transparent)}
.hero-inner h1{font-size:2rem;margin:0 0 0.5rem}
.hero-inner p{color:var(--muted);margin:0 0 1rem}
.btn{background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:8px;text-decoration:none}
.features{padding:2rem 0;background:var(--bg-services)}
.features h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{padding:1rem;border:1px solid #eef4fb;border-radius:var(--radius);background:#fff}
.about{padding:1.5rem 0;background:var(--bg-about)}
.contact{padding:1.5rem 0;background:var(--bg-contact)}

/* Alternating backgrounds and directional padding for main sections.
   Uses nth-of-type with higher specificity than single-class rules so
   the visual rhythm alternates automatically as sections are added. */
main > section{padding:2.5rem 1rem}
main > section:nth-of-type(odd){
  background:var(--alt-a);
  padding-left:3.25rem;
  padding-right:3.25rem;
}
main > section:nth-of-type(even){
  background:var(--alt-b);
  padding-left:3.25rem;
  padding-right:3.25rem;
}

/* Keep refund policy padding but allow alternating bg to apply */
/* #refund-policy{padding:1.5rem 0} */
.site-footer{border-top:1px solid #eef2f6;padding:1rem 0;color:var(--muted);background:var(--bg-footer)}

/* Responsive tweaks */
@media (min-width:900px){
  .hero-inner h1{font-size:2.6rem}
  .hero{padding:4.5rem 0}
}