/* ---------- Root & reset ---------- */
:root{
  --clr-accent:#0866ff;
  --clr-dark:#0a0a0a;
  --clr-light:#ffffff;
  --radius:0.5rem;
  --ff-base:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font:16px/1.6 var(--ff-base);
  color:var(--clr-dark);
  background:var(--clr-light);
}

/* ---------- Typography ---------- */
h1,h2,h3{font-weight:700;line-height:1.2}
h1{font-size:clamp(2rem,5vw,3.5rem)}
p{margin-block:1rem}

/* ---------- Reusable ---------- */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.button,.cta{
  display:inline-block;
  background:var(--clr-accent);
  color:#fff;
  padding:0.75rem 1.5rem;
  border-radius:var(--radius);
  transition:opacity .2s;
}
.button:hover,.cta:hover{opacity:.85}

/* ---------- Layout ---------- */
header{
  background:var(--clr-light);
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
nav{
  max-width:1200px;
  margin-inline:auto;
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  gap:1rem;
}
nav .cta{margin-left:auto}
#nav-toggle{display:none;font-size:1.5rem;background:0;border:0}

/* ---------- Hero ---------- */
.hero{
  text-align:center;
  padding:12vh 2rem;
  background:url('/img/hero.jpg') center/cover no-repeat;
  color:#fff;
}
.hero p{max-width:42ch;margin-inline:auto}

/* ---------- Utility ---------- */
.container{max-width:800px;margin-inline:auto;padding:2rem}
.hidden{display:none}

/* ---------- Desktop tweaks ---------- */
@media (min-width:768px){
  #nav-toggle{display:none}
}