:root{
  --slate:#6B7280; /* headers, panels */
  --charcoal:#333333; /* body text */
  --sand:#C8AD7F; /* accents */
  --mist:#FAFAFA; /* background */
  --white:#FFFFFF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--mist);color:var(--charcoal);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,'Helvetica Neue',sans-serif;line-height:1.6}
a{color:var(--slate);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}
h1,h2,h3{letter-spacing:.2px;margin:0 0 16px}
h1{font-size:40px;color:var(--charcoal)}
h2{font-size:28px;color:var(--slate)}
h3{font-size:20px}
.muted{color:#555}

/* Nav */
.navbar{background:var(--white);border-bottom:1px solid #ececec;position:sticky;top:0;z-index:10}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-weight:800;color:var(--charcoal)}
.nav a{margin-left:14px;font-weight:600}

/* Hero */
.hero{position:relative;color:var(--white);background:var(--slate);}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)), url('assets/hero-1920x600.png') center/cover no-repeat;
  z-index:0;
}
.hero .container{position:relative;z-index:1}
.hero-inner{padding:96px 0}
.badge{display:inline-block;background:var(--sand);color:#2a2a2a;padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.4px}
.kicker{margin-top:12px;font-size:16px;color:#f2f2f2}
.cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700}
.btn-primary{background:var(--sand);color:#2a2a2a}
.btn-secondary{border:1px solid #ffffffaa;color:#fff;background:transparent}

/* Cards / grid */
.grid{display:grid;gap:18px}
@media(min-width:760px){.grid.cols-3{grid-template-columns:1fr 1fr 1fr}}
@media(min-width:760px){.grid.cols-2{grid-template-columns:1fr 1fr}}
.card{background:var(--white);border:1px solid #e9e9e9;border-radius:16px;padding:20px}

/* Pricing */
.pricing{border:1px solid var(--sand);background:#fffdf8;border-radius:16px;padding:20px}
.pricing .row{display:grid;gap:12px}
.pricing .price{font-weight:800;color:#4b4b4b}
@media(min-width:760px){.pricing .row{grid-template-columns:1fr 1fr 1fr}}

/* Footer */
footer{background:var(--slate);color:#f3f3f3;margin-top:40px}
footer a{color:#f3f3f3;text-decoration:underline}
footer .section{padding:40px 0}
.small{font-size:12px;color:#777}