:root{
  --bg:#f6f8f7;
  --paper:#ffffff;
  --ink:#0f1720;
  --muted:#5b6b75;
  --accent:#2a9ca5;
  --accent-2:#cfe9ec;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,32,0.06);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system, Segoe UI, Roboto, Arial; color:var(--ink); background:var(--bg);}
.container{width:min(100% - 2.5rem, var(--max)); margin-inline:auto;}
.section{padding:5rem 0}
.section.alt{background:linear-gradient(180deg,#f7fbfb,#ffffff 40%)}
.grid{display:grid; gap:2rem}
.grid.two{grid-template-columns:1.5fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}
h1,h2,h3{line-height:1.2; margin:0 0 .75rem}
h1{font-size:clamp(2rem,3.5vw + 1rem,3rem)}
h2{font-size:clamp(1.6rem,2.5vw + 1rem,2.2rem)}
.lead{font-size:1.125rem; color:var(--muted)}
.micro{font-size:.9rem; color:var(--muted)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.btn{display:inline-block; border:1px solid var(--accent); padding:.75rem 1rem; border-radius:999px; font-weight:600; transition:transform .06s ease, background .2s ease}
.btn:hover{transform:translateY(-1px); text-decoration:none}
.btn.primary{background:var(--accent); color:white; border-color:var(--accent)}
.btn.block{display:block; text-align:center}
.card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem}
.card.soft{background:linear-gradient(180deg,#ffffff,#f2f9f9)}

.site-header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid #e8eff0}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; color:var(--ink)}
.brand-mark{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2)); color:#fff; font-weight:800}
.site-nav ul{display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0}
.site-nav a{padding:.4rem .6rem; border-radius:.5rem}
.site-nav a:hover{background:#eef6f6; text-decoration:none}
.nav-toggle{color:var(--accent); font-size:1.6rem; background:none; border:none}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; align-items:flex-start}
}

.hero{
  position:relative; padding:6.5rem 0 4.5rem; overflow:clip;
  background: url('assets/waves-top.svg') top center / cover no-repeat,
              linear-gradient(180deg, #ffffff, #eaf7f7 60%);
}
.hero-inner{text-align:center}
.hero .lead{margin:.75rem auto 1.25rem; max-width:42rem}
.hero .cta{display:inline-flex; gap:.75rem; flex-wrap:wrap; justify-content:center}
.hero .micro{margin-top:.6rem}

.section.sea{
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(42,156,165,.06), transparent 60%),
    radial-gradient(40% 40% at 100% 30%, rgba(121,196,203,.08), transparent 60%);
}

.site-footer{padding:2.5rem 0; text-align:center; color:var(--muted); background:url('assets/waves-bottom.svg') bottom center / cover no-repeat, #f6f8f7}

/* Form controls */
input, textarea{width:100%; padding:.7rem .8rem; border:1px solid #cfe0e2; border-radius:.6rem; background:#fff; font:inherit}
input:focus, textarea:focus{outline:2px solid var(--accent-2); border-color:var(--accent)}
label{font-weight:600; color:#2f4448}
button.btn{cursor:pointer}

.nav-toggle:hover, .nav-toggle:focus{color:var(--accent)}


/* Mobile nav toggle styles */
@media (max-width: 768px){
  #site-nav{
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 60px;
    right: 0;
    padding: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  #site-nav.open{
    display: flex;
  }
  .nav-toggle{
    color: var(--accent);
    font-size: 1.6rem;
    background: none;
    border: none;
    cursor: pointer;
  }
}

/* Always-collapsed navigation */
.nav-toggle{color:var(--accent); font-size:1.6rem; background:none; border:none}
.site-nav{ display:none; position:absolute; right:1.25rem; top:58px; background:#fff; padding:.75rem; border-radius:.75rem; box-shadow:var(--shadow); z-index:20; }
.site-nav.open{ display:block; }
.site-nav ul{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; list-style:none; margin:0; padding:0; }
.site-header{ position: sticky; top: 0; z-index: 30; }