/* ========= styles.css ========= */
* { box-sizing: border-box; }
:root{
  --text:#1f2937; /* slate-800 */
  --muted:#f3f4f6; /* gray-100 */
  --dark:#0b0f19; /* near-black */
  --accent:#d4a017; /* warm gold */
}
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

/* Layout helpers */
.container{ width:min(1100px, 90%); margin:0 auto; }
.section{ padding:4rem 0; }
.section.light{ background:var(--muted); }

/* Hero */
.hero{
  min-height:90vh;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url('st-catherine.jpg');
  background-size:cover;
  background-position:center;
}
.hero h1{ font-size:clamp(2rem, 6vw, 4rem); margin:0 0 .5rem; }
.hero .tagline{ font-size:clamp(1rem, 2.4vw, 1.25rem); max-width:70ch; margin:0 auto 1.5rem; }

/* Buttons */
.btn{
  display:inline-block;
  padding:.9rem 1.25rem;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.btn:active{ transform:translateY(0); }

/* How it works */
.section h2{ text-align:center; font-size:clamp(1.5rem, 3.2vw, 2.25rem); margin:0 0 1rem; }
.lead{ text-align:center; margin:0 auto 2rem; max-width:60ch; color:#4b5563; }
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.25rem;
}
.card{
  background:#fff;
  border-radius:1rem;
  padding:1.25rem 1.25rem 1.5rem;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.card h3{ margin:.25rem 0 .5rem; color:var(--accent); font-size:1.15rem; }
.card p{ margin:0; color:#4b5563; }

/* Footer */
footer{ background:var(--dark); color:#fff; text-align:center; padding:1rem; font-size:.9rem; }

/* Responsive */
@media (max-width: 900px){
  .grid{ grid-template-columns:1fr; }
  .hero{ min-height:80vh; }
}