:root{
  --rose-quartz-1:#BAA7B0;
  --rose-quartz-2:#B2ABBF;
  --french-gray:#B1B5C8;
  --columbia-blue:#BFD5E2;
  --light-cyan:#C7EBF0;
  --ink:#1f2937; /* dark gray for text */
  --ink-2:#374151;
  --white:#ffffff;
  --accent:#2b6cb0; /* accessible link color */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--columbia-blue)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}

.site-header{
  background: linear-gradient(90deg,var(--rose-quartz-1), var(--rose-quartz-2), var(--french-gray));
  color:var(--ink);
  border-bottom:4px solid rgba(0,0,0,.05);
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand .logo{
  width:40px;height:40px;border-radius:10px;
  background: radial-gradient(circle at 30% 30%, var(--light-cyan), var(--columbia-blue));
  border:2px solid rgba(0,0,0,.08);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.brand .title{font-weight:800;letter-spacing:.2px}
.brand .subtitle{font-size:.9rem;color:var(--ink-2)}

.navbar{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.navbar a{padding:.5rem .75rem;border-radius:.6rem;background:rgba(255,255,255,.55)}
.navbar a[aria-current="page"]{background:var(--light-cyan);font-weight:700}
.navbar a:hover{background:rgba(255,255,255,.85)}

.hero{
  background: linear-gradient(180deg, var(--light-cyan), var(--columbia-blue));
  padding:3rem 0;border-bottom:1px solid rgba(0,0,0,.06);
}
.hero h1{font-size:2.2rem;margin:.25rem 0}
.hero p{font-size:1.15rem;max-width:60ch}
.cta-group{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{
  display:inline-block;padding:.75rem 1rem;border-radius:.75rem;
  background:var(--rose-quartz-2);color:#111;font-weight:700;border:2px solid rgba(0,0,0,.06)
}
.btn.secondary{background:var(--white)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
@media (max-width:860px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--white);border-radius:1rem;padding:1.25rem;
  box-shadow:0 6px 20px rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.06)
}
.card h3{margin-top:0}

.section{padding:2rem 0}

.quote{
  background:var(--rose-quartz-1);
  color:#111;border-radius:1rem;padding:1rem 1.25rem;margin:1rem 0
}

.footer{
  background: linear-gradient(90deg,var(--french-gray), var(--columbia-blue), var(--light-cyan));
  padding:1.5rem 0;margin-top:2rem;border-top:4px solid rgba(0,0,0,.05)
}
.footer small{color:var(--ink-2)}