:root{
  --ink:#1e3a53;        /* deep coastal blue */
  --foam:#e9f0f4;       /* pale blue-gray */
  --sand:#f5efe3;       /* beach sand background */
  --accent:#f2c77a;     /* sun / highlight */
  --text:#263645;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--sand);color:var(--text);line-height:1.6}
a{color:var(--ink);text-decoration-thickness:2px}
img{max-width:100%;height:auto}

.wrapper{max-width:1000px;margin-inline:auto;padding:2rem 1.25rem}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 1.25rem;background:#fff;border-bottom:1px solid #dcdcdc;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--ink);text-decoration:none;font-weight:700}
.brand small{font-weight:500;color:#4b637a}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{padding:.5rem .75rem;border-radius:.75rem}
.site-nav .cta{background:var(--ink);color:#fff}
.hamburger{display:none;font-size:1.5rem;cursor:pointer}

#nav-toggle{display:none}
@media (max-width:780px){
  .site-nav{display:none;position:absolute;right:1rem;top:60px;background:#fff;padding:1rem;border:1px solid #dcdcdc;border-radius:1rem;flex-direction:column}
  #nav-toggle:checked~.site-nav{display:flex}
  .hamburger{display:block}
}

.hero{background:
  radial-gradient(60% 100% at 70% 100%, #d8e4ec 0%, rgba(216,228,236,0) 60%),
  linear-gradient(180deg,#fff, #f7f5ee 50%, #e9f0f4 100%);
  padding:5rem 1.25rem;text-align:center;border-bottom:1px solid #dcdcdc}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 .5rem;color:var(--ink)}
.hero p{margin:0 auto 1rem;max-width:50ch}
.actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:.75rem 1.1rem;border:1px solid var(--ink);border-radius:999px;font-weight:600}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.small{padding:.5rem .9rem}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:2rem 1.25rem;max-width:1100px;margin:auto}
.features article{background:#fff;border:1px solid #e0e0e0;border-radius:1rem;padding:1rem;}

.pricing{padding:2rem 1.25rem;max-width:1100px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.card{background:#fff;border:1px solid #e0e0e0;border-radius:1rem;padding:1rem}
.card.featured{border:2px solid var(--ink);box-shadow:0 10px 30px rgba(30,58,83,.08)}
.price{font-size:1.8rem;margin:.25rem 0}
.price span{font-size:.9rem;color:#667}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.cols{columns:2;gap:2rem}
@media (max-width:700px){.cols{columns:1}}

.form{display:grid;gap:1rem}
.form input,.form textarea,.form select{width:100%;padding:.7rem;border:1px solid #cdd7de;border-radius:.6rem;background:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:800px){.grid2,.grid3{grid-template-columns:1fr}}

.fineprint{color:#6b7b89;font-size:.9rem}

.testimonials{padding:2rem 1.25rem;text-align:center;background:#fff;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc}
blockquote{font-size:1.1rem;margin:0 auto;max-width:60ch}

.site-footer{padding:2rem 1.25rem;background:#fff;border-top:1px solid #dcdcdc}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.copyright{text-align:center;color:#6b7b89}